-
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.
fix(atomic): reset dependent numeric / date facet input when parent f…
…acet is cleared (#4851) https://coveord.atlassian.net/browse/KIT-3746 --------- Co-authored-by: GitHub Actions Bot <>
- Loading branch information
1 parent
2955a0c
commit b30b8a2
Showing
12 changed files
with
448 additions
and
55 deletions.
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
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
104 changes: 104 additions & 0 deletions
104
.../atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-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,104 @@ | ||
| import {test, expect} from './fixture'; | ||
|
|
||
| test.describe('when a "depends-on" prop is provided', () => { | ||
| test.beforeEach(async ({facet}) => { | ||
| await facet.load({story: 'with-depends-on'}); | ||
| await facet.facet.waitFor({state: 'visible'}); | ||
| }); | ||
|
|
||
| test('when the specified dependency is selected in the parent facet, dependent facet should be visible', async ({ | ||
| facet, | ||
| }) => { | ||
| expect(facet.facet).toBeVisible(); | ||
| }); | ||
|
|
||
| test.describe('when the specified dependency is cleared from the parent facet', () => { | ||
| test('dependent facet should not be visible', async ({facet}) => { | ||
| const parent = facet.page.getByTestId('parent-facet'); | ||
| await parent.getByLabel('Inclusion filter on YouTubeVideo').click(); | ||
|
|
||
| expect(facet.facet).not.toBeVisible(); | ||
| }); | ||
|
|
||
| test('should clear previously selected dependent facet range', async ({ | ||
| facet, | ||
| }) => { | ||
| await facet.facetValues.first().click(); | ||
|
|
||
| const breadbox = facet.page.getByTestId('breadbox'); | ||
| expect(breadbox).toBeVisible(); | ||
|
|
||
| const parent = facet.page.getByTestId('parent-facet'); | ||
| await parent.getByLabel('Inclusion filter on YouTubeVideo').click(); | ||
|
|
||
| await breadbox.waitFor({state: 'hidden'}); | ||
| expect(breadbox).not.toBeVisible(); | ||
| }); | ||
| test('should clear previously selected dependent facet input range', async ({ | ||
| facet, | ||
| }) => { | ||
| await facet.facetInputStart.fill('900000'); | ||
| await facet.facetInputEnd.fill('90000000'); | ||
| await facet.facetApplyButton.click(); | ||
|
|
||
| const breadbox = facet.page.getByTestId('breadbox'); | ||
| expect(breadbox).toBeVisible(); | ||
|
|
||
| const parent = facet.page.getByTestId('parent-facet'); | ||
| await parent.getByLabel('Inclusion filter on YouTubeVideo').click(); | ||
|
|
||
| await breadbox.waitFor({state: 'hidden'}); | ||
| expect(breadbox).not.toBeVisible(); | ||
| }); | ||
| }); | ||
|
|
||
| test.describe('when the specified dependency is cleared from the breadbox', () => { | ||
| test('dependent facet should not be visible', async ({facet}) => { | ||
| const breadbox = facet.page.getByTestId('breadbox'); | ||
| await breadbox | ||
| .getByLabel( | ||
| 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo' | ||
| ) | ||
| .click(); | ||
|
|
||
| expect(facet.facet).not.toBeVisible(); | ||
| }); | ||
|
|
||
| test('should clear previously selected dependent facet range', async ({ | ||
| facet, | ||
| }) => { | ||
| await facet.facetValues.first().click(); | ||
|
|
||
| const breadbox = facet.page.getByTestId('breadbox'); | ||
| expect(breadbox).toBeVisible(); | ||
|
|
||
| await breadbox | ||
| .getByLabel( | ||
| 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo' | ||
| ) | ||
| .click(); | ||
|
|
||
| await breadbox.waitFor({state: 'hidden'}); | ||
| expect(breadbox).not.toBeVisible(); | ||
| }); | ||
| test('should clear previously selected dependent facet input range', async ({ | ||
| facet, | ||
| }) => { | ||
| await facet.facetInputStart.fill('900000'); | ||
| await facet.facetInputEnd.fill('90000000'); | ||
| await facet.facetApplyButton.click(); | ||
|
|
||
| const breadbox = facet.page.getByTestId('breadbox'); | ||
| expect(breadbox).toBeVisible(); | ||
|
|
||
| await breadbox | ||
| .getByLabel( | ||
| 'Remove inclusion filter on File Type (Parent facet): YouTubeVideo' | ||
| ) | ||
| .click(); | ||
|
|
||
| await breadbox.waitFor({state: 'hidden'}); | ||
| expect(breadbox).not.toBeVisible(); | ||
| }); | ||
| }); | ||
| }); |
19 changes: 19 additions & 0 deletions
19
packages/atomic/src/components/search/facets/atomic-numeric-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 {AtomicNumericFacetPageObject as Facet} from './page-object'; | ||
|
|
||
| type MyFixture = { | ||
| facet: Facet; | ||
| }; | ||
|
|
||
| export const test = base.extend<MyFixture & AxeFixture>({ | ||
| makeAxeBuilder, | ||
| facet: async ({page}, use) => { | ||
| await use(new Facet(page)); | ||
| }, | ||
| }); | ||
|
|
||
| export {expect} from '@playwright/test'; |
32 changes: 32 additions & 0 deletions
32
packages/atomic/src/components/search/facets/atomic-numeric-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,32 @@ | ||
| import {Page} from '@playwright/test'; | ||
| import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; | ||
|
|
||
| export class AtomicNumericFacetPageObject extends BasePageObject<'atomic-numeric-facet'> { | ||
| constructor(page: Page) { | ||
| super(page, 'atomic-numeric-facet'); | ||
| } | ||
|
|
||
| get facet() { | ||
| return this.page.locator('atomic-numeric-facet'); | ||
| } | ||
|
|
||
| get facetInputStart() { | ||
| return this.facet.getByLabel('Enter a minimum numerical value'); | ||
| } | ||
|
|
||
| get facetInputEnd() { | ||
| return this.facet.getByLabel('Enter a maximum numerical value'); | ||
| } | ||
|
|
||
| get facetApplyButton() { | ||
| return this.facet.getByLabel('Apply custom numerical values'); | ||
| } | ||
|
|
||
| get facetClearFilterButton() { | ||
| return this.facet.getByRole('button').filter({hasText: 'Clear filter'}); | ||
| } | ||
|
|
||
| get facetValues() { | ||
| return this.facet.locator('[part="value-checkbox"]'); | ||
| } | ||
| } |
Oops, something went wrong.