github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-04-11 12:33:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix splitter tests

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-07-07 16:29:28 +02:00
parent 07848950d7
commit d23ba21ab5
3 changed files with 18 additions and 14 deletions
src/components/editor-page/splitter
__snapshots__
splitter.test.tsx.snap
splitter.test.tsxsplitter.tsx

12
src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap
View file

@ -223,7 +223,7 @@ exports[`Splitter resize can change size with touch 2`] = `
>
<div
class="splitter left "
style="width: calc(NaN% - 5px);"
style="width: calc(100% - 5px);"
>
left
</div>
@ -237,7 +237,7 @@ exports[`Splitter resize can change size with touch 2`] = `
</div>
<div
class="splitter right "
style="width: calc(100% - NaN%);"
style="width: calc(100% - 100%);"
>
right
</div>
@ -252,7 +252,7 @@ exports[`Splitter resize can change size with touch 3`] = `
>
<div
class="splitter left "
style="width: calc(NaN% - 5px);"
style="width: calc(0% - 5px);"
>
left
</div>
@ -266,7 +266,7 @@ exports[`Splitter resize can change size with touch 3`] = `
</div>
<div
class="splitter right "
style="width: calc(100% - NaN%);"
style="width: calc(100% - 0%);"
>
right
</div>
@ -281,7 +281,7 @@ exports[`Splitter resize can change size with touch 4`] = `
>
<div
class="splitter left "
style="width: calc(NaN% - 5px);"
style="width: calc(0% - 5px);"
>
left
</div>
@ -295,7 +295,7 @@ exports[`Splitter resize can change size with touch 4`] = `
</div>
<div
class="splitter right "
style="width: calc(100% - NaN%);"
style="width: calc(100% - 0%);"
>
right
</div>

13
src/components/editor-page/splitter/splitter.test.tsx
View file

@ -6,6 +6,7 @@
import { fireEvent, render, screen } from '@testing-library/react'
import { Splitter } from './splitter'
import { Mock } from 'ts-mockery'
describe('Splitter', () => {
it('can render only the left pane', () => {
@ -35,16 +36,16 @@ describe('Splitter', () => {
const divider = await screen.findByTestId('splitter-divider')
fireEvent.mouseDown(divider, {})
fireEvent.mouseMove(window, { buttons: 1, clientX: 1920 })
fireEvent.mouseMove(window, Mock.of<MouseEvent>({ buttons: 1, clientX: 1920 }))
fireEvent.mouseUp(window)
expect(view.container).toMatchSnapshot()
fireEvent.mouseDown(divider, {})
fireEvent.mouseMove(window, { buttons: 1, clientX: 0 })
fireEvent.mouseMove(window, Mock.of<MouseEvent>({ buttons: 1, clientX: 0 }))
fireEvent.mouseUp(window)
expect(view.container).toMatchSnapshot()
fireEvent.mouseMove(window, { buttons: 1, clientX: 1920 })
fireEvent.mouseMove(window, Mock.of<MouseEvent>({ buttons: 1, clientX: 1920 }))
expect(view.container).toMatchSnapshot()
})
@ -54,16 +55,16 @@ describe('Splitter', () => {
const divider = await screen.findByTestId('splitter-divider')
fireEvent.touchStart(divider, {})
fireEvent.touchMove(window, { buttons: 1, clientX: 1920 })
fireEvent.touchMove(window, Mock.of<TouchEvent>({ touches: [{ clientX: 1920 }, { clientX: 200 }] }))
fireEvent.touchEnd(window)
expect(view.container).toMatchSnapshot()
fireEvent.touchStart(divider, {})
fireEvent.touchMove(window, { buttons: 1, clientX: 0 })
fireEvent.touchMove(window, Mock.of<TouchEvent>({ touches: [{ clientX: 0 }, { clientX: 100 }] }))
fireEvent.touchCancel(window)
expect(view.container).toMatchSnapshot()
fireEvent.touchMove(window, { buttons: 1, clientX: 1920 })
fireEvent.touchMove(window, Mock.of<TouchEvent>({ touches: [{ clientX: 500 }, { clientX: 900 }] }))
expect(view.container).toMatchSnapshot()
})
})

7
src/components/editor-page/splitter/splitter.tsx
View file

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -39,7 +39,7 @@ const isLeftMouseButtonClicked = (mouseEvent: MouseEvent): boolean => {
*
* @param moveEvent
*/
const extractHorizontalPosition = (moveEvent: MouseEvent | TouchEvent): number => {
const extractHorizontalPosition = (moveEvent: MouseEvent | TouchEvent): number | undefined => {
if (isMouseEvent(moveEvent)) {
return moveEvent.clientX
} else {
@ -101,6 +101,9 @@ export const Splitter: React.FC<SplitterProps> = ({
}
const horizontalPosition = extractHorizontalPosition(moveEvent)
if (horizontalPosition === undefined) {
return
}
const horizontalPositionInSplitContainer = horizontalPosition - splitContainer.current.offsetLeft
const newRelativeSize = horizontalPositionInSplitContainer / splitContainer.current.clientWidth
setRelativeSplitValue(newRelativeSize * 100)