[NHS.UK v4] Ensure that all React components are compliant with nhsuk-frontend

[Tomdango]

After the upgrade work has been completed, the components in the React components require checking against the nunjucks macros within nhsuk-frontend to make sure that we haven't deviated away from the nhsuk-frontend framework.

[jenbutongit]

Hi @Tomdango - this is a requirement I need to fill too. I wonder if it's worth you suggesting to the team at nhsuk-frontend to implement something like this: https://github.com/alphagov/govuk-frontend/blob/master/package/govuk/components/back-link/fixtures.json

It's essentially just a collection of options in -> html out. Fixtures are used for engineers who aren't using njks (maybe another templating language, or react etc) but can still ensure parity with the njks package.

function BridgeComponent({ href, children, attributes }: props) {
  return (
    <BackLink href={href} {...attributes}>
      {children}
    </BackLink>
  );
}
describe('fixtures', () => {
  fixtures.forEach((fixture, i) => {
    const { options } = fixture;
    const { href, attributes } = options;
    const inner = options.text ?? options.html;
    it(`fixtures - ${i}`, () => {
      const component = shallow(
        <BridgeComponent href={href} attributes={attributes}>
          {inner}
        </BridgeComponent>,
      ).dive();
      expect(component.html()).toContainHTML(fixture.html);
    });
  });
});

BridgeComponent wraps up the component under test so it matches more closely to the njks api, so the options can just be passed in as a prop.

[colinrotherham]

We added fixtures.json to NHS.UK frontend in v10.0.0

Adding a link to the Test if your HTML matches NHS.UK frontend guidance for context

Would be amazing if we could add this feature