test(pie-chip): DSW-2373 refactor pie-chip component/a11y tests to us…

…e @playwright/test (#2137) * chore(pie-chip): DSW-2373 refactor pie-chip component/a11y tests to use @playwright/test * fix linting * add turbo.json * pr suggestions --------- Co-authored-by: Ben Siggery <[email protected]>
justeattakeaway · Jan 7, 2025 · d7370ee · d7370ee
1 parent 7977872
commit d7370ee
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 175 deletions.
diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts
@@ -87,8 +87,12 @@ const chipStoryMeta: ChipStoryMeta = {
 
 export default chipStoryMeta;
 
-const clickAction = action('clicked');
-const closeAction = action('pie-chip-close');
+const clickAction = () => {
+  console.log('pie-chip clicked');
+}
+const closeAction = () => {
+  console.log('pie-chip-close clicked');
+}
 
 const Template: TemplateFunction<ChipProps> = ({
     aria,

diff --git a/packages/components/pie-chip/playwright-lit.config.ts b/packages/components/pie-chip/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-chip/test/accessibility/pie-chip.spec.ts b/packages/components/pie-chip/test/accessibility/pie-chip.spec.ts
@@ -1,17 +1,10 @@
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
-import { PieChip, type ChipProps } 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('PieChip - Accessibility tests', () => {
-    test('a11y - should test the PieChip component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
-        await mount(
-            PieChip,
-            {
-                props: {} as ChipProps,
-                slots: {
-                    default: 'Label',
-                },
-            },
-        );
+    test('a11y - should test the PieChip component WCAG compliance', async ({ makeAxeBuilder, page }) => {
+        const pieChipPage = new BasePage(page, 'chip--default');
+        await pieChipPage.load();
 
         const results = await makeAxeBuilder().analyze();