From d23ba21ab5c908640141ddba8d87af2b9ff286f6 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Thu, 7 Jul 2022 16:29:28 +0200
Subject: [PATCH] Fix splitter tests

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../splitter/__snapshots__/splitter.test.tsx.snap   | 12 ++++++------
 .../editor-page/splitter/splitter.test.tsx          | 13 +++++++------
 src/components/editor-page/splitter/splitter.tsx    |  7 +++++--
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap b/src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap
index 49b6e8b1d..3d1dbdcfb 100644
--- a/src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap
+++ b/src/components/editor-page/splitter/__snapshots__/splitter.test.tsx.snap
@@ -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>
diff --git a/src/components/editor-page/splitter/splitter.test.tsx b/src/components/editor-page/splitter/splitter.test.tsx
index 6e0981217..9518e1a3e 100644
--- a/src/components/editor-page/splitter/splitter.test.tsx
+++ b/src/components/editor-page/splitter/splitter.test.tsx
@@ -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()
     })
   })
diff --git a/src/components/editor-page/splitter/splitter.tsx b/src/components/editor-page/splitter/splitter.tsx
index 4ff8af7b6..67c3a44a4 100644
--- a/src/components/editor-page/splitter/splitter.tsx
+++ b/src/components/editor-page/splitter/splitter.tsx
@@ -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)