Open Tomdango opened 3 years ago
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.
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 thenhsuk-frontend
framework.