add tests for atomic-commerce-query-error

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

packages/atomic/src/components/commerce/atomic-commerce-query-error/atomic-commerce-query-error.new.stories.tsx

@@ -0,0 +1,25 @@
+import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {wrapInCommerceInterface} from '../../../../storybookUtils/commerce-interface-wrapper';
+
+const {decorator, play} = wrapInCommerceInterface({
+  engineConfig: {organizationId: 'invalid-organization-id'},
+});
+
+const meta: Meta = {
+  component: 'atomic-commerce-query-error',
+  title: 'Atomic-Commerce/Interface Components/atomic-commerce-query-error',
+  id: 'atomic-commerce-query-error',
+
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-query-error',
+};

packages/atomic/src/components/commerce/atomic-commerce-query-error/e2e/atomic-commerce-query-error.e2e.ts

@@ -0,0 +1,44 @@
+import {test, expect, triggerError} from './fixture';
+
+test.describe('when search returns an error', () => {
+  test.beforeEach(async ({queryError}) => {
+    await queryError.load();
+    await triggerError(queryError.page);
+  });
+
+  test('should be A11y compliant', async ({queryError, makeAxeBuilder}) => {
+    await queryError.hydrated.waitFor();
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should update aria-live message', async ({queryError}) => {
+    await expect(queryError.ariaLive).toHaveText(
+      'Something went wrong. If the problem persists contact the administrator.'
+    );
+  });
+
+  test('should display an error title', async ({queryError}) => {
+    await expect(queryError.title).toBeVisible();
+  });
+  test('should display an error description', async ({queryError}) => {
+    await expect(queryError.description).toBeVisible();
+    await expect(queryError.description).toHaveText(
+      'If the problem persists contact the administrator.'
+    );
+  });
+
+  test('should display an icon', async ({queryError}) => {
+    await expect(queryError.icon).toBeVisible();
+  });
+  test('should render a show more info button that displays error information on click', async ({
+    queryError,
+  }) => {
+    await expect(queryError.moreInfoButton).toBeVisible();
+    queryError.moreInfoButton.click();
+    await expect(queryError.moreInfoMessage).toBeVisible();
+    await expect(queryError.moreInfoMessage).toContainText(
+      'message": "Something very weird just happened"'
+    );
+  });
+});

packages/atomic/src/components/commerce/atomic-commerce-query-error/e2e/fixture.ts

@@ -0,0 +1,42 @@
+import {Page, test as base} from '@playwright/test';
+import {KnownErrorType} from '../../../../../dist/types/components/common/query-error/known-error-types';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../playwright-utils/base-fixture';
+import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
+import {QueryErrorPageObject as QueryError} from './page-object';
+
+type MyFixtures = {
+  searchBox: SearchBox;
+  queryError: QueryError;
+};
+
+export async function triggerError(
+  page: Page,
+  errorType: KnownErrorType | 'ClientError' = 'ClientError'
+) {
+  await page.route('**/v2/search', async (route) => {
+    await route.fulfill({
+      status: 418,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        ok: false,
+        status: 418,
+        message: 'Something very weird just happened',
+        statusCode: 418,
+        type: errorType,
+      }),
+    });
+  });
+}
+export const test = base.extend<MyFixtures & AxeFixture>({
+  makeAxeBuilder,
+  searchBox: async ({page}, use) => {
+    await use(new SearchBox(page));
+  },
+  queryError: async ({page}, use) => {
+    await use(new QueryError(page));
+  },
+});
+export {expect} from '@playwright/test';

packages/atomic/src/components/commerce/atomic-commerce-query-error/e2e/page-object.ts

@@ -0,0 +1,28 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
+
+export class QueryErrorPageObject extends BasePageObject<'atomic-commerce-query-error'> {
+  constructor(page: Page) {
+    super(page, 'atomic-commerce-query-error');
+  }
+
+  get title() {
+    return this.page.locator('[part="title"]');
+  }
+  get description() {
+    return this.page.locator('[part="description"]');
+  }
+  get moreInfoButton() {
+    return this.page.locator('[part="more-info-btn"]');
+  }
+  get moreInfoMessage() {
+    return this.page.locator('[part="error-info"]');
+  }
+  get icon() {
+    return this.page.locator('atomic-icon');
+  }
+
+  get ariaLive() {
+    return this.page.locator('atomic-aria-live');
+  }
+}