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]>
justeattakeaway · Feb 10, 2025 · 5454b3c · 5454b3c
1 parent 5c708c8
commit 5454b3c
Show file tree

Hide file tree

Showing 8 changed files with 1,113 additions and 1,066 deletions.
diff --git a/apps/pie-storybook/stories/testing/pie-text-input.test.stories.ts b/apps/pie-storybook/stories/testing/pie-text-input.test.stories.ts
diff --git a/packages/components/pie-text-input/playwright-lit-visual.config.ts b/packages/components/pie-text-input/playwright-lit-visual.config.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());
diff --git a/packages/components/pie-text-input/playwright-lit.config.ts b/packages/components/pie-text-input/playwright-lit.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());
diff --git a/packages/components/pie-text-input/test/accessibility/pie-text-input.spec.ts b/packages/components/pie-text-input/test/accessibility/pie-text-input.spec.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();
 

diff --git a/packages/components/pie-text-input/test/component/pie-text-input.spec.ts b/packages/components/pie-text-input/test/component/pie-text-input.spec.ts
diff --git a/packages/components/pie-text-input/test/helpers/page-object/selectors.ts b/packages/components/pie-text-input/test/helpers/page-object/selectors.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,
+};