refactor(pie-text-input): DSW-2384 tests to use @playwright/test (#2194)

* text input tests

* refactor components tests

* add variation stories

* add slot variations

* visual tests

* update import

---------

Co-authored-by: Ben Siggery <[email protected]>

Author: 2 people

apps/pie-storybook/stories/testing/pie-text-input.test.stories.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeVisualConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightVisualConfig());
+export default defineConfig(getPlaywrightNativeVisualConfig());

packages/components/pie-text-input/playwright-lit-visual.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
+import { defineConfig } from '@playwright/test';
+import { getPlaywrightNativeConfig } from '@justeattakeaway/pie-components-config';
 
-export default defineConfig(getPlaywrightConfig());
+export default defineConfig(getPlaywrightNativeConfig());

packages/components/pie-text-input/playwright-lit.config.ts

@@ -1,10 +1,11 @@
 
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieTextInput } from '../../src/index.ts';
+import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
+import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
 
 test.describe('PieTextInput - Accessibility tests', () => {
-    test('a11y - should test the PieTextInput component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
-        await mount(PieTextInput);
+    test('a11y - should test the PieTextInput component WCAG compliance', async ({ makeAxeBuilder, page }) => {
+        const textInputDefaultPage = new BasePage(page, 'text-input--default');
+        await textInputDefaultPage.load();
 
         const results = await makeAxeBuilder().analyze();
 

packages/components/pie-text-input/test/accessibility/pie-text-input.spec.ts

@@ -0,0 +1,16 @@
+const textInput = {
+    selectors: {
+        container: {
+            dataTestId: 'pie-text-input-container',
+        },
+        assistiveText: {
+            dataTestId: 'pie-text-input-assistive-text',
+        },
+        input: {
+            dataTestId: 'pie-text-input',
+        },
+    },
+};
+export {
+    textInput,
+};