test(atomic): rewrite "show more" facet tests in playwright

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();

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],
+};

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);
+    });
+  });
+});

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'});
+  }
 }

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 () => {