From 5ba9101d6401e483f5204149fbe3da6d11e58174 Mon Sep 17 00:00:00 2001 From: ylakhdar Date: Thu, 3 Oct 2024 16:16:12 -0400 Subject: [PATCH] fix(atomic): dim unselected facet value (#4410) Make sure to know which facet value link is selected. (applies only to rating facets) when no facet value is selected image When a facet value is selected image https://coveord.atlassian.net/browse/KIT-3472 --- .../atomic-rating-facet.new.stories.tsx | 10 ++++++ .../atomic-rating-facet.tsx | 2 ++ .../e2e/atomic-rating-facet.e2e.ts | 33 +++++++++++++++++++ .../facets/atomic-rating-facet/e2e/fixture.ts | 19 +++++++++++ .../atomic-rating-facet/e2e/page-object.ts | 29 ++++++++++++++++ 5 files changed, 93 insertions(+) create mode 100644 packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/atomic-rating-facet.e2e.ts create mode 100644 packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/fixture.ts create mode 100644 packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/page-object.ts diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.new.stories.tsx index 6652f3c940a..267b0ceedc2 100644 --- a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.new.stories.tsx +++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.new.stories.tsx @@ -34,3 +34,13 @@ export const Default: Story = { }, decorators: [facetDecorator], }; + +export const DisplayAsLink: Story = { + name: 'atomic-rating-facet', + tags: ['test'], + args: { + 'attributes-display-values-as': 'link', + 'attributes-field': 'snrating', + }, + decorators: [facetDecorator], +}; diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx index d3a1b0e261e..e3e484bdd3d 100644 --- a/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx +++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/atomic-rating-facet.tsx @@ -359,6 +359,7 @@ export class AtomicRatingFacet implements InitializableComponent { private renderValue(facetValue: NumericFacetValue, onClick: () => void) { const displayValue = this.formatFacetValue(facetValue); const isSelected = facetValue.state === 'selected'; + const shouldBeDimmed = this.facetState.hasActiveValues && !isSelected; switch (this.displayValuesAs) { case 'checkbox': return ( @@ -380,6 +381,7 @@ export class AtomicRatingFacet implements InitializableComponent { isSelected={isSelected} i18n={this.bindings.i18n} onClick={onClick} + class={shouldBeDimmed ? 'opacity-80' : undefined} > {this.ratingContent(facetValue)} diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/atomic-rating-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/atomic-rating-facet.e2e.ts new file mode 100644 index 00000000000..ae16b4feb80 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/atomic-rating-facet.e2e.ts @@ -0,0 +1,33 @@ +import {test, expect} from './fixture'; + +test.describe('with facet values as link', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'display-as-link'}); + }); + + test.describe('when no value is selected', () => { + test('should not dim any facet values', async ({facet}) => { + const facetValues = await facet.facetValues.all(); + for (let i = 0; i < facetValues.length; i++) { + await expect(facetValues[i]).toHaveCSS('opacity', '1'); + } + }); + }); + + test.describe('when selecting a value', () => { + test.beforeEach(async ({facet}) => { + await facet.getFacetValueButtonByPosition(0).click(); + }); + + test('should dim unselected facet values', async ({facet}) => { + const facetValues = await facet.facetValues.all(); + for (let i = 1; i < facetValues.length; i++) { + await expect(facetValues[i]).toHaveCSS('opacity', '1'); + } + }); + + test('should not dim selected facet', async ({facet}) => { + await expect(facet.facetValues.nth(0)).toHaveCSS('opacity', '1'); + }); + }); +}); diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/fixture.ts b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/fixture.ts new file mode 100644 index 00000000000..d7510806481 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/fixture.ts @@ -0,0 +1,19 @@ +import {test as base} from '@playwright/test'; +import { + AxeFixture, + makeAxeBuilder, +} from '../../../../../../playwright-utils/base-fixture'; +import {AtomicRatingFacetPageObject as Facet} from './page-object'; + +type MyFixture = { + facet: Facet; +}; + +export const test = base.extend({ + makeAxeBuilder, + facet: async ({page}, use) => { + await use(new Facet(page)); + }, +}); + +export {expect} from '@playwright/test'; diff --git a/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/page-object.ts new file mode 100644 index 00000000000..af138d634f3 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-rating-facet/e2e/page-object.ts @@ -0,0 +1,29 @@ +import type {Page} from '@playwright/test'; +import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; + +export class AtomicRatingFacetPageObject extends BasePageObject<'atomic-rating-facet'> { + constructor(page: Page) { + super(page, 'atomic-rating-facet'); + } + + getFacetValueByPosition(valuePosition: number) { + return this.facetValues.nth(valuePosition); + } + + getFacetValueButtonByPosition(valuePosition: number) { + const value = this.getFacetValueByPosition(valuePosition); + return value.locator('button'); + } + + get clearFilter() { + return this.page.getByRole('button').filter({hasText: /Clear.*filter/}); + } + + get getSelectedFacetValueLink() { + return this.page.locator('[part="value-link value-link-selected"]'); + } + + get facetValues() { + return this.page.getByRole('listitem'); + } +}