build: upgrade storybook and add test-helper (#191)

* build: upgrade storybook and add test-helper

Author: thebuilder

.gitignore

@@ -16,3 +16,5 @@ npm-debug.log*
 .tern
 .tmp
 *.log
+test-utils.js
+test-utils.d.ts

.storybook/addons.js

@@ -1,2 +1 @@
-import '@storybook/addon-options/register'
 import '@storybook/addon-actions/register'

.storybook/config.js

@@ -1,18 +1,21 @@
 import React from 'react'
-import { addDecorator, configure } from '@storybook/react'
-import { withOptions } from '@storybook/addon-options'
-import { themes } from '@storybook/components'
-import pck from '../package.json'
+import { addParameters, configure } from '@storybook/react'
+import { create } from '@storybook/theming'
 import 'intersection-observer'
 import './base.css'
+import pck from '../package'
 
-addDecorator(
-  withOptions({
-    name: pck.name,
-    url: pck.repository ? pck.repository.url : null,
-    theme: themes.dark,
-  }),
-)
+addParameters({
+  options: {
+    theme: create({
+      base: 'dark',
+      brandTitle: pck.name,
+      brandUrl: pck.repository.url,
+    }),
+    isFullscreen: false,
+    panelPosition: 'bottom',
+  },
+})
 
 /**
  * Use require.context to load dynamically: https://webpack.github.io/docs/context.html

.storybook/webpack.config.js

@@ -1,24 +1,13 @@
 // webpack.config.js
-const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
-
-module.exports = (baseConfig, env, defaultConfig) => {
-  defaultConfig.entry = defaultConfig.entry.map(path => {
-    if (path.includes('webpack-hot-middleware')) {
-      return path + '&overlay=false'
-    }
-    return path
-  })
-
-  defaultConfig.module.rules.push({
+module.exports = ({ config }) => {
+  config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
     options: {
       presets: [['react-app', { flow: false, typescript: true }]],
     },
   })
-  defaultConfig.resolve.extensions.push('.ts', '.tsx')
-
-  defaultConfig.plugins.push(new ErrorOverlayPlugin())
+  config.resolve.extensions.push('.ts', '.tsx')
 
-  return defaultConfig
+  return config
 }

.travis.yml

@@ -6,7 +6,7 @@ script:
   - yarn lint
   - yarn test --coverage
   - yarn tsc
-  - yarn build:storybook
+  - yarn storybook:build
 after_success:
   - yarn coveralls
 deploy:

README.md

@@ -155,6 +155,48 @@ The **`<InView />`** component also accepts the following props:
 | **children** | `Function`, `ReactNode`   |         | true     | Children expects a function that receives an object contain an `inView` boolean and `ref` that should be assigned to the element root. Alternately pass a plain child, to have the `<Observer />` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry, giving you more details. |
 | **onChange** | `(inView, entry) => void` |         | false    | Call this function whenever the in view state changes                                                                                                                                                                                                                                                                   |
 
+## Testing
+
+In order to write meaningful tests, the `IntersectionObserver` needs to be
+mocked. If you are writing your tests in Jest, you can use the included
+`test-utils.js`. It mocks the `IntersectionObserver`, and includes a few methods
+to assist with faking the `inView` state.
+
+### `test-utils.js`
+
+Import the methods from `react-intersection-observer/test-utils`.
+
+**`mockAllIsIntersecting(isIntersecting:boolean)`**  
+Set the `isIntersecting` on all current IntersectionObserver instances.
+
+**`mockIsIntersecting(element:Element, isIntersecting:boolean)`**  
+Set the `isIntersecting` for the IntersectionObserver of a specific element.
+
+**`intersectionMockInstance(element:Element): IntersectionObserver`**  
+Call the `intersectionMockInstance` method with an element, to get the (mocked)
+`IntersectionObserver` instance. You can use this to spy on the `observe` and
+`unobserve` methods.
+
+### Test Example
+
+```js
+import React from 'react'
+import { render } from 'react-testing-library'
+import { useInView } from 'react-intersection-observer'
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
+
+const HookComponent = ({ options }) => {
+  const [ref, inView] = useInView(options)
+  return <div ref={ref}>{inView.toString()}</div>
+}
+
+test('should create a hook inView', () => {
+  const { getByText } = render(<HookComponent />)
+  mockAllIsIntersecting(true)
+  getByText('true')
+})
+```
+
 ## Built using `react-intersection-observer`
 
 ### [Sticks 'n' Sushi](https://sticksnsushi.com/en)

package.json

@@ -5,10 +5,12 @@
   "main": "dist/react-intersection-observer.cjs.js",
   "module": "dist/react-intersection-observer.esm.js",
   "unpkg": "dist/react-intersection-observer.umd.min.js",
-  "author": "Daniel Schmidt",
   "typings": "dist/index.d.ts",
+  "author": "Daniel Schmidt",
   "files": [
-    "dist/*"
+    "dist/*",
+    "test-utils.js",
+    "test-utils.d.ts"
   ],
   "repository": {
     "type": "git",
@@ -42,14 +44,16 @@
   ],
   "scripts": {
     "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "build": "rm -rf dist && yarn run build:lib && tsc",
+    "prebuild": "rm -rf dist lib",
+    "build": "run-s build:*",
     "build:lib": "rollup -c",
-    "build:storybook": "build-storybook --output-dir example",
+    "build:ts": "tsc && tsc -p tsconfig.test.json",
     "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
     "lint": "eslint . --ext js,ts,tsx",
     "preversion": "yarn build",
     "pretty": "prettier '**/*.{js,ts,tsx,md,json,yml,html}' --write",
     "storybook": "start-storybook -p 9000",
+    "storybook:build": "build-storybook --output-dir example",
     "test": "jest"
   },
   "husky": {
@@ -92,6 +96,7 @@
     ],
     "coveragePathIgnorePatterns": [
       "/node_modules/",
+      "/src/test-utils.ts",
       "jest-setup.js"
     ]
   },
