diff --git a/packages/atomic/cypress/e2e/facets/facet/facet.2.cypress.ts b/packages/atomic/cypress/e2e/facets/facet/facet.2.cypress.ts index a33d40846ca..51ddb1972ad 100644 --- a/packages/atomic/cypress/e2e/facets/facet/facet.2.cypress.ts +++ b/packages/atomic/cypress/e2e/facets/facet/facet.2.cypress.ts @@ -10,7 +10,6 @@ import {breadboxComponent, BreadboxSelectors} from '../../breadbox-selectors'; import * as CommonAssertions from '../../common-assertions'; import { pressLabelButton, - pressShowLess, pressShowMore, selectIdleCheckboxValueAt, typeFacetSearchQuery, @@ -23,105 +22,6 @@ import {facetComponent, FacetSelectors} from './facet-selectors'; // This is the second half of the facet test suite. It was split in two to speed up the test execution. describe('Facet Test Suite 2', () => { - describe('when selecting the "Show more" button', () => { - function setupSelectShowMore(sortCriteria?: string) { - new TestFixture() - .with( - addFacet({ - field, - label, - ...(sortCriteria && {'sort-criteria': sortCriteria}), - }) - ) - .init(); - pressShowMore(FacetSelectors); - } - - describe('verify rendering', () => { - beforeEach(() => setupSelectShowMore('automatic')); - - CommonFacetAssertions.assertDisplayShowMoreButton(FacetSelectors, true); - CommonFacetAssertions.assertDisplayShowLessButton(FacetSelectors, true); - FacetAssertions.assertValuesSortedAlphanumerically(); - CommonFacetAssertions.assertNumberOfIdleCheckboxValues( - FacetSelectors, - defaultNumberOfValues * 2 - ); - CommonFacetAssertions.assertFocusCheckboxValue(FacetSelectors, 0); - }); - - describe("when the sort order isn't automatic", () => { - beforeEach(() => setupSelectShowMore('alphanumeric')); - - CommonFacetAssertions.assertFocusCheckboxValue( - FacetSelectors, - defaultNumberOfValues - ); - }); - - describe('verify analytics', () => { - beforeEach(() => setupSelectShowMore()); - - FacetAssertions.assertLogFacetShowMore(field); - it('should include analytics in the v2 call', async () => { - cy.wait(TestFixture.interceptAliases.Search).should((firstSearch) => { - expect(firstSearch.request.body).to.have.property('analytics'); - const analyticsBody = firstSearch.request.body.analytics; - expect(analyticsBody).to.have.property('eventType', 'facet'); - expect(analyticsBody).to.have.property( - 'eventValue', - 'showMoreFacetResults' - ); - expect(analyticsBody.customData).to.have.property( - 'facetField', - field - ); - }); - }); - }); - - describe('when there\'s no more "Show more" button', () => { - function setupRepeatShowMore() { - new TestFixture().with(addFacet({field: 'month', label})).init(); - FacetSelectors.showMoreButton().click(); - cy.wait(TestFixture.interceptAliases.Search); - } - beforeEach(setupRepeatShowMore); - - describe('verify rendering', () => { - CommonFacetAssertions.assertDisplayShowMoreButton( - FacetSelectors, - false - ); - CommonFacetAssertions.assertDisplayShowLessButton(FacetSelectors, true); - }); - }); - - describe('when selecting the "Show less" button', () => { - function setupSelectShowLess() { - setupSelectShowMore(); - pressShowLess(FacetSelectors); - } - beforeEach(setupSelectShowLess); - - describe('verify rendering', () => { - CommonFacetAssertions.assertDisplayShowMoreButton(FacetSelectors, true); - CommonFacetAssertions.assertDisplayShowLessButton( - FacetSelectors, - false - ); - CommonFacetAssertions.assertNumberOfIdleCheckboxValues( - FacetSelectors, - defaultNumberOfValues - ); - }); - - describe('verify analytics', () => { - FacetAssertions.assertLogFacetShowLess(field); - }); - }); - }); - describe('when selecting the label button to collapse', () => { function setupSelectLabelCollapse() { new TestFixture().with(addFacet({field, label})).init(); 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 9791adfdd08..f8178ebb4f3 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 @@ -44,3 +44,13 @@ export const LowFacetValues: Story = { }, decorators: [facetDecorator], }; + +export const monthFacet: Story = { + tags: ['test'], + args: { + 'attributes-field': 'month', + 'attributes-label': 'Month', + 'attributes-number-of-values': 2, + }, + decorators: [facetDecorator], +}; 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 index 2cac8250862..fa156bb271a 100644 --- 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 @@ -1,30 +1,153 @@ import {test, expect} from './fixture'; -test.describe('when clicking facet search "More matches for"', () => { +test.describe('when selecting the facet search "More matches for" button', () => { 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 facet.facetSearch.click(); + await facet.facetSearch.pressSequentially('p'); await expect .poll(async () => { - return await facet.getFacetValue.count(); + return await facet.facetValue.count(); }) .toBeGreaterThanOrEqual(2); await facet.facetSearchMoreMatchesFor.click(); await expect .poll(async () => { - return await facet.getFacetValue.count(); + return await facet.facetValue.count(); }) .toBeGreaterThanOrEqual(4); await facet.facetSearchMoreMatchesFor.click(); await expect .poll(async () => { - return await facet.getFacetValue.count(); + return await facet.facetValue.count(); }) .toBeGreaterThanOrEqual(6); }); }); + +test.describe('when the "Show more" button has not been selected', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'month-facet'}); + await facet.hydrated.waitFor(); + }); + + test('should be accessible', async ({makeAxeBuilder}) => { + const accessibilityResults = await makeAxeBuilder().analyze(); + expect(accessibilityResults.violations.length).toEqual(0); + }); + + test('should not display the "Show less" button', async ({facet}) => { + await expect(facet.showLessButton).toBeHidden(); + }); + + test.describe('when additional facet values are available', () => { + test('should display the "Show more" button', async ({facet}) => { + await expect(facet.showMoreButton).toBeVisible(); + }); + + test('should have the configured number of facet values', async ({ + facet, + }) => { + await expect.poll(async () => await facet.facetValue.count()).toBe(2); + }); + }); + + test.describe('when no additional facet values are available', () => { + test.beforeEach(async ({facet}) => { + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + }); + + test('should not display the "Show more" button', async ({facet}) => { + await expect(facet.showMoreButton).toBeHidden(); + }); + + test('should have as many as the configured number of facet values', async ({ + facet, + }) => { + await expect.poll(async () => await facet.facetValue.count()).toBe(12); + }); + }); +}); + +test.describe('when the "Show more" button has been selected', () => { + test.beforeEach(async ({facet}) => { + await facet.load({story: 'month-facet'}); + await facet.showMoreButton.click(); + }); + + test('should be accessible', async ({makeAxeBuilder}) => { + const accessibilityResults = await makeAxeBuilder().analyze(); + expect(accessibilityResults.violations.length).toEqual(0); + }); + + test('should have facet values sorted alphabetically', async ({facet}) => { + await expect.poll(async () => await facet.facetValue.count()).toBe(4); + const values = await facet.facetValue.allTextContents(); + const sortedValues = [...values].sort(); + expect(values).toEqual(sortedValues); + }); + + test.describe('when additional facet values are available', () => { + test('should display the "Show more" button', async ({facet}) => { + await expect(facet.showMoreButton).toBeVisible(); + }); + + test('should have the configured number of facet values * (1 + the number of times the button was selected)', async ({ + facet, + }) => { + await facet.showMoreButton.click(); + await expect.poll(async () => await facet.facetValue.count()).toBe(6); + }); + }); + + test.describe('when no additional facet values are available', () => { + test.beforeEach(async ({facet}) => { + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + await facet.showMoreButton.click(); + }); + + test('should have the total number of available facet values', async ({ + facet, + }) => { + await expect.poll(async () => await facet.facetValue.count()).toBe(12); + }); + + test('should not display the "Show more" button', async ({facet}) => { + await expect(facet.showMoreButton).toBeHidden(); + }); + + test('should display the "Show less" button', async ({facet}) => { + await expect(facet.showLessButton).toBeVisible(); + }); + }); + + test.describe('when the "Show less" button is selected', () => { + test.beforeEach(async ({facet}) => { + await facet.showLessButton.click(); + }); + + test('should not display the "Show less" button', async ({facet}) => { + await expect(facet.showLessButton).toBeHidden(); + }); + + test('should display the "Show more" button', async ({facet}) => { + await expect(facet.showMoreButton).toBeVisible(); + }); + + test('should have the configured number of facet values', async ({ + facet, + }) => { + await expect.poll(async () => await facet.facetValue.count()).toBe(2); + }); + }); +}); 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 index 4959ac4980f..0786b90e640 100644 --- 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 @@ -10,15 +10,23 @@ export class AtomicFacetPageObject extends BasePageObject<'atomic-facet'> { return this.page.getByRole('button', {name: /Expand the \w* facet/}); } - get getFacetSearch() { + get facetSearch() { return this.page.getByLabel('Search'); } - get getFacetValue() { - return this.page.locator('[part="value-checkbox"]'); + get facetValue() { + return this.page.locator('ul[part="values"] > li'); } get facetSearchMoreMatchesFor() { return this.page.getByRole('button', {name: 'More matches for p'}); } + + get showMoreButton() { + return this.page.getByRole('button', {name: 'Show more'}); + } + + get showLessButton() { + return this.page.getByRole('button', {name: 'Show less'}); + } } diff --git a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts index aac82e23626..76257b3f907 100644 --- a/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts +++ b/packages/atomic/src/components/search/tabs/atomic-tab-manager/e2e/atomic-tab-manager.e2e.ts @@ -42,7 +42,7 @@ test.describe('AtomicTabManager', () => { test.describe('should change other component visibility', async () => { test.beforeEach(async ({facets}) => { - await facets.getFacetValue.first().waitFor({state: 'visible'}); + await facets.facetValue.first().waitFor({state: 'visible'}); }); test.fixme('facets', async ({tabManager}) => { const includedFacets = await tabManager.includedFacet.all(); @@ -134,7 +134,7 @@ test.describe('AtomicTabManager', () => { test.describe('when selecting previous tab', () => { test.beforeEach(async ({tabManager, facets}) => { await tabManager.tabButtons('All').click(); - await facets.getFacetValue.first().waitFor({state: 'visible'}); + await facets.facetValue.first().waitFor({state: 'visible'}); }); test.describe('should change other component visibility', async () => {