feature: add tests for multiple highlights

Author: Arnold

test/cypress/integration/test.acceptance.cy.js

@@ -361,7 +361,41 @@ describe('Shepherd Acceptance Tests', () => {
             '#dummyTarget is the target'
           );
         });
-      });   
+      });
+    
+    it.only('correctly selects multiple elements', () => {
+        cy.document().then((document) => {
+          const steps = () => {
+            return [
+              {
+                text: 'Multiple selection works too!',
+                attachTo: {
+                  element: '.hero-multiple div',
+                  on: 'bottom',
+          multiple: true
+                },
+                id: 'multipleStep'
+              }
+            ];
+          };
+
+          const tour = setupTour(Shepherd, {
+            cancelIcon: {
+              enabled: false
+            }
+          }, steps);
+
+          tour.start();
+
+          cy.get('[data-shepherd-step-id="multipleStep"] .shepherd-text')
+            .contains('Multiple selection works too!').should('be.visible');
+          assert.deepEqual(
+            [...document.querySelectorAll('.hero-multiple div')],
+            tour.getCurrentStep().target,
+            '#multiple-targets are in the target'
+          );
+        });
+      }); 
     });
 
     describe('buttons', () => {

test/dummy/css/welcome.css

@@ -67,6 +67,18 @@ body {
   text-align: center;
 }
 
+.hero-multiple {
+	display: flex;
+	justify-content: space-between;
+}
+
+.hero-multiple div {
+	display: block;
+	width: 30%;
+	height: 100px;
+	text-align: center;
+}
+
 .demo-heading {
   color: #00213B;
 }

test/dummy/index.html

@@ -33,6 +33,11 @@ <h1>Shepherd</h1>
       <h2>Guide your users through a tour of your app.</h2>
     </div>
 
+	<div class="hero-multiple">
+		<div>Block 1</div>
+		<div>Block 2</div>
+		<div>Block 3</div>
+	</div>
     <div class="hero-including" data-test-hero-including>
       <h3>Including</h3>
 

test/unit/utils/general.spec.js

@@ -2,7 +2,7 @@ import { spy } from 'sinon';
 import { Step } from '../../../src/js/step.js';
 import { getPopperOptions, parseAttachTo, shouldCenterStep } from '../../../src/js/utils/general.js';
 
-describe('General Utils', function() {
+describe('General Utils', function () {
   let optionsElement;
 
   beforeEach(() => {
@@ -15,8 +15,8 @@ describe('General Utils', function() {
     document.body.removeChild(optionsElement);
   });
 
-  describe('parseAttachTo()', function() {
-    it('fails if element does not exist', function() {
+  describe('parseAttachTo()', function () {
+    it('fails if element does not exist', function () {
       const step = new Step({}, {
         attachTo: { element: '.element-does-not-exist', on: 'center' }
       });
@@ -25,7 +25,7 @@ describe('General Utils', function() {
       expect(element).toBeFalsy();
     });
 
-    it('accepts callback function as element', function() {
+    it('accepts callback function as element', function () {
       const callback = spy();
 
       const step = new Step({}, {
@@ -36,7 +36,7 @@ describe('General Utils', function() {
       expect(callback.called).toBe(true);
     });
 
-    it('correctly resolves elements when given function that returns a selector', function() {
+    it('correctly resolves elements when given function that returns a selector', function () {
       const step = new Step({}, {
         attachTo: { element: () => 'body', on: 'center' }
       });
@@ -45,7 +45,7 @@ describe('General Utils', function() {
       expect(element[0]).toBe(document.body);
     });
 
-    it('binds element callback to step', function() {
+    it('binds element callback to step', function () {
       const step = new Step({}, {
         attachTo: {
           element() {
@@ -57,10 +57,36 @@ describe('General Utils', function() {
 
       parseAttachTo(step);
     });
+
+    it('returns all selected elements if multiple flag enabled', function () {
+      const elements = [];
+      const addNode = () => {
+        const el = document.createElement('div');
+        el.className = 'multiple-item';
+        document.body.appendChild(el);
+        return el;
+      };
+
+      elements.push(addNode());
+      elements.push(addNode());
+
+      const step = new Step({}, {
+        attachTo: {
+          element: '.multiple-item',
+          on: 'center',
+          multiple: true
+        }
+      });
+
+      const { element } = parseAttachTo(step);
+      elements.forEach((el, index) => {
+        expect(element[index]).toBe(el);
+      })
+    });
   });
 
-  describe('getPopperOptions', function() {
-    it('modifiers can be overridden', function() {
+  describe('getPopperOptions', function () {
+    it('modifiers can be overridden', function () {
       const step = new Step({}, {
         attachTo: { element: '.options-test', on: 'right' },
         popperOptions: {
@@ -79,7 +105,7 @@ describe('General Utils', function() {
       expect(popperOptions.modifiers[1].options.altAxis).toBe(false);
     });
 
-    it('positioning strategy is explicitly set', function() {
+    it('positioning strategy is explicitly set', function () {
       const step = new Step({}, {
         attachTo: { element: '.options-test', on: 'center' },
         options: {
@@ -138,7 +164,7 @@ describe('General Utils', function() {
     })
 
     it('Returns true when element property is null', () => {
-      const elementAttachTo = { element: null}; // FAILS
+      const elementAttachTo = { element: null }; // FAILS
 
       expect(shouldCenterStep(elementAttachTo)).toBe(true)
     })