Refactor: Setup Cypress and add more examples (#149)

* Started refactoring example page

* refactoring examples

* tweaks

* Done adding examples

* working on writing tests

* finished writing tests

* workaround prettier-browser problem

* attempt setting up circleci

* update ci conf

* output more versions

* run real tests

* correct the test runner

* hmmm

* still trying

* trying circleci image instead

* not good, don't cache what could break

* add cypress deps

* sudo

* attempt using chrome

* cleanup

Author: stipsan

.circleci/config.yml

@@ -2,32 +2,50 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:carbon
+      - image: circleci/node:carbon-browsers
 
     working_directory: ~/repo
 
     steps:
       - checkout
 
+      - run: node --version && npm --version && npx --version && yarn --version
+
+      - run:
+          name: Install Cypress dependencies
+          command: sudo apt-get install xvfb libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+
       - add-ssh-keys:
           fingerprints:
             - "e1:ca:5d:f0:58:11:c7:ae:b7:ac:4a:1b:cc:3a:0d:4a"
 
       - restore_cache:
           keys:
-            - v2-dependencies-{{ checksum "yarn.lock" }}
-            - v2-dependencies-
+            - v3-dependencies-{{ checksum "yarn.lock" }}
+            - v3-dependencies-
 
       - run: yarn install
 
       - run: yarn build
 
+      - run: 
+          command: yarn start
+          background: true
+
+      - run: npx wait-on http://localhost:3000
+
       - run: yarn test
 
+      - store_test_results:
+          path: junit
+
+      - store_artifacts:
+          path: cypress/screenshots
+
       - save_cache:
           paths:
             - node_modules
-          key: v2-dependencies-{{ checksum "yarn.lock" }}
+          key: v3-dependencies-{{ checksum "yarn.lock" }}
 
       - run: yarn semantic-release || true
 

config.json

@@ -0,0 +1,3 @@
+{
+  "reporterEnabled": "spec, mocha-junit-reporter"
+}

cypress.json

@@ -1 +1,3 @@
-{}
+{
+  "baseUrl": "http://localhost:3000"
+}

cypress/fixtures/example.json

@@ -0,0 +1,59 @@
+describe('Basic Functionality', function() {
+  beforeEach(function() {
+    // Visiting our app before each test removes any state build up from
+    // previous tests. Visiting acts as if we closed a tab and opened a fresh one
+    cy.visit('/')
+
+    // Setup observers and set dataset values for test convenience
+    cy.window().then(win => {
+      const { IntersectionObserver, document, scrollIntoViewIfNeeded } = win
+
+      var options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: [0, 0.25, 0.5, 0.75, 1],
+      }
+
+      var observer = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(entry => {
+          entry.target.dataset.visibility =
+            entry.intersectionRatio >= 1 ? 'visible' : 'hidden'
+        })
+      }, options)
+      observer.observe(document.querySelector('#instance1 > li:nth-child(21)'))
+      document.querySelectorAll('button').forEach(button => {
+        button.dataset.nth = parseInt(button.value, 10) + 1
+        const parent = button.closest('div')
+        const item = parent.querySelector(`li:nth-child(${button.dataset.nth})`)
+        item.dataset.visibility = 'hidden'
+        observer.observe(item)
+      })
+    })
+  })
+  it('should scroll the list correctly', function() {
+    cy.get('#list1 button').each(function($el, index, $list) {
+      cy.wrap($el).click({ force: true })
+      const key = $el.data('nth')
+      cy.wait(300)
+      cy
+        .get(`#list1 li:nth-child(${key})`)
+        .should('have.data', 'visibility', 'visible')
+    })
+  })
+  it('should not scroll beyond boundary', function() {
+    cy.get('#list2').scrollIntoView()
+    cy.get('#list2 button:last').click({ force: true })
+    cy.wait(300)
+    cy.get(`#list2 li:first`).should('have.data', 'visibility', 'hidden')
+    cy.get(`#list2 li:last`).should('have.data', 'visibility', 'visible')
+  })
+  it('should scroll the last list correctly', function() {
+    cy.get('#list3 button').each(function($el, index, $list) {
+      cy.wrap($el).click({ force: true })
+      const key = $el.data('nth')
+      cy
+        .get(`#list3 li:nth-child(${key})`)
+        .should('have.data', 'visibility', 'visible')
+    })
+  })
+})