Merge pull request #597 from centrica-engineering/feature/CI

Feature/ci

.github/workflows/browserstack.yml

@@ -1,9 +1,9 @@
-name: 'BrowserStack Test'
+name: "Cypress_BrowserStack_Test"
 
-on: workflow_dispatch
+on: [pull_request]
 
 jobs:
-  cypress:
+  build:
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
@@ -14,7 +14,7 @@ jobs:
           node-version: 18
       - uses: browserstack/github-actions/setup-env@master
         with:
-          username:  ${{ secrets.BROWSER_STACK_USERNAME }}
+          username: ${{ secrets.BROWSER_STACK_USERNAME }}
           access-key: ${{ secrets.BROWSER_STACK_ACCESS_KEY }}
       - uses: bahmutov/npm-install@v1
       - run: npm run test:cypress:browserstack

browserstack.json

@@ -14,6 +14,11 @@
 
     "run_settings": {
         "cypress_config_file": "./cypress.config.js",
+        "cypress_version": "12.15.0",
+		"cache_dependencies": "true",
+        "specs": [
+			"cypress/**/*.feature"
+		],
         "npm_dependencies": {
             "@badeball/cypress-cucumber-preprocessor": "^15.1.4",
             "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
@@ -24,7 +29,6 @@
             "cypress": "12.15.0",
             "esbuild": "0.17.10"
           },
-        "cypress_version": "10",
         "project_name": "muon-regression",
         "build_name": "muon-cypress",
         "package_config_options": {

cypress.config.js

@@ -1,30 +1,29 @@
-const { defineConfig } = require('cypress')
+const { defineConfig } = require('cypress');
 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");
-const data = require("./config/base-config.json");
 
 module.exports = defineConfig({
   e2e: {
-    async setupNodeEvents(on, config){
+    async setupNodeEvents(on, config) {
       await preprocessor.addCucumberPreprocessorPlugin(on, config);
-      on('file:preprocessor', 
-      createBundler({
-        plugins: [createEsbuildPlugin.default(config)],
-      })
-    )
+      on('file:preprocessor',
+        createBundler({
+          plugins: [createEsbuildPlugin.default(config)]
+        })
+      );
       allureCypress(on, {
-        resultsDir: "./allure-results",
+        resultsDir: "./allure-results"
       });
       return config;
     },
-    env : {
-      tags: data.env.tags,
+    env: {
+      tags: '@card or @cta or @detail or @form or @image or @icon or @inputter or @cake'
     },
     includeShadowDom: true,
-    experimentalRunAllSpecs : true,
+    experimentalRunAllSpecs: true,
     supportFile: 'cypress/support/e2e.js',
-    specPattern: ['cypress/e2e/component_tests/*.feature','cypress/e2e/example_app_tests/*.feature'],
+    specPattern: ['cypress/e2e/component_tests/*.feature', 'cypress/e2e/example_app_tests/*.feature'],
   },
-})
+})

cypress/e2e/component_tests/muon_cta/muon_cta.js

@@ -1,10 +1,6 @@
 
-import {Given, Then} from '@badeball/cypress-cucumber-preprocessor';
+import {Then} from '@badeball/cypress-cucumber-preprocessor';
 
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-  cy.wait(3000)
-});
 
 Then('Validate the elements and attributes in the {string} component', (type) => {
 

cypress/e2e/component_tests/muon_detail/muon_detail.js

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

cypress/e2e/component_tests/muon_form.feature

@@ -3,29 +3,33 @@ Feature: muon form component
 
     Scenario Outline: muon form standard component with valid
 
-        Given Launch the muon-form component standard type in the browser
+        Given Launch the '<component>' component '<type>' type in the browser
         When  User enters values in all fields
         Then User clicks on submit and validate the '<validation>' form
         And User resets the form
 
         Examples:
-        |validation     |
-        |valid          |
+        |component  |type       |validation     |
+        |muon-form  |standard   |valid          |
 
     Scenario Outline: muon form standard component with invalid
 
-        Given Launch the muon-form component standard type in the browser
+        Given Launch the '<component>' component '<type>' type in the browser
         When  User clicks on submit and validate the '<validation>' form
         And User resets the form  
 
         Examples:
-        |validation     |
-        |invalid        |
+        |component  |type       |validation     |
+        |muon-form  |standard   |invalid        |
 
     Scenario: muon form standard component with focusing error field and enter submission
 
-        Given Launch the muon-form component standard type in the browser
+        Given Launch the '<component>' component '<type>' type in the browser
         When  User enter the value only in first field and press enter
         Then Validate that the remaining fields are highlighted with error message 
 
+        Examples:
+        |component    |type       |
+        |muon-form    |standard   |
+
 

cypress/e2e/component_tests/muon_icon/muon_icon.js

@@ -1,10 +1,5 @@
 /* eslint-disable no-undef */
-import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
-
-Given('Launch the {string} component {string} type in the browser', (component, type) => {
-  cy.launchComponent(component, type);
-  cy.wait(3000)
-});
+import { Then } from '@badeball/cypress-cucumber-preprocessor';
 
 
 Then('Validate the svg element', () => {

cypress/e2e/component_tests/muon_image/muon_image.js

@@ -1,15 +1,10 @@
 /* eslint-disable no-undef */
 {/* <reference types="cypress" /> */}
 
-import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
+import { 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);
-  cy.wait(3000)
-});
-
 Then('Validate the image src and elements in {string} type', (type) => {
 
   const placeholder = '(src).thumb.48.48.png';

cypress/e2e/component_tests/muon_inputter/muon_inputter.js

@@ -1,15 +1,9 @@
 /* eslint-disable no-undef */
 
-import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import { 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();
   cy.enterValue('Cypress test');

package.json

@@ -20,7 +20,7 @@
     "test:cypress:open": "start-server-and-test 'npm run dev --no-open' 8000 'npm run cypress -- open'",
     "test:cypress:component": "start-server-and-test 'npm run dev --no-open' 8000 'npm run cypress -- run --browser chrome --spec \"cypress/e2e/component_tests/*.feature\" --env allure=true || echo \"The previous command has some errors..Continuing\"'",
     "test:cypress:ember": "start-server-and-test 'npm run open:ember' 4200 'npm run cypress -- run --browser chrome --spec \"cypress/e2e/example_app_tests/*.feature\" --env allure=true || echo \"The previous command has some errors..Continuing\"'",
-    "test:cypress:local": "rm -rf allure-report allure-results && npm run set-env && npm run test:cypress:component && npm run test:cypress:ember && npm run test:allure:report",
+    "test:cypress:local": "rm -rf allure-report allure-results && npm run test:cypress:component && npm run test:cypress:ember && npm run test:allure:report",
     "test:cypress:browserstack": "start-server-and-test 'npm run dev --no-open' 8000 'npm run open:ember' 4200 'browserstack-cypress run'",
     "test:allure:report": "allure generate --single-file allure-results --clean -o allure-report && allure open  allure-report",
     "test:cypress:tag": "start-server-and-test 'npm run dev --no-open' 8000 'npm run open:ember' 4200 './node_modules/.bin/cypress-tags run -e TAGS=\"@form\" --browser chrome'",
@@ -29,7 +29,6 @@
     "test:percy:custom": "start-server-and-test 'npm run dev --no-open' 8000 'percy snapshot snapshots.yml'",
     "test:ember": "start-server-and-test 'npm run open:ember' 4200 './node_modules/.bin/cypress-tags run -e TAGS='@cake' --browser chrome'",
     "open:ember": "cd examples/ember-app && npm install && npm run build-muon && npm run start",
-    "set-env": "env-cmd node config/environment.js",
     "lint:css:fix": "stylelint \"**/*.css\" --fix",
     "lint:css": "stylelint '**/*.css'",
     "lint:js:fix": "eslint 'packages/**/*.js' --fix",
@@ -64,11 +63,9 @@
     "chromatic": "6.17.3",
     "cypress": "12.15.0",
     "cypress-tags": "1.1.2",
-    "env-cmd": "^10.1.0",
     "esbuild": "0.17.10",
     "eslint": "8.39.0",
     "eslint-plugin-jsdoc": "43.1.1",
-    "fs": "^0.0.1-security",
     "husky": "8.0.3",
     "npm-run-all": "4.1.5",
     "standard-version": "9.5.0",