Merge pull request #27798 from overleaf/td-project-list-frontend-tests-fix

Fix and reinstate project list front-end tests

GitOrigin-RevId: 5f9343a56a5cf6e4da04c161b9f17b9282fdccbb

services/web/test/frontend/features/project-list/components/table/project-list-table.test.tsx

@@ -9,7 +9,7 @@ const userId = '624333f147cfd8002622a1d3'
 
 // TODO(25331): re-enable
 // eslint-disable-next-line mocha/no-skipped-tests
-describe.skip('<ProjectListTable />', function () {
+describe('<ProjectListTable />', function () {
   beforeEach(function () {
     window.metaAttributesCache.set('ol-tags', [])
     window.metaAttributesCache.set('ol-user_id', userId)
@@ -30,7 +30,7 @@ describe.skip('<ProjectListTable />', function () {
     let foundSortedColumn = false
     const columns = screen.getAllByRole('columnheader')
     columns.forEach(col => {
-      if (col.getAttribute('aria-label') === 'Last Modified') {
+      if (col.getAttribute('aria-label') === 'Last modified') {
         expect(col.getAttribute('aria-sort')).to.equal('descending')
         foundSortedColumn = true
       } else {
@@ -60,7 +60,7 @@ describe.skip('<ProjectListTable />', function () {
     renderWithProjectListContext(<ProjectListTable />)
     screen.getByRole('button', { name: 'Sort by Title' })
     screen.getByRole('button', { name: 'Sort by Owner' })
-    screen.getByRole('button', { name: 'Reverse Last Modified sort order' }) // currently sorted
+    screen.getByRole('button', { name: 'Reverse Last modified sort order' }) // currently sorted
   })
 
   it('renders project title, owner, last modified, and action buttons', async function () {
@@ -146,6 +146,14 @@ describe.skip('<ProjectListTable />', function () {
     renderWithProjectListContext(<ProjectListTable />)
     await fetchMock.callHistory.flush(true)
     const checkbox = await screen.findByLabelText('Select all projects')
+
+    // Wait for project checkboxes to be visible before clicking the select-all
+    // checkbox
+    await waitFor(() => {
+      const allCheckboxes = screen.queryAllByRole<HTMLInputElement>('checkbox')
+      expect(allCheckboxes.length).to.equal(currentProjects.length + 1)
+    })
+
     fireEvent.click(checkbox)
 
     await waitFor(() => {
@@ -161,6 +169,13 @@ describe.skip('<ProjectListTable />', function () {
     await fetchMock.callHistory.flush(true)
     const checkbox = await screen.findByLabelText('Select all projects')
 
+    // Wait for project checkboxes to be visible before clicking the select-all
+    // checkbox
+    await waitFor(() => {
+      const allCheckboxes = screen.queryAllByRole<HTMLInputElement>('checkbox')
+      expect(allCheckboxes.length).to.equal(currentProjects.length + 1)
+    })
+
     fireEvent.click(checkbox)
 
     await waitFor(() => {
@@ -181,6 +196,14 @@ describe.skip('<ProjectListTable />', function () {
     renderWithProjectListContext(<ProjectListTable />)
     await fetchMock.callHistory.flush(true)
     const checkbox = await screen.findByLabelText('Select all projects')
+
+    // Wait for project checkboxes to be visible before clicking the select-all
+    // checkbox
+    await waitFor(() => {
+      const allCheckboxes = screen.queryAllByRole<HTMLInputElement>('checkbox')
+      expect(allCheckboxes.length).to.equal(currentProjects.length + 1)
+    })
+
     fireEvent.click(checkbox)
 
     // make sure we are unchecking a project checkbox and that it is already
@@ -188,15 +211,16 @@ describe.skip('<ProjectListTable />', function () {
     await waitFor(() => {
       expect(
         screen
-          .getAllByRole<HTMLInputElement>('checkbox', { checked: true })[1]
-          .getAttribute('data-project-id')
+          .queryAllByRole<HTMLInputElement>('checkbox', { checked: true })?.[1]
+          ?.getAttribute('data-project-id')
       ).to.exist
     })
 
     fireEvent.click(screen.getAllByRole<HTMLInputElement>('checkbox')[1])
 
     await waitFor(() => {
-      const allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
+      const allCheckboxes = screen.queryAllByRole<HTMLInputElement>('checkbox')
+      expect(allCheckboxes.length).to.equal(currentProjects.length + 1)
       const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
       expect(allCheckboxesChecked.length).to.equal(currentProjects.length - 1)
     })
@@ -210,6 +234,7 @@ describe.skip('<ProjectListTable />', function () {
     )
     fireEvent.click(checkbox)
     const allCheckboxes = screen.getAllByRole<HTMLInputElement>('checkbox')
+    expect(allCheckboxes.length).to.equal(currentProjects.length + 1)
     const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
     expect(allCheckboxesChecked.length).to.equal(1)
   })