Cypress - verify alphabetical sorting of list (column)

Question

I've got a table with columns like this (simplified):

| ... | ... | Venter på søker | ... |
| ... | ... | Ikke påbegynt   | ... |

The table has 21 rows.

The column in question can besorted alphabetically, descending or ascending.

What I'm trying to do is get Cypress to verify the sorting, ascending and descending.

What I've got so far:

cy.get([data-e2e-selector=tabell]).get('[data-e2e-selector=kolonne]')
  .then(items => {
    const unsortedItems = items.map((index, html) => Cypress.$(html).text()).get();
    const sortedItems = unsortedItems.slice().sort()
    expect(unsortedItems, 'Items are sorted').to.deep.equal(sortedItems);
  });

What I'm trying to do is get all the items from the column and store them in a list. Then create a list with the same items, but sorted. Then compare the two. I've done similar with datestamps (numbers) with success, but alphabetically sorting seems to elude me.

The above code results in this error (same for ascending or descending):

assert expected Items are sorted: to deeply equal [ Array(21) ]

To verify that I've actually got the elements into the list(s) - if I compare the first or last items of the unsortedItems[] and sortedItems[] listes, they are identical:

expect(unsortedItems, 'Items are sorted (' + unsortedItems[20] + ' - ' + sortedItems[20] + ')').to.deep.equal(sortedItems);

...

assert expected Items are sorted ( Ikke påbegynt - Ikke påbegynt ): to deeply equal [ Array(21) ]

assertexpected Items are sorted ( Venter på søker - Venter på søker ): to deeply equal [ Array(21) ]

Also, checking the length of the lists gives the correct size, 21.

So, it seems that I've actually got the right contents (slice().sort() works as expected), but I'm not doing it right when I try to deep.equal.

Any ideas?

Answer 1

Technically that should work, provided the 2nd .get() in the query is changed to .find().

cy.get([data-e2e-selector=tabell])       // pick table
  .find('[data-e2e-selector=kolonne]')   // pick column
  .then(items => {
    const unsortedItems = items.map((index, html) => Cypress.$(html).text()).get();
    const sortedItems = unsortedItems.slice().sort()
    unsortedItems.forEach((uns,i) => {
      expect(uns).to.eq(sorted[i])
    })
  })

Runnable:

const items1 = $('table').find('td:nth-child(1)')
const unsorted1 = items1.map((index, html) => $(html).text()).get()
const sorted1 = unsorted1.slice().sort()

const firstColIsSorted = unsorted1.every((us, i) => us === sorted1[i])
console.log('firstColIsSorted', firstColIsSorted)

const items2 = $('table').find('td:nth-child(2)')
const unsorted2 = items2.map((index, html) => $(html).text()).get()
const sorted2 = unsorted1.slice().sort()

const secondColIsSorted = unsorted2.every((us, i) => us === sorted2[i])
console.log('secondColIsSorted', secondColIsSorted)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <table>
    <tbody>
        <tr>
          <td>a</td>
          <td>2</td>
         </tr>
        <tr>
          <td>b</td>
          <td>3</td>
         </tr>
        <tr>
          <td>c</td>
          <td>1</td>
        </tr>
    </tbody>
    </table>