Add tests for animatedClassName, initClassName, useClassNames, mirror…

… and js events

cypress/integration/js_events_spec.js

@@ -0,0 +1,68 @@
+describe('JS Events', function() {
+  context('default events', function() {
+    let aosInStub;
+    let aosOutStub;
+
+    before(() => {
+      aosInStub = cy.stub();
+      aosOutStub = cy.stub();
+      cy
+        .visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in', aosInStub);
+          document.addEventListener('aos:out', aosOutStub);
+        })
+        .initAOS();
+    });
+
+    it('Should trigger custom events', function() {
+      expect(aosInStub).to.have.callCount(6);
+      expect(aosOutStub).to.be.not.called;
+
+      cy.scrollTo(0, 800);
+      cy.wait(0, () => {
+        expect(aosInStub).to.have.callCount(15);
+      });
+
+      cy.scrollTo('top');
+      cy.wait(0, () => {
+        expect(aosInStub).to.have.callCount(15);
+        expect(aosOutStub).to.have.callCount(9);
+      });
+    });
+  });
+
+  context('custom events', function() {
+    let aosInStub;
+    let aosOutStub;
+
+    before(() => {
+      aosInStub = cy.stub();
+      aosOutStub = cy.stub();
+      cy
+        .visit('/')
+        .document()
+        .then(document => {
+          document.addEventListener('aos:in:super-duper', aosInStub);
+          document.addEventListener('aos:out:super-duper', aosOutStub);
+        })
+        .initAOS();
+    });
+
+    it('Should trigger custom events', function() {
+      expect(aosInStub).to.be.not.called;
+      expect(aosOutStub).to.be.not.called;
+
+      cy.scrollTo(0, 350);
+      cy.wait(0, () => {
+        expect(aosInStub).to.be.calledOnce;
+      });
+
+      cy.scrollTo('top');
+      cy.wait(0, () => {
+        expect(aosOutStub).to.be.calledOnce;
+      });
+    });
+  });
+});

cypress/integration/settings_animatedClassName_spec.js

@@ -0,0 +1,34 @@
+describe('setting: animatedClassName', function() {
+  context('with: "rawr"', function() {
+    before(() => {
+      cy.visit('/');
+      cy.initAOS({
+        animatedClassName: 'rawr'
+      });
+    });
+
+    it('Should set proper class names on AOS elements', function() {
+      cy.get('.aos-animate').should('have.length', 0);
+      cy.get('.rawr').should('have.length', 6);
+
+      cy.scrollTo(0, 800);
+      cy.get('.aos-animate').should('have.length', 0);
+      cy.get('.rawr').should('have.length', 15);
+    });
+  });
+
+  context('with: null', function() {
+    before(() => {
+      cy.visit('/');
+      cy.initAOS({
+        animatedClassName: null
+      });
+    });
+
+    it('Should not set class names on AOS elements on scroll', function() {
+      cy.get('.aos-animate').should('have.length', 0);
+      cy.scrollTo(0, 800);
+      cy.get('.aos-animate').should('have.length', 0);
+    });
+  });
+});

cypress/integration/settings_initClassName_spec.js

@@ -0,0 +1,28 @@
+describe('setting: initClassName', function() {
+  context('with: "rawr"', function() {
+    before(() => {
+      cy.visit('/');
+      cy.initAOS({
+        initClassName: 'rawr'
+      });
+    });
+
+    it('Should set proper class names on AOS elements', function() {
+      cy.get('.aos-init').should('have.length', 0);
+      cy.get('.rawr').should('have.length', 24);
+    });
+  });
+
+  context('with: null', function() {
+    before(() => {
+      cy.visit('/');
+      cy.initAOS({
+        initClassName: null
+      });
+    });
+
+    it('Should not set initial class name on AOS elements', function() {
+      cy.get('.aos-init').should('have.length', 0);
+    });
+  });
+});

cypress/integration/settings_mirror.js

