github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #10028 from overleaf/ab-fix-flaky-fe-tests

Browse source 
[web] Fix flaky project list frontend tests

GitOrigin-RevId: 2b2a90e6a294ec7dd5e7203dadd708f7986a56fc
This commit is contained in:
Alexandre Bourdin 2022-10-20 11:32:04 +02:00 committed by Copybot
parent 22336942a8
commit 0c170bd4c0
2 changed files with 85 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
services/web/frontend/js/features/project-list/components/table/project-tools/menu-items/copy-project-menu-item.tsx
View file

@ -28,7 +28,8 @@ function CopyProjectMenuItem() {
} }
}, [isMounted]) }, [isMounted])
const handleAfterCloned = (clonedProject: Project) => { const handleAfterCloned = useCallback(
(clonedProject: Project) => {
const project = selectedProjects[0] const project = selectedProjects[0]
eventTracking.send( eventTracking.send(
'project-list-page-interaction', 'project-list-page-interaction',
@ -37,8 +38,18 @@ function CopyProjectMenuItem() {
) )
addClonedProjectToViewData(clonedProject) addClonedProjectToViewData(clonedProject)
updateProjectViewData({ ...project, selected: false }) updateProjectViewData({ ...project, selected: false })
if (isMounted.current) {
setShowModal(false) setShowModal(false)
} }
},
[
isMounted,
selectedProjects,
addClonedProjectToViewData,
updateProjectViewData,
]
)
if (selectedProjects.length !== 1) return null if (selectedProjects.length !== 1) return null

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

@ -82,9 +82,7 @@ describe('<ProjectListRoot />', function () {
projects: fullList, projects: fullList,
}) })
await fetchMock.flush(true) await fetchMock.flush(true)
await waitFor(() => { await screen.findByRole('table')
screen.findByRole('table')
})
}) })
describe('checkboxes', function () { describe('checkboxes', function () {
@ -125,15 +123,8 @@ describe('<ProjectListRoot />', function () {
}) })
it('opens archive modal for all selected projects and archives all', async function () { it('opens archive modal for all selected projects and archives all', async function () {
fetchMock.post( const archiveProjectMock = fetchMock.post(
`express:/project/${project1Id}/archive`, `express:/project/:projectId/archive`,
{
status: 200,
},
{ delay: 0 }
)
fetchMock.post(
`express:/project/${project2Id}/archive`,
{ {
status: 200, status: 200,
}, },
@ -149,26 +140,21 @@ describe('<ProjectListRoot />', function () {
await waitFor( await waitFor(
() => () =>
expect(fetchMock.called(`/project/${project1Id}/archive`)).to.be expect(
.true archiveProjectMock.called(`/project/${project1Id}/archive`)
).to.be.true
) )
await waitFor( await waitFor(
() => () =>
expect(fetchMock.called(`/project/${project2Id}/archive`)).to.be expect(
.true archiveProjectMock.called(`/project/${project2Id}/archive`)
).to.be.true
) )
}) })
it('opens trash modal for all selected projects and trashes all', async function () { it('opens trash modal for all selected projects and trashes all', async function () {
fetchMock.post( const trashProjectMock = fetchMock.post(
`express:/project/${project1Id}/trash`, `express:/project/:projectId/trash`,
{
status: 200,
},
{ delay: 0 }
)
fetchMock.post(
`express:/project/${project2Id}/trash`,
{ {
status: 200, status: 200,
}, },
@ -184,13 +170,13 @@ describe('<ProjectListRoot />', function () {
await waitFor( await waitFor(
() => () =>
expect(fetchMock.called(`/project/${project1Id}/trash`)).to.be expect(trashProjectMock.called(`/project/${project1Id}/trash`)).to
.true .be.true
) )
await waitFor( await waitFor(
() => () =>
expect(fetchMock.called(`/project/${project2Id}/trash`)).to.be expect(trashProjectMock.called(`/project/${project2Id}/trash`)).to
.true .be.true
) )
}) })
@ -407,13 +393,9 @@ describe('<ProjectListRoot />', function () {
}) })
fireEvent.click(createButton) fireEvent.click(createButton)
await waitFor( await fetchMock.flush(true)
() =>
expect(fetchMock.called('/tag', { name: this.newTagName })).to.be expect(fetchMock.called('/tag', { name: this.newTagName })).to.be.true
.true
)
await waitFor(
() =>
expect( expect(
fetchMock.called(`/tag/${this.newTagId}/projects`, { fetchMock.called(`/tag/${this.newTagId}/projects`, {
body: { body: {
@ -421,7 +403,6 @@ describe('<ProjectListRoot />', function () {
}, },
}) })
).to.be.true ).to.be.true
)
screen.getByRole('button', { name: `${this.newTagName} (2)` }) screen.getByRole('button', { name: `${this.newTagName} (2)` })
}) })
@ -433,32 +414,26 @@ describe('<ProjectListRoot />', function () {
status: 204, status: 204,
} }
) )
screen.getByRole('button', { name: `${this.tagName} (2)` }) screen.getByRole('button', { name: `${this.tagName} (2)` })
const tagsDropdown = within(actionsToolbar).getByLabelText('Tags') const tagsDropdown = within(actionsToolbar).getByLabelText('Tags')
fireEvent.click(tagsDropdown) fireEvent.click(tagsDropdown)
screen.getByText('Add to folder') within(actionsToolbar).getByText('Add to folder')
const tagButton = screen.getByLabelText( const tagButton = within(actionsToolbar).getByLabelText(
`Add or remove project from tag ${this.tagName}` `Add or remove project from tag ${this.tagName}`
) )
fireEvent.click(tagButton) fireEvent.click(tagButton)
await waitFor( await fetchMock.flush(true)
() =>
expect( expect(
deleteProjectsFromTagMock.called( deleteProjectsFromTagMock.called(`/tag/${this.tagId}/projects`, {
`/tag/${this.tagId}/projects`,
{
body: { body: {
projectIds: [projectsData[0].id, projectsData[1].id], projectIds: [projectsData[0].id, projectsData[1].id],
}, },
} })
)
).to.be.true ).to.be.true
)
screen.getByRole('button', { name: `${this.tagName} (0)` }) screen.getByRole('button', { name: `${this.tagName} (0)` })
}) })
@ -476,15 +451,15 @@ describe('<ProjectListRoot />', function () {
const tagsDropdown = within(actionsToolbar).getByLabelText('Tags') const tagsDropdown = within(actionsToolbar).getByLabelText('Tags')
fireEvent.click(tagsDropdown) fireEvent.click(tagsDropdown)
screen.getByText('Add to folder') within(actionsToolbar).getByText('Add to folder')
const tagButton = screen.getByLabelText( const tagButton = within(actionsToolbar).getByLabelText(
`Add or remove project from tag ${this.tagName}` `Add or remove project from tag ${this.tagName}`
) )
fireEvent.click(tagButton) fireEvent.click(tagButton)
await waitFor( await fetchMock.flush(true)
() =>
expect( expect(
addProjectsToTagMock.called(`/tag/${this.tagId}/projects`, { addProjectsToTagMock.called(`/tag/${this.tagId}/projects`, {
body: { body: {
@ -492,8 +467,6 @@ describe('<ProjectListRoot />', function () {
}, },
}) })
).to.be.true ).to.be.true
)
screen.getByRole('button', { name: `${this.tagName} (3)` }) screen.getByRole('button', { name: `${this.tagName} (3)` })
}) })
}) })
@ -561,7 +534,7 @@ describe('<ProjectListRoot />', function () {
fireEvent.click(moreDropdown) fireEvent.click(moreDropdown)
const renameButton = const renameButton =
screen.getAllByText<HTMLInputElement>('Rename')[1] // first one is for the tag in the sidebar within(actionsToolbar).getByText<HTMLInputElement>('Rename') // first one is for the tag in the sidebar
fireEvent.click(renameButton) fireEvent.click(renameButton)
const modals = await screen.findAllByRole('dialog') const modals = await screen.findAllByRole('dialog')
@ -569,7 +542,7 @@ describe('<ProjectListRoot />', function () {
// a valid name // a valid name
const newProjectName = 'A new project name' const newProjectName = 'A new project name'
const input = (await screen.findByLabelText( const input = (await within(modal).findByLabelText(
'New Name' 'New Name'
)) as HTMLButtonElement )) as HTMLButtonElement
const oldName = input.value const oldName = input.value
@ -582,14 +555,11 @@ describe('<ProjectListRoot />', function () {
expect(confirmButton.disabled).to.be.false expect(confirmButton.disabled).to.be.false
fireEvent.click(confirmButton) fireEvent.click(confirmButton)
await waitFor( await fetchMock.flush(true)
() =>
expect( expect(
renameProjectMock.called( renameProjectMock.called(`/project/${projectsData[1].id}/rename`)
`/project/${projectsData[1].id}/rename`
)
).to.be.true ).to.be.true
)
const table = await screen.findByRole('table') const table = await screen.findByRole('table')
within(table).getByText(newProjectName) within(table).getByText(newProjectName)
@ -644,12 +614,11 @@ describe('<ProjectListRoot />', function () {
) as HTMLElement ) as HTMLElement
fireEvent.click(copyConfirmButton) fireEvent.click(copyConfirmButton)
await waitFor( await fetchMock.flush(true)
() =>
expect( expect(
cloneProjectMock.called(`/project/${projectsData[1].id}/clone`) cloneProjectMock.called(`/project/${projectsData[1].id}/clone`)
).to.be.true ).to.be.true
)
expect(sendSpy).to.be.calledOnce expect(sendSpy).to.be.calledOnce
expect(sendSpy).calledWith('project-list-page-interaction') expect(sendSpy).calledWith('project-list-page-interaction')
@ -716,9 +685,13 @@ describe('<ProjectListRoot />', function () {
it('shows correct list after closing modal, changing selecting, and reopening modal', async function () { it('shows correct list after closing modal, changing selecting, and reopening modal', async function () {
selectedMatchesDisplayed(2) selectedMatchesDisplayed(2)
const cancelButton = screen.getByRole('button', { name: 'Cancel' }) const modal = screen.getAllByRole('dialog', { hidden: false })[0]
const cancelButton = within(modal).getByRole('button', {
name: 'Cancel',
})
fireEvent.click(cancelButton) fireEvent.click(cancelButton)
expect(screen.queryByRole('dialog', { hidden: false })).to.be.null expect(screen.queryByRole('dialog', { hidden: false })).to.be.null
await screen.findAllByRole('checkbox') await screen.findAllByRole('checkbox')
fireEvent.click(allCheckboxes[3]) fireEvent.click(allCheckboxes[3])
selectedMatchesDisplayed(3) selectedMatchesDisplayed(3)
@ -733,7 +706,7 @@ describe('<ProjectListRoot />', function () {
fetchMock.post('express:/project/:id/archive', { fetchMock.post('express:/project/:id/archive', {
status: 200, status: 200,
}) })
fetchMock.post(`express:/${project2Id}/:id/archive`, { fetchMock.post(`/project/${project2Id}/archive`, {
status: 500, status: 500,
}) })