mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-23 17:19:37 +02:00
b4bfff1b67
* Replace placeholders with labels * Add 'Close dialog' label to modal close button to distinguish from footer Close button * Add and translate heading on the not found page * Update textarea to have id matching label's for attribute Simplify test for template description textarea * Label PDF zoom level dropdown button * Improve test selectors to use semantic roles and accessible names GitOrigin-RevId: d215ddca30ddf844cfffbcf0e528a601b134d772
110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
OLModal,
|
|
OLModalHeader,
|
|
OLModalBody,
|
|
OLModalFooter,
|
|
OLModalTitle,
|
|
} from '@/shared/components/ol/ol-modal'
|
|
|
|
function Modal({ backdrop }: { backdrop?: boolean | 'static' } = {}) {
|
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={() => setIsModalOpen(true)}>Open modal</button>
|
|
|
|
<OLModal
|
|
show={isModalOpen}
|
|
onHide={() => setIsModalOpen(false)}
|
|
backdrop={backdrop}
|
|
>
|
|
<OLModalHeader>
|
|
<OLModalTitle>This is a focus trap modal</OLModalTitle>
|
|
</OLModalHeader>
|
|
<OLModalBody>
|
|
<p>This is for testing the modal behaviour</p>
|
|
<label htmlFor="modal-input">Enter text: </label>
|
|
<input id="modal-input" />
|
|
</OLModalBody>
|
|
<OLModalFooter>
|
|
<button onClick={() => setIsModalOpen(false)}>Close the modal</button>
|
|
</OLModalFooter>
|
|
</OLModal>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
describe('<OLModal />', function () {
|
|
it('dismisses on single Escape key press', function () {
|
|
cy.mount(<Modal />)
|
|
cy.findByRole('button', { name: 'Open modal' }).should('be.visible')
|
|
cy.findByRole('dialog').should('not.exist')
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.findByLabelText(/enter text/i).should('be.visible')
|
|
cy.findByRole('button', { name: 'Close dialog' }).click()
|
|
// Modal should hide with single escape (escapeDeactivates: false means FocusTrap doesn't handle it)
|
|
cy.findByRole('dialog').should('not.exist')
|
|
cy.findByRole('button', { name: 'Open modal' }).should('be.visible')
|
|
})
|
|
|
|
it('dismisses when clicking outside of the modal (backdrop: true)', function () {
|
|
cy.mount(<Modal />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.get('body').click(0, 0)
|
|
cy.findByRole('dialog').should('not.exist')
|
|
})
|
|
|
|
it('does not dismiss when clicking outside of the modal (backdrop: "static")', function () {
|
|
cy.mount(<Modal backdrop="static" />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.get('body').click(0, 0)
|
|
cy.findByRole('dialog').should('be.visible')
|
|
})
|
|
|
|
it('traps focus within modal', function () {
|
|
cy.mount(<Modal />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
|
|
cy.findByRole('button', { name: 'Close dialog' }).should('be.focused')
|
|
cy.focused().tab()
|
|
cy.findByLabelText(/enter text/i).should('be.focused')
|
|
cy.focused().tab()
|
|
cy.findByRole('button', { name: 'Close the modal' }).should('be.focused')
|
|
cy.focused().tab()
|
|
cy.findByRole('button', { name: 'Close dialog' }).should('be.focused')
|
|
cy.focused().tab({ shift: true })
|
|
cy.findByRole('button', { name: 'Close the modal' }).should('be.focused')
|
|
})
|
|
|
|
it('restores focus to trigger button after modal closes', function () {
|
|
cy.mount(<Modal />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.findByRole('button', { name: 'Close the modal' }).click()
|
|
cy.findByRole('dialog').should('not.exist')
|
|
cy.findByRole('button', { name: 'Open modal' }).should('be.focused')
|
|
cy.focused().should('not.match', 'body')
|
|
})
|
|
|
|
it('closes modal when clicking close button (X)', function () {
|
|
cy.mount(<Modal />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.findByRole('button', { name: 'Close dialog' }).click()
|
|
cy.findByRole('dialog').should('not.exist')
|
|
})
|
|
|
|
it('dismisses on Escape key with backdrop="static"', function () {
|
|
cy.mount(<Modal backdrop="static" />)
|
|
cy.findByRole('button', { name: 'Open modal' }).click()
|
|
cy.findByRole('dialog').should('be.visible')
|
|
cy.findByRole('button', { name: 'Close dialog' }).click()
|
|
cy.findByRole('dialog').should('not.exist')
|
|
})
|
|
})
|