-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(atomic): add atomic-commerce-facet tests (#4123)
Add tests for `atomic-commerce-facet`. You will see some shenanigan in story setup to "keep only a single facet". As you know, atomic-commerce-facet are generated/internal: So we need to trick storybook a bit to output `atomic-commerce-facets` (with an `s`), and then "snipe" components that are not of the correct type (ie: everything that is not an `atomic-commerce-facet`). This works pretty well for the test themselves. We get a page with only a specific type of facet, and we can run test as normal. There will be work needed still to make storybook work correctly with the Shadow parts. The shadow parts are properly documented; It's just that when they get customized in Storybook UI, the styling output is not reflected correctly in the story. However, I prefer to continue with testing and revisit that at a later time. https://coveord.atlassian.net/browse/KIT-3257 --------- Co-authored-by: GitHub Actions Bot <>
- Loading branch information
Showing
9 changed files
with
319 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
...rc/components/commerce/facets/atomic-commerce-facet/atomic-commerce-facet.new.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { | ||
| wrapInCommerceInterface, | ||
| playExecuteFirstSearch, | ||
| playKeepOnlyFirstFacetOfType, | ||
| } from '@coveo/atomic/storybookUtils/commerce-interface-wrapper'; | ||
| 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 {html} from 'lit-html'; | ||
|
|
||
| const {play, decorator} = wrapInCommerceInterface({skipFirstSearch: true}); | ||
|
|
||
| const meta: Meta = { | ||
| component: 'atomic-commerce-facet', | ||
| title: 'Atomic-Commerce/Facet', | ||
| id: 'atomic-commerce-facet', | ||
| render: renderComponent, | ||
| decorators: [decorator], | ||
| parameters, | ||
| play, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const Default: Story = { | ||
| name: 'atomic-commerce-facet', | ||
| decorators: [ | ||
| (_) => { | ||
| return html`<div id="code-root"> | ||
| <atomic-commerce-facets></atomic-commerce-facets> | ||
| </div>`; | ||
| }, | ||
| ], | ||
| play: async (context) => { | ||
| await play(context); | ||
| await playExecuteFirstSearch(context); | ||
| playKeepOnlyFirstFacetOfType('atomic-commerce-facet', context); | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
...mic/src/components/commerce/facets/atomic-commerce-facet/e2e/atomic-commerce-facet.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import {test, expect} from './fixture'; | ||
|
|
||
| test.describe('default', () => { | ||
| test.beforeEach(async ({facet}) => { | ||
| await facet.load(); | ||
| }); | ||
|
|
||
| test('should be A11y compliant', async ({facet, makeAxeBuilder}) => { | ||
| await facet.hydrated.waitFor(); | ||
| const accessibilityResults = await makeAxeBuilder().analyze(); | ||
| expect(accessibilityResults.violations).toEqual([]); | ||
| }); | ||
|
|
||
| test('should allow to filter by selecting and deselecting a value', async ({ | ||
| facet, | ||
| }) => { | ||
| const facetValueLabel = facet.getFacetValue('Nike'); | ||
| const facetValueBtn = facet.getFacetValueButton('Nike'); | ||
|
|
||
| await expect(facetValueBtn).not.toBeChecked(); | ||
| await facetValueLabel.click(); | ||
|
|
||
| await expect(facetValueBtn).toBeChecked(); | ||
|
|
||
| await facetValueLabel.click(); | ||
| await expect(facetValueBtn).not.toBeChecked(); | ||
| }); | ||
|
|
||
| test('should allow to filter by selecting multiple values', async ({ | ||
| facet, | ||
| page, | ||
| }) => { | ||
| const firstValueBtn = facet.getFacetValueButton('Nike'); | ||
| const secondValueBtn = facet.getFacetValueButton('Adidas'); | ||
|
|
||
| await expect(firstValueBtn).not.toBeChecked(); | ||
| await expect(secondValueBtn).not.toBeChecked(); | ||
| await firstValueBtn.click(); | ||
| await secondValueBtn.click(); | ||
|
|
||
| await expect(firstValueBtn).toBeChecked(); | ||
| await expect(secondValueBtn).toBeChecked(); | ||
| await expect(page.getByText('Clear 2 filters')).toBeVisible(); | ||
| }); | ||
|
|
||
| test('should allow to deselect a filter with the clear button', async ({ | ||
| facet, | ||
| }) => { | ||
| const facetValueLabel = facet.getFacetValue('Nike'); | ||
|
|
||
| await expect(facet.clearFilter).toHaveCount(0); | ||
|
|
||
| await facetValueLabel.click(); | ||
|
|
||
| await expect(facet.clearFilter).toBeVisible(); | ||
| await facet.clearFilter.click(); | ||
|
|
||
| await expect(facet.clearFilter).toHaveCount(0); | ||
| }); | ||
|
|
||
| test('should allow to show more values and show less values', async ({ | ||
| facet, | ||
| page, | ||
| }) => { | ||
| await expect(facet.showMore).toBeVisible(); | ||
| await expect(facet.showLess).not.toBeVisible(); | ||
|
|
||
| await expect(page.getByRole('listitem')).toHaveCount(8); | ||
|
|
||
| await facet.showMore.click(); | ||
|
|
||
| await expect(facet.showLess).toBeVisible(); | ||
| await expect(page.getByRole('listitem')).toHaveCount(16); | ||
| await facet.showLess.click(); | ||
| await expect(page.getByRole('listitem')).toHaveCount(8); | ||
| await expect(facet.showLess).not.toBeVisible(); | ||
| }); | ||
|
|
||
| test('allow to search for a value', async ({facet, page}) => { | ||
| await facet.searchInput.fill('n'); | ||
|
|
||
| expect(await page.getByRole('listitem').count()).toBeGreaterThanOrEqual(8); | ||
| await expect(page.getByText('More matches for n')).toBeVisible(); | ||
| await facet.searchInput.fill('nike'); | ||
|
|
||
| await facet.getFacetValue('Nike').click(); | ||
|
|
||
| await expect(facet.getFacetValueButton('Nike')).toBeChecked(); | ||
| }); | ||
|
|
||
| test('allow to clear the search input', async ({facet}) => { | ||
| await facet.searchInput.fill('nike'); | ||
| await expect(facet.clearSearchInput).toBeVisible(); | ||
|
|
||
| await facet.clearSearchInput.click(); | ||
| await expect(facet.clearSearchInput).not.toBeVisible(); | ||
| await expect(facet.searchInput).toBeEmpty(); | ||
| }); | ||
|
|
||
| test('behave correct when searching for a value that does not exist', async ({ | ||
| facet, | ||
| page, | ||
| }) => { | ||
| await facet.searchInput.fill('non-existing-value'); | ||
|
|
||
| await expect( | ||
| page.getByText('No matches found for non-existing-value') | ||
| ).toBeVisible(); | ||
| }); | ||
| }); |
19 changes: 19 additions & 0 deletions
19
packages/atomic/src/components/commerce/facets/atomic-commerce-facet/e2e/fixture.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import {test as base} from '@playwright/test'; | ||
| import { | ||
| AxeFixture, | ||
| makeAxeBuilder, | ||
| } from '../../../../../../playwright-utils/base-fixture'; | ||
| import {FacetPageObject} from './page-object'; | ||
|
|
||
| type MyFixtures = { | ||
| facet: FacetPageObject; | ||
| }; | ||
|
|
||
| export const test = base.extend<MyFixtures & AxeFixture>({ | ||
| makeAxeBuilder, | ||
| facet: async ({page}, use) => { | ||
| await use(new FacetPageObject(page)); | ||
| }, | ||
| }); | ||
|
|
||
| export {expect} from '@playwright/test'; |
40 changes: 40 additions & 0 deletions
40
packages/atomic/src/components/commerce/facets/atomic-commerce-facet/e2e/page-object.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import type {Page} from '@playwright/test'; | ||
| import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; | ||
|
|
||
| export class FacetPageObject extends BasePageObject<'atomic-commerce-facet'> { | ||
| constructor(page: Page) { | ||
| super(page, 'atomic-commerce-facet'); | ||
| } | ||
|
|
||
| get title() { | ||
| return this.page.getByText('Brand'); | ||
| } | ||
|
|
||
| get searchInput() { | ||
| return this.page.getByPlaceholder('Search'); | ||
| } | ||
|
|
||
| get clearSearchInput() { | ||
| return this.page.getByRole('button', {name: 'Clear'}); | ||
| } | ||
|
|
||
| getFacetValue(value: string) { | ||
| return this.page.getByRole('listitem').filter({hasText: value}); | ||
| } | ||
|
|
||
| getFacetValueButton(value: string) { | ||
| return this.page.getByLabel(`Inclusion filter on ${value}`); | ||
| } | ||
|
|
||
| get clearFilter() { | ||
| return this.page.getByRole('button').filter({hasText: /Clear.*filter/}); | ||
| } | ||
|
|
||
| get showMore() { | ||
| return this.page.getByLabel('Show more values'); | ||
| } | ||
|
|
||
| get showLess() { | ||
| return this.page.getByLabel('Show less values'); | ||
| } | ||
| } |
Oops, something went wrong.