writes unit tests with Jest and Enzyme, #1

Author: jacobsfletch

dist/build.bundle.js

@@ -0,0 +1,5 @@
+module.exports = {
+  verbose: true,
+  setupFilesAfterEnv: ['./src/index.test.js'],
+  testPathIgnorePatterns: ['./src/index.test.js'],
+};

jest.config.js

@@ -1,6 +1,6 @@
 {
   "name": "@trbl/react-scroll-info",
-  "version": "0.0.16",
+  "version": "1.0.0",
   "main": "dist/build.bundle.js",
   "repository": "git@github.com:trouble/react-scroll-info.git",
   "description": "A roll, as of parchment or papyrus, used especially in the writing of a document.",
@@ -15,10 +15,10 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn run lint && webpack --config webpack.production.config.js",
+    "build": "yarn lint && yarn test && webpack --config webpack.production.config.js",
     "dev": "webpack-dev-server --hot --inline --config webpack.development.config.js",
     "lint": "eslint .",
-    "test": "echo \"No test specified\""
+    "test": "jest"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -33,16 +33,21 @@
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.0.0",
-    "@trbl/eslint-config": "^1.1.4",
+    "@trbl/eslint-config": "1.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "eslint": "^5.16.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
     "eslint-loader": "^3.0.3",
-    "eslint-plugin-import": "^2.17.2",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jest": "^23.3.0",
+    "eslint-plugin-jest-dom": "^1.4.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
     "react-hot-loader": "^4.12.14",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.9",

package.json

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ScrollInfoProvider from '.';
+
+describe('ScrollInfoProvider with a cached scroll', () => {
+  // To simulate the behavior of Chrome, the window.scrollTo method needs to be called twice,
+  // once before mount and then once after -- see comment on lines 55-60 of ScrollInfoProvider.
+  window.scrollTo(534, 390);
+
+  const wrapper = mount(
+    <ScrollInfoProvider />,
+  );
+
+  window.scrollTo(534, 390);
+
+  it('rendered with an initial state of correct shape and value', () => {
+    const state = wrapper.state();
+
+    expect(state).toMatchObject({
+      x: 534,
+      y: 390,
+      xDifference: 534,
+      yDifference: 390,
+      xDirection: 'right',
+      yDirection: 'down',
+      xPercentage: 36.60041124057574,
+      yPercentage: 9.215500945179585,
+      totalPercentage: 22.90795609287766,
+      eventsFired: 1,
+    });
+  });
+});

src/ScrollInfoProvider/index.cached-scroll.test.js

@@ -50,12 +50,12 @@ class ScrollInfoProvider extends Component {
       hasScrolled: prevHasScrolled,
     } = this.state;
 
-    // Set to zero on first render and mount for cross-browser compatibility --
+    // Set currentScroll to zero on mount for cross-browser compatibility --
     // Some browsers populate the cached window.pageOffset at different points of the component lifecycle.
-    // Chrome mounts with the cached window.pageOffset, while Safari and FireFox both only
-    // populate it on first scroll event -- which is triggered by the browser in some cases.
-    // The presence of a timestamp indicates that it wasn't first render or first mount,
-    // but a true requestAnimationFrame scroll event. Keep at zero otherwise.
+    // Chrome mounts with cached window.pageOffset coordinates even before firing the respective cached scroll event.
+    // Neither Safari and FireFox populate these coordinates until this cached scroll (natively triggered by the browser).
+    // The presence of a timestamp indicates that the caller of this method was not componentDidMount,
+    // but rather a true scroll event via requestAnimationFrame. Keep at zero otherwise.
     const hasScrolled = prevHasScrolled || Boolean(timestamp);
     const currentScrollX = hasScrolled ? window.pageXOffset : 0;
     const currentScrollY = hasScrolled ? window.pageYOffset : 0;
@@ -69,9 +69,8 @@ class ScrollInfoProvider extends Component {
     const yPercentage = (currentScrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
     const totalPercentage = (xPercentage + yPercentage) / 2;
 
-    /* eslint-disable no-nested-ternary */
-    const xDirection = xDifference > 0 ? 'right' : xDifference < 0 ? 'left' : prevXDirection;
-    const yDirection = yDifference > 0 ? 'down' : yDifference < 0 ? 'up' : prevYDirection;
+    const xDirection = xDifference > 0 ? 'right' : xDifference < 0 ? 'left' : prevXDirection; // eslint-disable-line no-nested-ternary
+    const yDirection = yDifference > 0 ? 'down' : yDifference < 0 ? 'up' : prevYDirection; // eslint-disable-line no-nested-ternary
 
     this.setState({
       x: currentScrollX,
@@ -97,16 +96,18 @@ class ScrollInfoProvider extends Component {
 
     return (
       <ScrollInfoContext.Provider value={{ scrollInfo }}>
-        {children}
+        {children && children}
       </ScrollInfoContext.Provider>
     );
   }
 }
 
-ScrollInfoProvider.defaultProps = {};
+ScrollInfoProvider.defaultProps = {
+  children: undefined,
+};
 
 ScrollInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export default ScrollInfoProvider;

src/ScrollInfoProvider/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ScrollInfoProvider from '.';
+
+describe('ScrollInfoProvider', () => {
+  const wrapper = mount(
+    <ScrollInfoProvider />,
+  );
+
+  it('rendered with an initial state of correct shape and value', () => {
+    const state = wrapper.state();
+
+    expect(state).toMatchObject({
+      x: 0,
+      y: 0,
+      xDifference: 0,
+      yDifference: 0,
+      xDirection: '',
+      yDirection: '',
+      xPercentage: 0,
+      yPercentage: 0,
+      totalPercentage: 0,
+      eventsFired: 0,
+    });
+  });
+
+  it('responded to a window scroll event with an internal state update', () => {
+    window.scrollTo(534, 390);
+    const state = wrapper.state();
+
+    expect(state).toMatchObject({
+      x: 534,
+      y: 390,
+      xDifference: 534,
+      yDifference: 390,
+      xDirection: 'right',
+      yDirection: 'down',
+      xPercentage: 36.60041124057574,
+      yPercentage: 9.215500945179585,
+      totalPercentage: 22.90795609287766,
+      eventsFired: 1,
+      hasScrolled: true,
+      animationScheduled: false,
+    });
+  });
+});

src/ScrollInfoProvider/index.test.js

@@ -0,0 +1,34 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+window.scrollTo = function scrollTo(xCoord, yCoord) {
+  Object.assign(this, {
+    pageXOffset: xCoord,
+    pageYOffset: yCoord,
+  }).dispatchEvent(new this.Event('scroll'));
+};
+
+window.requestAnimationFrame = (callback) => {
+  const timestamp = performance.now();
+  callback(timestamp);
+};
+
+const addSettersToBody = (properties) => {
+  if (properties && properties.length > 0) {
+    properties.forEach((property) => {
+      Object.defineProperty(window.document.body, property, {
+        writable: true,
+        set property(value) {
+          this[property] = value;
+        },
+      });
+    });
+  }
+};
+
+addSettersToBody(['scrollWidth', 'scrollHeight']);
+
+window.document.body.scrollWidth = 2483;
+window.document.body.scrollHeight = 5000;

src/index.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ScrollInfoProvider from '../ScrollInfoProvider';
+import withScrollInfo from '.';
+
+describe('withScrollInfo', () => {
+  const WithScrollInfo = withScrollInfo(() => (
+    <code>
+      Hello, world!
+    </code>
+  ));
+
+  // Note: when .props() is called on a shallow wrapper, the returned values will be
+  // of the root node that the wrapper component renders — not the component itself.
+  // See https://airbnb.io/enzyme/docs/api/ShallowWrapper/props.html
+  const wrapper = shallow(
+    <ScrollInfoProvider>
+      <WithScrollInfo />
+    </ScrollInfoProvider>,
+  );
+
+  it('rendered with an initial state of correct shape and value', () => {
+    const { value: { scrollInfo } } = wrapper.props();
+
+    expect(scrollInfo).toMatchObject({
+      x: 0,
+      y: 0,
+      xDifference: 0,
+      yDifference: 0,
+      xDirection: '',
+      yDirection: '',
+      xPercentage: 0,
+      yPercentage: 0,
+      totalPercentage: 0,
+      eventsFired: 0,
+    });
+  });
+
+  it('received an updated scrollInfo prop after a window scroll event', () => {
+    window.scrollTo(233, 325);
+    const { value: { scrollInfo } } = wrapper.props();
+
+    expect(scrollInfo).toMatchObject({
+      x: 233,
+      y: 325,
+      xDifference: 233,
+      yDifference: 325,
+      xDirection: 'right',
+      yDirection: 'down',
+      xPercentage: 15.969842357779301,
+      yPercentage: 7.6795841209829865,
+      totalPercentage: 11.824713239381143,
+      eventsFired: 1,
+    });
+  });
+});