E2E test: "Horizontal orientation" example (#43)

satelllte · Oct 20, 2023 · ad985b5 · ad985b5
1 parent e9c3b2e
commit ad985b5
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 3 deletions.
diff --git a/apps/docs/e2e/expects.ts b/apps/docs/e2e/expects.ts
@@ -43,6 +43,28 @@ export const knobValueIsMoreThan = async (
   );
 };
 
+export const knobDragsDownCorrectly = async (
+  knob: Locator,
+  {
+    valueNow,
+    page,
+  }: {
+    valueNow: number;
+    page: Page;
+  },
+) => {
+  // It's necessary to hover over the knob and scroll it into view,
+  // so then we can calculate its bounds in the viewport properly
+  await knob.hover();
+
+  const {x, y} = await _calculateElementCenter(knob);
+
+  await page.mouse.down();
+  await page.mouse.move(x, y + _dragAmplitude, {steps: _dragSteps});
+  await page.mouse.up();
+  await knobValueIsLessThan(knob, {value: valueNow});
+};
+
 export const knobDragsUpCorrectly = async (
   knob: Locator,
   {
@@ -65,7 +87,7 @@ export const knobDragsUpCorrectly = async (
   await knobValueIsMoreThan(knob, {value: valueNow});
 };
 
-export const knobDragsDownCorrectly = async (
+export const knobDragsLeftCorrectly = async (
   knob: Locator,
   {
     valueNow,
@@ -82,11 +104,33 @@ export const knobDragsDownCorrectly = async (
   const {x, y} = await _calculateElementCenter(knob);
 
   await page.mouse.down();
-  await page.mouse.move(x, y + _dragAmplitude, {steps: _dragSteps});
+  await page.mouse.move(x - _dragAmplitude, y, {steps: _dragSteps});
   await page.mouse.up();
   await knobValueIsLessThan(knob, {value: valueNow});
 };
 
+export const knobDragsRightCorrectly = async (
+  knob: Locator,
+  {
+    valueNow,
+    page,
+  }: {
+    valueNow: number;
+    page: Page;
+  },
+) => {
+  // It's necessary to hover over the knob and scroll it into view,
+  // so then we can calculate its bounds in the viewport properly
+  await knob.hover();
+
+  const {x, y} = await _calculateElementCenter(knob);
+
+  await page.mouse.down();
+  await page.mouse.move(x + _dragAmplitude, y, {steps: _dragSteps});
+  await page.mouse.up();
+  await knobValueIsMoreThan(knob, {value: valueNow});
+};
+
 export const sourceCodeLinkIsValid = async ({
   link,
   page,
@@ -112,7 +156,9 @@ export const expects = {
   knobValueIsEqualTo,
   knobValueIsLessThan,
   knobValueIsMoreThan,
-  knobDragsUpCorrectly,
   knobDragsDownCorrectly,
+  knobDragsUpCorrectly,
+  knobDragsLeftCorrectly,
+  knobDragsRightCorrectly,
   sourceCodeLinkIsValid,
 } as const;
diff --git a/apps/docs/e2e/index.spec.ts b/apps/docs/e2e/index.spec.ts
@@ -139,3 +139,44 @@ test.describe('"Interpolated knob" example', () => {
     });
   });
 });
+
+test.describe('"Horizontal orientation" example', () => {
+  let container: Locator;
+
+  test.beforeEach(({page}) => {
+    container = locators.exampleContainer(page, 'Horizontal orientation');
+  });
+
+  test('has "View source" link leading to "KnobPercentageHorizontal.tsx" source code file', async ({
+    page,
+  }) => {
+    const viewSourceLink = locators.exampleViewSourceLink(container);
+    await expects.sourceCodeLinkIsValid({
+      link: viewSourceLink,
+      page,
+      filePath: 'apps/docs/src/components/knobs/KnobPercentageHorizontal.tsx',
+    });
+  });
+
+  test.describe('"X" knob', () => {
+    let knob: Locator;
+
+    test.beforeEach(() => {
+      knob = locators.exampleKnob(container, 'X');
+    });
+
+    test('has correct default value', async () => {
+      const knobOutput = locators.exampleKnobOutput(container);
+      await expects.knobValueIsEqualTo(knob, {valueNow: 50});
+      await expects.knobValueTextIs(knob, {knobOutput, valueText: '50%'});
+    });
+
+    test('has correct drag left behaviour', async ({page}) => {
+      await expects.knobDragsLeftCorrectly(knob, {valueNow: 50, page});
+    });
+
+    test('has correct drag right behaviour', async ({page}) => {
+      await expects.knobDragsRightCorrectly(knob, {valueNow: 50, page});
+    });
+  });
+});