test(e2e): update cypress to version 12.1.0 and replace `cypress-…

…cucumber-preprocessor` with `@badeball/cypress-cucumber-preprocessor` (#747)

SECURITY.md

@@ -26,4 +26,3 @@ As a summary, send an email with:
 - Attach the `x_security_patch` file if you have created one.
 
 Thanks for your contribution.
-

packages/react-wrapper/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: ['plugin:react/recommended'],
+  ignorePatterns: ['cypress.config.ts'],
   settings: {
     react: {
       pragma: 'React',

packages/react-wrapper/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:1234',
+    specPattern: 'tests/e2e/specs/**/*.spec.ts',
+    supportFile: 'tests/e2e/support/index.ts',
+    video: false
+  }
+});

packages/react-wrapper/package.json

@@ -27,7 +27,7 @@
   "scripts": {
     "serve": "vite serve tests/demo",
     "build": "tsc",
-    "cypress:open": "cypress open",
+    "cypress:open": "cypress open --browser chrome",
     "cypress:run": "cypress run --headless --browser chrome",
     "postbuild": "npm pack",
     "prepublishOnly": "npm run build",
@@ -48,7 +48,7 @@
     "@types/jest": "~27.0.3",
     "@types/react": "~16.9.0",
     "@types/react-dom": "~16.9.0",
-    "cypress": "~8.4.0",
+    "cypress": "~12.1.0",
     "eslint-plugin-react": "~7.31.11",
     "jest": "~27.3.1",
     "react": "^16.9.0",

packages/react-wrapper/tests/e2e/support/commands.ts

@@ -2,11 +2,12 @@
 declare namespace Cypress {
   interface Chainable extends CustomCommands {}
 }
+import CommandFns = Cypress.CommandFns;
 
 /** Possible values for the view to render */
 type ViewName = 'slots' | 'slotsComponents';
 
-interface CustomCommands {
+interface CustomCommands extends CommandFns {
   /**
    * Selects a DOM element based on the `data-test` attribute value.
    *
@@ -33,6 +34,4 @@ const commands: CustomCommands = {
   }
 };
 
-Object.entries(commands).forEach(([commandName, command]) => {
-  Cypress.Commands.add(commandName, command);
-});
+Cypress.Commands.addAll(commands);

packages/react-wrapper/tsconfig.eslint.json

@@ -3,5 +3,6 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "exclude": []
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
 }

packages/react-wrapper/tsconfig.json

@@ -16,5 +16,5 @@
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["**/__tests__/*/**"]
+  "exclude": ["node_modules", "**/__tests__/*/**"]
 }

packages/x-components/.cypress-cucumber-preprocessorrc.json

@@ -1,4 +1,3 @@
 {
-  "nonGlobalStepDefinitions": true,
-  "stepDefinitions": "tests/e2e"
+  "stepDefinitions": "tests/e2e/**/*.spec.ts"
 }

packages/x-components/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   extends: ['plugin:@empathyco/x/all'],
+  ignorePatterns: ['cypress.config.ts'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: 'tsconfig.eslint.json'

packages/x-components/cypress.config.ts

@@ -0,0 +1,43 @@
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    defaultCommandTimeout: 7000,
+    viewportHeight: 1080,
+    viewportWidth: 1920,
+    screenshotOnRunFailure: false,
+    video: false,
+    supportFile: 'tests/support/index.ts',
+    fixturesFolder: 'tests/e2e/fixtures',
+    screenshotsFolder: 'tests/e2e/screenshots',
+    retries: {
+      openMode: 0,
+      runMode: 1
+    },
+    async setupNodeEvents(on, config) {
+      await addCucumberPreprocessorPlugin(on, config);
+      on(
+        'file:preprocessor',
+        require('@bahmutov/cypress-esbuild-preprocessor')({
+          plugins: [createEsbuildPlugin(config)]
+        })
+      );
+      return config;
+    },
+    specPattern: 'tests/e2e/**/*.feature'
+  },
+  component: {
+    specPattern: 'tests/unit/**/*.spec.ts',
+    supportFile: 'tests/support/index.ts',
+    indexHtmlFile: 'tests/support/component-index.html',
+    screenshotOnRunFailure: false,
+    video: false,
+    devServer: {
+      bundler: 'webpack',
+      framework: 'vue-cli'
+    }
+  }
+});

packages/x-components/package.json

