Merge pull request #591 from centrica-engineering/fix/allure

test: update dependencies

.cypress-cucumber-preprocessorrc.json

@@ -0,0 +1,9 @@
+{
+    "nonGlobalStepDefinitions": true,
+    "stepDefinitions": [
+        "cypress/**/*.{js,ts}"
+    ],
+    "html": {
+        "enabled": true
+    }
+}

.gitignore

@@ -15,6 +15,7 @@ build-storybook.log
 /allure-report
 /cypress/videos
 /cypress/screenshots
+/cypress/downloads
 
 # browserstack
 /results

browserstack.json

@@ -20,12 +20,13 @@
     "run_settings": {
         "cypress_config_file": "./cypress.config.js",
         "npm_dependencies": {
-            "cypress-cucumber-preprocessor": "^4.3.1",
-            "browserstack-cypress-cli": "^1.18.0",
-            "@shelex/cypress-allure-plugin": "^2.23.0",
-            "@testing-library/cypress": "8.0.3",
-            "cypress": "^10.7.0",
-            "@percy/cypress": "3.1.2"
+            "@badeball/cypress-cucumber-preprocessor": "^15.1.4",
+            "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
+            "browserstack-cypress-cli": "^1.29.2",
+            "allure-commandline": "^2.27.0",
+            "allure-cypress": "^2.15.1",
+            "@percy/cypress": "3.1.2",
+            "cypress": "^12.15.0"
           },
         "cypress_version": "10",
         "project_name": "muon-regression",

cypress.config.js

@@ -1,17 +1,26 @@
 const { defineConfig } = require('cypress')
-var cucumber = require('cypress-cucumber-preprocessor').default;
-var allureWriter = require('@shelex/cypress-allure-plugin/writer');
+const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
+const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");
+const { allureCypress } = require("allure-cypress/reporter");
 
 module.exports = defineConfig({
   e2e: {
     async setupNodeEvents(on, config){
-      on('file:preprocessor', cucumber());
-      allureWriter(on, config);
+      await preprocessor.addCucumberPreprocessorPlugin(on, config);
+      on('file:preprocessor', 
+      createBundler({
+        plugins: [createEsbuildPlugin.default(config)],
+      })
+    )
+      allureCypress(on, {
+        resultsDir: "./allure-results",
+      });
       return config;
     },
     includeShadowDom: true,
     experimentalRunAllSpecs : true,
-    supportFile: 'cypress/support/index.js',
-    specPattern: ['cypress/integration/component_tests/*.feature','cypress/integration/example_app_tests/*.feature'],
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: ['cypress/e2e/component_tests/*.feature','cypress/e2e/example_app_tests/*.feature'],
   },
 })

cypress/integration/component_tests/muon_card/muon_card.js → cypress/e2e/component_tests/muon_card/muon_card.js

@@ -1,7 +1,5 @@
-/* eslint-disable no-undef */
-{/* <reference types="cypress" /> */}
 
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then} from '@badeball/cypress-cucumber-preprocessor';
 import {cardElement} from '../../../support/web_elements';
 
 Given('Launch the {string} component {string} type in the browser', (component, type) => {

cypress/integration/component_tests/muon_cta/muon_cta.js → cypress/e2e/component_tests/muon_cta/muon_cta.js

@@ -1,9 +1,6 @@
-/* eslint-disable no-undef */
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
 
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-});
+import {Then} from '@badeball/cypress-cucumber-preprocessor';
+
 
 Then('Validate the elements and attributes in the {string} component', (type) => {
 

cypress/integration/component_tests/muon_detail/muon_detail.js → cypress/e2e/component_tests/muon_detail/muon_detail.js

@@ -1,9 +1,6 @@
 /* eslint-disable no-undef */
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-});
 
 When('User clicks to expand the detail', () => {
   cy.get('muon-detail').find('div[slot="heading"]').click();

cypress/integration/component_tests/muon_form/muon_form.js → cypress/e2e/component_tests/muon_form/muon_form.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import {formElement} from '../../../support/web_elements';
 
 Given('Launch the muon-form component standard type in the browser', () => {
@@ -65,7 +65,7 @@ Then('Validate that the remaining fields are highlighted with error message', ()
 
 });
 
-And('User resets the form', () => {
+Then('User resets the form', () => {
 
   cy.get('muon-form').get('form').then((form)=>{
     cy.wrap(form).find('input[type="reset"]').click()

cypress/e2e/component_tests/muon_icon/muon_icon.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
+
+
+Then('Validate the svg element', () => {
+  cy.get('muon-icon')
+    .shadow()
+    .find('svg')
+    .should('be.visible');
+});

cypress/integration/component_tests/muon_image/muon_image.js → cypress/e2e/component_tests/muon_image/muon_image.js

@@ -1,13 +1,9 @@
 /* eslint-disable no-undef */
 {/* <reference types="cypress" /> */}
 
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 import {imageElement} from '../../../support/web_elements';
 
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-});
-
 Then('Validate the image src and elements in {string} type', (type) => {
 
   const placeholder = '(src).thumb.48.48.png';
@@ -18,8 +14,8 @@ Then('Validate the image src and elements in {string} type', (type) => {
     cy.get('muon-image').shadow().find(imageElement.imageSelector).find('img').as('image');
 
     cy.get('muon-image').invoke('attr', 'src').should('eq', 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg');
-    cy.get('@image').invoke('attr', 'src').should('eq', 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg.thumb.48.48.png');
-    cy.get('@image').invoke('attr', 'class').should('eq', 'image-lazy blur');
+    cy.get('@image').invoke('attr', 'src').should('eq', 'https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg');
+    cy.get('@image').invoke('attr', 'class').should('eq', 'blur-out image-lazy');
 
   } else {
     cy.get('muon-image').shadow().find(imageElement.backgroundImageSelector).find('div').as('backgroundImage')

cypress/integration/component_tests/muon_inputter/muon_inputter.js → cypress/e2e/component_tests/muon_inputter/muon_inputter.js

@@ -1,12 +1,8 @@
 /* eslint-disable no-undef */
 
-import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import {inputElement} from '../../../support/web_elements';
 
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-  cy.wait(3000)
-});
 
 When('User enter the input', () => {
   cy.clearInput();
@@ -89,12 +85,12 @@ Then('Validate the attributes in inputter {string} type', (type) => {
 
 });
 
-And('Validate the helper and tip details in {string} field', (type) => {
+Then('Validate the helper and tip details in {string} field', (type) => {
   let className = (type==='email')?'inputter type-email autocomplete-email':'inputter type-tel autocomplete-tel'
   cy.validateHelper('How can we help you?', className);
 });
 
-And('Enter the email in the inputter and validate the message', () => {
+Then('Enter the email in the inputter and validate the message', () => {
 
   if (Cypress.isBrowser('firefox')) {
     cy.enterAndValidateMessage('inputter type-email autocomplete-email','test@', `Your email does not look right. Please enter an email address..`, true);
@@ -111,7 +107,7 @@ And('Enter the email in the inputter and validate the message', () => {
   cy.enterAndValidateMessage('inputter type-email autocomplete-email','mbappe123@bk.in', false, true);
 });
 
-And('Enter the telephone number in the inputter and validate the message', () => {
+Then('Enter the telephone number in the inputter and validate the message', () => {
   cy.enterAndValidateMessage('inputter type-tel autocomplete-tel','07404537288', false, true);
 });
 
@@ -132,7 +128,7 @@ Then('Validate the attributes and elements in {string} type', (type) => {
 
 });
 
-And('Enter the input in {string} and validate the value', () => {
+Then('Enter the input in {string} and validate the value', () => {
   cy.enterValue('muon-test');
   cy.get('muon-inputter').invoke('attr', 'value').should('eq', 'muon-test');
   cy.clearInput();
@@ -157,7 +153,7 @@ Then('Validate the attributes and elements in textarea type', () => {
 
 });
 
-And('Enter the input in textarea and validate the value', () => {
+Then('Enter the input in textarea and validate the value', () => {
 
   const input = 'Cypress is an automation framework to automate web pages and components.';
 
@@ -185,7 +181,7 @@ Then('Validate the attributes and elements in number type', () => {
 
 });
 
-And('Enter the input in number and validate the value', () => {
+Then('Enter the input in number and validate the value', () => {
 
   cy.enterValue('545657654');
   cy.get('muon-inputter').invoke('attr', 'value').should('eq', '545657654');
@@ -214,7 +210,7 @@ Then('Validate the attributes and elements in select type', () => {
 
 });
 
-And('Select the option and validate the value', () => {
+Then('Select the option and validate the value', () => {
 
   cy.get('muon-inputter').then((inputter)=>{
     cy.wrap(inputter).find('select').select('Value one');
@@ -250,7 +246,7 @@ Then('Validate the attributes and elements in mask type', () => {
 
 });
 
-And('Enter the input in the mask and validate the value', () => {
+Then('Enter the input in the mask and validate the value', () => {
 
   cy.enterValue('test32');
   cy.get('muon-inputter').invoke('attr', 'value').should('eq', 'test32');
@@ -293,7 +289,7 @@ Then('Validate the elements in {string} type', (type) => {
   })
 })
 
-And('Enter the input in the separator and validate the value', () => {
+Then('Enter the input in the separator and validate the value', () => {
 
   cy.enterValue('test32');
   cy.get('muon-inputter').invoke('attr', 'value').should('eq', 'te-st-32');
@@ -306,7 +302,7 @@ And('Enter the input in the separator and validate the value', () => {
 
 });
 
-And('Enter the input in the date-mask and validate the value and message', () => {
+Then('Enter the input in the date-mask and validate the value and message', () => {
 
   cy.enterValue('05012022');
   cy.get('muon-inputter').invoke('attr', 'value').should('eq', '05/01/2022');
@@ -339,7 +335,7 @@ Then('Validate the attributes and elements in date type', () => {
 
 });
 
-And('Enter the input in the date and validate the value and message', () => {
+Then('Enter the input in the date and validate the value and message', () => {
 
   // date within range
   cy.validateDate('2022-02-01');
@@ -387,7 +383,7 @@ Then('Validate the attributes and elements in radio type', () => {
 
 });
 
-And('Select the radio options and validate the value', () => {
+Then('Select the radio options and validate the value', () => {
 
   const value = ['a', 'b', 'c'];
 
@@ -438,7 +434,7 @@ Then('Validate the attributes and elements in checkbox type', () => {
 
 });
 
-And('Select the checkbox and validate the value', () => {
+Then('Select the checkbox and validate the value', () => {
 
   cy.get('muon-inputter').as('inputter')