test: update e2e

.cypress-cucumber-preprocessorrc.json

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

cypress/e2e/component_tests/muon_card.feature

@@ -0,0 +1,23 @@
+@card
+Feature: muon card component
+
+    Scenario Outline: muon card <type> component
+
+        Given Launch the '<component>' component '<type>' type in the browser
+        When the user changes the content in the '<type>' card
+        Then Validate the shadow dom and elements in '<type>' type
+
+        Examples:
+        |component       |type                  |
+        |muon-card       |standard              |
+        |muon-card       |standard-with-image   |
+
+    Scenario Outline: muon card with cta component
+
+        Given Launch the '<component>' component '<type>' type in the browser
+        When the user changes the content in the '<type>' card
+        Then Validate the shadow dom and elements in '<type>' type
+
+        Examples:
+        |component       |type                  |
+        |muon-card       |standard-with-cta     |

cypress/e2e/component_tests/muon_card/muon_card.js

@@ -0,0 +1,71 @@
+
+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) => {
+  cy.launchComponent(component, type);
+  cy.wait(3000)
+});
+
+When('the user changes the content in the {string} card', (type) => {
+
+    cy.document().then((doc)=>{
+
+       const cardComponent = doc.querySelector('muon-card');
+
+       cardComponent.querySelector('[slot="header"]').innerText = "Heading of the card component";
+       cardComponent.querySelector('p').innerText = "test the paragraph in card";
+
+       let footerSlot = cardComponent.querySelector('[slot="footer"]')
+       let CTA = footerSlot.querySelector('muon-cta')
+
+       if (type === 'standard-with-cta'){
+         CTA.innerText = "Nucleus, the best"; 
+         CTA.setAttribute('href','#!')
+
+       } else {
+         footerSlot.innerText = "Nucleus, the best";
+       }
+
+
+    })  
+
+});
+
+Then('Validate the shadow dom and elements in {string} type', (type) => {
+
+
+  cy.document().then((doc)=>{
+
+      cy.get('muon-card').shadow().find('.card').as('cardShadow')
+
+      cy.get('@cardShadow').should('exist');
+      cy.get('@cardShadow').find('.body').should('exist');
+
+     const cardComponent = doc.querySelector('muon-card');
+
+     const header = cardComponent.shadowRoot.querySelector(cardElement.header).querySelector('slot[name="header"]').assignedNodes()[0].innerText;
+     const paragraph = cardComponent.shadowRoot.querySelector(cardElement.content).querySelector('slot').assignedNodes()[2].innerText;
+     const footer = cardComponent.shadowRoot.querySelector(cardElement.footer).querySelector('slot[name="footer"]').assignedNodes()[0].innerText;
+
+     assert.equal("Heading of the card component", header,'Header is different in shadowroot slot');
+     assert.equal("test the paragraph in card", paragraph,'Paragraph is different in shadowroot slot');
+     assert.equal("Nucleus, the best", footer,'Footer text is different in shadowroot slot'); 
+
+     if (type.includes('image')){
+
+        //alias
+        cy.get('muon-card').shadow().find('.card').find('.media').as('cardMedia')
+        cy.get('@cardMedia').find('card-image').as('cardImage')
+        cy.get('@cardImage').find('div.image').find('img').as('tagImage')
+
+
+        cy.get('@cardMedia').should('exist');
+        cy.get('@cardImage').invoke('attr','src').should('eq','https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg');
+        cy.get('@cardImage').invoke('attr','alt').should('be.empty');
+        cy.get('@tagImage').invoke('attr','src').should('eq','https://blog.nucleus.design/vanilla-first/vanilla-ice-cream-cone.jpg');
+        cy.get('@tagImage').invoke('attr','class').should('eq','blur-out image-lazy');
+
+     }
+  })
+})

cypress/e2e/component_tests/muon_cta.feature

@@ -0,0 +1,29 @@
+@cta
+Feature: muon CTA component
+
+    Scenario Outline: muon CTA <type> component
+
+        Given Launch the '<component>' component '<type>' type in the browser
+        Then Validate the elements and attributes in the '<type>' component
+
+        Examples:
+        |component       |type                  |
+        |muon-cta        |standard              |
+        |muon-cta        |disabled              |
+        |muon-cta        |loading               |
+        |muon-cta        |hidden                |       
+        |muon-cta        |standard-link         |
+        |muon-cta        |disabled-link         |
+        |muon-cta        |loading-link          |
+        |muon-cta        |standard-button       |
+        |muon-cta        |disabled-button       |
+        |muon-cta        |loading-button        |
+        |muon-cta        |standard-within-link  |
+        |muon-cta        |disabled-within-link  |
+        |muon-cta        |loading-within-link   |
+        |muon-cta        |standard-within-button|
+        |muon-cta        |disabled-within-button|
+        |muon-cta        |loading-within-button |
+        |muon-cta        |standard-form         |
+        |muon-cta        |disabled-form         |
+        |muon-cta        |loading-form          |

