Merge pull request #9993 from overleaf/jel-fix-flaky-test

[web] Fix flaky frontend test

GitOrigin-RevId: 580678473f09cb21ac2ca20cf9d16ecc05cd4236

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

@@ -517,25 +517,18 @@ describe('<ProjectListRoot />', function () {
             .null
         })
 
-        it('opens the rename modal, and can rename the project, and view updated', async function () {
+        it('validates the project name', async function () {
-          const renameProjectMock = fetchMock.post(
+          const moreDropdown = await within(
-            `express:/project/:id/rename`,
+            actionsToolbar
-            {
+          ).findByText<HTMLElement>('More')
-              status: 200,
-            }
-          )
-
-          await waitFor(() => {
-            const moreDropdown =
-              within(actionsToolbar).getByText<HTMLElement>('More')
           fireEvent.click(moreDropdown)
-          })
 
           const renameButton =
             screen.getAllByText<HTMLInputElement>('Rename')[1] // first one is for the tag in the sidebar
           fireEvent.click(renameButton)
 
-          const modal = screen.getAllByRole('dialog')[0]
+          const modals = await screen.findAllByRole('dialog')
+          const modal = modals[0]
 
           expect(sendSpy).to.be.calledOnce
           expect(sendSpy).calledWith('project-list-page-interaction')
@@ -545,25 +538,47 @@ describe('<ProjectListRoot />', function () {
             within(modal).getByText<HTMLInputElement>('Rename')
           expect(confirmButton.disabled).to.be.true
           let input = screen.getByLabelText('New Name') as HTMLButtonElement
-          const oldName = input.value
 
           // no name
-          let newProjectName = ''
           input = screen.getByLabelText('New Name') as HTMLButtonElement
           fireEvent.change(input, {
-            target: { value: newProjectName },
+            target: { value: '' },
           })
           confirmButton = within(modal).getByText<HTMLInputElement>('Rename')
           expect(confirmButton.disabled).to.be.true
+        })
+
+        it('opens the rename modal, and can rename the project, and view updated', async function () {
+          const renameProjectMock = fetchMock.post(
+            `express:/project/:id/rename`,
+            {
+              status: 200,
+            }
+          )
+          const moreDropdown = await within(
+            actionsToolbar
+          ).findByText<HTMLElement>('More')
+          fireEvent.click(moreDropdown)
+
+          const renameButton =
+            screen.getAllByText<HTMLInputElement>('Rename')[1] // first one is for the tag in the sidebar
+          fireEvent.click(renameButton)
+
+          const modals = await screen.findAllByRole('dialog')
+          const modal = modals[0]
 
           // a valid name
-          newProjectName = 'A new project name'
+          const newProjectName = 'A new project name'
-          input = screen.getByLabelText('New Name') as HTMLButtonElement
+          const input = (await screen.findByLabelText(
+            'New Name'
+          )) as HTMLButtonElement
+          const oldName = input.value
           fireEvent.change(input, {
             target: { value: newProjectName },
           })
 
-          confirmButton = within(modal).getByText<HTMLInputElement>('Rename')
+          const confirmButton =
+            within(modal).getByText<HTMLInputElement>('Rename')
           expect(confirmButton.disabled).to.be.false
           fireEvent.click(confirmButton)
 
@@ -576,11 +591,13 @@ describe('<ProjectListRoot />', function () {
               ).to.be.true
           )
 
-          screen.findByText(newProjectName)
+          const table = await screen.findByRole('table')
-          expect(screen.queryByText(oldName)).to.be.null
+          within(table).getByText(newProjectName)
+          expect(within(table).queryByText(oldName)).to.be.null
 
-          const allCheckboxes =
+          const allCheckboxes = await within(
-            screen.getAllByRole<HTMLInputElement>('checkbox')
+            table
+          ).findAllByRole<HTMLInputElement>('checkbox')
           const allCheckboxesChecked = allCheckboxes.filter(c => c.checked)
           expect(allCheckboxesChecked.length).to.equal(0)
         })

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

@@ -109,7 +109,6 @@ describe('<ProjectListTable />', function () {
     // Action Column
     // temporary count tests until we add filtering for archived/trashed
     const copyButtons = screen.getAllByLabelText('Copy')
-    screen.debug()
     expect(copyButtons.length).to.equal(currentProjects.length)
     const downloadButtons = screen.getAllByLabelText('Download')
     expect(downloadButtons.length).to.equal(currentProjects.length)