From c71da4a075b0101077ba88e78cd20cce3a55f5c2 Mon Sep 17 00:00:00 2001
From: dhellgartner <116464099+dhellgartner@users.noreply.github.com>
Date: Thu, 25 May 2023 18:25:48 +0200
Subject: [PATCH] Split panel tests (#1343)

* Added tests for sl-split-panel

test for horizontal arrangement

* Added tests for sl-split-panel

tests for vertical arrangement

---------

Co-authored-by: stefanie.hellgartner <stefanie.hellgartner@in-tech.com>
---
 .../split-panel/split-panel.test.ts           | 244 +++++++++++++++++-
 src/internal/test.ts                          |  16 ++
 2 files changed, 259 insertions(+), 1 deletion(-)

diff --git a/src/components/split-panel/split-panel.test.ts b/src/components/split-panel/split-panel.test.ts
index e6150886..d3c919cf 100644
--- a/src/components/split-panel/split-panel.test.ts
+++ b/src/components/split-panel/split-panel.test.ts
@@ -1,6 +1,40 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { dragElement } from '../../internal/test';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { queryByTestId } from '../../internal/test/data-testid-helpers';
+import { resetMouse } from '@web/test-runner-commands';
+import type SlSplitPanel from './split-panel';
+
+const DIVIDER_WIDTH_IN_PX = 4;
+
+const getPanel = (splitPanel: SlSplitPanel, testid: string): HTMLElement => {
+  const startPanel = queryByTestId<HTMLElement>(splitPanel, testid);
+  expect(startPanel).not.to.be.null;
+  return startPanel!;
+};
+
+const getPanelWidth = (splitPanel: SlSplitPanel, testid: string) => {
+  const panel = getPanel(splitPanel, testid);
+  const { width } = panel.getBoundingClientRect();
+  return width;
+};
+
+const getPanelHeight = (splitPanel: SlSplitPanel, testid: string) => {
+  const panel = getPanel(splitPanel, testid);
+  const { height } = panel.getBoundingClientRect();
+  return height;
+};
+
+const getDivider = (splitPanel: SlSplitPanel): Element => {
+  const divider = splitPanel.shadowRoot?.querySelector('[part="divider"]');
+  expect(divider).not.to.be.null;
+  return divider!;
+};
 
 describe('<sl-split-panel>', () => {
+  afterEach(async () => {
+    await resetMouse();
+  });
+
   it('should render a component', async () => {
     const splitPanel = await fixture(html` <sl-split-panel></sl-split-panel> `);
 
@@ -15,4 +49,212 @@ describe('<sl-split-panel>', () => {
 
     await expect(splitPanel).to.be.accessible();
   });
+
+  it('should show both panels', async () => {
+    const splitPanel = await fixture(html`<sl-split-panel>
+      <div slot="start">Start</div>
+      <div slot="end">End</div>
+    </sl-split-panel>`);
+
+    expect(splitPanel).to.contain.text('Start');
+    expect(splitPanel).to.contain.text('End');
+  });
+
+  describe('panel sizing horizontal', () => {
+    it('has two evenly sized panels by default', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
+      const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');
+
+      expect(startPanelWidth).to.be.equal(endPanelWidth);
+    });
+
+    it('changes the sizing of the panels based on the position attribute', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25">
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
+      const endPanelWidth = getPanelWidth(splitPanel, 'end-panel');
+
+      expect(startPanelWidth * 3).to.be.equal(endPanelWidth - DIVIDER_WIDTH_IN_PX);
+    });
+
+    it('updates the position in pixels to the correct result', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25">
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      splitPanel.position = 10;
+
+      const startPanelWidth = getPanelWidth(splitPanel, 'start-panel');
+
+      expect(startPanelWidth).to.be.equal(splitPanel.positionInPixels - DIVIDER_WIDTH_IN_PX / 2);
+    });
+
+    it('emits the sl-reposition	event on position change', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const repositionPromise = oneEvent(splitPanel, 'sl-reposition');
+      splitPanel.position = 10;
+      return repositionPromise;
+    });
+
+    it('can be resized using the mouse', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 30);
+    });
+
+    it('cannot be resized if disabled', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel disabled>
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels);
+    });
+
+    it('snaps to predefined positions', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel>
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+      splitPanel.snap = `${positionInPixels - 40}px`;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 40);
+    });
+  });
+
+  describe('panel sizing vertical', () => {
+    it('has two evenly sized panels by default', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
+      const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');
+
+      expect(startPanelHeight).to.be.equal(endPanelHeight);
+    });
+
+    it('changes the sizing of the panels based on the position attribute', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25" vertical style="height: 400px;">
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
+      const endPanelHeight = getPanelHeight(splitPanel, 'end-panel');
+
+      expect(startPanelHeight * 3).to.be.equal(endPanelHeight - DIVIDER_WIDTH_IN_PX);
+    });
+
+    it('updates the position in pixels to the correct result', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel position="25" vertical style="height: 400px;">
+        <div slot="start" data-testid="start-panel">Start</div>
+        <div slot="end" data-testid="end-panel">End</div>
+      </sl-split-panel>`);
+
+      splitPanel.position = 10;
+
+      const startPanelHeight = getPanelHeight(splitPanel, 'start-panel');
+
+      expect(startPanelHeight).to.be.equal(splitPanel.positionInPixels - DIVIDER_WIDTH_IN_PX / 2);
+    });
+
+    it('emits the sl-reposition	event on position change ', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const repositionPromise = oneEvent(splitPanel, 'sl-reposition');
+      splitPanel.position = 10;
+      return repositionPromise;
+    });
+
+    it('can be resized using the mouse ', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, 0, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 30);
+    });
+
+    it('cannot be resized if disabled', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel disabled vertical style="height: 400px;">
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, 0, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels);
+    });
+
+    it('snaps to predefined positions', async () => {
+      const splitPanel = await fixture<SlSplitPanel>(html`<sl-split-panel vertical style="height: 400px;">
+        <div slot="start">Start</div>
+        <div slot="end">End</div>
+      </sl-split-panel>`);
+
+      const positionInPixels = splitPanel.positionInPixels;
+      splitPanel.snap = `${positionInPixels - 40}px`;
+
+      const divider = getDivider(splitPanel);
+
+      await dragElement(divider, 0, -30);
+
+      const positionInPixelsAfterDrag = splitPanel.positionInPixels;
+      expect(positionInPixelsAfterDrag).to.be.equal(positionInPixels - 40);
+    });
+  });
 });
diff --git a/src/internal/test.ts b/src/internal/test.ts
index a1f10dad..607753fc 100644
--- a/src/internal/test.ts
+++ b/src/internal/test.ts
@@ -65,3 +65,19 @@ export async function moveMouseOnElement(
 
   await sendMouse({ type: 'move', position: [clickX, clickY] });
 }
+
+/** A testing utility that drags an element with the mouse. */
+export async function dragElement(
+  /** The element to drag */
+  el: Element,
+  /** The horizontal distance to drag in pixels */
+  deltaX = 0,
+  /** The vertical distance to drag in pixels */
+  deltaY = 0
+): Promise<void> {
+  await moveMouseOnElement(el);
+  await sendMouse({ type: 'down' });
+  const { clickX, clickY } = determineMousePosition(el, 'center', deltaX, deltaY);
+  await sendMouse({ type: 'move', position: [clickX, clickY] });
+  await sendMouse({ type: 'up' });
+}