add tests

https://coveord.atlassian.net/browse/KIT-3248

packages/atomic/playwright-utils/base-page-object.ts

@@ -51,6 +51,22 @@ export class BasePageObject<
     return this;
   }
 
+  async noRecommendations() {
+    await this.page.route('**/commerce/v2/recommendations', async (route) => {
+      const response = await route.fetch();
+      const body = await response.json();
+      body.products = [];
+      console.log(body);
+
+      await route.fulfill({
+        response,
+        json: body,
+      });
+    });
+
+    return this;
+  }
+
   private camelToKebab(args: Component) {
     const toKebab: Record<string, unknown> = {};
     Object.entries(args as Record<string, unknown>).forEach(([key, value]) => {

packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/e2e/atomic-commerce-recommendation-list.e2e.ts

@@ -1,5 +1,103 @@
-import {test} from './fixture';
+import {test, expect} from './fixture';
 
-test.describe('default', () => {
-  test('should be A11Y compliant', async () => {});
+test.describe('before query is loaded', () => {
+  test.beforeEach(async ({recommendationList}) => {
+    await recommendationList.load({story: 'before-query'});
+    await recommendationList.hydrated.waitFor();
+  });
+
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should have placeholders', async ({recommendationList}) => {
+    await expect(recommendationList.placeholder.first()).toBeVisible();
+  });
+});
+
+test.describe('after query is loaded', () => {
+  test.beforeEach(async ({recommendationList}) => {
+    await recommendationList.load({story: 'default'});
+    await recommendationList.hydrated.waitFor();
+  });
+
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should have recommendations', async ({recommendationList}) => {
+    await expect(recommendationList.recommendation.first()).toBeVisible();
+  });
+});
+
+test.describe('with a full result template', () => {
+  test.beforeEach(async ({recommendationList}) => {
+    await recommendationList.load({story: 'with-full-template'});
+    await recommendationList.hydrated.waitFor();
+  });
+
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should have recommendations', async ({recommendationList}) => {
+    await expect(recommendationList.recommendation.first()).toBeVisible();
+  });
+});
+
+test.describe('with a carousel', () => {
+  test.beforeEach(async ({recommendationList}) => {
+    await recommendationList.load({story: 'as-carousel'});
+    await recommendationList.hydrated.waitFor();
+  });
+
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should have recommendations', async ({recommendationList}) => {
+    await expect(recommendationList.recommendation.first()).toBeVisible();
+  });
+
+  test('should support going forward and backward', async ({
+    recommendationList,
+  }) => {
+    await recommendationList.nextButton.click();
+    await expect(recommendationList.indicators.nth(1)).toHaveAttribute(
+      'part',
+      'indicator active-indicator'
+    );
+
+    await recommendationList.prevButton.click();
+    await recommendationList.prevButton.click();
+    await expect(recommendationList.indicators.nth(2)).toHaveAttribute(
+      'part',
+      'indicator active-indicator'
+    );
+
+    await recommendationList.nextButton.click();
+    await expect(recommendationList.indicators.nth(0)).toHaveAttribute(
+      'part',
+      'indicator active-indicator'
+    );
+  });
+});
+
+test('with no recommendations returned by the API, should render placeholders', async ({
+  recommendationList,
+  page,
+}) => {
+  await recommendationList.noRecommendations();
+  await recommendationList.load({story: 'default'});
+  await page.waitForTimeout(2000); // Wait for atomic components to render
+  await expect
+    .poll(async () => await recommendationList.recommendation.count())
+    .toBe(0);
+  await expect
+    .poll(async () => await recommendationList.placeholder.count())
+    .toBe(0);
 });

packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/e2e/page-object.ts

@@ -5,4 +5,26 @@ export class AtomicCommerceRecommendationList extends BasePageObject<'atomic-com
   constructor(page: Page) {
     super(page, 'atomic-commerce-recommendation-list');
   }
+
+  get placeholder() {
+    return this.page.locator('.placeholder');
+  }
+
+  get recommendation() {
+    return this.page.locator(
+      '[part="result-list-grid-clickable-container outline"]'
+    );
+  }
+
+  get indicators() {
+    return this.page.getByRole('listitem');
+  }
+
+  get nextButton() {
+    return this.page.getByLabel('Next');
+  }
+
+  get prevButton() {
+    return this.page.getByLabel('Previous');
+  }
 }

packages/atomic/src/components/recommendations/atomic-recs-list/e2e/atomic-recs-list.e2e.ts

@@ -6,7 +6,7 @@ test.describe('before query is loaded', () => {
     await recsList.hydrated.waitFor();
   });
 
-  test('should be ally compliant', async ({makeAxeBuilder}) => {
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
     const accessibilityResults = await makeAxeBuilder().analyze();
     expect(accessibilityResults.violations.length).toEqual(0);
   });
@@ -22,7 +22,7 @@ test.describe('after query is loaded', () => {
     await recsList.hydrated.waitFor();
   });
 
-  test('should be ally compliant', async ({makeAxeBuilder}) => {
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
     const accessibilityResults = await makeAxeBuilder().analyze();
     expect(accessibilityResults.violations.length).toEqual(0);
   });
@@ -38,7 +38,7 @@ test.describe('with a full result template', () => {
     await recsList.hydrated.waitFor();
   });
 
-  test('should be ally compliant', async ({makeAxeBuilder}) => {
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
     const accessibilityResults = await makeAxeBuilder().analyze();
     expect(accessibilityResults.violations.length).toEqual(0);
   });
@@ -54,7 +54,7 @@ test.describe('with a carousel', () => {
     await recsList.hydrated.waitFor();
   });
 
-  test('should be ally compliant', async ({makeAxeBuilder}) => {
+  test('should be a11y compliant', async ({makeAxeBuilder}) => {
     const accessibilityResults = await makeAxeBuilder().analyze();
     expect(accessibilityResults.violations.length).toEqual(0);
   });

packages/atomic/tsconfig.json

@@ -1,10 +1,5 @@
 {
   "extends": "./tsconfig.stencil.json",
-  "exclude": [
-    "node_modules",
-    "src/external-builds",
-    "**/*.stories.tsx",
-    "**/*.stories.ts",
-    "**/*.stories.js"
-  ]
+
+  "exclude": ["node_modules", "src/external-builds"]
 }