overleaf/services/web/test/frontend/components/shared/tooltip.spec.tsx
Tim Down e60885aa88 Merge pull request #19347 from overleaf/td-bs5-cypress-css
Move CSS loading in Cypress to individual test spec files

GitOrigin-RevId: 92bb5167cfa81b0bd54acc724efb23b397421ccb
2024-07-25 08:05:16 +00:00

36 lines
1.1 KiB
TypeScript

import '../../helpers/bootstrap-3'
import Tooltip from '../../../../frontend/js/shared/components/tooltip'
describe('<Tooltip />', function () {
it('calls the bound handler and blur then hides text on click', function () {
const clickHandler = cy.stub().as('clickHandler')
const blurHandler = cy.stub().as('blurHandler')
const description = 'foo'
const btnText = 'Click me!'
cy.mount(
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
}}
>
<Tooltip id="abc" description={description}>
<button onClick={clickHandler} onBlur={blurHandler}>
{btnText}
</button>
</Tooltip>
</div>
)
cy.findByRole('button', { name: btnText }).as('button')
cy.get('@button').trigger('mouseover')
cy.findByText(description)
cy.get('@button').click()
cy.get('@clickHandler').should('have.been.calledOnce')
cy.get('@blurHandler').should('have.been.calledOnce')
cy.findByText(description).should('not.exist')
})
})