Test/commerce searchbox

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+#TODO: Merge into ci.
+
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.vscode/extensions.json

@@ -4,6 +4,6 @@
     "esbenp.prettier-vscode",
     "redhat.vscode-yaml",
     "streetsidesoftware.code-spell-checker",
-    "orta.vscode-jest"
+    "ms-playwright.playwright"
   ]
 }

package.json

@@ -2,7 +2,7 @@
   "name": "ui-kit",
   "private": true,
   "scripts": {
-    "postinstall": "husky install && patch-package && nx run-many --target=install:isolated",
+    "postinstall": "husky install && patch-package && npx playwright install",
     "reset:install": "git checkout origin/master package-lock.json && npm i",
     "clean:install": "git clean -xfd && npm run reset:install",
     "dev:atomic": "concurrently \"npm run -w @coveo/headless dev\" \"npm run -w @coveo/atomic dev\"",
@@ -34,10 +34,10 @@
     "@coveo/release": "1.0.0",
     "@cspell/dict-fr-fr": "2.2.2",
     "@cspell/eslint-plugin": "8.8.1",
-    "@nx/js": "19.0.5",
-    "@nx/storybook": "19.0.5",
-    "@nx/vite": "19.0.5",
-    "@nx/web": "19.0.5",
+    "@nx/js": "19.1.0",
+    "@nx/storybook": "19.1.0",
+    "@nx/vite": "19.1.0",
+    "@nx/web": "19.1.0",
     "@octokit/rest": "20.1.1",
     "@rollup/plugin-typescript": "11.1.6",
     "@storybook/addon-essentials": "8.1.2",

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -11,6 +11,7 @@ AtomicAutomaticFacetGenerator,
 AtomicBreadbox,
 AtomicCategoryFacet,
 AtomicColorFacet,
+AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,
 AtomicExternal,
@@ -108,6 +109,7 @@ AtomicAutomaticFacetGenerator,
 AtomicBreadbox,
 AtomicCategoryFacet,
 AtomicColorFacet,
+AtomicCommerceSearchBox,
 AtomicComponentError,
 AtomicDidYouMean,
 AtomicExternal,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -138,6 +138,48 @@ export class AtomicColorFacet {
 export declare interface AtomicColorFacet extends Components.AtomicColorFacet {}
 
 
+@ProxyCmp({
+  inputs: ['clearFilters', 'disableSearch', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout']
+})
+@Component({
+  selector: 'atomic-commerce-search-box',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['clearFilters', 'disableSearch', 'minimumQueryLength', 'numberOfQueries', 'redirectionUrl', 'suggestionDelay', 'suggestionTimeout'],
+})
+export class AtomicCommerceSearchBox {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['redirect']);
+  }
+}
+
+
+import type { RedirectionPayload as IAtomicCommerceSearchBoxRedirectionPayload } from '@coveo/atomic';
+
+export declare interface AtomicCommerceSearchBox extends Components.AtomicCommerceSearchBox {
+  /**
+   * Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
+
+Example:
+```html
+<script>
+  document.querySelector('atomic-commerce-search-box').addEventListener((e) => {
+    e.preventDefault();
+    // handle redirection
+  });
+</script>
+...
+<atomic-commerce-search-box redirection-url="/search"></atomic-commerce-search-box>
+```
+   */
+  redirect: EventEmitter<CustomEvent<IAtomicCommerceSearchBoxRedirectionPayload>>;
+}
+
+
 @ProxyCmp({
   inputs: ['element', 'error']
 })

packages/atomic/.gitignore

@@ -33,4 +33,13 @@ src/generated
 cypress/screenshots/*
 
 headless/
-dist-storybook/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+storybook-static/

packages/atomic/.storybook/main.mts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
     '@whitespace/storybook-addon-html',
   ],
   framework: {

packages/atomic/package.json

@@ -27,7 +27,7 @@
     "clean": "rimraf -rf dist/*",
     "build": "nx build",
     "build:locales": "npx nx build:locales atomic",
-    "dev": "nx dev atomic",
+    "start": "nx dev atomic",
     "prod": "npx serve www -l 3333 --no-request-logging",
     "test": "npm run build:locales && stencil test --spec",
     "test:watch": "stencil test --spec --watchAll",
@@ -71,15 +71,17 @@
     "@coveo/release": "1.0.0",
     "@custom-elements-manifest/analyzer": "0.10.2",
     "@fullhuman/postcss-purgecss": "6.0.0",
-    "@nx/js": "19.0.5",
-    "@nx/storybook": "19.0.5",
-    "@nx/vite": "19.0.5",
-    "@nx/web": "19.0.5",
+    "@nx/js": "19.1.0",
+    "@nx/storybook": "19.1.0",
+    "@nx/vite": "19.1.0",
+    "@nx/web": "19.1.0",
+    "@playwright/test": "1.44.1",
     "@rollup/plugin-alias": "5.1.0",
     "@rollup/plugin-replace": "5.0.5",
     "@stencil-community/postcss": "2.2.0",
     "@stencil/angular-output-target": "0.8.4",
     "@stencil/react-output-target": "0.5.3",
+    "@storybook/addon-a11y": "8.1.4",
     "@storybook/addon-essentials": "8.1.2",
     "@storybook/addon-interactions": "8.1.2",
     "@storybook/core-events": "8.1.2",
@@ -98,6 +100,7 @@
     "@types/escape-html": "1.0.4",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.17.1",
+    "@types/node": "18.19.33",
     "@types/postcss-import": "14.0.3",
     "@types/puppeteer": "7.0.4",
     "@whitespace/storybook-addon-html": "6.1.1",
@@ -125,6 +128,7 @@
     "react": "18.3.1",
     "rollup-plugin-html": "0.2.1",
     "shadow-dom-testing-library": "1.11.2",
+    "storybook": "8.1.2",
     "tailwindcss": "3.4.3",
     "ts-node": "10.9.1",
     "tslib": "^2.3.0",

packages/atomic/playwright.config.ts

@@ -0,0 +1,82 @@
+import {defineConfig, devices} from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+const DEFAULT_DESKTOP_VIEWPORT = {
+  width: 1920,
+  height: 1080,
+};
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './src',
+  testMatch: '*.e2e.ts',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: DEFAULT_DESKTOP_VIEWPORT,
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {...devices['Desktop Firefox'], viewport: DEFAULT_DESKTOP_VIEWPORT},
+    },
+
+    {
+      name: 'webkit',
+      use: {...devices['Desktop Safari'], viewport: DEFAULT_DESKTOP_VIEWPORT},
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+  expect: {
+    timeout: 20 * 1000,
+  },
+});

packages/atomic/project.json

@@ -84,7 +84,8 @@
       }
     },
     "dev": {
-      "dependsOn": ["storybook", "stencil:dev", "cem:dev"]
+      "dependsOn": ["storybook", "stencil:dev", "cem:dev"],
+      "executor": "nx:noop"
     },
     "stencil:dev": {
       "dependsOn": ["^build", "build:locales"],
@@ -116,31 +117,20 @@
       }
     },
     "storybook": {
-      "executor": "@nx/storybook:storybook",
+      "executor": "nx:run-commands",
       "dependsOn": ["wait-on:dist"],
       "options": {
-        "port": 4400,
-        "configDir": "{workspaceRoot}/packages/atomic/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
+        "cwd": "{projectRoot}",
+        "command": "npx storybook dev -p 4400"
       }
     },
     "build-storybook": {
       "dependsOn": ["cached:build:stencil", "cem:build", "list-assets"],
-      "executor": "@nx/storybook:build",
+      "executor": "nx:run-commands",
       "outputs": ["{options.outputDir}"],
-      "cwd": "{projectRoot}",
       "options": {
-        "outputDir": "{workspaceRoot}/packages/atomic/dist-storybook",
-        "configDir": "{workspaceRoot}/packages/atomic/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
+        "cwd": "{projectRoot}",
+        "command": "npx storybook build -o storybook-static"
       }
     },
     "test-storybook": {

packages/atomic/src/components.d.ts

@@ -548,6 +548,7 @@ export namespace Components {
     }
     /**
      * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
+     * @alpha 
      */
     interface AtomicCommerceSearchBox {
         /**
@@ -3557,6 +3558,7 @@ declare global {
     }
     /**
      * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
+     * @alpha 
      */
     interface HTMLAtomicCommerceSearchBoxElement extends Components.AtomicCommerceSearchBox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLAtomicCommerceSearchBoxElementEventMap>(type: K, listener: (this: HTMLAtomicCommerceSearchBoxElement, ev: AtomicCommerceSearchBoxCustomEvent<HTMLAtomicCommerceSearchBoxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5837,6 +5839,7 @@ declare namespace LocalJSX {
     }
     /**
      * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
+     * @alpha 
      */
     interface AtomicCommerceSearchBox {
         /**
@@ -8691,6 +8694,7 @@ declare module "@stencil/core" {
             "atomic-commerce-recommendation-list": LocalJSX.AtomicCommerceRecommendationList & JSXBase.HTMLAttributes<HTMLAtomicCommerceRecommendationListElement>;
             /**
              * The `atomic-commerce-search-box` component creates a search box with built-in support for suggestions.
+             * @alpha 
              */
             "atomic-commerce-search-box": LocalJSX.AtomicCommerceSearchBox & JSXBase.HTMLAttributes<HTMLAtomicCommerceSearchBoxElement>;
             /**

packages/atomic/src/components/commerce/atomic-commerce-load-more-products/e2e/pageObject.ts

@@ -0,0 +1,20 @@
+import {Page} from '@playwright/test';
+
+export class AtomicCommerceLoadMoreProductsLocators {
+  private page: Page;
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  summary({index, total}: {index?: number; total?: number} = {}) {
+    return this.page.getByText(
+      new RegExp(
+        `Showing ${index ?? '\\d'} of ${total ?? '\\d'} result${total === 1 ? '' : 's'}.`
+      )
+    );
+  }
+
+  get loadMoreButton() {
+    return this.page.getByText('Load more results');
+  }
+}