add tests

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

packages/samples/headless-ssr-commerce/e2e/home.page.ts

@@ -0,0 +1,59 @@
+// home.page.ts
+import {Page} from '@playwright/test';
+
+export class HomePage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  async searchBox() {
+    return this.page.getByPlaceholder('search');
+  }
+
+  async getSearchButton() {
+    return this.page.getByRole('button', {name: 'Search', exact: true});
+  }
+
+  async getFacetsSection() {
+    return this.page.getByLabel('Brand');
+  }
+
+  async getSuggestionsContainer() {
+    return this.page.getByText('Suggestions :');
+  }
+
+  async getSuggestions() {
+    return this.page.getByText('Suggestions :').locator('li >> button');
+  }
+
+  async getFirstFacet() {
+    return this.page.getByLabel(/(Select|Deselect) facet value.*/).first();
+  }
+
+  async getFacetLoading() {
+    return this.page.locator('.FacetLoading').first();
+  }
+
+  async getProductList() {
+    return this.page.getByLabel('Product List');
+  }
+
+  async getProductItems() {
+    const productList = await this.getProductList();
+    return productList.getByRole('listitem').all();
+  }
+
+  async getFacetByLabel(label: string) {
+    return this.page.getByLabel(label);
+  }
+
+  async getResultSummary() {
+    return this.page.getByText(/Showing results \d+ - \d+ of/);
+  }
+}

packages/samples/headless-ssr-commerce/e2e/home.spec.ts

@@ -0,0 +1,142 @@
+// home.spec.ts
+import {test, expect} from '@playwright/test';
+import {HomePage} from './home.page';
+
+test.describe('Home Page', () => {
+  test.beforeEach(async ({page}) => {
+    await page.goto('/');
+  });
+
+  test('should load and display the search box', async ({page}) => {
+    const homePage = new HomePage(page);
+    await expect(await homePage.searchBox()).toBeVisible();
+  });
+
+  test.describe('when entering a query', () => {
+    let initialProducts: string = '';
+
+    test.beforeEach(async ({page}) => {
+      const homePage = new HomePage(page);
+
+      initialProducts =
+        (await (await homePage.getProductList()).textContent()) || '';
+
+      const searchBox = await homePage.searchBox();
+      await searchBox.fill('shoes');
+    });
+
+    test('should display suggestions', async ({page}) => {
+      const homePage = new HomePage(page);
+
+      const suggestionsContainer = await homePage.getSuggestionsContainer();
+      await expect(suggestionsContainer).toBeVisible();
+
+      const suggestions = await homePage.getSuggestions();
+      expect(await suggestions.count()).toBeGreaterThan(0);
+    });
+
+    test.describe('when clicking a suggestion', () => {
+      let suggestionValue: string;
+      test.beforeEach(async ({page}) => {
+        const homePage = new HomePage(page);
+
+        const suggestions = await homePage.getSuggestions();
+        suggestionValue =
+          (await suggestions.first().textContent()) || 'no value found';
+        await suggestions.first().click();
+
+        await (await homePage.getFacetLoading()).waitFor({state: 'visible'});
+        await (await homePage.getFacetLoading()).waitFor({state: 'hidden'});
+      });
+
+      test('should update query', async ({page}) => {
+        const homePage = new HomePage(page);
+        const searchBox = await homePage.searchBox();
+        await expect(searchBox).toHaveValue(suggestionValue);
+      });
+
+      test('should update the results summary', async ({page}) => {
+        const homePage = new HomePage(page);
+        const resultSummary = await homePage.getResultSummary();
+        await expect(resultSummary).toBeVisible();
+      });
+
+      test('should update the result list', async ({page}) => {
+        const homePage = new HomePage(page);
+        const productListContents = await (
+          await homePage.getProductList()
+        ).textContent();
+
+        expect(productListContents).not.toEqual(initialProducts);
+      });
+    });
+
+    test.describe('when clicking search button', () => {
+      test.beforeEach(async ({page}) => {
+        const homePage = new HomePage(page);
+
+        (await homePage.getSearchButton()).click();
+
+        await (await homePage.getFacetLoading()).waitFor({state: 'visible'});
+        await (await homePage.getFacetLoading()).waitFor({state: 'hidden'});
+      });
+
+      test('should update product results', async ({page}) => {
+        const homePage = new HomePage(page);
+        const productListContents = await (
+          await homePage.getProductList()
+        ).textContent();
+
+        expect(productListContents).not.toEqual(initialProducts);
+      });
+
+      test('should update result summary', async ({page}) => {
+        const homePage = new HomePage(page);
+        const resultSummary = await homePage.getResultSummary();
+        await expect(resultSummary).toBeVisible();
+      });
+    });
+  });
+
+  test('should display the facets', async ({page}) => {
+    const homePage = new HomePage(page);
+
+    const facetsSection = await homePage.getFacetsSection();
+    await expect(facetsSection).toBeVisible();
+  });
+
+  test.describe('when a facet value is selected', () => {
+    let initialResultSummary: string | null;
+    test.beforeEach(async ({page}) => {
+      const homePage = new HomePage(page);
+
+      initialResultSummary = await (
+        await homePage.getResultSummary()
+      ).textContent();
+
+      const firstFacet = await homePage.getFirstFacet();
+      await firstFacet.click();
+
+      const facetLoading = await homePage.getFacetLoading();
+      await facetLoading.waitFor({state: 'visible'});
+      await facetLoading.waitFor({state: 'hidden'});
+    });
+
+    test('should update results', async ({page}) => {
+      const homePage = new HomePage(page);
+
+      const productItems = await homePage.getProductItems();
+      expect(productItems.length).toBeGreaterThan(0);
+
+      expect(initialResultSummary).not.toEqual(
+        (await homePage.getResultSummary()).textContent()
+      );
+    });
+
+    test('should be checked after clicking', async ({page}) => {
+      const homePage = new HomePage(page);
+
+      await expect(await homePage.getFirstFacet()).toBeChecked();
+    });
+  });
+});

packages/samples/headless-ssr-commerce/playwright.config.ts

@@ -0,0 +1,33 @@
+import {defineConfig, devices} from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {...devices['Desktop Chrome']},
+    },
+    {
+      name: 'firefox',
+      use: {...devices['Desktop Firefox']},
+    },
+    {
+      name: 'webkit',
+      use: {...devices['Desktop Safari']},
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    port: 3000,
+    reuseExistingServer: !process.env.CI,
+  },
+});