diff --git a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx index 987e043e1b2..5766f63e4ed 100644 --- a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx +++ b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx @@ -1,14 +1,17 @@ import {FunctionalComponent, h} from '@stencil/core'; import escape from 'escape-html'; import {i18n} from 'i18next'; +import {Button} from '../../button'; interface FacetSearchMatchesProps { i18n: i18n; query: string; numberOfMatches: number; hasMoreMatches: boolean; + showMoreMatches?: () => void; } +//TODO: change to noMatchesFound & remove the key in https://coveord.atlassian.net/browse/KIT-3368 function matchesFound( key: 'more-matches-for' | 'no-matches-found-for', query: string, @@ -22,13 +25,21 @@ function matchesFound( }); } +function clickableMoreMatchesFound(query: string, i18n: i18n) { + return i18n.t('more-matches-for', { + query: `${escape( + query + )}`, + interpolation: {escapeValue: false}, + }); +} + export const FacetSearchMatches: FunctionalComponent< FacetSearchMatchesProps > = (props) => { if (!props.numberOfMatches) { return (
- {/* file deepcode ignore ReactSetInnerHtml: This is not React code */}
+ +
+ ); + } return (
(this.isCollapsed = !this.isCollapsed)} headerRef={(el) => this.focusTargets.header.setTarget(el)} > - - { - if (value === '') { - this.facet.facetSearch.clear(); - return; - } - this.facet.facetSearch.updateCaptions( - getFieldCaptions(this.field, this.bindings.i18n) - ); - this.facet.facetSearch.updateText(value); - this.facet.facetSearch.search(); - }} - onClear={() => this.facet.facetSearch.clear()} - query={this.facetState.facetSearch.query} - /> - - {shouldDisplaySearchResults(this.facetState.facetSearch) - ? [this.renderSearchResults(), this.renderMatches()] - : [this.renderValues(), this.renderShowMoreLess()]} + + {[this.renderValues(), this.renderShowMoreLess()]} ) : ( ( - this.facet.facetSearch.exclude(value)} - onSelect={() => this.facet.facetSearch.select(value)} - facetValue={value.rawValue} - /> - )) - ); - } - private renderValues() { return this.renderValuesContainer( this.facet.state.values.map((value, i) => { @@ -330,17 +285,6 @@ export class AtomicInsightFacet ); } - private renderMatches() { - return ( - - ); - } - private get activeValues() { return this.facet.state.values.filter(({state}) => state !== 'idle'); } diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.new.stories.tsx index 152483cea72..114975f31c2 100644 --- a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.new.stories.tsx +++ b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.new.stories.tsx @@ -28,3 +28,12 @@ export const Default: Story = { 'attributes-sort-criteria': 'occurrences', }, }; + +export const LowFacetValues: Story = { + tags: ['test'], + args: { + 'attributes-field': 'geographicalhierarchy', + 'attributes-number-of-values': 2, + 'attributes-with-search': true, + }, +}; diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx index 21b7f4bb6a3..e151f4ea814 100644 --- a/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx +++ b/packages/atomic/src/components/search/facets/atomic-category-facet/atomic-category-facet.tsx @@ -520,6 +520,7 @@ export class AtomicCategoryFacet implements InitializableComponent { query={this.facetState.facetSearch.query} numberOfMatches={this.facetState.facetSearch.values.length} hasMoreMatches={this.facetState.facetSearch.moreValuesAvailable} + showMoreMatches={() => this.facet.facetSearch.showMoreResults()} > ); } diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/atomic-category-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/atomic-category-facet.e2e.ts new file mode 100644 index 00000000000..2cac8250862 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/atomic-category-facet.e2e.ts @@ -0,0 +1,30 @@ +import {test, expect} from './fixture'; + +test.describe('when clicking facet search "More matches for"', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'low-facet-values'}); + }); + test('should display an increasing number of matches', async ({facet}) => { + await facet.getFacetSearch.click(); + await facet.getFacetSearch.pressSequentially('p'); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(2); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(4); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(6); + }); +}); diff --git a/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/fixture.ts b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/fixture.ts new file mode 100644 index 00000000000..30f3f61cf05 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/fixture.ts @@ -0,0 +1,19 @@ +import {test as base} from '@playwright/test'; +import { + AxeFixture, + makeAxeBuilder, +} from '../../../../../../playwright-utils/base-fixture'; +import {AtomicCategoryFacetPageObject 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-category-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/page-object.ts new file mode 100644 index 00000000000..44d952c5506 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-category-facet/e2e/page-object.ts @@ -0,0 +1,20 @@ +import type {Page} from '@playwright/test'; +import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; + +export class AtomicCategoryFacetPageObject extends BasePageObject<'atomic-category-facet'> { + constructor(page: Page) { + super(page, 'atomic-category-facet'); + } + + get getFacetSearch() { + return this.page.getByLabel('Search'); + } + + get getFacetValue() { + return this.page.locator('[part="search-result"]'); + } + + get facetSearchMoreMatchesFor() { + return this.page.getByRole('button', {name: 'More matches for p'}); + } +} diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.new.stories.tsx index 69a8dc08846..45b113c6fad 100644 --- a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.new.stories.tsx +++ b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.new.stories.tsx @@ -118,3 +118,12 @@ export const Default: Story = { }, decorators: [facetDecorator], }; + +export const LowFacetValues: Story = { + tags: ['test'], + args: { + 'attributes-field': 'objecttype', + 'attributes-number-of-values': 2, + }, + decorators: [facetDecorator], +}; diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx index 3a7ab7e4f5e..9134cc6ad53 100644 --- a/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx +++ b/packages/atomic/src/components/search/facets/atomic-color-facet/atomic-color-facet.tsx @@ -509,6 +509,7 @@ export class AtomicColorFacet implements InitializableComponent { query={this.facetState.facetSearch.query} numberOfMatches={this.facetState.facetSearch.values.length} hasMoreMatches={this.facetState.facetSearch.moreValuesAvailable} + showMoreMatches={() => this.facet.facetSearch.showMoreResults()} > ); } diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/atomic-color-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/atomic-color-facet.e2e.ts new file mode 100644 index 00000000000..2cac8250862 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/atomic-color-facet.e2e.ts @@ -0,0 +1,30 @@ +import {test, expect} from './fixture'; + +test.describe('when clicking facet search "More matches for"', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'low-facet-values'}); + }); + test('should display an increasing number of matches', async ({facet}) => { + await facet.getFacetSearch.click(); + await facet.getFacetSearch.pressSequentially('p'); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(2); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(4); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(6); + }); +}); diff --git a/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/fixture.ts b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/fixture.ts new file mode 100644 index 00000000000..17e65a6aab7 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/fixture.ts @@ -0,0 +1,19 @@ +import {test as base} from '@playwright/test'; +import { + AxeFixture, + makeAxeBuilder, +} from '../../../../../../playwright-utils/base-fixture'; +import {AtomicColorFacetPageObject 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-color-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/page-object.ts new file mode 100644 index 00000000000..f271f429ed5 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-color-facet/e2e/page-object.ts @@ -0,0 +1,20 @@ +import type {Page} from '@playwright/test'; +import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; + +export class AtomicColorFacetPageObject extends BasePageObject<'atomic-color-facet'> { + constructor(page: Page) { + super(page, 'atomic-color-facet'); + } + + get getFacetSearch() { + return this.page.getByLabel('Search'); + } + + get getFacetValue() { + return this.page.locator('[part="value-box"]'); + } + + get facetSearchMoreMatchesFor() { + return this.page.getByRole('button', {name: 'More matches for p'}); + } +} diff --git a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx index 25bebdb52a7..32eb8e63a37 100644 --- a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx +++ b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx @@ -26,3 +26,12 @@ export const Default: Story = { }, decorators: [facetDecorator], }; + +export const LowFacetValues: Story = { + tags: ['test'], + args: { + 'attributes-field': 'objecttype', + 'attributes-number-of-values': 2, + }, + decorators: [facetDecorator], +}; diff --git a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx index 684337185f4..665eceebe40 100644 --- a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx +++ b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.tsx @@ -458,6 +458,7 @@ export class AtomicFacet implements InitializableComponent { query={this.facet.state.facetSearch.query} numberOfMatches={this.facet.state.facetSearch.values.length} hasMoreMatches={this.facet.state.facetSearch.moreValuesAvailable} + showMoreMatches={() => this.facet.facetSearch.showMoreResults()} > ); } diff --git a/packages/atomic/src/components/search/facets/atomic-facet/e2e/atomic-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-facet/e2e/atomic-facet.e2e.ts new file mode 100644 index 00000000000..2cac8250862 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-facet/e2e/atomic-facet.e2e.ts @@ -0,0 +1,30 @@ +import {test, expect} from './fixture'; + +test.describe('when clicking facet search "More matches for"', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'low-facet-values'}); + }); + test('should display an increasing number of matches', async ({facet}) => { + await facet.getFacetSearch.click(); + await facet.getFacetSearch.pressSequentially('p'); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(2); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(4); + + await facet.facetSearchMoreMatchesFor.click(); + await expect + .poll(async () => { + return await facet.getFacetValue.count(); + }) + .toBeGreaterThanOrEqual(6); + }); +}); diff --git a/packages/atomic/src/components/search/facets/atomic-facet/e2e/fixture.ts b/packages/atomic/src/components/search/facets/atomic-facet/e2e/fixture.ts new file mode 100644 index 00000000000..ed9cbab2404 --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-facet/e2e/fixture.ts @@ -0,0 +1,19 @@ +import {test as base} from '@playwright/test'; +import { + AxeFixture, + makeAxeBuilder, +} from '../../../../../../playwright-utils/base-fixture'; +import {AtomicFacetPageObject 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-facet/e2e/page-object.ts b/packages/atomic/src/components/search/facets/atomic-facet/e2e/page-object.ts new file mode 100644 index 00000000000..e15ab87b7df --- /dev/null +++ b/packages/atomic/src/components/search/facets/atomic-facet/e2e/page-object.ts @@ -0,0 +1,20 @@ +import type {Page} from '@playwright/test'; +import {BasePageObject} from '../../../../../../playwright-utils/base-page-object'; + +export class AtomicFacetPageObject extends BasePageObject<'atomic-facet'> { + constructor(page: Page) { + super(page, 'atomic-facet'); + } + + get getFacetSearch() { + return this.page.getByLabel('Search'); + } + + get getFacetValue() { + return this.page.locator('[part="value-checkbox"]'); + } + + get facetSearchMoreMatchesFor() { + return this.page.getByRole('button', {name: 'More matches for p'}); + } +}