refactor tests - chagne CONTRIBUTING.md

Author: PaulieScanlon

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Feel free to make changes wherever you see bit but please be mindful that removi
 
 Check the existing props still work by checking against the story in the components `.stories.mdx` file. Each prop usually means the component will behave in a different way so please check the component still does what it's supposed to do when you're altering prop _values_ or code.
 
-## To add a new Embed
+## To add a new component
 
 To add a new component there are several locations the new component needs to go, the rough outline is as follows:
 
@@ -38,3 +38,46 @@ The team are on hand should you require any assistance of have any questions at
 - Paul Scanlon | [@pauliescanlon](https://twitter.com/PaulieScanlon)
 - Scott Spence | [@spences10](https://twitter.com/spences10)
 - Rich Haines | [@studio_hungry](https://twitter.com/studio_hungry)
+
+## Testing WIP
+
+Each component will at some point require at least one test to check it renders correctly.
+Each component in `mdx-embed/src/components/` is wrapped in what we call the **GeneralObserver** This component is responsible for ensuring the 3rd part embed script isn't invoked until the component has entered the viewport. This is particularly important for Lighthouse scores and page load speeds. If a blog post page for example has 10 or 15 embed codes, Twitter, CodePend, YouTube etc on the page we don't want to load all that 3rd party JavaScript until the reader has scrolled down to where the component is used. When it scrolls in to view **GeneralObserver** which is an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) triggers a React state change which causes the children to be rendered in the DOM
+
+This presents an issue when we come to test the components because we need to fake the "scrolled in to view" action which allows the children of **GeneralObserver** to render.
+
+To _mock_ this is a test we've globally exposed a method called `triggerGeneralObserver()` and since we're using Testing Library this state change must be wrapped in an `act`.
+
+With that said we require each `test(() => {})` to contain an `act()` and a call to `triggerGeneralObserver()`
+
+That looks like something like this: the `(window as any)` is a TypeScript thing... Paul is working on it.
+
+```javascript
+describe('<CodePen />', () => {
+  test('it renders the component', () => {
+    render(<CodePen codePenId="PNaGbb" />);
+
+    act(() => {
+      (window as any).triggerGeneralObserver();
+      return undefined;
+    });
+
+    expect(screen.getByTestId('codepen')).toBeDefined();
+  });
+});
+```
+
+The other important part of the test is the use of `getByTestId` this is a special data attribute we use from Testing Library called `data-testid` and will need to be added to components with _new_ tests.
+
+In the `CodePen` example that looks a bit like this:
+
+```javascript
+  ...
+  <GeneralObserver>
+    <iframe
+      data-testid="codepen"
+      ...
+    />
+  </GeneralObserver>
+  ...
+```

packages/mdx-embed/jest.config.js

@@ -5,8 +5,7 @@ module.exports = {
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  moduleNameMapper: {
-    '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/file-mock.js',
-  },
+  setupFiles: ['<rootDir>/test/jest/__mocks__/intersection-observer.js'],
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/index.ts', '!src/**/*.stories.tsx'],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };

packages/mdx-embed/package.json

@@ -65,6 +65,7 @@
     "eslint-plugin-react": "^7.20.6",
     "husky": "^4.2.5",
     "jest": "^26.4.2",
+    "jest-watch-typeahead": "^0.6.1",
     "prettier": "^2.1.1",
     "ts-jest": "^26.3.0",
     "ts-loader": "^8.0.3",

packages/mdx-embed/src/components/codepen/codepen.test.tsx

@@ -1,17 +1,14 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
-import '../../test/jest/__mocks__/intersection-observer';
 
 import { CodePen } from './';
 
 describe('<CodePen />', () => {
   test('it renders the component', () => {
     render(<CodePen codePenId="PNaGbb" />);
 
-    const observerCallback = (window as any).IntersectionObserver.mock.calls[0][0];
-
     act(() => {
-      observerCallback([{ intersectionRatio: 1 }]);
+      (window as any).triggerGeneralObserver();
       return undefined;
     });
 

packages/mdx-embed/src/test/jest/__mocks__/file-mock.js

@@ -4,3 +4,7 @@ const intersectionObserverMock = () => ({
 });
 
 window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);
+
+window.triggerGeneralObserver = () => {
+  window.IntersectionObserver.mock.calls[0][0]([{ intersectionRatio: 1 }]);
+};

packages/mdx-embed/src/test/jest/__mocks__/intersection-observer.js renamed to packages/mdx-embed/test/jest/__mocks__/intersection-observer.js

@@ -4912,7 +4912,7 @@ ansi-escapes@^3.0.0, ansi-escapes@^3.1.0, ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
-ansi-escapes@^4.2.1:
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
   integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
@@ -13320,6 +13320,19 @@ jest-validate@^26.4.2:
     leven "^3.1.0"
     pretty-format "^26.4.2"
 
+jest-watch-typeahead@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.1.tgz#45221b86bb6710b7e97baaa1640ae24a07785e63"
+  integrity sha512-ITVnHhj3Jd/QkqQcTqZfRgjfyRhDFM/auzgVo2RKvSwi18YMvh0WvXDJFoFED6c7jd/5jxtu4kSOb9PTu2cPVg==
+  dependencies:
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^26.0.0"
+    jest-watcher "^26.3.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+
 jest-watcher@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.3.0.tgz#f8ef3068ddb8af160ef868400318dc4a898eed08"