mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:26:02 -05:00
118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
|
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 })
|
||
|
.trigger('mousemove', { clientX: xPos })
|
||
|
.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 })
|
||
|
.trigger('mousemove', { clientX: xPos })
|
||
|
.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`)
|
||
|
})
|
||
|
})
|