overleaf/services/web/test/frontend/shared/hooks/use-resize.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

116 lines
2.8 KiB
TypeScript

import '../../helpers/bootstrap-3'
import {
usePersistedResize,
useResize,
} from '../../../../frontend/js/shared/hooks/use-resize'
function Template({
mousePos,
getTargetProps,
getHandleProps,
}: ReturnType<typeof useResize>) {
return (
<div
style={{
height: '100vh',
display: 'flex',
alignItems: 'center',
}}
>
<div style={{ position: 'relative' }}>
<div
id="target"
{...getTargetProps({
style: {
width: '200px',
height: '200px',
border: '2px solid black',
...(mousePos?.x && { width: `${mousePos.x}px` }),
},
})}
>
Demo content demo content demo content demo content demo content demo
content
</div>
<div
id="handle"
{...getHandleProps({
style: {
position: 'absolute',
top: 0,
right: 0,
height: '100%',
width: '4px',
backgroundColor: 'red',
},
})}
/>
</div>
</div>
)
}
function PersistedResizeTest() {
const props = usePersistedResize({ name: 'test' })
return <Template {...props} />
}
function ResizeTest() {
const props = useResize()
return <Template {...props} />
}
describe('useResize', function () {
it('should apply provided styles to the target', function () {
cy.mount(<ResizeTest />)
// test a css prop being applied
cy.get('#target').should('have.css', 'width', '200px')
})
it('should apply provided styles to the handle', function () {
cy.mount(<ResizeTest />)
// test a css prop being applied
cy.get('#handle').should('have.css', 'width', '4px')
})
it('should apply default styles to the handle', function () {
cy.mount(<ResizeTest />)
cy.get('#handle')
.should('have.css', 'cursor', 'col-resize')
.and('have.css', 'user-select', 'none')
})
it('should resize the target horizontally on mousedown and mousemove', function () {
const xPos = 400
cy.mount(<ResizeTest />)
cy.get('#handle').trigger('mousedown', { button: 0 })
cy.get('#handle').trigger('mousemove', { clientX: xPos })
cy.get('#handle').trigger('mouseup')
cy.get('#target').should('have.css', 'width', `${xPos}px`)
})
it('should persist the resize data', function () {
const xPos = 400
cy.mount(<PersistedResizeTest />)
cy.get('#handle').trigger('mousedown', { button: 0 })
cy.get('#handle').trigger('mousemove', { clientX: xPos })
cy.get('#handle').trigger('mouseup')
cy.window()
.its('localStorage.resizeable-test')
.should('eq', `{"x":${xPos}}`)
// render the component again
cy.mount(<PersistedResizeTest />)
cy.get('#target').should('have.css', 'width', `${xPos}px`)
})
})