refactor(elements/ino-range): migrate stencil e2e tests to playwright…

… tests (#1349)

Part of #1258

## Proposed Changes
- migrate existing stencil e2e tests to jest spec tests

---------

Co-authored-by: Jan-Niklas Voß <[email protected]>

packages/elements/src/components/ino-range/ino-range.tsx

@@ -34,6 +34,10 @@ export class Range implements ComponentInterface {
    * Disables this element.
    */
   @Prop() disabled?: boolean;
+  @Watch('disabled')
+  handleDisabledChange(isDisabled: boolean) {
+    this.sliderInstance.setDisabled(isDisabled);
+  }
 
   /**
    * Restricts the slider to only allow discrete values.
@@ -131,7 +135,7 @@ export class Range implements ComponentInterface {
     );
     this.inputElStart?.setAttribute('value', `${this.valueStart}`);
     this.sliderInstance = new MDCSlider(this.sliderEl);
-
+    this.sliderInstance.setDisabled(this.disabled);
     this.sliderInstance.listen('MDCSlider:change', preventEvent);
     this.sliderInstance.listen('MDCSlider:input', this.handleInput);
   }
@@ -144,7 +148,6 @@ export class Range implements ComponentInterface {
 
   private handleInput = (e: CustomEvent<MDCSliderChangeEventDetail>) => {
     e.stopPropagation();
-
     const { thumb, value } = e.detail;
 
     if (!this.ranged) {

packages/storybook/src/stories/ino-button/ino-button.scss

@@ -1,5 +1,7 @@
+@import '../utils';
+
 #story--buttons-ino-button--leading-and-trailing-icon-inner {
-  #root-inner {
+  @include story-container {
     display: flex;
     column-gap: 20px;
   }

packages/storybook/src/stories/ino-fab-set/ino-fab-set.scss

@@ -1,11 +1,13 @@
+@import '../utils';
+
 // only selects Stories of ino-fab-set without decorating stories with wrapper classes
 .sbdocs.sbdocs-content:has(#anchor--buttons-ino-fab-set--default) {
   [scale] {
     width: 100%;
   }
 }
 
-#root-inner {
+@include story-container {
   min-width: 10px;
   min-height: 10px;
 }

packages/storybook/src/stories/ino-input/ino-input.scss

@@ -1,12 +1,16 @@
+@import '../utils';
+
 .sbdocs.sbdocs-content:has(#anchor--input-ino-input--default) {
   [scale] {
     width: 100%;
   }
 
-  #story--input-ino-input--states-inner #root-inner,
-  #story--input-ino-input--labels-inner #root-inner {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
+  #story--input-ino-input--states-inner,
+  #story--input-ino-input--labels-inner {
+    @include story-container {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
   }
 }

packages/storybook/src/stories/ino-popover/ino-popover.scss

@@ -1,3 +1,5 @@
+@import '../utils';
+
 .sbdocs.sbdocs-content:has(#anchor--notification-ino-popover--default) {
   [scale] {
     width: 100%;
@@ -16,7 +18,7 @@
     .innerZoomElementWrapper > div > div {
       overflow: unset;
 
-      #root-inner {
+      @include story-container {
         display: flex;
         gap: 5px;
       }

packages/storybook/src/stories/ino-range/ino-range.scss

@@ -1,5 +1,11 @@
+@import '../utils';
+
 .sbdocs.sbdocs-content:has(#anchor--input-ino-range--default) {
   [scale] {
     width: 100%;
   }
 }
+
+@include story-container {
+  min-width: 200px;
+}

packages/storybook/src/stories/ino-range/ino-range.spec.ts

@@ -0,0 +1,64 @@
+import { expect, Page, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-range', () => {
+  const move = async (page: Page, targetPercentage: number) => {
+    const slider = page.locator('.mdc-slider');
+    const knob = slider.locator('.mdc-slider__thumb-knob');
+    const knobBox = await knob.boundingBox();
+    const sliderBox = await slider.boundingBox();
+
+    // Start from the middle of the slider's thumb
+    const start = {
+      x: knobBox.x + knobBox.width / 2,
+      y: knobBox.y + knobBox.height / 2,
+    };
+    // Slide it to some endpoint determined by the target percentage
+    const end = {
+      x: sliderBox.x + sliderBox.width * targetPercentage,
+      y: knobBox.y + knobBox.height / 2,
+    };
+
+    await page.mouse.move(start.x, start.y);
+    await page.mouse.down();
+    await page.mouse.move(end.x, end.y);
+    await page.mouse.up();
+  };
+
+  test('should not move thumb knob when is disabled', async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-range', 'default']);
+    const inoRange = page.locator('ino-range');
+    const input = inoRange.getByRole('slider');
+    await expect(input).toHaveValue('70');
+
+    await setAttribute(inoRange, 'disabled', 'disabled');
+    await expect(input).toBeDisabled();
+
+    await move(page, 0.1);
+    await expect(input).toHaveValue('70');
+  });
+
+  test('should move thumb knob', async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-range', 'default']);
+    const input = page.getByRole('slider');
+    await expect(input).toHaveValue('70');
+
+    await move(page, 0.95);
+    await expect(input).toHaveValue('95');
+    await move(page, 0.17);
+    await expect(input).toHaveValue('17');
+  });
+
+  test('should apply custom step value', async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-range', 'default']);
+    const inoRange = page.locator('ino-range');
+    await setAttribute(inoRange, 'step', '10');
+    const input = page.getByRole('slider');
+    await expect(input).toHaveValue('70');
+
+    await move(page, 0.61);
+    await expect(input).toHaveValue('60');
+    await move(page, 0.86);
+    await expect(input).toHaveValue('90');
+  });
+});

packages/storybook/src/stories/ino-select/ino-select.spec.ts

@@ -2,35 +2,26 @@ import { expect, Locator, test } from '@playwright/test';
 import { goToStory, setAttribute } from '../test-utils';
 
 test.describe('ino-select - Properties', () => {
-  let inoSelect: Locator;
-
   test.beforeEach(async ({ page }) => {
     await goToStory(page, ['Input', 'ino-select', 'default']);
-    inoSelect = page.locator('ino-select');
   });
 
-  test('should render with the disabled property set to true', async () => {
+  test('should render with the disabled property set to true', async ({
+    page,
+  }) => {
+    const inoSelect = page.locator('ino-select');
     await setAttribute(inoSelect, 'disabled', 'true');
     await inoSelect.click();
     await expect(inoSelect.locator('li').first()).toBeHidden();
   });
 
-  test('should render with the required property set to true', async () => {
+  test('should render with the required property set to true', async ({
+    page,
+  }) => {
+    const inoSelect = page.locator('ino-select');
     await setAttribute(inoSelect, 'required', 'true');
     await expect(inoSelect.locator('input[required]')).toBeAttached();
   });
-
-  test('should render as an outlined element if inoOutlined is true', async () => {
-    await inoSelect.hover();
-    const bBoxDefault = await inoSelect.boundingBox();
-
-    await setAttribute(inoSelect, 'outline', 'true');
-    await inoSelect.hover();
-    const bBoxOutline = await inoSelect.boundingBox();
-
-    expect(bBoxOutline.height).toBe(bBoxDefault.height);
-    expect(bBoxOutline.width).toBeGreaterThan(bBoxDefault.width);
-  });
 });
 
 test.describe('ino-select - Form integration', () => {

packages/storybook/src/stories/ino-textarea/ino-textarea.scss

@@ -1,3 +1,5 @@
+@import '../utils';
+
 .sbdocs.sbdocs-content:has(#anchor--input-ino-textarea--default) {
   [scale] {
     width: 100%;
@@ -8,8 +10,10 @@
     margin-bottom: 15px;
   }
 
-  #story--input-ino-textarea--label-inner #root-inner {
-    display: flex;
-    gap: 15px;
+  #story--input-ino-textarea--label-inner {
+    @include story-container {
+      display: flex;
+      gap: 15px;
+    }
   }
 }

packages/storybook/src/stories/ino-textarea/ino-textarea.spec.ts

@@ -46,13 +46,15 @@ test.describe('ino-textarea', () => {
       page,
     }) => {
       const inoTextArea = page.locator('ino-textarea');
+      const textarea = inoTextArea.getByRole('textbox');
+
       await setAttribute(inoTextArea, 'cols', '1');
-      await inoTextArea.hover();
-      const { width: oneColWidth } = await inoTextArea.boundingBox();
+      await inoTextArea.blur();
+      const { width: oneColWidth } = await textarea.boundingBox();
 
       await setAttribute(inoTextArea, 'cols', '10');
-      await inoTextArea.hover();
-      const { width: tenColsWidth } = await inoTextArea.boundingBox();
+      await inoTextArea.blur();
+      const { width: tenColsWidth } = await textarea.boundingBox();
 
       expect(oneColWidth).toBeLessThan(tenColsWidth);
     });

packages/storybook/src/stories/ino-tooltip/ino-tooltip.scss

@@ -1,3 +1,5 @@
+@import '../utils';
+
 .story-tooltip {
   display: flex;
   justify-content: center;
@@ -21,9 +23,11 @@
     align-items: flex-end;
     height: 110px;
 
-    #story--notification-ino-tooltip--color-scheme-inner #root-inner {
-      display: flex;
-      gap: 15px;
+    #story--notification-ino-tooltip--color-scheme-inner {
+      @include story-container {
+        display: flex;
+        gap: 15px;
+      }
     }
 
     h4 {

packages/storybook/src/stories/utils.scss

@@ -0,0 +1,9 @@
+/**
+ * Applies styling to the container of a story.
+ * The styling is encapsulated within this mixin because the ID may change in the future.
+ */
+@mixin story-container {
+  #root-inner {
+    @content;
+  }
+}