@@ -53,14 +53,17 @@
     "prepublishOnly": "npm run build",
     "test:unit": "jest --silent && npm run test:unit-cypress",
     "test:unit-jest": "jest",
-    "test:unit-cypress": "cypress run-ct",
+    "test:unit-cypress": "cypress run --component",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
-    "test:e2e": "vue-cli-service test:e2e",
+    "test:e2e": "vue-cli-service test:e2e --e2e --browser chrome",
+    "test:e2e:firefox": "vue-cli-service test:e2e --e2e --browser firefox",
     "test:e2e:ci": "vue-cli-service test:e2e --headless --browser chrome",
     "test": "npm run test:unit && npm run test:e2e:ci",
-    "cypress:open": "cypress open",
-    "cypress:open:component": "cypress open-ct"
+    "cypress:open": "cypress open --e2e --browser chrome",
+    "cypress:open:firefox": "cypress open --e2e --browser firefox",
+    "cypress:open:component": "cypress open --component --browser chrome",
+    "cypress:open:component:firefox": "cypress open --component --browser firefox"
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.16",
@@ -82,8 +85,9 @@
     "vuex": "^3.0.0"
   },
   "devDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "~15.0.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "~2.1.5",
     "@cypress/vue": "~2.2.4",
-    "@cypress/webpack-dev-server": "~1.8.4",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.50",
     "@empathyco/x-tailwindcss": "^0.2.0-alpha.39",
     "@microsoft/api-documenter": "~7.19.27",
@@ -101,9 +105,8 @@
     "@vue/test-utils": "~1.0.3",
     "@vue/vue2-jest": "~27.0.0-alpha.3",
     "autoprefixer": "~10.4.4",
-    "cypress": "~8.4.0",
-    "cypress-cucumber-preprocessor": "~4.0.0",
-    "cypress-plugin-tab": "~1.0.5",
+    "cypress": "~12.1.0",
+    "esbuild": "0.15.16",
     "glob": "~7.1.6",
     "jest": "~27.3.1",
     "jest-scss-transform": "~1.0.1",

packages/x-components/tests/e2e/clear-filters/clear-filters.spec.ts