@@ -0,0 +1,45 @@
+describe('setting: mirror', function() {
+  before(() => {
+    cy.visit('/');
+    cy.viewport(1280, 650);
+    cy.initAOS({
+      mirror: true,
+      offset: 50
+    });
+  });
+
+  it('Should animate in and out', function() {
+    cy.get('.aos-animate').should('have.length', 6);
+
+    cy.scrollTo(0, 50);
+    cy.get('.aos-animate').should('have.length', 9);
+    cy
+      .get('.aos-init')
+      .eq(0)
+      .should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 300);
+    cy.get('.aos-animate').should('have.length', 6);
+    cy
+      .get('.aos-init')
+      .eq(0)
+      .should('not.have.class', 'aos-animate');
+
+    cy.scrollTo(0, 350);
+    cy.get('.aos-animate').should('have.length', 9);
+    cy
+      .get('.aos-init')
+      .eq(3)
+      .should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 600);
+    cy.get('.aos-animate').should('have.length', 6);
+    cy
+      .get('.aos-init')
+      .eq(3)
+      .should('not.have.class', 'aos-animate');
+
+    cy.scrollTo(0, 650);
+    cy.get('.aos-animate').should('have.length', 9);
+  });
+});

cypress/integration/settings_useClassNames.js

@@ -0,0 +1,43 @@
+describe('setting: useClassNames', function() {
+  context('just useClassNames', function() {
+    before(() => {
+      cy.visit('/animatecss.html');
+      cy.initAOS({
+        useClassNames: true
+      });
+    });
+
+    it('Should set proper custom class names on AOS elements', function() {
+      cy.get('.aos-animate').should('have.length', 6);
+      cy.get('.fadeInUp').should('have.length', 6);
+
+      cy.scrollTo(0, 800);
+      cy.get('.aos-animate').should('have.length', 15);
+      cy.get('.fadeInUp').should('have.length', 15);
+    });
+  });
+
+  context('with animatedClassName and initClassName', function() {
+    before(() => {
+      cy.visit('/animatecss.html');
+      cy.initAOS({
+        useClassNames: true,
+        initClassName: false,
+        animatedClassName: 'animate'
+      });
+    });
+
+    it('Should set proper custom class names on AOS elements', function() {
+      cy.get('.aos-init').should('have.length', 0);
+      cy.get('.aos-animate').should('have.length', 0);
+
+      cy.get('.animate').should('have.length', 6);
+      cy.get('.fadeInUp').should('have.length', 6);
+
+      cy.scrollTo(0, 800);
+      cy.get('.aos-animate').should('have.length', 0);
+      cy.get('.animate').should('have.length', 15);
+      cy.get('.fadeInUp').should('have.length', 15);
+    });
+  });
+});

demo/css/styles.css

@@ -8,6 +8,15 @@ body {
   box-sizing: border-box;
 }
 
+.scroll-counter {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 15px;
+  color: white;
+  background-color: rgba(0,0,0,0.4);
+}
+
 .aos-all {
   width: 1000px;
   max-width: 98%;

demo/index.html

@@ -11,6 +11,7 @@
     <![endif]-->
   </head>
   <body>
+    <div class="js-scroll-counter scroll-counter"></div>
     <div class="aos-all">
       <div data-id="1" class="aos-item" data-aos="fade-up"></div>
       <div data-id="2" class="aos-item" data-aos="fade-down"></div>
@@ -40,13 +41,21 @@
 
     <script src="dist/aos.js"></script>
     <script>
-      if (!window.Cypress) AOS.init({
-        mirror: true
-      });
+      if (!window.Cypress) {
+        const scrollCounter = document.querySelector('.js-scroll-counter');
 
-      document.addEventListener('aos:in:super-duper', ({ detail }) => {
-        console.log('in!', detail);
-      });
+        AOS.init({
+          mirror: true
+        });
+
+        document.addEventListener('aos:in', ({ detail }) => {
+          console.log('in!', detail);
+        });
+
+        window.addEventListener('scroll', function() {
+          scrollCounter.innerHTML = window.scrollY;
+        });
+      }
     </script>
   </body>
 </html>