feature/update-tests-to-new-archetype

package.json

@@ -15,7 +15,7 @@
     "cy:run": "cypress run --headless --browser chrome",
     "test:e2e": "start-server-and-test build:serve http://localhost:8080 cy:open",
     "test:e2e:ci": "start-server-and-test serve:dist http://localhost:8080 cy:run",
-    "test": "echo everything is on fire, and this is fine",
+    "test": "npm run test:e2e:ci",
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src tests build --ext .ts,.tsx,.vue,.js,.jsx",
     "lint:fix": "npm run lint -- --fix",

src/components/desktop/desktop-toolbar.vue

@@ -5,11 +5,13 @@
     data-test="total-results"
   >
     <span
-      v-html="$t('totalResults.message', { totalResults: $x.totalResults, query: $x.query.search })"
+      v-html="
+        $t('totalResults.message', { totalResults: $x.totalResults, query: $x.query.searchBox })
+      "
       class="x-list__item--expand x-font-size--05"
     />
 
-    <ColumnPicker />
+    <ColumnPicker data-test="column-picker" />
 
     <BaseIdModalOpen
       modalId="right-aside"

src/components/main.vue

@@ -10,8 +10,8 @@
           :class="{ 'x-margin--left-05 x-margin--right-05': $x.device === 'mobile' }"
         >
           <template>
-            <SpellcheckMessage />
-            <NoResultsMessage />
+            <SpellcheckMessage data-test="spellcheck-message" />
+            <NoResultsMessage data-test="no-results-message" />
           </template>
         </div>
 

src/components/search/facets/selected-filters.vue

@@ -53,6 +53,7 @@
     <ClearFilters
       v-if="$x.device === 'desktop'"
       v-slot="{ selectedFilters }"
+      data-test="clear-filters-toolbar"
       class="
         x-button--secondary x-button--round
         x-padding--05 x-padding--top-03 x-padding--bottom-03

src/i18n/messages/en.messages.json