@@ -104,31 +109,30 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-transform-runtime": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@storybook/addon-actions": "^4.1.13",
-    "@storybook/addon-options": "^4.1.13",
-    "@storybook/components": "^4.1.13",
-    "@storybook/react": "^4.1.13",
-    "@types/jest": "^24.0.4",
-    "@types/react": "^16.8.4",
+    "@storybook/addon-actions": "^5.0.0",
+    "@storybook/components": "^5.0.0",
+    "@storybook/react": "^5.0.0",
+    "@types/jest": "^24.0.9",
+    "@types/react": "^16.8.6",
+    "@types/react-dom": "^16.8.2",
     "@types/storybook__addon-actions": "^3.4.1",
     "@types/storybook__react": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^1.4.1",
-    "@typescript-eslint/parser": "^1.4.1",
+    "@typescript-eslint/eslint-plugin": "^1.4.2",
+    "@typescript-eslint/parser": "^1.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "^24.0.0",
     "babel-loader": "^8.0.5",
     "concurrently": "4.1.0",
     "coveralls": "^3.0.3",
-    "error-overlay-webpack-plugin": "^0.1.6",
-    "eslint": "5.15.0",
+    "eslint": "5.15.1",
     "eslint-config-react-app": "^3.0.7",
     "eslint-plugin-flowtype": "^3.2.1",
     "eslint-plugin-import": "2.16.0",
@@ -138,14 +142,14 @@
     "intersection-observer": "^0.5.1",
     "jest": "^24.0.0",
     "jest-dom": "^3.1.1",
-    "lint-staged": "^8.1.1",
+    "lint-staged": "^8.1.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.2",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-test-renderer": "^16.8.3",
     "react-testing-library": "^6.0.0",
-    "rollup": "^1.2.3",
+    "rollup": "^1.4.1",
     "rollup-plugin-babel": "^4.2.0",
     "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-node-resolve": "^4.0.1",

src/__tests__/hooks.test.js

@@ -1,18 +1,15 @@
 import React from 'react'
-import { act } from 'react-dom/test-utils'
-import { useInView } from '../useInView'
-import { observe, unobserve } from '../intersection'
 import { render } from 'react-testing-library'
