Add tests for anchor feature

bottlehs · May 13, 2018 · b0a7f98 · b0a7f98
1 parent bc05658
commit b0a7f98
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 2 deletions.
diff --git a/cypress/integration/settings_anchor_placement.js b/cypress/integration/settings_anchor_placement.js
diff --git a/cypress/integration/settings_anchor_spec.js b/cypress/integration/settings_anchor_spec.js
@@ -1,2 +1,49 @@
 describe('setting: anchor', function () {
+  before(() => {
+    cy.visit('/anchor.html');
+    cy.viewport(1280, 700);
+    cy.initAOS({
+      offset: 0,
+    });
+  });
+
+  it('Should properly animate elements according to anchor positions', () => {
+    cy.get('.aos-animate').should('have.length', 0);
+
+    cy.scrollTo(0, 50);
+    cy.get('.aos-animate').should('have.length', 1);
+    cy.get('[data-id="1"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 550);
+    cy.get('.aos-animate').should('have.length', 2);
+    cy.get('[data-id="2"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 750);
+    cy.get('.aos-animate').should('have.length', 3);
+    cy.get('[data-id="4"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 1050);
+    cy.get('.aos-animate').should('have.length', 4);
+    cy.get('[data-id="3"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 1250);
+    cy.get('.aos-animate').should('have.length', 5);
+    cy.get('[data-id="5"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 1450);
+    cy.get('.aos-animate').should('have.length', 6);
+    cy.get('[data-id="7"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 1750);
+    cy.get('.aos-animate').should('have.length', 7);
+    cy.get('[data-id="6"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 1950);
+    cy.get('.aos-animate').should('have.length', 8);
+    cy.get('[data-id="8"]').should('have.class', 'aos-animate');
+
+    cy.scrollTo(0, 2450);
+    cy.get('.aos-animate').should('have.length', 9);
+    cy.get('[data-id="9"]').should('have.class', 'aos-animate');
+  });
 });
diff --git a/demo/anchor.html b/demo/anchor.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>AOS - Animate on scroll library</title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="dist/aos.css" />
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="aos-anchors">
+      <div class="aos-anchors__lines"></div>
+      <div class="aos-anchors__sidebar">
+        <div data-id="1" data-aos="fade-up" data-aos-anchor="[data-anchor-id='1']" data-aos-anchor-placement="top-top">
+          Anchor: 1
+        </div>
+        <div data-id="2" data-aos="fade-up" data-aos-anchor="[data-anchor-id='2']" data-aos-anchor-placement="center-top">
+          Anchor: 2
+        </div>
+        <div data-id="3" data-aos="fade-up" data-aos-anchor="[data-anchor-id='3']" data-aos-anchor-placement="bottom-top">
+          Anchor: 3
+        </div>
+        <div data-id="4" data-aos="fade-up" data-aos-anchor="[data-anchor-id='4']" data-aos-anchor-placement="top-center">
+          Anchor: 4
+        </div>
+        <div data-id="5" data-aos="fade-up" data-aos-anchor="[data-anchor-id='5']" data-aos-anchor-placement="center-center">
+          Anchor: 5
+        </div>
+        <div data-id="6" data-aos="fade-up" data-aos-anchor="[data-anchor-id='6']" data-aos-anchor-placement="bottom-center">
+          Anchor: 6
+        </div>
+        <div data-id="7" data-aos="fade-up" data-aos-anchor="[data-anchor-id='7']" data-aos-anchor-placement="top-bottom">
+          Anchor: 7
+        </div>
+        <div data-id="8" data-aos="fade-up" data-aos-anchor="[data-anchor-id='8']" data-aos-anchor-placement="center-bottom">
+          Anchor: 8
+        </div>
+        <div data-id="9" data-aos="fade-up" data-aos-anchor="[data-anchor-id='9']" data-aos-anchor-placement="bottom-bottom">
+          Anchor: 9
+        </div>
+      </div>
+      <div class="aos-anchors__content">
+        <div data-anchor-id="1" data-placement="top-top"></div>
+        <div data-anchor-id="2" data-placement="center-top"></div>
+        <div data-anchor-id="3" data-placement="bottom-top"></div>
+        <div data-anchor-id="4" data-placement="top-center"></div>
+        <div data-anchor-id="5" data-placement="center-center"></div>
+        <div data-anchor-id="6" data-placement="bottom-center"></div>
+        <div data-anchor-id="7" data-placement="top-bottom"></div>
+        <div data-anchor-id="8" data-placement="center-bottom"></div>
+        <div data-anchor-id="9" data-placement="bottom-bottom"></div>
+      </div>
+    </div>
+
+    <script src="dist/aos.js"></script>
+    <script>
+      if (!window.Cypress) AOS.init();
+    </script>
+  </body>
+</html>
diff --git a/demo/css/styles.css b/demo/css/styles.css
@@ -45,3 +45,93 @@ body {
     width: 33%;
   }
 }
+
+.aos-anchors__lines {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 2px solid blue;
+  border-bottom: 2px solid red;
+}
+
+.aos-anchors__lines::before {
+  content: '';
+  width: 100%;
+  height: 2px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: green;
+}
+
+.aos-anchors__sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+
+.aos-anchors__sidebar > div {
+  padding: 5px 10px;
+  background: #f1f1f1;
+}
+
+.aos-anchors__content {
+  width: 400px;
+  margin: 50px auto;
+}
+
+.aos-anchors__content > div {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  margin-bottom: 50px;
+  background: #f1f1f1;
+  line-height: 300px;
+  text-align: center;
+  color: #333;
+}
+
+.aos-anchors__content > div::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+.aos-anchors__content > div::after {
+  content: attr(data-anchor-id);
+  position: relative;
+  background-color: #f1f1f1;
+}
+
+.aos-anchors__content > div[data-placement$="-bottom"]::before {
+  background-color: red;
+}
+
+.aos-anchors__content > div[data-placement$="-center"]::before {
+  background-color: green;
+}
+
+.aos-anchors__content > div[data-placement$="-top"]::before {
+  background-color: blue;
+}
+
+.aos-anchors__content > div[data-placement^="top-"]::before {
+  top: 0;
+}
+
+.aos-anchors__content > div[data-placement^="center-"]::before {
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.aos-anchors__content > div[data-placement^="bottom-"]::before {
+  bottom: 0;
+}