test(parallax): add e2e tests (#1542)

* feat: add new demo for testing * test: add cypress and initial tests * fix: add cypress to jest ignore patterns * feat: add start-server-and-test * feat: add snapshots * chore: add parallax tests to root folder scripts * test: move dev deps to root package.json * chore: move cypress folders to root * chore: rename demo folder to test * chore: add README to test app * fix: make sure we're testing ts with test script Co-authored-by: Josh <[email protected]>
pmndrs · Jul 20, 2021 · b8d732e · b8d732e
1 parent d402597
commit b8d732e
Show file tree

Hide file tree

Showing 24 changed files with 2,836 additions and 48 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -24,4 +24,6 @@ jobs:
           npm i -g yarn 
           yarn install
       - name: Run tests
-        run: yarn test:ts && yarn test:cov
+        run: yarn test
+      - name: Trial Build
+        run: yarn build
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false,
+  "scrollBehavior": false,
+  "fixturesFolder": false,
+  "screenshotOnRunFailure": false,
+  "ignoreTestFiles": ["**/__snapshots__/*"]
+}
diff --git a/cypress/integration/__snapshots__/parallax.spec.js.snap b/cypress/integration/__snapshots__/parallax.spec.js.snap
@@ -0,0 +1,159 @@
+exports[`Parallax - vertical > should translate layers as expected #0`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: hidden scroll; transform: translate3d(0px, 0px, 0px);"
+></div>
+`;
+
+exports[`Parallax - vertical > should translate layers as expected #1`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: hidden scroll; transform: translate3d(0px, 0px, 0px);"
+>
+  <div
+    style="overflow: hidden; position: absolute; width: 100%; height: 1980px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div
+      data-testid="opposite-layer"
+      class="opposite"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 660px; transform: translate3d(660px, 0px, 0px);"
+    ></div>
+    <div
+      data-testid="default-layer"
+      class="default"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 660px, 0px);"
+    ></div>
+    <div
+      class="flex-center"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 0px, 0px);"
+    >
+      <button>Scroll</button>
+    </div>
+  </div>
+  <div
+    data-testid="sticky-layer"
+    class="sticky"
+    style="position: sticky; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div class="sticky-content flex-center">Sticky</div>
+  </div>
+</div>
+`;
+
+exports[`Parallax - vertical > should translate layers as expected #2`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: hidden scroll; transform: translate3d(0px, 0px, 0px);"
+>
+  <div
+    style="overflow: hidden; position: absolute; width: 100%; height: 1980px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div
+      data-testid="opposite-layer"
+      class="opposite"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 660px; transform: translate3d(0px, 0px, 0px);"
+    ></div>
+    <div
+      data-testid="default-layer"
+      class="default"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 0px, 0px);"
+    ></div>
+    <div
+      class="flex-center"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 0px, 0px);"
+    >
+      <button>Scroll</button>
+    </div>
+  </div>
+  <div
+    data-testid="sticky-layer"
+    class="sticky"
+    style="position: sticky; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 660px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div class="sticky-content flex-center">Sticky</div>
+  </div>
+</div>
+`;
+
+exports[`Parallax - horizontal > should translate layers as expected #0`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: scroll hidden; transform: translate3d(0px, 0px, 0px);"
+></div>
+`;
+
+exports[`Parallax - horizontal > should translate layers as expected #1`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: scroll hidden; transform: translate3d(0px, 0px, 0px);"
+>
+  <div
+    style="overflow: hidden; position: absolute; height: 100%; width: 3000px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div
+      data-testid="opposite-layer"
+      class="opposite"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 1000px; transform: translate3d(0px, 1000px, 0px);"
+    ></div>
+    <div
+      data-testid="default-layer"
+      class="default"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(1000px, 0px, 0px);"
+    ></div>
+    <div
+      class="flex-center"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(0px, 0px, 0px);"
+    >
+      <button>Scroll</button>
+    </div>
+  </div>
+  <div
+    data-testid="sticky-layer"
+    class="sticky"
+    style="position: sticky; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div class="sticky-content flex-center">Sticky</div>
+  </div>
+</div>
+`;
+
+exports[`Parallax - horizontal > should translate layers as expected #2`] = `
+<div
+  data-testid="container"
+  class="container"
+  style="position: absolute; width: 100%; height: 100%; overflow: scroll hidden; transform: translate3d(0px, 0px, 0px);"
+>
+  <div
+    style="overflow: hidden; position: absolute; height: 100%; width: 3000px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div
+      data-testid="opposite-layer"
+      class="opposite"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; width: 100%; height: 1000px; transform: translate3d(0px, 0px, 0px);"
+    ></div>
+    <div
+      data-testid="default-layer"
+      class="default"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(0px, 0px, 0px);"
+    ></div>
+    <div
+      class="flex-center"
+      style="position: absolute; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(0px, 0px, 0px);"
+    >
+      <button>Scroll</button>
+    </div>
+  </div>
+  <div
+    data-testid="sticky-layer"
+    class="sticky"
+    style="position: sticky; inset: 0px; background-size: auto; background-repeat: no-repeat; will-change: transform; height: 100%; width: 1000px; transform: translate3d(0px, 0px, 0px);"
+  >
+    <div class="sticky-content flex-center">Sticky</div>
+  </div>
+</div>
+`;
diff --git a/cypress/integration/parallax.spec.js b/cypress/integration/parallax.spec.js
@@ -0,0 +1,164 @@
+describe('Parallax - vertical', () => {
+  const HEIGHT = Cypress.config('viewportHeight')
+
+  beforeEach(() => {
+    cy.visit('/vertical')
+  })
+
+  it('should translate layers as expected', () => {
+    // intial snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // initial layer positions
+    cy.findByTestId('default-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, ${HEIGHT * 2}px, 0px)`)
+      )
+
+    cy.findByTestId('opposite-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(${HEIGHT * 2}px, 0px, 0px)`)
+      )
+
+    cy.findByTestId('sticky-layer')
+      .should('have.css', 'position', 'absolute')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, ${HEIGHT}px, 0px)`)
+      )
+
+    // scroll to next page
+    cy.findByTestId('container').scrollTo(0, HEIGHT)
+    // wait for animation to finish
+    cy.wait(2000)
+
+    // halfway snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // halfway layer positions
+    cy.findByTestId('default-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, ${HEIGHT}px, 0px)`)
+      )
+
+    cy.findByTestId('opposite-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(${HEIGHT}px, 0px, 0px)`)
+      )
+
+    cy.findByTestId('sticky-layer')
+      .should('have.css', 'position', 'sticky')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, 0px, 0px)`)
+      )
+
+    // scroll to last page
+    cy.findByTestId('container').scrollTo('bottom')
+    // wait for animation again
+    cy.wait(2000)
+
+    // final snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // final layer positions
+    cy.findAllByTestId(/-layer/).each(layer =>
+      expect(layer[0].style.transform).to.equal('translate3d(0px, 0px, 0px)')
+    )
+
+    cy.findByTestId('sticky-layer').should('have.css', 'position', 'sticky')
+  })
+
+  it('should scroll to the correct page with scrollTo', () => {
+    cy.findByRole('button').click()
+
+    cy.findByTestId('container').invoke('scrollTop').should('equal', HEIGHT)
+  })
+})
+
+describe('Parallax - horizontal', () => {
+  const WIDTH = Cypress.config('viewportWidth')
+
+  beforeEach(() => {
+    cy.visit('/horizontal')
+  })
+
+  it('should translate layers as expected', () => {
+    // intial snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // initial layer positions
+    cy.findByTestId('default-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(${WIDTH * 2}px, 0px, 0px)`)
+      )
+
+    cy.findByTestId('opposite-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, ${WIDTH * 2}px, 0px)`)
+      )
+
+    cy.findByTestId('sticky-layer')
+      .should('have.css', 'position', 'absolute')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(${WIDTH}px, 0px, 0px)`)
+      )
+
+    // scroll to next page
+    cy.findByTestId('container').scrollTo(WIDTH, 0)
+    // wait for animation to finish
+    cy.wait(2000)
+
+    // halfway snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // halfway layer positions
+    cy.findByTestId('default-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(${WIDTH}px, 0px, 0px)`)
+      )
+
+    cy.findByTestId('opposite-layer')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, ${WIDTH}px, 0px)`)
+      )
+
+    cy.findByTestId('sticky-layer')
+      .should('have.css', 'position', 'sticky')
+      .then(layer => layer[0].style.transform)
+      .then(transform =>
+        expect(transform).to.equal(`translate3d(0px, 0px, 0px)`)
+      )
+
+    // a possible bug in cypress causes this to fail with `yarn cypress` (`cypress open`)
+    // but will pass with `yarn test` (`cypress run`)
+    cy.findByTestId('container').scrollTo('right')
+    // wait for animation again
+    cy.wait(2000)
+
+    // final snapshot
+    cy.findByTestId('container').toMatchSnapshot()
+
+    // final layer positions
+    cy.findAllByTestId(/-layer/).each(layer =>
+      expect(layer[0].style.transform).to.equal('translate3d(0px, 0px, 0px)')
+    )
+
+    cy.findByTestId('sticky-layer').should('have.css', 'position', 'sticky')
+  })
+
+  it('should scroll to the correct page with scrollTo', () => {
+    cy.findByRole('button').click()
+
+    cy.findByTestId('container').invoke('scrollLeft').should('equal', WIDTH)
+  })
+})
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -0,0 +1,6 @@
+const { initPlugin } = require('cypress-plugin-snapshots/plugin')
+
+module.exports = (on, config) => {
+  initPlugin(on, config)
+  return config
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands'
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import 'cypress-plugin-snapshots/commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/jest.config.js b/jest.config.js
@@ -8,7 +8,7 @@ module.exports = {
     '.+/(types|__snapshots__)/.+',
     '<rootDir>/node_modules/',
   ],
-  modulePathIgnorePatterns: ['dist'],
+  modulePathIgnorePatterns: ['dist', 'cypress'],
   moduleNameMapper: {
     '^react$': '<rootDir>/node_modules/react',
   },