-
-jest.mock('../intersection')
-
-afterEach(() => {
-  observe.mockReset()
-})
+import { useInView } from '../useInView'
+import { intersectionMockInstance, mockAllIsIntersecting } from '../test-utils'
 
 const HookComponent = ({ options }) => {
   const [ref, inView] = useInView(options)
-  return <div ref={ref}>{inView.toString()}</div>
+  return (
+    <div data-testid="wrapper" ref={ref}>
+      {inView.toString()}
+    </div>
+  )
 }
 
 const LazyHookComponent = ({ options }) => {
@@ -23,42 +20,50 @@ const LazyHookComponent = ({ options }) => {
   }, [])
   const [ref, inView] = useInView(options)
   if (isLoading) return <div>Loading</div>
-  return <div ref={ref}>{inView.toString()}</div>
+  return (
+    <div data-testid="wrapper" ref={ref}>
+      {inView.toString()}
+    </div>
+  )
 }
 
 test('should create a hook', () => {
-  render(<HookComponent />)
-  expect(observe).toHaveBeenCalled()
+  const { getByTestId } = render(<HookComponent />)
+  const wrapper = getByTestId('wrapper')
+  const instance = intersectionMockInstance(wrapper)
+
+  expect(instance.observe).toHaveBeenCalledWith(wrapper)
 })
 
 test('should create a lazy hook', () => {
-  render(<LazyHookComponent />)
-  expect(observe).toHaveBeenCalled()
+  const { getByTestId } = render(<LazyHookComponent />)
+  const wrapper = getByTestId('wrapper')
+  const instance = intersectionMockInstance(wrapper)
+
+  expect(instance.observe).toHaveBeenCalledWith(wrapper)
 })
 
 test('should create a hook inView', () => {
-  observe.mockImplementation((el, callback, options) => {
-    if (callback) callback(true, {})
-  })
   const { getByText } = render(<HookComponent />)
-  expect(observe).toHaveBeenCalled()
+  mockAllIsIntersecting(true)
+
   getByText('true')
 })
 
 test('should respect trigger once', () => {
-  observe.mockImplementation((el, callback) => {
-    if (callback) callback(true, {})
-  })
-  render(<HookComponent options={{ triggerOnce: true }} />)
-  expect(observe).toHaveBeenCalled()
+  const { getByText } = render(
+    <HookComponent options={{ triggerOnce: true }} />,
+  )
+  mockAllIsIntersecting(true)
+  mockAllIsIntersecting(false)
 
-  act(() => {
-    expect(unobserve).toHaveBeenCalled()
-  })
+  getByText('true')
 })
 
 test('should unmount the hook', () => {
-  const { unmount } = render(<HookComponent />)
+  const { unmount, getByTestId } = render(<HookComponent />)
+  const wrapper = getByTestId('wrapper')
+  const instance = intersectionMockInstance(wrapper)
   unmount()
-  expect(unobserve).toHaveBeenCalled()
+  expect(instance.unobserve).toHaveBeenCalledWith(wrapper)
 })

src/intersection.ts

@@ -55,7 +55,7 @@ export function observe(
     "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",
     element,
   )
-
+  /* istanbul ignore if */
   if (!element) return
   // Create a unique ID for this observer instance, based on the root, root margin and threshold.
   // An observer with the same options can be reused, so lets use this fact
@@ -105,10 +105,13 @@ export function unobserve(element: Element | null) {
     let itemsLeft = false
     // Check if we still have observers configured with the same root.
     let rootObserved = false
+    /* istanbul ignore else  */
     if (observerId) {
       INSTANCE_MAP.forEach((item, key) => {
         if (item && key !== element) {
+          /* istanbul ignore else  */
           if (item.observerId === observerId) itemsLeft = true
+          /* istanbul ignore else  */
           if (item.observer.root === root) rootObserved = true
         }
       })
@@ -145,6 +148,7 @@ function onChange(changes: IntersectionObserverEntry[]) {
     const instance = INSTANCE_MAP.get(target)
 
     // Firefox can report a negative intersectionRatio when scrolling.
+    /* istanbul ignore else */
     if (instance && intersectionRatio >= 0) {
       const thresholds = instance.observer.thresholds