Merge pull request usablica#1259 from usablica/more-e2e-tests

chore: adding element highlight tests

Author: afshinm

tests/cypress/integration/tour/highlight.js

@@ -3,6 +3,30 @@ context('Highlight', () => {
     cy.visit('./cypress/setup/index.html');
   });
 
+  it('should highlight the target element', () => {
+    cy.window()
+      .then(window => {
+        window.introJs().setOptions({
+          steps: [{
+            intro: "step one"
+          }, {
+            element: "#clickable-button",
+            intro: "step two"
+          }]
+        }).start();
+
+        cy.wait(500);
+
+        cy.compareSnapshot('highlight-element-first-step', 0);
+
+        cy.nextStep();
+
+        cy.wait(800);
+
+        cy.compareSnapshot('highlight-element-second-step', 0);
+      });
+  });
+
   it('should let user interact with the target element', () => {
     cy.window()
       .then(window => {
@@ -17,7 +41,7 @@ context('Highlight', () => {
 
         let sp = cy.spy(window, "click");
 
-        cy.get('.introjs-nextbutton').click();
+        cy.nextStep();
         cy.get('.introjs-tooltiptext').contains('step two');
 
         cy.get(".introjs-helperLayer").realHover();

tests/cypress/integration/tour/modal.js

@@ -17,15 +17,48 @@ context('Modal', () => {
 
       cy.compareSnapshot('first-step', 0);
 
-      cy.get('.introjs-nextbutton').click();
+      cy.nextStep();
       cy.wait(800);
 
       cy.compareSnapshot('second-step', 0);
 
-      cy.get('.introjs-nextbutton').click();
+      cy.nextStep();
       cy.wait(800);
 
       cy.compareSnapshot('exit', 0);
     });
   });
+
+  it('should set the position', () => {
+    cy.window().then((win) => {
+      cy.viewport('macbook-13');
+
+      win.introJs().setOptions({
+        steps: [{
+          element: '#main-section',
+          intro: 'position bottom',
+          position: 'bottom'
+        }, {
+          element: '#clickable-button',
+          intro: 'position right',
+          position: 'right'
+        }, {
+          element: '#clickable-absolute-button',
+          intro: 'position left',
+          position: 'left'
+        }]
+      }).start();
+
+      cy.wait(800);
+      cy.compareSnapshot('position-bottom', 0);
+
+      cy.nextStep();
+      cy.wait(500);
+      cy.compareSnapshot('position-right', 0);
+
+      cy.nextStep();
+      cy.wait(500);
+      cy.compareSnapshot('position-left', 0);
+    });
+  });
 });

tests/cypress/integration/tour/navigation.js

@@ -13,28 +13,28 @@ context('Navigation', () => {
 
   it('should go to the next step', () => {
     cy.get('.introjs-tooltiptext').contains('step one');
-    cy.get('.introjs-nextbutton').click();
+    cy.nextStep();
     cy.get('.introjs-tooltiptext').contains('step two');
   });
 
   it('previous button should be disabled', () => {
     cy.get('.introjs-tooltiptext').contains('step one');
     cy.get('.introjs-prevbutton').should('have.class', 'introjs-disabled');
-    cy.get('.introjs-prevbutton').click();
+    cy.prevStep();
     cy.get('.introjs-tooltiptext').contains('step one');
   });
 
   it('should go to the previous step', () => {
     cy.get('.introjs-tooltiptext').contains('step one');
-    cy.get('.introjs-nextbutton').click();
+    cy.nextStep();
     cy.get('.introjs-tooltiptext').contains('step two');
-    cy.get('.introjs-prevbutton').click();
+    cy.prevStep();
     cy.get('.introjs-tooltiptext').contains('step one');
   });
 
   it('should exit the tour after clicking on Done', () => {
     cy.get('.introjs-tooltiptext').contains('step one');
-    cy.get('.introjs-nextbutton').click();
+    cy.nextStep();
     cy.get('.introjs-tooltiptext').contains('step two');
     cy.get('.introjs-donebutton').should('exist');
     cy.get('.introjs-donebutton').click();

tests/cypress/setup/index.html

@@ -25,7 +25,7 @@
       </header>
 
       <div class="p-5 mb-4 bg-light rounded-3">
-        <div class="container-fluid py-5">
+        <div class="container-fluid py-5" id="main-section">
           <h1 class="display-5 fw-bold">Custom jumbotron</h1>
           <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
           <button class="btn btn-primary btn-lg" type="button" id="clickable-button" onclick="window.click()" onmouseover="this.innerHTML='Hovered'">Example button</button>

tests/cypress/snapshots/base/tour/highlight.js/highlight-element-first-step-base.png

@@ -28,4 +28,12 @@ const compareSnapshotCommand = require('cypress-visual-regression/dist/command')
 
 compareSnapshotCommand({
   capture: 'fullPage'
-});
+});
+
+Cypress.Commands.add('nextStep', () => {
+  cy.get('.introjs-nextbutton').click();
+});
+
+Cypress.Commands.add('prevStep', () => {
+  cy.get('.introjs-prevbutton').click();
+});