Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

add function to detect and render helmet for use in snapshots #2104

Merged
merged 20 commits into from
Sep 13, 2019
Merged

add function to detect and render helmet for use in snapshots #2104

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
d46ae43
add function to detect and render helmet for use in snapshots
Sep 12, 2019
db0c836
Bump package version for psammead-test-helpers
Sep 12, 2019
140b90c
Update changelog for psammead-test-helpers
Sep 12, 2019
733aaa2
add snapshot tests in psammead-test-helper
Sep 12, 2019
bf4cebe
use correct test case titles
Sep 12, 2019
28aed67
better variable name
Sep 12, 2019
5e717f0
add more testing around snapshots
Sep 12, 2019
58e374d
Merge branch 'latest' into helmet-snapshots
Sep 12, 2019
9b3cf45
Merge branch 'latest' into helmet-snapshots
Sep 12, 2019
98d5bac
fix duplicate head content bug in psammead-test-helpers
Sep 12, 2019
e86c3e7
Merge branch 'helmet-snapshots' of github.com:bbc/psammead into helme…
Sep 12, 2019
0234a49
update package-locks
Sep 12, 2019
da16246
update code comments in psammead-test-helpers
Sep 12, 2019
49d8606
git checkout latest packages/utilities/moment-timezone-include/packag…
Sep 12, 2019
b72bab5
use correct meta attributes
Sep 12, 2019
fa62362
Merge branch 'latest' into helmet-snapshots
Sep 12, 2019
43b9a57
add tests for renderWithHelmet
Sep 13, 2019
90ca65f
Merge branch 'helmet-snapshots' of github.com:bbc/psammead into helme…
Sep 13, 2019
7b2bad9
add and reorder tests
Sep 13, 2019
393bfce
add better test case titles
Sep 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions packages/utilities/moment-timezone-include/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/utilities/psammead-test-helpers/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
72 changes: 72 additions & 0 deletions packages/utilities/psammead-test-helpers/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
name="test name"
value="test value"
/>
<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
name="test name"
value="test value"
/>
<script
src="test.js"
/>
</head>
<body>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any easy way to remove the body when not needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll look into it. Was worried about adding more complexity to an already complex looking function for not much value but it should be straightforward

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried removing the body but that stopped other tests from rendering things in the body. I guess it breaks the renderer because it can't find the body element's div to put stuff in. I also tried this with removing just the div and it had the same effect :(

<div />
</body>
</html>
`;
40 changes: 40 additions & 0 deletions packages/utilities/psammead-test-helpers/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import React from 'react';
import Helmet from 'react-helmet';
import * as testHelpers from '.';
import * as testHelpersFromSrc from './src/index';

Expand Down Expand Up @@ -104,4 +106,42 @@ describe('Psammead test helpers', () => {
testHelpersFromSrc.testUtilityPackages,
);
});

testHelpers.shouldMatchSnapshot(
'should match the snapshot for the test component',
<main>
<h1>Hello I am a test component</h1>
</main>,
);

testHelpers.shouldMatchSnapshot(
'should match the snapshot for the test component',
<>
<h1>Hello I am a test component</h1>
<p>I am some test text.</p>
</>,
);

testHelpers.shouldMatchSnapshot(
'should match the snapshot for the test component with helmet only',
<Helmet htmlAttributes={{ dir: 'rtl', lang: 'fa' }}>
<title>Snapshot with helmet only</title>
<meta name="test name" value="test value" />
<script src="test.js" />
</Helmet>,
);

testHelpers.shouldMatchSnapshot(
'should match the snapshot for the test component with helmet and other content',
<>
<Helmet htmlAttributes={{ dir: 'rtl', lang: 'fa' }}>
<title>Snapshot with helmet and and other content</title>
<meta name="test name" value="test value" />
<script src="test.js" />
</Helmet>
<main>
<h1>Hello I am a test component with React Helmet</h1>
</main>
</>,
);
});
73 changes: 72 additions & 1 deletion packages/utilities/psammead-test-helpers/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion packages/utilities/psammead-test-helpers/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -28,5 +28,8 @@
],
"dependencies": {
"jest-styled-components": "^6.3.3"
},
"devDependencies": {
"react-helmet": "^5.2.1"
}
}
57 changes: 54 additions & 3 deletions packages/utilities/psammead-test-helpers/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,63 @@
import { render } from '@testing-library/react';
import { render, waitForDomChange } from '@testing-library/react';
import 'jest-styled-components';
import deepClone from 'ramda/src/clone';

const renderWithHelmet = async component => {
jroebu14 marked this conversation as resolved.
Show resolved Hide resolved
/*
* 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 rendered and returned which you can then use to snapshot helmet/head contents.
* Example of use in a test file:
ryanmccombe marked this conversation as resolved.
Show resolved Hide resolved
it('should render correctly', async () => {
const html = await renderHelmet(<SomeComponent {...someProps} />);
expect(html).toMatchSnapshot();
});
*/

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 };
});
};

export const shouldMatchSnapshot = (title, component) => {
it(title, () => {
it(title, async () => {
// select the first child to remove the pointless wrapping div from snapshots
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This happens now :(

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you worried about the async it callback? It won't affect the current test helper API.

Copy link
Contributor

@dr3 dr3 Sep 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Soz i meant select the first child to remove the pointless wrapping div from snapshots happens now. We no longer remove the pointless wrapping div

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We still do when rendering components without helmet. I'll change the comments and var names.

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
Expand Down