@@ -1,4 +1,4 @@
-import { Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
 // Scenario 1
 When('clear filters button is clicked', () => {
@@ -21,6 +21,6 @@ When('filter number {int} is clicked in selected filters list', (selectedFilterI
     .as('removedFilter');
 });
 
-Then('filter is removed from selected filters list', function (this: { removedFilter: string }) {
+Then('filter is removed from selected filters list', function () {
   cy.getByDataTest('selected-filters-list-item').should('not.contain', this.removedFilter);
 });

packages/x-components/tests/e2e/common/common-steps.spec.ts

@@ -1,4 +1,4 @@
-import { Given, Then, When, And } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 import { PageableRequest } from '@empathyco/x-types';
 import '../global/global-definitions';
 import { baseSnippetConfig } from '../../../src/views/base-config';
@@ -73,7 +73,7 @@ When('close modal button is clicked', () => {
 
 // Filters
 
-And(
+Then(
   'filters {string} are shown in the selected filters list',
   function (this: any, clickedFiltersIndex: string) {
     const clickedFiltersIndexList = clickedFiltersIndex.split(', ');
@@ -83,7 +83,7 @@ And(
   }
 );
 
-And('filter {string} is selected', function (filterLabel: string) {
+Then('filter {string} is selected', function (filterLabel: string) {
   cy.getByDataTest('selected-filters-list').should('contain.text', filterLabel);
 });
 
@@ -127,16 +127,13 @@ Then('history queries are displayed', () => {
   cy.getByDataTest('history-query').should('have.length.at.least', 1);
 });
 
-Then(
-  'the searched query is displayed in history queries',
-  function (this: { searchedQuery: string }) {
-    cy.getByDataTest('history-query')
-      .should('have.length.at.least', 1)
-      .each(historyQuery => expect(historyQuery).to.contain(this.searchedQuery))
-      .invoke('text')
-      .as('historicalQuery');
-  }
-);
+Then('the searched query is displayed in history queries', function () {
+  cy.getByDataTest('history-query')
+    .should('have.length.at.least', 1)
+    .each(historyQuery => expect(historyQuery).to.contain(this.searchedQuery))
+    .invoke('text')
+    .as('historicalQuery');
+});
 
 // Next Queries
 Then('next queries are displayed', () => {
@@ -174,7 +171,7 @@ Then('related results are displayed', () => {
     });
 });
 
-And('related results are cleared', () => {
+Then('related results are cleared', () => {
   cy.getByDataTest('result-item').should('not.exist');
 });
 
@@ -215,12 +212,9 @@ When('clear search button is pressed', () => {
   cy.clearSearchInput();
 });
 
-Then(
-  'the searched query is displayed in the search-box',
-  function (this: { searchedQuery: string }) {
-    cy.getByDataTest('search-input').should('have.value', this.searchedQuery);
-  }
-);
+Then('the searched query is displayed in the search-box', function () {
+  cy.getByDataTest('search-input').should('have.value', this.searchedQuery);
+});
 
 Then(
   'number of rows requested in {string} is {int}',
@@ -239,7 +233,7 @@ When('{string} is added to the search', (secondQuery: string) => {
 // Sort
 When('sort option {string} is selected from the sort dropdown', (sortOption: string) => {
   cy.getByDataTest(`sort-dropdown-toggle`).click();
-  cy.getByDataTest(`sort-dropdown`).children().contains(sortOption).click();
+  cy.getByDataTest(`dropdown-item`).contains(sortOption).click();
 });
 
 // Spellcheck
@@ -337,7 +331,7 @@ When('the page is reloaded', () => {
   cy.reload();
 });
 
-And('url contains parameter {string} with value {string}', (key: string, value: string) => {
+Then('url contains parameter {string} with value {string}', (key: string, value: string) => {
   cy.location('search').should('contain', `${key}=${encodeURIComponent(value)}`);
 });
 

packages/x-components/tests/e2e/common/mocked-responses.spec.ts

@@ -1,4 +1,4 @@
-import { And, Given } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor';
 import {
   NextQueriesResponse,
   RelatedTagsResponse,
@@ -333,7 +333,7 @@ Given('a results API with a redirection', () => {
   }).as('interceptedResults');
 });
 
-And('waiting for search request intercept', () => {
+When('waiting for search request intercept', () => {
   cy.intercept('https://api.empathy.co/search').as('requestWithFilter');
 });
 

packages/x-components/tests/e2e/exclude-filters/exclude-filters.spec.ts

@@ -1,4 +1,4 @@
-import { And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Then } from '@badeball/cypress-cucumber-preprocessor';
 
 Then('only filters with totalResults undefined or greater than 0 are shown in facet', () => {
   cy.getByDataTest('brand_facet-filter-total-results')
@@ -10,7 +10,7 @@ Then('only filters with totalResults undefined or greater than 0 are shown in fa
     });
 });
 
-And('{string} total filters are more than displayed filters', function (facetName: string) {
+Then('{string} total filters are more than displayed filters', function (facetName: string) {
   cy.getByDataTest('facets-facet')
     .contains(facetName)
     .getByDataTest('total-filters')

packages/x-components/tests/e2e/filters-search/filters-search.spec.ts

@@ -1,10 +1,10 @@
-import { And, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
 Then('facet has filters', () => {
   cy.getByDataTest('brand_facet-filter').should('have.length.at.least', 1);
 });
 
-And('searchable filters are stored', () => {
+Then('searchable filters are stored', () => {
   cy.getByDataTest('brand_facet-filter').invoke('text').as('searchableFilters');
 });
 
@@ -25,13 +25,10 @@ Then('filters in facet are refined with search, {string}', (searchFiltersQuery:
     .as('refinedFilters');
 });
 
-And(
-  'searchable filters in facet contain refined filters',
-  function (this: { searchableFilters: string[] }) {
-    cy.getByDataTest('brand_facet-filter').should(refinedFilters => {
-      refinedFilters.each((_, refinedFilter) => {
-        expect(this.searchableFilters).to.contain(refinedFilter.textContent);
-      });
+Then('searchable filters in facet contain refined filters', function () {
+  cy.getByDataTest('brand_facet-filter').should(refinedFilters => {
+    refinedFilters.each((_, refinedFilter) => {
+      expect(this.searchableFilters).to.contain(refinedFilter.textContent);
     });
-  }
-);
+  });
+});

packages/x-components/tests/e2e/global/global-definitions.ts

@@ -1,4 +1,4 @@
-import { defineParameterType } from 'cypress-cucumber-preprocessor/steps';
+import { defineParameterType } from '@badeball/cypress-cucumber-preprocessor';
 
 defineParameterType({
   name: 'boolean',