diff --git a/package.json b/package.json index 7515ec54..712105e2 100644 --- a/package.json +++ b/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", diff --git a/src/components/desktop/desktop-toolbar.vue b/src/components/desktop/desktop-toolbar.vue index 102ac341..e8e0dde4 100644 --- a/src/components/desktop/desktop-toolbar.vue +++ b/src/components/desktop/desktop-toolbar.vue @@ -5,11 +5,13 @@ data-test="total-results" > - + diff --git a/src/components/search/facets/selected-filters.vue b/src/components/search/facets/selected-filters.vue index d2f604ae..7a4539b3 100644 --- a/src/components/search/facets/selected-filters.vue +++ b/src/components/search/facets/selected-filters.vue @@ -53,6 +53,7 @@ results per row Examples: | query | columns | view | - | shirt | 6 | macbook-13 | + | shirt | 2 | macbook-13 | diff --git a/tests/e2e/cucumber/column-picker.spec.ts b/tests/e2e/cucumber/column-picker.spec.ts index 2914f6ac..d6b4935a 100644 --- a/tests/e2e/cucumber/column-picker.spec.ts +++ b/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'); }); diff --git a/tests/e2e/cucumber/common-steps.spec.ts b/tests/e2e/cucumber/common-steps.spec.ts index 65616e32..4b60818f 100644 --- a/tests/e2e/cucumber/common-steps.spec.ts +++ b/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('@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'); + }); +}); diff --git a/tests/e2e/cucumber/facets.feature b/tests/e2e/cucumber/facets.feature index b15c4f10..aba1024e 100644 --- a/tests/e2e/cucumber/facets.feature +++ b/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 "" size view When start button is clicked And "" is searched - Then facets are displayed is - When hide-show filters button is clicked on "" after facets being displayed is - Then facets are displayed is - When hide-show filters button is clicked on "" after facets being displayed is - Then facets are displayed is + Then related results are displayed + And facets are displayed is false + When sort and filter button is clicked on "" + Then facets are displayed is true + When "" 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 "" size view When start button is clicked And "" is searched - And facets are shown if hidden on "" - And facet "" is unfolded + And sort and filter button is clicked on "" + Then facets are displayed is true + When facet "" is unfolded And filter from facet "" is clicked Then filter from facet "" is selected is true When filter from facet "" is clicked @@ -36,8 +40,9 @@ Feature: Facets component Given start page with "" size view When start button is clicked And "" is searched - And facets are shown if hidden on "" - And facet "" is unfolded + And sort and filter button is clicked on "" + Then facets are displayed is true + When facet "" is unfolded And filter from facet "" is clicked Then filter from facet "" is selected is true When filter from facet "" is clicked @@ -52,8 +57,9 @@ Feature: Facets component Given start page with "" size view When start button is clicked And "" is searched - And facets are shown if hidden on "" - And facet "" is unfolded + And sort and filter button is clicked on "" + Then facets are displayed is true + When facet "" is unfolded And filter from facet "" is clicked Then filter from facet "" is selected is true When facet "" is unfolded @@ -70,8 +76,9 @@ Feature: Facets component Given start page with "" size view When start button is clicked And "" is searched - And facets are shown if hidden on "" - And facet "" is unfolded + And sort and filter button is clicked on "" + Then facets are displayed is true + When facet "" is unfolded And filter from facet "" is clicked Then selection status of filter number in facet "" is true When child filter from parent filter in "" is clicked diff --git a/tests/e2e/cucumber/facets.spec.ts b/tests/e2e/cucumber/facets.spec.ts index 356d00d5..1c92cf2b 100644 --- a/tests/e2e/cucumber/facets.spec.ts +++ b/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 diff --git a/tests/e2e/cucumber/multiple-interactions.feature b/tests/e2e/cucumber/multiple-interactions.feature index e7229fce..d46b7046 100644 --- a/tests/e2e/cucumber/multiple-interactions.feature +++ b/tests/e2e/cucumber/multiple-interactions.feature @@ -9,10 +9,11 @@ Feature: Multiple interactions And next query number is clicked Then related results have changed When scroll down for two seconds - And facets are shown if hidden on "" - And facet "" is unfolded + And sort and filter button is clicked on "" + Then facets are displayed is true + When facet "" is unfolded And filter from facet "" is clicked - And facets are hidden if shown on "" + 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 diff --git a/tests/e2e/cucumber/multiple-interactions.spec.ts b/tests/e2e/cucumber/multiple-interactions.spec.ts index e4cb9ca5..d211d1e6 100644 --- a/tests/e2e/cucumber/multiple-interactions.spec.ts +++ b/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('@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') diff --git a/tests/e2e/cucumber/no-results.spec.ts b/tests/e2e/cucumber/no-results.spec.ts index 94935965..ae09e916 100644 --- a/tests/e2e/cucumber/no-results.spec.ts +++ b/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', () => { diff --git a/tests/e2e/cucumber/predictive-components.feature b/tests/e2e/cucumber/predictive-components.feature index b2c8835c..f06ab7c2 100644 --- a/tests/e2e/cucumber/predictive-components.feature +++ b/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 "" size view @@ -39,7 +39,8 @@ Feature: Predictive components Given start page with "" size view When start button is clicked Given a "" 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 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 "" size view When start button is clicked Given a "" 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: diff --git a/tests/e2e/cucumber/predictive-components.spec.ts b/tests/e2e/cucumber/predictive-components.spec.ts index c8ed54a2..8172b4b5 100644 --- a/tests/e2e/cucumber/predictive-components.spec.ts +++ b/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(); }); }); diff --git a/tests/e2e/cucumber/scroll.feature b/tests/e2e/cucumber/scroll.feature index ef0d5b82..2992a592 100644 --- a/tests/e2e/cucumber/scroll.feature +++ b/tests/e2e/cucumber/scroll.feature @@ -7,20 +7,23 @@ Feature: Scroll Given start page with "" size view When start button is clicked And "" is searched - And scrolling down to result "" + Then related results are displayed + When scrolling down to result "" Then url is updated with result "" - When facets are shown if hidden on "" - And "" order is clicked - And facets are hidden if shown on "" - Then scroll position is at top + When sort and filter button is clicked on "" + And "" order is clicked in "" + 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 "" Then url is updated with result "" - And facets are shown if hidden on "" + When sort and filter button is clicked on "" And facet "" is unfolded And filter from facet "" 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 | diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts index 99e2908c..fc11daa6 100644 --- a/tests/e2e/cucumber/scroll.spec.ts +++ b/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'); }); diff --git a/tests/e2e/cucumber/sort.feature b/tests/e2e/cucumber/sort.feature index 10c38fc5..484ada83 100644 --- a/tests/e2e/cucumber/sort.feature +++ b/tests/e2e/cucumber/sort.feature @@ -4,13 +4,14 @@ Feature: Sort component Given start page with "" size view Then start button is clicked When "" is searched - And facets are shown if hidden on "" - Then results are ordered by "Default" + And sort and filter button is clicked on "" + Then results are ordered by "Relevancy" Given an intercepted search response - When "" order is clicked + And "" order is clicked in "" + And "close-modal-id" is clicked to close the modal Then results are ordered by "" - And search request contains the selected sort "" + And search request contains the selected sort "" Examples: - | query | sortOrder | view | - | skirt | price asc | macbook-13 | - | skirt | price desc | iphone-7 | + | query | sortOrder | sortMenuName | sortURL | view | + | skirt | Price: High to Low | Sort by | price desc | macbook-13 | + | skirt | Price: High to Low | Sort by | price desc | iphone-7 | diff --git a/tests/e2e/cucumber/sort.spec.ts b/tests/e2e/cucumber/sort.spec.ts index c705d602..3142855e 100644 --- a/tests/e2e/cucumber/sort.spec.ts +++ b/tests/e2e/cucumber/sort.spec.ts @@ -1,16 +1,16 @@ import { Then, When } from 'cypress-cucumber-preprocessor/steps'; Then('results are ordered by {string}', (sortOrder: string) => { - cy.getByDataTest('sort-dropdown').should('contain', sortOrder); + cy.getByDataTest('toggle-panel-header').should('contain', sortOrder); }); -When('{string} order is clicked', (sortOrder: string) => { - cy.getByDataTest('sort-dropdown').click(); - cy.getByDataTest('dropdown-item').contains(sortOrder).click(); +When('{string} order is clicked in {string}', (sortOrder: string, sortMenuName: string) => { + cy.getByDataTest('toggle-panel-header').contains(sortMenuName).click(); + cy.getByDataTest('x-sort-button').contains(sortOrder).click(); }); -Then('search request contains the selected sort {string}', (sortOption: string) => { +Then('search request contains the selected sort {string}', (sortURL: string) => { cy.wait('@interceptedResults') .its('request.url') - .should('contain', `sort=${sortOption.replace(' ', '+')}`); + .should('contain', `sort=${sortURL.replace(' ', '+')}`); }); diff --git a/tests/e2e/cucumber/spellcheck.spec.ts b/tests/e2e/cucumber/spellcheck.spec.ts index 9d06af8a..66e53cf5 100644 --- a/tests/e2e/cucumber/spellcheck.spec.ts +++ b/tests/e2e/cucumber/spellcheck.spec.ts @@ -1,7 +1,7 @@ import { Then } from 'cypress-cucumber-preprocessor/steps'; Then('spellcheck message is displayed', function (this: { searchedQuery: string }) { - cy.getByDataTest('spellcheck') + cy.getByDataTest('spellcheck-message') .should('exist') .should('contain', this.searchedQuery) .getByDataTest('set-spellcheck') diff --git a/tests/e2e/cucumber/tagging.feature b/tests/e2e/cucumber/tagging.feature index 660b0797..c4060a7f 100644 --- a/tests/e2e/cucumber/tagging.feature +++ b/tests/e2e/cucumber/tagging.feature @@ -16,12 +16,20 @@ Feature: Tagging component Then results page number is loaded And query tagging request has been triggered And page query tagging request is triggered - And empathize is minimized - When pdp add to cart button is clicked - Then add product to cart tagging request has been triggered Examples: | query | view | pageNumber | | shirt | macbook-13 | 2 | | shirt | iphone-7 | 2 | + Scenario Outline: 2. Check add to cart tagging. + Given start page with "" size view + When start button is clicked + And "" is searched + And pdp add to cart button is clicked + Then add product to cart tagging request has been triggered + + Examples: + | query | view | + | skirt | macbook-13 | + diff --git a/tests/e2e/cucumber/tagging.spec.ts b/tests/e2e/cucumber/tagging.spec.ts index 5897b79f..51e5501c 100644 --- a/tests/e2e/cucumber/tagging.spec.ts +++ b/tests/e2e/cucumber/tagging.spec.ts @@ -25,9 +25,9 @@ Then('add product to cart tagging request has been triggered', () => { }); When('pdp add to cart button is clicked', () => { - cy.getByDataTest('result-add-to-cart').eq(0).invoke('show').click(); -}); - -When('empathize is minimized', () => { - cy.getByDataTest('search-input').type('{enter}'); + cy.getByDataTest('search-grid-result').should('be.visible').first().as('firstVisibleResult'); + cy.get('@firstVisibleResult') + .getByDataTest('result-add-to-cart') + .invoke('show') + .click({ force: true }); }); diff --git a/tests/e2e/cucumber/url.feature b/tests/e2e/cucumber/url.feature index dedb2748..6408e346 100644 --- a/tests/e2e/cucumber/url.feature +++ b/tests/e2e/cucumber/url.feature @@ -1,19 +1,18 @@ Feature: Url component - Scenario Outline: 1. Navigating to a URL from the outside sets the url origin as "" + Scenario Outline: 1. Navigating to a URL from the outside sets the url origin Given a results API with query "" And a URL with query parameter "" and "" size view Then search request contains the origin "url%3Aexternal" in the URL - When facets are shown if hidden on "" - And "" order is clicked - And facets are hidden if shown on "" + When sort and filter button is clicked on "" + And "" order is clicked in "" Then search request contains the origin "url%3Aexternal" in the URL When navigating back Then search request contains the origin "url%3Aurl_history" in the URL Examples: - | query | view | sortOrder | - | shirt | macbook-13 | price desc | - | shirt | iphone-7 | price desc | + | query | sortOrder | sortMenuName | view | + | shirt | Price: High to Low | Sort by | macbook-13 | + | shirt | Price: High to Low | Sort by | iphone-7 | diff --git a/tests/e2e/cucumber/url.spec.ts b/tests/e2e/cucumber/url.spec.ts index e10e61c3..73eb8a0b 100644 --- a/tests/e2e/cucumber/url.spec.ts +++ b/tests/e2e/cucumber/url.spec.ts @@ -1,4 +1,4 @@ -import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps'; +import { Given, When } from 'cypress-cucumber-preprocessor/steps'; import ViewportPreset = Cypress.ViewportPreset; // Scenario 1 @@ -10,16 +10,6 @@ Given( } ); -Then( - 'search request contains parameter {string} with value {string}', - (key: string, value: string) => { - cy.wait('@interceptedResults') - .its('request.body') - .then(JSON.parse) - .should('have.property', key, value); - } -); - When('navigating back', () => { cy.go(-1); });