@@ -49,23 +49,29 @@ Twitter
4949## Testing WIP
5050
5151Each component will at some point require at least one test to check it renders correctly. Each component in
52- ` mdx-embed/src/components/ ` is wrapped in what we call the ** GeneralObserver** This component is responsible for
53- ensuring the 3rd party embed script isn't invoked until the component has entered the viewport. This is particularly
54- important for Lighthouse scores and page load speeds. If a blog post page for example has 10 or 15 embed codes, Twitter,
55- CodePend, YouTube etc on the page we don't want to load all that 3rd party JavaScript until the reader has scrolled down
56- to where the component is used. When it scrolls in to view ** GeneralObserver** which is an
52+ ` mdx-embed/src/components/ ` is wrapped in what we call the ** GeneralObserver** .
53+
54+ This component is responsible for ensuring the 3rd party embed script isn't invoked until the component has entered the
55+ viewport. This is particularly important for Lighthouse scores and page load speeds. If a blog post for example has 10
56+ or 15 embed codes, Twitter, CodePen, YouTube etc on the page we don't want to load all that 3rd party JavaScript right
57+ away, instead we wait until the reader has scrolled down to where the component is used and when the component is "in
58+ view" ** GeneralObserver** which is an
5759[ Intersection Observer] ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API ) triggers a React
5860state change which causes the children to be rendered in the DOM
5961
60- This presents an issue when we come to test the components because we need to fake the "scrolled in to view" action
62+ This presents an issue when we come to testing the components because we need to fake the "scrolled in to view" action
6163which allows the children of ** GeneralObserver** to render.
6264
63- To _ mock_ this is a test we've globally exposed a method called ` triggerGeneralObserver() ` and since we're using Testing
65+ To _ mock_ this in a test we've globally exposed a method called ` triggerGeneralObserver() ` and since we're using Testing
6466Library this state change must be wrapped in an [ act] ( https://testing-library.com/docs/react-testing-library/api#act ) .
6567
66- With that said we require each ` test(() => {}) ` to contain an ` act(() => {}) ` and a call to ` triggerGeneralObserver() `
68+ With that said we require each ` test(() => {...}) ` to contain an ` act(() => {...}) ` and a call to
69+ ` triggerGeneralObserver() `
70+
71+ That looks like something like the below:
6772
68- That looks like something like this: the ` (window as any) ` is a TypeScript thing... Paul is working on it.
73+ - The ` (window as any) ` is a TypeScript thing... Paul is working on it,
74+ - act must return something even, ` undefined ` is ok
6975
7076``` javascript
7177describe (' <CodePen />' , () => {
0 commit comments