BBC-archive · jroebu14 · Sep 13, 2019 · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019
diff --git a/packages/utilities/psammead-test-helpers/CHANGELOG.md b/packages/utilities/psammead-test-helpers/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0 | [PR#2104](https://github.com/bbc/psammead/pull/2104) add function to detect and render helmet for use in snapshots |
 | 2.0.2 | [PR#1994](https://github.com/bbc/psammead/pull/1994) Add comment to clarify new shouldMatchSnapshot logic |
 | 2.0.1 | [PR#1958](https://github.com/bbc/psammead/pull/1958) Update `shouldMatchSnapshot` to add firstChild logic |
 | 2.0.0 | [PR#1917](https://github.com/bbc/psammead/pull/1917) Remove react-test-renderer and shallow rendering |

diff --git a/packages/utilities/psammead-test-helpers/__snapshots__/index.test.jsx.snap b/packages/utilities/psammead-test-helpers/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Psammead test helpers should match the snapshot for the test component 1`] = `
+<main>
+  <h1>
+    Hello I am a test component
+  </h1>
+</main>
+`;
+
+exports[`Psammead test helpers should match the snapshot for the test component 2`] = `
+<div>
+  <h1>
+    Hello I am a test component
+  </h1>
+  <p>
+    I am some test text.
+  </p>
+</div>
+`;
+
+exports[`Psammead test helpers should match the snapshot for the test component with helmet and other content 1`] = `
+<html
+  dir="rtl"
+  lang="fa"
+>
+  <head>
+    <title>
+      Snapshot with helmet and and other content
+    </title>
+    <meta
+      content="test content"
+      name="test name"
+    />
+    <script
+      src="test.js"
+    />
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>
+          Hello I am a test component with React Helmet
+        </h1>
+      </main>
+    </div>
+  </body>
+</html>
+`;
+
+exports[`Psammead test helpers should match the snapshot for the test component with helmet only 1`] = `
+<html
+  dir="rtl"
+  lang="fa"
+>
+  <head>
+    <title>
+      Snapshot with helmet only
+    </title>
+    <meta
+      content="test content"
+      name="test name"
+    />
+    <script
+      src="test.js"
+    />
+  </head>
+  <body>
+    <div />
+  </body>
+</html>
+`;
diff --git a/packages/utilities/psammead-test-helpers/index.test.jsx b/packages/utilities/psammead-test-helpers/index.test.jsx
@@ -1,5 +1,8 @@
+import React from 'react';
+import Helmet from 'react-helmet';
 import * as testHelpers from '.';
 import * as testHelpersFromSrc from './src/index';
+import renderWithHelmet from './src/renderWithHelmet';
 
 const testHelpersExpectedExports = {
   shouldMatchSnapshot: 'function',
@@ -16,6 +19,13 @@ const actualExports = { testHelpers };
 
 const actualExportsFromSrc = { testHelpers: testHelpersFromSrc };
 
+const serializeDomString = domString =>
+  domString
+    .split('\n')
+    .map(line => line.trim())
+    .join('')
+    .trim();
+
 const ensureErrorWhenMissingExport = testHelperMethod => {
   // missing export in the expected
   const actualWithAll = { utility: { foo: {}, bar: {} } };
@@ -104,4 +114,122 @@ describe('Psammead test helpers', () => {
       testHelpersFromSrc.testUtilityPackages,
     );
   });
+
+  const NoHelmet = () => (
+    <main>
+      <h1>Hello I am a test component</h1>
+    </main>
+  );
+
+  it('should return correct HTML for components not using helmet', async () => {
+    const actual = await renderWithHelmet(<NoHelmet />);
+    const expected = serializeDomString(`
+    <div>
+      <main>
+        <h1>Hello I am a test component</h1>
+      </main>
+    </div>
+    `);
+
+    expect(actual.container.outerHTML).toEqual(expected);
+  });
+
+  testHelpers.shouldMatchSnapshot(
+    'should match the snapshot for the test component',
+    <NoHelmet />,
+  );
+
+  const NoHelmetWithFragment = () => (
+    <>
+      <h1>Hello I am a test component</h1>
+      <p>I am some test text.</p>
+    </>
+  );
+
+  it('should return correct HTML for components not using helmet and wrapped with fragment', async () => {
+    const actual = await renderWithHelmet(<NoHelmetWithFragment />);
+    const expected = serializeDomString(`
+    <div>
+      <h1>Hello I am a test component</h1>
+      <p>I am some test text.</p>
+    </div>
+    `);
+
+    expect(actual.container.outerHTML).toEqual(expected);
+  });
+
+  testHelpers.shouldMatchSnapshot(
+    'should match the snapshot for the test component',
+    <NoHelmetWithFragment />,
+  );
+
+  const HelmetOnly = () => (
+    <Helmet htmlAttributes={{ dir: 'rtl', lang: 'fa' }}>
+      <title>Snapshot with helmet only</title>
+      <meta name="test name" content="test content" />
+      <script src="test.js" />
+    </Helmet>
+  );
+
+  it('should return correct HTML for components using helmet only', async () => {
+    const actual = await renderWithHelmet(<HelmetOnly />);
+    const expected = serializeDomString(`
+    <html dir="rtl" lang="fa">
+      <head>
+        <title>Snapshot with helmet only</title>
+        <meta name="test name" content="test content"><script src="test.js"></script>
+      </head>
+      <body>
+        <div></div>
+      </body>
+    </html>
+    `);
+
+    expect(actual.container.outerHTML).toEqual(expected);
+  });
+
+  testHelpers.shouldMatchSnapshot(
+    'should match the snapshot for the test component with helmet only',
+    <HelmetOnly />,
+  );
+
+  const HelmetWithContent = () => (
+    <>
+      <Helmet htmlAttributes={{ dir: 'rtl', lang: 'fa' }}>
+        <title>Snapshot with helmet and and other content</title>
+        <meta name="test name" content="test content" />
+        <script src="test.js" />
+      </Helmet>
+      <main>
+        <h1>Hello I am a test component with React Helmet</h1>
+      </main>
+    </>
+  );
+
+  it('should return correct HTML for components using helmet only with other content', async () => {
+    const actual = await renderWithHelmet(<HelmetWithContent />);
+    const expected = serializeDomString(`
+    <html dir="rtl" lang="fa">
+      <head>
+        <title>Snapshot with helmet and and other content</title>
+        <meta name="test name" content="test content">
+        <script src="test.js"></script>
+      </head>
+      <body>
+        <div>
+          <main>
+            <h1>Hello I am a test component with React Helmet</h1>
+          </main>
+        </div>
+      </body>
+    </html>
+    `);
+
+    expect(actual.container.outerHTML).toEqual(expected);
+  });
+
+  testHelpers.shouldMatchSnapshot(
+    'should match the snapshot for the test component with helmet and other content',
+    <HelmetWithContent />,
+  );
 });
diff --git a/packages/utilities/psammead-test-helpers/package-lock.json b/packages/utilities/psammead-test-helpers/package-lock.json
diff --git a/packages/utilities/psammead-test-helpers/package.json b/packages/utilities/psammead-test-helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-test-helpers",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -28,5 +28,8 @@
   ],
   "dependencies": {
     "jest-styled-components": "^6.3.3"
+  },
+  "devDependencies": {
+    "react-helmet": "^5.2.1"
   }
 }
diff --git a/packages/utilities/psammead-test-helpers/src/index.js b/packages/utilities/psammead-test-helpers/src/index.js
@@ -1,12 +1,13 @@
 import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import deepClone from 'ramda/src/clone';
+import renderWithHelmet from './renderWithHelmet';
 
 export const shouldMatchSnapshot = (title, component) => {
-  it(title, () => {
+  it(title, async () => {
     // select the first child to remove the pointless wrapping div from snapshots
     const removeWrappingDiv = container => container.firstChild;
-    const { container } = render(component);
+    const { container } = await renderWithHelmet(component);
     const hasOneChild = container.children.length === 1;
     /*
      * if the container has more than one child then it's a component that uses a

diff --git a/packages/utilities/psammead-test-helpers/src/renderWithHelmet.js b/packages/utilities/psammead-test-helpers/src/renderWithHelmet.js
@@ -0,0 +1,47 @@
+import { render, waitForDomChange } from '@testing-library/react';
+
+export default async component => {
+  /*
+   * Similar to this problem https://github.com/testing-library/react-testing-library/issues/402
+   * This helper was created to solve the problem of rendering helmet/head contents in snapshots.
+   * Pass in a component that uses helmet somewhere in the component tree.
+   * The full html tree is returned which you can then use to snapshot helmet/head contents.
+   */
+
+  const { container } = render(component);
+  const noop = () => {};
+  const ARBITRARY_TIMEOUT = 100; // seems long enough for any dom mutations to occur
+  const headElement = document.querySelector('head');
+
+  headElement.innerHTML = ''; // clear out head mutations from previous tests
+
+  return waitForDomChange({
+    container: headElement,
+    timeout: ARBITRARY_TIMEOUT,
+  })
+    .catch(noop) // handle a waitForDomChange timeout
+    .then(mutationsList => {
+      const headMutationDetected = mutationsList && mutationsList.length;
+
+      if (headMutationDetected) {
+        // helmet was probably used so we should get the full html
+
+        const htmlElement = document.querySelector('html');
+
+        const helmetElements = document.querySelectorAll(
+          '[data-react-helmet="true"]',
+        );
+
+        const removeHelmetAttributes = el =>
+          el.removeAttribute('data-react-helmet'); // remove react-helmet attribute noise from elements
+
+        removeHelmetAttributes(htmlElement); // remove react-helmet attribute noise from elements
+
+        Array.from(helmetElements).forEach(removeHelmetAttributes);
+
+        return { container: document.querySelector('html') };
+      }
+
+      return { container };
+    });
+};