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')
})
})
})