cypress/e2e/component_tests/muon_cta/muon_cta.js

@@ -0,0 +1,128 @@
+
+import {Then} from '@badeball/cypress-cucumber-preprocessor';
+
+
+Then('Validate the elements and attributes in the {string} component', (type) => {
+
+  // eslint-disable-next-line default-case
+  switch (type) {
+
+    case 'standard':
+      cy.get('muon-cta').invoke('attr', 'role').should('eq', 'button');
+      cy.validateCTAShadow('div', 'cta standard', 'arrow-right');
+      break;
+
+    case 'disabled':
+      cy.get('muon-cta').invoke('attr', 'disabled').should('exist');
+      cy.validateCTAShadow('div', 'cta standard disabled', 'arrow-right');
+      break;
+
+    case 'loading':
+      cy.get('muon-cta').invoke('attr', 'loading').should('exist');
+      cy.validateCTAShadow('div', 'cta standard loading', 'spinner');
+      break;
+
+    case 'hidden':
+      cy.get('muon-cta').should('have.css', 'display', 'inline-block');
+      cy.get('muon-cta').invoke('attr', 'role').should('eq', 'button');
+      cy.validateCTAShadow('div', 'cta standard', 'arrow-right');
+
+      break;
+
+    case 'standard-link':
+    case 'disabled-link':
+      cy.get('muon-cta').shadow().find('a').then((shadowLink=>{
+        cy.wrap(shadowLink).invoke('attr', 'href').should('exist');
+      }))
+
+     if(type === 'disabled-link'){
+      cy.get('muon-cta').invoke('attr', 'disabled').should('exist');
+     }
+
+     let shadowClass = (type === 'standard-link') ? 'cta standard' : 'cta standard disabled'
+      cy.validateCTAShadow('a', shadowClass, 'arrow-right');
+      break;
+
+    case 'loading-link':
+      cy.get('muon-cta').then((shadowLink=>{
+        cy.wrap(shadowLink).shadow().find('a').invoke('attr', 'href').should('exist');
+        cy.wrap(shadowLink).invoke('attr', 'tabindex').should('eq', '-1');
+      }))
+      cy.loadingShadowSpan('div');
+      cy.validateCTAShadow('a', 'cta standard loading', 'spinner');
+      break;
+
+    case 'standard-button':
+      cy.validateCTAShadow('button', 'cta standard', 'arrow-right');
+      break;
+
+    case 'disabled-button':
+      cy.get('muon-cta').invoke('attr', 'aria-disabled').should('eq', 'true');
+      cy.get('muon-cta').invoke('attr', 'disabled').should('exist');
+      cy.validateCTAShadow('button', 'cta standard disabled', 'arrow-right');
+      break;
+
+    case 'loading-button':
+      cy.get('muon-cta').invoke('attr', 'loading').should('exist');
+      cy.loadingShadowSpan('div');
+      cy.validateCTAShadow('button', 'cta standard loading', 'spinner');
+      break;
+
+    case 'standard-within-link':
+      cy.get('a').invoke('attr', 'href').should('exist');
+      cy.validateCTAShadow('div', 'cta standard', 'arrow-right');
+      break;
+
+    case 'disabled-within-link':
+      cy.get('a').get('muon-cta').then(ctaLink=>{
+        cy.wrap(ctaLink).invoke('attr', 'aria-disabled').should('eq', 'true');
+      })
+      cy.get('a').invoke('attr', 'href').should('exist');
+      cy.validateCTAShadow('div', 'cta standard disabled', 'arrow-right');
+      break;
+
+    case 'loading-within-link':
+      cy.get('a').invoke('attr', 'href').should('exist');
+      cy.loadingShadowSpan('a');
+      cy.validateCTAShadow('div', 'cta standard loading', 'spinner');
+      break;
+
+    case 'standard-within-button':
+      cy.get('button').get('muon-cta').should('exist');
+      cy.validateCTAShadow('div', 'cta standard', 'arrow-right');
+      break;
+
+    case 'disabled-within-button':
+      cy.get('button').then((ctaButton=>{
+        cy.wrap(ctaButton).invoke('attr', 'disabled').should('exist');
+        cy.wrap(ctaButton).get('muon-cta').invoke('attr', 'disabled').should('exist');
+        cy.wrap(ctaButton).get('muon-cta').invoke('attr', 'aria-disabled').should('eq', 'true');
+      }))
+      cy.get('button').invoke('attr', 'disabled').should('exist');
+      cy.validateCTAShadow('div', 'cta standard disabled', 'arrow-right');
+      break;
+
+    case 'loading-within-button':
+      cy.get('button').find('muon-cta').invoke('attr', 'loading').should('exist');
+      cy.validateCTAShadow('div', 'cta standard loading', 'spinner');
+      break;
+
+    case 'standard-form':
+      cy.get('form').get('muon-cta').should('exist');
+      cy.validateCTAShadow('button', 'cta standard', 'arrow-right');
+      break;
+
+    case 'disabled-form':
+      cy.get('form').get('muon-cta').invoke('attr', 'disabled').should('exist');
+      cy.validateCTAShadow('button', 'cta standard disabled', 'arrow-right');
+      break;
+
+    case 'loading-form':
+      cy.get('form').get('muon-cta').invoke('attr', 'loading').should('exist');
+      cy.loadingShadowSpan('form');
+      cy.validateCTAShadow('button', 'cta standard loading', 'spinner');
+      break;
+
+  }
+
+});

