Use data attributes for test selectors (#299)

Resolves #273
shipshapecode · Dec 6, 2018 · 95f9afa · 95f9afa
1 parent 1740291
commit 95f9afa
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/test/cypress/integration/element-targeting.spec.js b/test/cypress/integration/element-targeting.spec.js
@@ -31,7 +31,7 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
     it('Adds the "shepherd-target" and "shepherd-enabled" classes upon showing a step', () => {
       tour.start();
 
-      cy.get('.hero-welcome')
+      cy.get('[data-test-hero-welcome]')
         .should('have.class', 'shepherd-target')
         .and('have.class', 'shepherd-enabled');
     });
@@ -40,7 +40,7 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
       tour.start();
       tour.next();
 
-      cy.get('.hero-welcome')
+      cy.get('[data-test-hero-welcome]')
         .should('not.have.class', 'shepherd-target')
         .and('not.have.class', 'shepherd-enabled');
     });

diff --git a/test/cypress/integration/test.acceptance.js b/test/cypress/integration/test.acceptance.js
@@ -48,13 +48,13 @@ describe('Shepherd Acceptance Tests', () => {
           .contains('Shepherd is a JavaScript library').should('be.visible');
 
         cy.document().then((document) => {
-          assert.deepEqual(document.querySelector('.hero-welcome'), tour.getCurrentStep().target, '.hero-welcome is the target');
+          assert.deepEqual(document.querySelector('[data-test-hero-welcome]'), tour.getCurrentStep().target, 'hero welcome is the target');
         });
       });
 
       it('works with DOM elements', () => {
         cy.document().then((document) => {
-          const heroIncludingElement = document.querySelector('.hero-including');
+          const heroIncludingElement = document.querySelector('[data-test-hero-including]');
 
           const steps = () => {
             return [
@@ -192,19 +192,19 @@ describe('Shepherd Acceptance Tests', () => {
           scrollTo: true
         });
         tour.start();
-        cy.get('.hero-scroll').should('have.prop', 'scrollTop').and('eq', 0);
+        cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0);
         cy.contains('Next').click();
-        cy.get('.hero-scroll').should('have.prop', 'scrollTop').and('gt', 0);
+        cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('gt', 0);
       });
 
       it('scrollTo:false does not scroll', () => {
         const tour = setupTour(Shepherd, {
           scrollTo: false
         });
         tour.start();
-        cy.get('.hero-scroll').should('have.prop', 'scrollTop').and('eq', 0);
+        cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0);
         cy.contains('Next').click();
-        cy.get('.hero-scroll').should('have.prop', 'scrollTop').and('eq', 0);
+        cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0);
       });
     });
   });

diff --git a/test/dummy/index.html b/test/dummy/index.html
@@ -26,16 +26,16 @@
 </head>
 
 <body>
-<div class="hero-scroll">
+<div class="hero-scroll" data-test-hero-scroll>
   <div class="hero-outer">
     <div class="hero-inner">
-      <div class="hero-welcome">
+      <div class="hero-welcome" data-test-hero-welcome>
         <h1>Shepherd</h1>
 
         <h2>Guide your users through a tour of your app.</h2>
       </div>
 
-      <div class="hero-including">
+      <div class="hero-including" data-test-hero-including>
         <h3>Including</h3>
 
         <script type="text/plain" class="language-markup" id="hero-including-code">