mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-19 01:35:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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 <div
class="splitter left " class="splitter left "
style="width: calc(NaN% - 5px);" style="width: calc(100% - 5px);"
> >
left left
</div> </div>
@ -237,7 +237,7 @@ exports[`Splitter resize can change size with touch 2`] = `
</div> </div>
<div <div
class="splitter right " class="splitter right "
style="width: calc(100% - NaN%);" style="width: calc(100% - 100%);"
> >
right right
</div> </div>
@ -252,7 +252,7 @@ exports[`Splitter resize can change size with touch 3`] = `
> >
<div <div
class="splitter left " class="splitter left "
style="width: calc(NaN% - 5px);" style="width: calc(0% - 5px);"
> >
left left
</div> </div>
@ -266,7 +266,7 @@ exports[`Splitter resize can change size with touch 3`] = `
</div> </div>
<div <div
class="splitter right " class="splitter right "
style="width: calc(100% - NaN%);" style="width: calc(100% - 0%);"
> >
right right
</div> </div>
@ -281,7 +281,7 @@ exports[`Splitter resize can change size with touch 4`] = `
> >
<div <div
class="splitter left " class="splitter left "
style="width: calc(NaN% - 5px);" style="width: calc(0% - 5px);"
> >
left left
</div> </div>
@ -295,7 +295,7 @@ exports[`Splitter resize can change size with touch 4`] = `
</div> </div>
<div <div
class="splitter right " class="splitter right "
style="width: calc(100% - NaN%);" style="width: calc(100% - 0%);"
> >
right right
</div> </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 { fireEvent, render, screen } from '@testing-library/react'
import { Splitter } from './splitter' import { Splitter } from './splitter'
import { Mock } from 'ts-mockery'
describe('Splitter', () => { describe('Splitter', () => {
it('can render only the left pane', () => { it('can render only the left pane', () => {
@ -35,16 +36,16 @@ describe('Splitter', () => {
const divider = await screen.findByTestId('splitter-divider') const divider = await screen.findByTestId('splitter-divider')
fireEvent.mouseDown(divider, {}) fireEvent.mouseDown(divider, {})
fireEvent.mouseMove(window, { buttons: 1, clientX: 1920 }) fireEvent.mouseMove(window, Mock.of<MouseEvent>({ buttons: 1, clientX: 1920 }))
fireEvent.mouseUp(window) fireEvent.mouseUp(window)
expect(view.container).toMatchSnapshot() expect(view.container).toMatchSnapshot()
fireEvent.mouseDown(divider, {}) fireEvent.mouseDown(divider, {})
fireEvent.mouseMove(window, { buttons: 1, clientX: 0 }) fireEvent.mouseMove(window, Mock.of<MouseEvent>({ buttons: 1, clientX: 0 }))
fireEvent.mouseUp(window) fireEvent.mouseUp(window)
expect(view.container).toMatchSnapshot() 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() expect(view.container).toMatchSnapshot()
}) })
@ -54,16 +55,16 @@ describe('Splitter', () => {
const divider = await screen.findByTestId('splitter-divider') const divider = await screen.findByTestId('splitter-divider')
fireEvent.touchStart(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) fireEvent.touchEnd(window)
expect(view.container).toMatchSnapshot() expect(view.container).toMatchSnapshot()
fireEvent.touchStart(divider, {}) fireEvent.touchStart(divider, {})
fireEvent.touchMove(window, { buttons: 1, clientX: 0 }) fireEvent.touchMove(window, Mock.of<TouchEvent>({ touches: [{ clientX: 0 }, { clientX: 100 }] }))
fireEvent.touchCancel(window) fireEvent.touchCancel(window)
expect(view.container).toMatchSnapshot() 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() 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 * SPDX-License-Identifier: AGPL-3.0-only
*/ */
@ -39,7 +39,7 @@ const isLeftMouseButtonClicked = (mouseEvent: MouseEvent): boolean => {
* *
* @param moveEvent * @param moveEvent
*/ */
const extractHorizontalPosition = (moveEvent: MouseEvent | TouchEvent): number => { const extractHorizontalPosition = (moveEvent: MouseEvent | TouchEvent): number | undefined => {
if (isMouseEvent(moveEvent)) { if (isMouseEvent(moveEvent)) {
return moveEvent.clientX return moveEvent.clientX
} else { } else {
@ -101,6 +101,9 @@ export const Splitter: React.FC<SplitterProps> = ({
} }
const horizontalPosition = extractHorizontalPosition(moveEvent) const horizontalPosition = extractHorizontalPosition(moveEvent)
if (horizontalPosition === undefined) {
return
}
const horizontalPositionInSplitContainer = horizontalPosition - splitContainer.current.offsetLeft const horizontalPositionInSplitContainer = horizontalPosition - splitContainer.current.offsetLeft
const newRelativeSize = horizontalPositionInSplitContainer / splitContainer.current.clientWidth const newRelativeSize = horizontalPositionInSplitContainer / splitContainer.current.clientWidth
setRelativeSplitValue(newRelativeSize * 100) setRelativeSplitValue(newRelativeSize * 100)