cypress/e2e/component_tests/muon_detail.feature

@@ -0,0 +1,13 @@
+@detail
+Feature: muon detail component
+
+    Scenario Outline: muon detail <type> component
+
+        Given Launch the '<component>' component '<type>' type in the browser
+        When User clicks to expand the detail
+        Then Validate the attributes and elements in the '<type>' detail component
+
+        Examples:
+        |component       |type          |
+        |muon-detail     |standard      |
+        |muon-detail     |with-icon     |

cypress/e2e/component_tests/muon_detail/muon_detail.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-undef */
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+
+
+When('User clicks to expand the detail', () => {
+  cy.get('muon-detail').find('div[slot="heading"]').click();
+});
+
+Then('Validate the attributes and elements in the {string} detail component', (type) => {
+
+  cy.get('muon-detail').shadow().find('details').as('details')
+  cy.get('@details').find('summary.heading').find('detail-icon.toggle').as('toggle')
+
+  if (type === 'with-icon') {
+    cy.get('muon-detail').invoke('attr', 'icon').should('eq', 'dot-circle');
+    cy.get('@details').invoke('attr', 'class').should('eq', ' details toggle-end has-icon ');
+    cy.get('@details').find('summary.heading').find('detail-icon.icon').invoke('attr', 'name').should('eq', 'dot-circle');
+  } else {
+    cy.get('@details').invoke('attr', 'class').should('eq', ' details toggle-end ');
+  }
+
+  //validate the component when open
+  cy.get('muon-detail').invoke('attr', 'open').should('exist');
+  cy.get('@details').invoke('attr', 'open').should('exist');
+  cy.get('@toggle').invoke('attr', 'name').should('eq', 'chevron-circle-up');
+
+  //Heading and paragraph validation
+  cy.fixture('data').then((detail)=>{
+    cy.get('muon-detail').find('div[slot="heading"]').should('have.text', detail.detail_heading);
+    cy.get('muon-detail').invoke('text').should('contains', detail.detail_content);
+  });
+
+
+  //Click the expander to close the content
+  cy.get('muon-detail').find('div[slot="heading"]').click();
+  cy.get('muon-detail').invoke('attr', 'open').should('not.exist');
+  cy.get('@details').invoke('attr', 'open').should('not.exist');
+  cy.get('@toggle').invoke('attr', 'name').should('eq', 'chevron-circle-down');
+
+  cy.get('muon-detail').children().invoke('attr', 'slot').should('eq', 'heading');
+
+});

cypress/e2e/component_tests/muon_form.feature

@@ -0,0 +1,31 @@
+@form
+Feature: muon form component
+
+    Scenario Outline: muon form standard component with valid
+
+        Given Launch the muon-form component standard 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          |
+
+    Scenario Outline: muon form standard component with invalid
+
+        Given Launch the muon-form component standard type in the browser
+        When  User clicks on submit and validate the '<validation>' form
+        And User resets the form  
+
+        Examples:
+        |validation     |
+        |invalid        |
+
+    Scenario: muon form standard component with focusing error field and enter submission
+
+        Given Launch the muon-form component standard 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 
+
+