agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 14:13:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24965 from overleaf/td-downshift-9-upgrade

Browse Source 
Upgrade Downshift to version 9

GitOrigin-RevId: b36904ab0c82c09a633a25cd6fed651d7c8b19f7
This commit is contained in:
Tim Down
2025-04-24 08:06:24 +00:00
committed by Copybot
parent 8ec9cd21b4
commit fb50d429b4
11 changed files with 127 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/test/frontend/components/shared/select.spec.tsx
+27 -28
View File
@@ -64,17 +64,17 @@ describe('<Select />', function () {
it('renders default text', function () {
render({ defaultText: 'Choose an item' })
cy.findByTestId('spinner').should('not.exist')
cy.findByRole('textbox', { name: 'Choose an item' })
cy.findByRole('combobox').should('have.value', 'Choose an item')
})
it('renders default item', function () {
render({ defaultItem: testData[2] })
cy.findByRole('textbox', { name: 'Demo item 3' })
cy.findByRole('combobox').should('have.value', 'Demo item 3')
})
it('default item takes precedence over default text', function () {
render({ defaultText: 'Choose an item', defaultItem: testData[2] })
cy.findByRole('textbox', { name: 'Demo item 3' })
cy.findByRole('combobox').should('have.value', 'Demo item 3')
})
it('renders label', function () {
@@ -83,8 +83,8 @@ describe('<Select />', function () {
label: 'test label',
optionalLabel: false,
})
cy.findByRole('textbox', { name: 'test label' })
cy.findByRole('textbox', { name: '(Optional)' }).should('not.exist')
cy.findByRole('combobox', { name: 'test label' })
cy.findByRole('combobox', { name: '(Optional)' }).should('not.exist')
})
it('renders optional label', function () {
@@ -93,7 +93,7 @@ describe('<Select />', function () {
label: 'test label',
optionalLabel: true,
})
cy.findByRole('textbox', { name: 'test label (Optional)' })
cy.findByRole('combobox', { name: 'test label (Optional)' })
})
it('renders a spinner while loading when there is a label', function () {
@@ -117,7 +117,7 @@ describe('<Select />', function () {
describe('items rendering', function () {
it('renders all items', function () {
render({ defaultText: 'Choose an item' })
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 1' })
cy.findByRole('option', { name: 'Demo item 2' })
@@ -129,7 +129,7 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
itemToSubtitle: x => String(x?.sub),
})
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 1 Subtitle 1' })
cy.findByRole('option', { name: 'Demo item 2 Subtitle 2' })
@@ -140,27 +140,27 @@ describe('<Select />', function () {
describe('item selection', function () {
it('cannot select an item when disabled', function () {
render({ defaultText: 'Choose an item', disabled: true })
cy.findByRole('textbox', { name: 'Choose an item' }).click({
cy.findByRole('combobox').click({
force: true,
})
cy.findByRole('option', { name: 'Demo item 1' }).should('not.exist')
cy.findByRole('option', { name: 'Demo item 2' }).should('not.exist')
cy.findByRole('option', { name: 'Demo item 3' }).should('not.exist')
cy.findByRole('textbox', { name: 'Choose an item' })
cy.findByRole('combobox').should('have.value', 'Choose an item')
})
it('renders only the selected item after selection', function () {
render({ defaultText: 'Choose an item' })
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 1' })
cy.findByRole('option', { name: 'Demo item 2' })
cy.findByRole('option', { name: 'Demo item 3' }).click()
cy.findByRole('textbox', { name: 'Choose an item' }).should('not.exist')
cy.findByRole('combobox').should('not.have.value', 'Choose an item')
cy.findByRole('option', { name: 'Demo item 1' }).should('not.exist')
cy.findByRole('option', { name: 'Demo item 2' }).should('not.exist')
cy.findByRole('textbox', { name: 'Demo item 3' })
cy.findByRole('combobox').should('have.value', 'Demo item 3')
})
it('invokes callback after selection', function () {
@@ -170,7 +170,7 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
onSelectedItemChanged: selectionHandler,
})
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 2' }).click()
cy.get('@selectionHandler').should(
@@ -195,7 +195,7 @@ describe('<Select />', function () {
const submitHandler = cy.stub().as('submitHandler')
render({ defaultItem: testData[1], onSubmit: submitHandler })
cy.findByRole('textbox', { name: 'Demo item 2' }).click() // open dropdown
cy.findByRole('combobox').click() // open dropdown
cy.findByText('Demo item 3').click() // choose a different item
cy.findByText('submit').click()
@@ -262,7 +262,7 @@ describe('<Select />', function () {
</div>
)
cy.findByRole('textbox', { name: 'Demo item 1' }).click() // open dropdown
cy.findByRole('combobox').click() // open dropdown
cy.findByRole('option', { name: 'Demo item 3' }).click() // choose a different item
cy.findByText('submit').click()
@@ -275,11 +275,10 @@ describe('<Select />', function () {
describe('keyboard navigation', function () {
it('can select an item using the keyboard', function () {
render({ defaultText: 'Choose an item' })
cy.findByRole('textbox', { name: 'Choose an item' }).type(
'{Enter}{downArrow}{Enter}',
{ force: true }
)
cy.findByRole('textbox', { name: 'Demo item 1' }).should('exist')
cy.findByRole('combobox').type('{Enter}{downArrow}{Enter}', {
force: true,
})
cy.findByRole('combobox').should('exist')
cy.findByRole('option', { name: 'Demo item 2' }).should('not.exist')
})
})
@@ -290,9 +289,9 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
selectedIcon: true,
})
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 1' }).click()
cy.findByRole('textbox', { name: 'Demo item 1' }).click()
cy.findByRole('combobox').click()
cy.findByText('check').should('exist')
})
@@ -301,9 +300,9 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
selectedIcon: false,
})
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 1' }).click()
cy.findByRole('textbox', { name: 'Demo item 1' }).click()
cy.findByRole('combobox').click()
cy.findByText('check').should('not.exist')
})
@@ -315,7 +314,7 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
itemToDisabled: x => x?.key === 2,
})
cy.findByRole('textbox', { name: 'Choose an item' }).click()
cy.findByRole('combobox').click()
cy.findByRole('option', { name: 'Demo item 2' }).click({ force: true })
// still showing other list items
cy.findByRole('option', { name: 'Demo item 3' }).should('exist')
@@ -331,7 +330,7 @@ describe('<Select />', function () {
defaultText: 'Choose an item',
selected: testData[1],
})
cy.findByRole('textbox', { name: 'Demo item 2' }).should('exist')
cy.findByRole('combobox').should('have.value', 'Demo item 2')
})
it('should show default text when selected is null', function () {
@@ -339,7 +338,7 @@ describe('<Select />', function () {
selected: null,
defaultText: 'Choose an item',
})
cy.findByRole('textbox', { name: 'Choose an item' }).should('exist')
cy.findByRole('combobox').should('have.value', 'Choose an item')
})
})
})
services/web/test/frontend/features/settings/components/emails/emails-section-add-new-email.test.tsx
+24 -20
View File
@@ -304,7 +304,7 @@ describe('<EmailsSection />', function () {
await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
const universityInput = screen.getByRole<HTMLInputElement>('combobox', {
name: /university/i,
})
@@ -321,7 +321,7 @@ describe('<EmailsSection />', function () {
// Select the country from dropdown
await userEvent.type(
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /country/i,
}),
country
@@ -339,9 +339,11 @@ describe('<EmailsSection />', function () {
await screen.findByText(userEmailData.affiliation.institution.name)
)
const roleInput = screen.getByRole('textbox', { name: /role/i })
const roleInput = screen.getByRole('combobox', { name: /role/i })
await userEvent.type(roleInput, userEmailData.affiliation.role!)
const departmentInput = screen.getByRole('textbox', { name: /department/i })
const departmentInput = screen.getByRole('combobox', {
name: /department/i,
})
await userEvent.click(departmentInput)
await userEvent.click(screen.getByText(customDepartment))
@@ -415,7 +417,7 @@ describe('<EmailsSection />', function () {
await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
// select a country
const countryInput = screen.getByRole<HTMLInputElement>('textbox', {
const countryInput = screen.getByRole<HTMLInputElement>('combobox', {
name: /country/i,
})
await userEvent.click(countryInput)
@@ -423,7 +425,7 @@ describe('<EmailsSection />', function () {
await userEvent.click(await screen.findByText('Germany'))
// match several universities on initial typing
const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
const universityInput = screen.getByRole<HTMLInputElement>('combobox', {
name: /university/i,
})
await userEvent.click(universityInput)
@@ -457,7 +459,7 @@ describe('<EmailsSection />', function () {
await userEvent.click(screen.getByRole('button', { name: /let us know/i }))
const universityInput = screen.getByRole<HTMLInputElement>('textbox', {
const universityInput = screen.getByRole<HTMLInputElement>('combobox', {
name: /university/i,
})
@@ -474,7 +476,7 @@ describe('<EmailsSection />', function () {
// Select the country from dropdown
await userEvent.type(
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /country/i,
}),
country
@@ -489,9 +491,11 @@ describe('<EmailsSection />', function () {
// Enter the university manually
await userEvent.type(universityInput, newUniversity)
const roleInput = screen.getByRole('textbox', { name: /role/i })
const roleInput = screen.getByRole('combobox', { name: /role/i })
await userEvent.type(roleInput, userEmailData.affiliation.role!)
const departmentInput = screen.getByRole('textbox', { name: /department/i })
const departmentInput = screen.getByRole('combobox', {
name: /department/i,
})
await userEvent.type(departmentInput, userEmailData.affiliation.department!)
const userEmailDataCopy = {
@@ -577,37 +581,37 @@ describe('<EmailsSection />', function () {
fetchMock.removeRoutes().clearHistory()
expect(
screen.queryByRole('textbox', {
screen.queryByRole('combobox', {
name: /country/i,
})
).to.be.null
expect(
screen.queryByRole('textbox', {
screen.queryByRole('combobox', {
name: /university/i,
})
).to.be.null
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /role/i,
})
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /department/i,
})
await userEvent.click(screen.getByRole('button', { name: /change/i }))
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /country/i,
})
screen.getByRole('textbox', {
screen.getByRole('combobox', {
name: /university/i,
})
expect(
screen.queryByRole('textbox', {
screen.queryByRole('combobox', {
name: /role/i,
})
).to.be.null
expect(
screen.queryByRole('textbox', {
screen.queryByRole('combobox', {
name: /department/i,
})
).to.be.null
@@ -668,11 +672,11 @@ describe('<EmailsSection />', function () {
.post('/user/emails/confirm-secondary', 200)
await userEvent.type(
screen.getByRole('textbox', { name: /role/i }),
screen.getByRole('combobox', { name: /role/i }),
userEmailData.affiliation.role!
)
await userEvent.type(
screen.getByRole('textbox', { name: /department/i }),
screen.getByRole('combobox', { name: /department/i }),
userEmailData.affiliation.department!
)
await userEvent.click(
services/web/test/frontend/features/settings/components/emails/emails-section-institution-and-role.test.tsx
+1 -1
View File
@@ -146,7 +146,7 @@ describe('user role and institution', function () {
await fetchMock.callHistory.flush(true)
fetchMock.removeRoutes().clearHistory()
fireEvent.click(screen.getByRole('textbox', { name: /department/i }))
fireEvent.click(screen.getByRole('combobox', { name: /department/i }))
screen.getByText(fakeDepartment)
})
services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx
+22 -9
View File
@@ -126,7 +126,7 @@ describe('<FigureModal />', function () {
})
it('Lists files from project', function () {
cy.findByRole('textbox', { name: 'Image file' }).click()
cy.findByRole('combobox', { name: 'Image file' }).click()
cy.findByRole('listbox')
.children()
.should('have.length', 2)
@@ -137,7 +137,7 @@ describe('<FigureModal />', function () {
it('Enables insert button when choosing file', function () {
cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
cy.findByRole('textbox', { name: 'Image file' }).click()
cy.findByRole('combobox', { name: 'Image file' }).click()
cy.findByRole('listbox').within(() => {
cy.findByText('frog.jpg').click()
})
@@ -145,7 +145,7 @@ describe('<FigureModal />', function () {
})
it('Inserts file when pressing insert button', function () {
cy.findByRole('textbox', { name: 'Image file' }).click()
cy.findByRole('combobox', { name: 'Image file' }).click()
cy.findByRole('listbox').within(() => {
cy.findByText('frog.jpg').click()
})
@@ -166,8 +166,8 @@ describe('<FigureModal />', function () {
cy.findByRole('menu').within(() => {
cy.findByRole('button', { name: 'From another project' }).click()
})
cy.findByRole('textbox', { name: 'Project' }).as('project-dropdown')
cy.findByRole('textbox', { name: 'Image file' }).as('file-dropdown')
cy.findByRole('combobox', { name: 'Project' }).as('project-dropdown')
cy.findByRole('combobox', { name: 'Image file' }).as('file-dropdown')
})
it('List projects and files in projects', function () {
@@ -203,6 +203,19 @@ describe('<FigureModal />', function () {
cy.findByRole('button', { name: 'Insert figure' }).should('be.enabled')
})
it('Closes project dropdown on pressing Esc key but leaves modal open', function () {
cy.findByRole('button', { name: 'Insert figure' }).should('be.disabled')
cy.get('@project-dropdown').click()
cy.findByRole('listbox').should('exist')
cy.get('@project-dropdown').type('{esc}', { force: true })
cy.findByRole('listbox').should('not.exist')
cy.findByRole('dialog').should('exist')
// Check that a subsequent press of the Esc key closes the modal
cy.get('@project-dropdown').type('{esc}', { force: true })
cy.findByRole('dialog').should('not.exist')
})
it('Creates linked file when pressing insert', function () {
cy.get('@project-dropdown').click()
cy.findByRole('listbox').within(() => {
@@ -235,7 +248,7 @@ describe('<FigureModal />', function () {
cy.findByRole('option', { name: 'My first project' }).click()
})
cy.findByRole('button', { name: 'select from output files' }).click()
cy.findByRole('textbox', { name: 'Output file' }).click()
cy.findByRole('combobox', { name: 'Output file' }).click()
cy.findByRole('listbox').within(() => {
cy.findByRole('option', { name: 'output.pdf' }).click()
})
@@ -298,7 +311,7 @@ describe('<FigureModal />', function () {
cy.findByRole('menu').within(() => {
cy.findByText('From another project').click()
})
cy.findByRole('textbox', { name: 'Project' }).click()
cy.findByRole('combobox', { name: 'Project' }).click()
cy.findByRole('listbox').within(() => {
cy.findByRole('option', { name: 'My first project' }).click()
})
@@ -322,7 +335,7 @@ describe('<FigureModal />', function () {
})
expectNoOutputSwitch()
it('should show output file selector', function () {
cy.findByRole('textbox', { name: 'Output file' }).click()
cy.findByRole('combobox', { name: 'Output file' }).click()
cy.findByRole('listbox').within(() => {
cy.findByRole('option', { name: 'output.pdf' }).click()
})
@@ -341,7 +354,7 @@ describe('<FigureModal />', function () {
expectNoOutputSwitch()
it('should show source file selector', function () {
cy.findByRole('textbox', { name: 'Image file' }).click()
cy.findByRole('combobox', { name: 'Image file' }).click()
cy.findByRole('listbox').within(() => {
cy.findByRole('option', { name: 'frog.jpg' }).click()
})