Add a test for the intersection observer used on the module level

Author: trurl-master

.babelrc

@@ -1,28 +1,28 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
+  env: {
+    browser: true,
+    es6: true,
+    node: true
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended"
+  ],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly"
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:jest/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
+    ecmaVersion: 2018,
+    sourceType: "module"
+  },
+  plugins: ["react", "prettier"],
+  rules: {
+    "prettier/prettier": "error"
+  }
 };

.eslintrc.js

@@ -1,3 +1,5 @@
 .DS_Store
 node_modules
-dist
+dist
+.cache
+coverage

.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 node_modules
-src
+src
+coverage
+examples

.npmignore

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

.prettierrc

@@ -61,12 +61,14 @@ import { mockIntersectionObserver } from 'jsdom-testing-mocks"
 const intersectionObserver = mockIntersectionObserver()
 
 it('loads the image when the component is in the viewport', () => {
-  const { getByAltText, queryByAltText, getByTestId } =  render(<TestComponent />)
+  const { getByAltText, queryByAltText, container } =  render(<TestComponent />)
 
   expect(queryByAltText('alt text')).not.toBeInTheDocument()
 
-  // when this element is in the viewport - show the image
-  intersectionObserver.enterNode(getByTestId('trigger'))
+  // when the component's root node is in the viewport - show the image
+  act(() => {
+    intersectionObserver.enterNode(container.firstChild)
+  })
 
   expect(getByAltText('alt text')).toBeInTheDocument()
 })

README.md

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current'
+            }
+          }
+        ],
+        '@babel/preset-react'
+      ]
+    }
+  },
+  presets: ['@babel/preset-env', '@babel/preset-react']
+}

babel.config.js

@@ -0,0 +1,56 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import useIntersection from './useIntersection'
+
+export const Section = ({ number }) => {
+  const ref = useRef(null)
+  const isIntersecting = useIntersection(ref)
+
+  return (
+    <section
+      ref={ref}
+      style={{
+        height: '20vh',
+        backgroundColor: isIntersecting ? 'SeaGreen' : 'IndianRed'
+      }}
+    >
+      A section {number} -{' '}
+      {isIntersecting ? 'intersecting' : 'not intersecting'}
+    </section>
+  )
+}
+
+Section.propTypes = {
+  number: PropTypes.number.isRequired
+}
+
+const App = () => {
+  const sections = 10
+
+  return (
+    <>
+      {[...new Array(sections)].map((_, index) => (
+        <Section number={index} key={index} />
+      ))}
+      <div
+        style={{
+          position: 'fixed',
+          top: '30vh',
+          right: '0',
+          bottom: '30vh',
+          left: '0',
+          outline: '2px dashed white',
+          color: 'white',
+          background: 'rgba(0,0,0,0.3)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+      >
+        Intersection zone
+      </div>
+    </>
+  )
+}
+
+export default App

examples/intersection-observer/global-observer/App.js

@@ -0,0 +1,102 @@
+import React from 'react'
+import { render, act } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import mockIntersectionObserver from '../../../src/mocks/intersection-observer'
+
+import App, { Section } from './App'
+
+const intersectionObserver = mockIntersectionObserver()
+
+describe('Section is intersecting', () => {
+  it('should render correctly when not inside the intersection zone', () => {
+    const { getByText } = render(<Section number={1} />)
+
+    expect(getByText('A section 1 - not intersecting')).toBeInTheDocument()
+  })
+
+  it('should render correctly when entering the intersection zone', () => {
+    const { getByText, container } = render(<Section number={1} />)
+
+    act(() => {
+      intersectionObserver.enterNode(container.firstChild)
+    })
+
+    expect(getByText('A section 1 - intersecting')).toBeInTheDocument()
+  })
+
+  it('should render correctly when leaving the intersection zone', () => {
+    const { getByText, container } = render(<Section number={1} />)
+
+    act(() => {
+      intersectionObserver.enterNode(container.firstChild)
+    })
+
+    expect(getByText('A section 1 - intersecting')).toBeInTheDocument()
+
+    act(() => {
+      intersectionObserver.leaveNode(container.firstChild)
+    })
+
+    expect(getByText('A section 1 - not intersecting')).toBeInTheDocument()
+  })
+
+  it('should enter all the nodes at once', () => {
+    const { getAllByText } = render(<App />)
+
+    act(() => {
+      intersectionObserver.enterAll()
+    })
+
+    expect(getAllByText(/A section/).map(node => node.textContent)).toEqual([
+      'A section 0 - intersecting',
+      'A section 1 - intersecting',
+      'A section 2 - intersecting',
+      'A section 3 - intersecting',
+      'A section 4 - intersecting',
+      'A section 5 - intersecting',
+      'A section 6 - intersecting',
+      'A section 7 - intersecting',
+      'A section 8 - intersecting',
+      'A section 9 - intersecting'
+    ])
+  })
+
+  it('should enter and leave all the nodes at once', () => {
+    const { getAllByText } = render(<App />)
+
+    act(() => {
+      intersectionObserver.enterAll()
+    })
+
+    expect(getAllByText(/A section/).map(node => node.textContent)).toEqual([
+      'A section 0 - intersecting',
+      'A section 1 - intersecting',
+      'A section 2 - intersecting',
+      'A section 3 - intersecting',
+      'A section 4 - intersecting',
+      'A section 5 - intersecting',
+      'A section 6 - intersecting',
+      'A section 7 - intersecting',
+      'A section 8 - intersecting',
+      'A section 9 - intersecting'
+    ])
+
+    act(() => {
+      intersectionObserver.leaveAll()
+    })
+
+    expect(getAllByText(/A section/).map(node => node.textContent)).toEqual([
+      'A section 0 - not intersecting',
+      'A section 1 - not intersecting',
+      'A section 2 - not intersecting',
+      'A section 3 - not intersecting',
+      'A section 4 - not intersecting',
+      'A section 5 - not intersecting',
+      'A section 6 - not intersecting',
+      'A section 7 - not intersecting',
+      'A section 8 - not intersecting',
+      'A section 9 - not intersecting'
+    ])
+  })
+})

examples/intersection-observer/global-observer/App.test.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../../babel.config')
+
+module.exports = rootConfig.env.test