test(atomic): atomic-commerce-search-box-instant-products

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.new.stories.tsx

@@ -0,0 +1,67 @@
+import {wrapInCommerceInterface} from '@coveo/atomic-storybook-utils/commerce/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic-storybook-utils/common/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic-storybook-utils/common/render-component';
+import type {
+  Decorator,
+  Meta,
+  StoryObj as Story,
+} from '@storybook/web-components';
+import {html} from 'lit/static-html.js';
+
+const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});
+
+const wrapInSearchBox: Decorator = (story) => {
+  return html`
+    <atomic-commerce-search-box>
+      <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>
+      ${story()}
+    </atomic-commerce-search-box>
+  `;
+};
+
+const meta: Meta = {
+  component: 'atomic-commerce-search-box-instant-products',
+  title:
+    'Atomic-Commerce/Interface Components/atomic-commerce-search-box-instant-products',
+  id: 'atomic-commerce-search-box-instant-products',
+  render: renderComponent,
+  decorators: [wrapInSearchBox, decorator],
+  parameters,
+  play,
+  argTypes: {
+    'attributes-density': {
+      name: 'density',
+      options: ['normal', 'comfortable', 'compact'],
+    },
+    'attributes-image-size': {
+      name: 'image-size',
+      options: ['icon', 'small', 'large', 'none'],
+    },
+    'attributes-aria-label-generator': {
+      name: 'aria-label-generator',
+      type: 'function',
+    },
+  },
+};
+
+export const WithComfortableDensity: Story = {
+  tags: ['test'],
+  name: 'With comfortable density',
+  args: {
+    'attributes-density': 'comfortable',
+  },
+};
+
+export const WithNoImage: Story = {
+  tags: ['test'],
+  name: 'With no image',
+  args: {
+    'attributes-image-size': 'none',
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-search-box-instant-product',
+};

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/e2e/atomic-commerce-search-box-instant-products.e2e.ts

@@ -0,0 +1,98 @@
+import {test, expect} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({instantProduct, searchBox}) => {
+    await instantProduct.load();
+    await searchBox.hydrated.waitFor();
+    await searchBox.searchInput.click();
+  });
+
+  test('should display instant products', async ({instantProduct}) => {
+    const products = await instantProduct.instantProducts.all();
+    for (let i = 0; i < products.length; i++) {
+      await expect(products[i]).toBeVisible();
+    }
+  });
+
+  test('should be clickable anywhere on the instant result component', async ({
+    instantProduct,
+    page,
+  }) => {
+    await expect(instantProduct.instantProducts.first()).toBeEnabled();
+    await instantProduct.instantProducts.first().click();
+    await page.waitForURL(/https:\/\/sports\.barca\.group\/*/);
+  });
+
+  test.describe('with density set to comfortable', () => {
+    test.beforeEach(async ({instantProduct, searchBox}) => {
+      await instantProduct.load({story: 'with-comfortable-density'});
+      await searchBox.hydrated.waitFor();
+      await searchBox.searchInput.click();
+    });
+
+    test('should apply comfortable density class', async ({instantProduct}) => {
+      await expect(instantProduct.productRoots.first()).toHaveClass(
+        /.*density-comfortable.*/
+      );
+    });
+  });
+
+  test.describe('with imageSize set to none', () => {
+    test.beforeEach(async ({instantProduct, searchBox}) => {
+      await instantProduct.load({story: 'with-no-image'});
+      await searchBox.hydrated.waitFor();
+      await searchBox.searchInput.click();
+    });
+
+    test('should apply no image class', async ({instantProduct}) => {
+      await expect(instantProduct.productRoots.first()).toHaveClass(
+        /.*image-none.*/
+      );
+    });
+  });
+
+  test.describe('when clicking on "See All Results"', () => {
+    test.beforeEach(async ({instantProduct, searchBox}) => {
+      await instantProduct.load();
+      await searchBox.component.evaluate((node) =>
+        node.setAttribute(
+          'redirection-url',
+          './iframe.html?id=atomic-commerce-search-box--in-page&viewMode=story'
+        )
+      );
+      await searchBox.hydrated.waitFor();
+      await searchBox.searchInput.click();
+    });
+    test('should redirect to the specified url after selecting a suggestion', async ({
+      instantProduct,
+      page,
+    }) => {
+      await instantProduct.showAllButton.click();
+      await page.waitForURL(
+        '**/iframe.html?id=atomic-commerce-search-box--in-page*'
+      );
+    });
+  });
+
+  test.describe('with a custom aria label generator', async () => {
+    test.beforeEach(async ({instantProduct, searchBox}) => {
+      await instantProduct.load({
+        args: {ariaLabelGenerator: () => 'custom-aria-label'},
+      });
+      await searchBox.hydrated.waitFor();
+      await searchBox.searchInput.click();
+    });
+
+    test('should update the instant product aria label', async ({
+      instantProduct,
+    }) => {
+      const products = await instantProduct.instantProducts.all();
+      for (let i = 0; i < products.length; i++) {
+        await expect(products[i]).toHaveAttribute(
+          'aria-live',
+          'custom-aria-label'
+        );
+      }
+    });
+  });
+});

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/e2e/fixture.ts

@@ -0,0 +1,24 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {SearchBoxPageObject} from '../../../atomic-commerce-search-box/e2e/page-object';
+import {InstantProductPageObject} from './page-object';
+
+type Fixture = {
+  searchBox: SearchBoxPageObject;
+  instantProduct: InstantProductPageObject;
+};
+
+export const test = base.extend<Fixture & AxeFixture>({
+  makeAxeBuilder,
+  instantProduct: async ({page}, use) => {
+    await use(new InstantProductPageObject(page));
+  },
+  searchBox: async ({page}, use) => {
+    await use(new SearchBoxPageObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/e2e/page-object.ts

@@ -0,0 +1,24 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class InstantProductPageObject extends BasePageObject<'atomic-commerce-search-box-instant-products'> {
+  constructor(page: Page) {
+    super(page, 'atomic-commerce-search-box-instant-products');
+  }
+
+  get component() {
+    return this.page.locator('atomic-commerce-search-box-instant-products');
+  }
+
+  get instantProducts() {
+    return this.page.getByLabel('instant result');
+  }
+
+  get productRoots() {
+    return this.page.locator('.result-root');
+  }
+
+  get showAllButton() {
+    return this.page.getByLabel('See all results');
+  }
+}