From 274d68323bf19df2beba6720301a8873ff2f9438 Mon Sep 17 00:00:00 2001
From: Caine Rotherham <rotherham.c@gmail.com>
Date: Thu, 31 Oct 2024 11:24:14 +0100
Subject: [PATCH] chore: Fix product search e2e tests

---
 .../accessibility/keyboard-navigation.e2e.cy.ts |  7 +++++++
 .../product-search-product-type-flow.e2e.cy.ts  | 17 +++++++++++++----
 .../product-search-store-flow.e2e.cy.ts         |  9 +++++++++
 .../cypress/helpers/product-search.ts           |  4 ++--
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/keyboard-navigation.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/keyboard-navigation.e2e.cy.ts
index 0beefe51843..e5e5f7f784c 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/keyboard-navigation.e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/keyboard-navigation.e2e.cy.ts
@@ -44,6 +44,13 @@ describe('Kayboard navigation', () => {
 
   context('Facet component', () => {
     beforeEach(() => {
+      // TODO: No longer needed to toggle a11yTabComponent feature when set to true
+      // by default.
+      cy.cxConfig({
+        features: {
+          a11yTabComponent: true,
+        },
+      });
       cy.visit('/Brands/all/c/brands');
       cy.get('cx-facet-list button.tab-btn').first().as('facetHeader');
       cy.get('cx-facet a').first().as('firstFacetOption');
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-product-type-flow.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-product-type-flow.e2e.cy.ts
index 207a830790d..7c1068b19f7 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-product-type-flow.e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-product-type-flow.e2e.cy.ts
@@ -20,6 +20,15 @@ context('Product search product type flow', () => {
   viewportContext(['mobile', 'desktop'], () => {
     before(() => {
       cy.window().then((win) => win.sessionStorage.clear());
+
+      // TODO: No longer needed to toggle a11yTabComponent feature when set to true
+      // by default.
+      cy.cxConfig({
+        features: {
+          a11yTabComponent: true,
+        },
+      });
+
       cy.visit('/');
     });
 
@@ -63,7 +72,7 @@ context('Product search product type flow', () => {
         assertNumberOfProducts(`@${QUERY_ALIAS.SONY}`, `"${category}"`);
 
         // Filter by brand
-        clickFacet('Brand');
+        clickFacet('Brand', true);
 
         cy.wait(`@${QUERY_ALIAS.BRAND_PAGE}`)
           .its('response.statusCode')
@@ -80,7 +89,7 @@ context('Product search product type flow', () => {
         assertNumberOfProducts(`@${QUERY_ALIAS.SONY}`, `"${category}"`);
 
         // Filter by price
-        clickFacet('Price');
+        clickFacet('Price', true);
 
         cy.wait(`@${QUERY_ALIAS.PRICE_DSC_FILTER}`)
           .its('response.statusCode')
@@ -103,7 +112,7 @@ context('Product search product type flow', () => {
         );
 
         // Filter by category
-        clickFacet('Category');
+        clickFacet('Category', true);
 
         cy.wait(`@${QUERY_ALIAS.CATEGORY_FILTER}`)
           .its('response.statusCode')
@@ -125,7 +134,7 @@ context('Product search product type flow', () => {
           `"${category}"`
         );
 
-        clickFacet('Color');
+        clickFacet('Color', true);
 
         cy.wait(`@${QUERY_ALIAS.COLOR_FILTER}`)
           .its('response.statusCode')
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-store-flow.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-store-flow.e2e.cy.ts
index e23ddfb215c..4b9b779a179 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-store-flow.e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/regression/product-search/product-search-store-flow.e2e.cy.ts
@@ -22,6 +22,15 @@ context('Product search store flow', () => {
   viewportContext(['desktop', 'mobile'], () => {
     before(() => {
       cy.window().then((win) => win.sessionStorage.clear());
+
+      // TODO: No longer needed to toggle a11yTabComponent feature when set to true
+      // by default.
+      cy.cxConfig({
+        features: {
+          a11yTabComponent: true,
+        },
+      });
+
       cy.visit('/');
     });
 
diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts
index 4d7545621f6..b35e4416a61 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts
@@ -227,14 +227,14 @@ export function checkFirstItem(productName: string): void {
     });
 }
 
-export function clickFacet(header: string) {
+export function clickFacet(header: string, force = false) {
   cy.onMobile(() => {
     cy.get('cx-product-facet-navigation button').click();
   });
   cy.get('cx-facet-list cx-tab button.tab-btn')
     .contains(header)
     .then((el) => {
-      if (el.find('.fa-plus').is(':visible')) {
+      if (el.find('.tab-icon[outerText^="+"]').length || force) {
         // TODO Remove force once you can scroll facets on mobile
         cy.wrap(el).click({ force: true });
       }