refactor(elements/ino-textarea): migrate stencil e2e tests to spec te…

…st (#1305)

* wip

* wip fix spec tests

* provide ino-textarea spec tests

* migrate e2e tests to playwright

* format fix

* revert changes in stencil.config.ts

* implement PR feedback

* remove form locator

* enable retries

packages/elements/setupSpecTests.ts

@@ -3,3 +3,12 @@
   disconnect() {}
   observe() {}
 };
+
+jest.mock('@material/textfield', () => ({
+  ...jest.requireActual('@material/textfield'),
+  MDCTextField: class {
+    public focus = jest.fn();
+    public destroy = jest.fn();
+    public value = '';
+  },
+}));

packages/elements/src/components/ino-textarea/ino-textarea.spec.ts

@@ -0,0 +1,50 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { Textarea } from './ino-textarea';
+import { listenForEvent } from '../../util/test-utils';
+
+describe('ino-textarea', () => {
+  let page: SpecPage;
+  let inoTextarea: HTMLInoTextareaElement;
+  let innerTextarea: HTMLTextAreaElement;
+
+  describe('Events', () => {
+    const typeText = async (value: string) => {
+      const arr = [...value];
+      innerTextarea.value = '';
+      arr.forEach((char) => {
+        innerTextarea.value += char;
+        innerTextarea.dispatchEvent(new Event('input'));
+      });
+      await page.waitForChanges();
+    };
+
+    beforeEach(async () => {
+      page = await newSpecPage({
+        components: [Textarea],
+        html: '<ino-textarea outline="false" value="Some Text"></ino-textarea>',
+      });
+
+      inoTextarea = page.body.querySelector('ino-textarea');
+      innerTextarea = inoTextarea.querySelector('textarea');
+      innerTextarea.setSelectionRange = jest.fn();
+    });
+
+    it('should render with an defined value', async () => {
+      expect(inoTextarea.value).toEqual('Some Text');
+    });
+
+    it('should emit valueChange event while typing in textarea and have the typed string in event.detail', async () => {
+      const { assertEventDetails } = listenForEvent(page, 'valueChange');
+      await typeText('t');
+      await page.waitForChanges();
+      assertEventDetails('t');
+    });
+
+    it("should emit 4 valueChange events while typing 'test' in textarea", async () => {
+      const { eventSpy } = listenForEvent(page, 'valueChange');
+      await typeText('test');
+      await page.waitForChanges();
+      expect(eventSpy).toHaveBeenCalledTimes(4);
+    });
+  });
+});

packages/storybook/playwright.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
   use: {
     baseURL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'retain-on-failure',
+    trace: 'on-all-retries',
   },
   expect: {
     timeout: process.env.CI ? 30000 : 10000,

packages/storybook/project.json

@@ -73,7 +73,7 @@
           "quiet": true,
           "passWithNoTests": false,
           "skipInstall": true,
-          "retries": 0
+          "retries": 2
         },
         "headless": {
           "headed": false

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

@@ -0,0 +1,79 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-textarea', () => {
+  let inoTextArea: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-textarea', 'default']);
+    inoTextArea = page.locator('ino-textarea');
+  });
+
+  test.describe('Component Behaviour', () => {
+    test('should be not focused after render', async () => {
+      await expect(inoTextArea).not.toBeFocused();
+    });
+
+    test('should render with an above floating label after focus', async () => {
+      const sampleText = 'Some Label';
+      await setAttribute(inoTextArea, 'label', sampleText);
+      await inoTextArea.click();
+      const label = inoTextArea.locator('label');
+      await expect(label).toHaveClass(/mdc-floating-label--float-above/);
+    });
+
+    test('should have higher height after increasing the rows', async () => {
+      await setAttribute(inoTextArea, 'rows', '1');
+      const { height: oneRowHeight } = await inoTextArea.boundingBox();
+
+      await setAttribute(inoTextArea, 'rows', '10');
+      const { height: tenRowsHeight } = await inoTextArea.boundingBox();
+
+      expect(oneRowHeight).toBeLessThan(tenRowsHeight);
+    });
+
+    test('should have wider widths after increasing the columns', async () => {
+      await setAttribute(inoTextArea, 'cols', '1');
+      const { width: oneColWidth } = await inoTextArea.boundingBox();
+
+      await setAttribute(inoTextArea, 'cols', '10');
+      const { width: tenColsWidth } = await inoTextArea.boundingBox();
+
+      expect(oneColWidth).toBeLessThan(tenColsWidth);
+    });
+
+    test('should NOT increase width when input exceeds width and autogrow not set', async () => {
+      await setAttribute(inoTextArea, 'rows', '2');
+      await setAttribute(inoTextArea, 'cols', '2');
+
+      const bBoxBefore = await inoTextArea.boundingBox();
+      await setAttribute(inoTextArea, 'value', 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+      const bBoxAfter = await inoTextArea.boundingBox();
+
+      expect(bBoxAfter.height).toEqual(bBoxBefore.height);
+    });
+
+    test('should increase width when input exceeds width and autogrow set', async () => {
+      await setAttribute(inoTextArea, 'rows', '2');
+      await setAttribute(inoTextArea, 'cols', '2');
+      await setAttribute(inoTextArea, 'autogrow', 'true');
+
+      const bBoxBefore = await inoTextArea.boundingBox();
+      await setAttribute(inoTextArea, 'value', 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+      const bBoxAfter = await inoTextArea.boundingBox();
+
+      expect(bBoxAfter.height).toBeGreaterThan(bBoxBefore.height);
+    });
+
+    test('should not enter more than max length', async () => {
+      const nativeTextarea = inoTextArea.locator('textarea');
+      await setAttribute(inoTextArea, 'maxlength', '3');
+
+      await nativeTextarea.fill('ABC');
+      await expect(nativeTextarea).toHaveValue('ABC');
+
+      await nativeTextarea.fill('DEFG');
+      await expect(nativeTextarea).toHaveValue('DEF');
+    });
+  });
+});