@@ -63,7 +63,7 @@
     "sort": {
       "label": "Sort by",
       "values": {
-        "price asc": "Price: Low to high",
+        "price asc": "Price: Low to High",
         "price desc": "Price: High to Low",
         "default": "Relevancy"
       }

tests/e2e/cucumber/column-picker.feature

@@ -10,4 +10,4 @@ Feature: Column picker component
     And   grid shows <columns> results per row
     Examples:
       | query   | columns | view        |
-      | shirt   | 6       | macbook-13  |
+      | shirt   | 2       | macbook-13  |

tests/e2e/cucumber/column-picker.spec.ts

@@ -5,15 +5,11 @@ Then('grid shows {int} results per row', (columns: number) => {
 });
 
 When('value {int} from column picker list is clicked', (columns: number) => {
-  cy.getByDataTest('column-picker-list')
-    .children(`.x-column-picker-list__item--${columns}-cols`)
-    .should('be.visible')
-    .click();
+  cy.get(`.x-column-picker-list__item--${columns}-cols`).click({ scrollBehavior: false });
 });
 
 Then('column picker list value {int} is selected', (columns: number) => {
-  cy.getByDataTest('column-picker-list')
-    .children(`.x-column-picker-list__item--${columns}-cols`)
+  cy.get(`.x-column-picker-list__item--${columns}-cols`)
     .children()
     .should('have.attr', 'aria-selected', 'true');
 });

tests/e2e/cucumber/common-steps.spec.ts

@@ -6,16 +6,12 @@ Given('start page with {string} size view', (view: ViewportPreset) => {
   cy.visit('/');
 });
 
-Given('start page with {string} size view and mocked adapter', (view: ViewportPreset) => {
-  cy.viewport(view);
-  cy.visit('/useMockedAdapter=true');
-});
-
 Then('start button is clicked', () => {
   cy.getByDataTest('x').should('exist');
   cy.getByDataTest('start-button').click();
 });
 
+// Search
 When('a {string} is typed', (query: string) => {
   cy.typeQuery(query).then(() => {
     cy.getByDataTest('search-input').invoke('val').as('searchedQuery');
@@ -28,6 +24,7 @@ When('{string} is searched', (query: string) => {
   });
 });
 
+// Facets
 When('facets are shown if hidden on {string}', (view: ViewportPreset) => {
   if (!view.includes('macbook')) {
     cy.getByDataTest('open-modal-id').click();
@@ -40,6 +37,31 @@ When('facets are hidden if shown on {string}', (view: ViewportPreset) => {
   }
 });
 
+// Requests
 Then('search request contains the origin {string} in the URL', (origin: string) => {
   cy.wait('@interceptedResults').its('request.url').should('contain', `origin=${origin}`);
 });
+
+// Results
+Then('related results are displayed', () => {
+  cy.getByDataTest('search-grid-result').first().scrollIntoView();
+  cy.getByDataTest('search-grid-result')
+    .should('be.visible')
+    .should('have.length.at.least', 1)
+    .invoke('text')
+    .as('resultsList');
+});
+
+Then('related results have changed', () => {
+  cy.getByDataTest('search-grid-result').first().scrollIntoView();
+  cy.get<string>('@resultsList').then(resultsList => {
+    cy.getByDataTest('search-grid-result')
+      .should('be.visible')
+      .should('have.length.at.least', 1)
+      .should(newResultsList => {
+        expect(newResultsList.text()).to.be.not.equal(resultsList);
+      })
+      .invoke('text')
+      .as('resultsList');
+  });
+});

tests/e2e/cucumber/facets.feature

@@ -1,25 +1,29 @@
 Feature: Facets component
 
-  Scenario Outline: 1. Facets can be shown / hidden
+  Scenario Outline: 1. Facets modal can be shown / hidden
     Given start page with "<view>" size view
     When  start button is clicked
     And  "<query>" is searched
-    Then  facets are displayed is <areFacetsVisible>
-    When  hide-show filters button is clicked on "<view>" after facets being displayed is <areFacetsVisible>
-    Then  facets are displayed is <areFacetsVisibleAfterClick>
-    When  hide-show filters button is clicked on "<view>" after facets being displayed is <areFacetsVisibleAfterClick>
-    Then  facets are displayed is <areFacetsVisible>
+    Then  related results are displayed
+    And   facets are displayed is false
+    When  sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  "<closeMethod>" is clicked to close the modal
+    Then  facets are displayed is false
     Examples:
-      | query   | areFacetsVisible | areFacetsVisibleAfterClick | view        |
-      | shirt   | true             | false                      | macbook-13  |
-      | shirt   | false            | true                       | iphone-7    |
+      | query   | view        | closeMethod     |
+      | shirt   | macbook-13  | close-modal-id  |
+      | shirt   | macbook-13  | modal-overlay   |
+      | shirt   | iphone-7    | close-modal-id  |
+      | shirt   | iphone-7    | modal-overlay   |
 
   Scenario Outline: 2. Filters can be selected and deselected / cleared
     Given start page with "<view>" size view
     When  start button is clicked
     And   "<query>" is searched
-    And   facets are shown if hidden on "<view>"
-    And   facet "<facetName>" is unfolded
+    And   sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  facet "<facetName>" is unfolded
     And   filter <filterNumber> from facet "<facetName>" is clicked
     Then  filter <filterNumber> from facet "<facetName>" is selected is true
     When  filter <filterNumber> from facet "<facetName>" is clicked
@@ -36,8 +40,9 @@ Feature: Facets component
     Given start page with "<view>" size view
     When  start button is clicked
     And   "<query>" is searched
-    And   facets are shown if hidden on "<view>"
-    And   facet "<facetName>" is unfolded
+    And   sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  facet "<facetName>" is unfolded
     And   filter <filterNumber> from facet "<facetName>" is clicked
     Then  filter <filterNumber> from facet "<facetName>" is selected is true
     When  filter <filterNumber2> from facet "<facetName>" is clicked
@@ -52,8 +57,9 @@ Feature: Facets component
     Given start page with "<view>" size view
     When  start button is clicked
     And   "<query>" is searched
-    And   facets are shown if hidden on "<view>"
-    And   facet "<facetName>" is unfolded
+    And   sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  facet "<facetName>" is unfolded
     And   filter <filterNumber> from facet "<facetName>" is clicked
     Then  filter <filterNumber> from facet "<facetName>" is selected is true
     When  facet "<facetName2>" is unfolded
@@ -70,8 +76,9 @@ Feature: Facets component
     Given start page with "<view>" size view
     When  start button is clicked
     And   "<query>" is searched
-    And   facets are shown if hidden on "<view>"
-    And   facet "<facetName>" is unfolded
+    And   sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  facet "<facetName>" is unfolded
     And   filter <hierarchicalFilter> from facet "<facetName>" is clicked
     Then  selection status of filter number <hierarchicalFilter> in facet "<facetName>" is true
     When  child filter <childFilter> from parent filter <hierarchicalFilter> in "<facetName>" is clicked

tests/e2e/cucumber/facets.spec.ts

@@ -13,17 +13,17 @@ Then('facets are displayed is {boolean}', (areVisible: boolean) => {
   cy.getByDataTest('facets-facet').should(`${areVisible ? '' : 'not.'}exist`);
 });
 
-When(
-  'hide-show filters button is clicked on {string} after facets being displayed is {boolean}',
-  (view: ViewportPreset, areFacetsVisible: boolean) => {
-    if (view.includes('macbook')) {
-      cy.getByDataTest('toggle-facets-button').click();
-    } else {
-      cy.getByDataTest(`${areFacetsVisible ? 'close' : 'open'}-modal-id`).click();
-    }
+When('sort and filter button is clicked on {string}', (view: ViewportPreset) => {
+  if (view.includes('macbook')) {
+    cy.getByDataTest('toggle-facets-button').click({ force: true });
+  } else {
+    cy.getByDataTest('open-modal-id').click();
   }
-);
+});
 
+When('{string} is clicked to close the modal', (closeMethod: string) => {
+  cy.getByDataTest(closeMethod).eq(0).click('topLeft', { force: true });
+});
 // Scenario 2
 When('filter {int} from facet {string} is clicked', (filterNumber: number, facetName: string) => {
   cy.getByDataTest(facetName)
@@ -51,7 +51,7 @@ When('clear filters button is clicked', () => {
 
 // Scenario 4
 When('facet {string} is unfolded', (facetName: string) => {
-  cy.getByDataTest(facetName).click();
+  cy.getByDataTest(facetName).getByDataTest('toggle-panel-header').click();
 });
 
 // Scenario 5

tests/e2e/cucumber/multiple-interactions.feature

@@ -9,10 +9,11 @@ Feature: Multiple interactions
     And   next query number <nextQueryItem> is clicked
     Then  related results have changed
     When  scroll down for two seconds
-    And   facets are shown if hidden on "<view>"
-    And   facet "<facetName>" is unfolded
+    And   sort and filter button is clicked on "<view>"
+    Then  facets are displayed is true
+    When  facet "<facetName>" is unfolded
     And   filter <filterNumber> from facet "<facetName>" is clicked
-    And   facets are hidden if shown on "<view>"
+    And   "modal-overlay" is clicked to close the modal
     Then  related results have changed
     When  scroll down for two seconds
     And   search input is cleared

tests/e2e/cucumber/multiple-interactions.spec.ts

@@ -1,27 +1,4 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
-
-Then('related results are displayed', () => {
-  cy.getByDataTest('search-grid-result').first().scrollIntoView();
-  cy.getByDataTest('search-grid-result')
-    .should('be.visible')
-    .should('have.length.at.least', 1)
-    .invoke('text')
-    .as('resultsList');
-});
-
-Then('related results have changed', () => {
-  cy.getByDataTest('search-grid-result').first().scrollIntoView();
-  cy.get<string>('@resultsList').then(resultsList => {
-    cy.getByDataTest('search-grid-result')
-      .should('be.visible')
-      .should('have.length.at.least', 1)
-      .should(newResultsList => {
-        expect(newResultsList.text()).to.be.not.equal(resultsList);
-      })
-      .invoke('text')
-      .as('resultsList');
-  });
-});
+import { When } from 'cypress-cucumber-preprocessor/steps';
 
 When('next query number {int} is clicked', (nextQueryItem: number) => {
   cy.getByDataTest('next-query')

tests/e2e/cucumber/no-results.spec.ts

@@ -1,7 +1,7 @@
 import { And, Then } from 'cypress-cucumber-preprocessor/steps';
 
 Then('no results message is displayed', () => {
-  cy.getByDataTest('no-results').should('exist');
+  cy.getByDataTest('no-results-message').should('exist');
 });
 
 And('there are no results', () => {

tests/e2e/cucumber/predictive-components.feature

@@ -16,8 +16,8 @@ Feature: Predictive components
     Then  history queries are displayed
     Examples:
       | query | view        |
-      | belt | macbook-13  |
-      | belt | iphone-7    |
+      | belt  | macbook-13  |
+      | belt  | iphone-7    |
 
   Scenario Outline: 2. Related tags interaction
     Given start page with "<view>" size view
@@ -39,7 +39,8 @@ Feature: Predictive components
     Given start page with "<view>" size view
     When  start button is clicked
     Given a "<list>" of queries already searched
-    When  search input is focused
+    When  focus is set on the search input
+    And   history queries are displayed
     And   history query number <historyQueryItem> delete button is clicked
     Then  the deleted history query is removed from history queries
     Examples:
@@ -51,7 +52,7 @@ Feature: Predictive components
     Given start page with "<view>" size view
     When  start button is clicked
     Given a "<list>" of queries already searched
-    When  search input is focused
+    When  focus is set on the search input
     And   clear history queries button is clicked
     Then  no history queries are displayed
     Examples:

tests/e2e/cucumber/predictive-components.spec.ts

@@ -74,6 +74,7 @@ When('history query number {int} delete button is clicked', (historyQueryItem: n
     .invoke('text')
     .as('deletedHistoryQuery')
     .then(() => {
+      cy.focusSearchInput();
       cy.getByDataTest('remove-history-query').eq(historyQueryItem).click();
     });
 });

tests/e2e/cucumber/scroll.feature

@@ -7,20 +7,23 @@ Feature: Scroll
     Given start page with "<view>" size view
     When  start button is clicked
     And   "<query>" is searched
-    And   scrolling down to result "<resultId>"
+    Then  related results are displayed
+    When  scrolling down to result "<resultId>"
     Then  url is updated with result "<resultId>"
-    When  facets are shown if hidden on "<view>"
-    And   "<sortOrder>" order is clicked
-    And   facets are hidden if shown on "<view>"
-    Then  scroll position is at top
+    When  sort and filter button is clicked on "<view>"
+    And   "<sortOrder>" order is clicked in "<sortMenuName>"
+    And   "close-modal-id" is clicked to close the modal
+    Then  related results have changed
+    And   scroll position is at top
     When  scrolling down to result "<resultId>"
     Then  url is updated with result "<resultId>"
-    And   facets are shown if hidden on "<view>"
+    When  sort and filter button is clicked on "<view>"
     And   facet "<facetName>" is unfolded
     And   filter <filterIndex> from facet "<facetName>" is clicked
+    And   "modal-overlay" is clicked to close the modal
     Then  scroll position is at top
     Examples:
-      | query | view        | resultId     | sortOrder  | filterIndex | facetName |
-      | shirt | macbook-13  | result-16    | price asc  | 1           | price     |
-      | shirt | iphone-7    | result-16    | price asc  | 1           | price     |
+      | query | view        | resultId     | sortMenuName | sortOrder          | filterIndex | facetName |
+      | shirt | macbook-13  | result-16    | Sort by      | Price: Low to High | 1           | price     |
+      | shirt | iphone-7    | result-16    | Sort by      | Price: Low to High | 1           | price     |
 

tests/e2e/cucumber/scroll.spec.ts

@@ -11,7 +11,5 @@ Then('url is updated with result {string}', (resultId: string) => {
 });
 
 Then('scroll position is at top', () => {
-  cy.get('#main-scroll').should(scrollContainer => {
-    expect(scrollContainer.scrollTop()).to.equal(0);
-  });
+  cy.url().should('not.contain', 'scroll');
 });