Govuk-frontend: Include unit tests in package output in a way that they can be used by ports

[penx]

Further to a discussion I had recently with @36degrees and an initial proposal at #1089

For projects acting as a port of the nunjucks templates, in a different templating language, it would be useful to be able to run your unit tests as a 'spec' against a custom render function, to ensure the port has feature parity with the govuk-frontend nunjucks templates.

This would require:

• component/component.yaml being copied across to package build (perhaps as json to make it easier to include from parent projects
• unit tests to be moved in to a separate file (e.g. template.spec.js) that don't auto-execute when required, as per #1089, but still have template.unit.js execute them when running in govuk-frontend.
• allow a custom render function to be passed in
  
  
  
  • discuss whether a custom render function should return a string or a pre-wrapped cheerio object
  
  
• either don't use axe-helper.js in the exported spec (assume it has already been configured) or move it in to distributed package (it currently sits under /lib and is not available in the distributed/npm version)
• move get-examples.js to a location so that it is available in the distributed/npm package

Related: https://github.com/facebook/jest/issues/7501

[penx]

I have already implemented the govuk-frontend tests against a custom render function in https://github.com/penx/govuk-frontend-react - but I had to manually copy code across from govuk-frontend rather than import it.

1. Button
   https://github.com/penx/govuk-frontend-react/pull/1

2. Header
   https://github.com/penx/govuk-frontend-react/pull/2

[nickcolley]

To stress test this proposal I would recommend trying out these components:

1. Radios (Since this is probably our most complex API for a component)
2. Tables (Since I imagine you'll change the interface a lot for this one)

[penx]

I'm making progress with this by manually copying tests across but thought it worth noting that I've found that using snapshot tests e.g. on input is a bit heavy handed. If we wanted the tests to be usable for testing a port then we probably don't want 100% markup alignment - perhaps snapshot tests are best avoided?

[penx]

For now I've written a script that extracts the template tests and examples yaml from govuk-frontend and publishes them to npm as govuk-frontend-template-spec, in a way that can be used by a port:

https://github.com/penx/govuk-frontend-template-spec

[timpaul]

Thanks for this @penx 🙌. We think this work is worth doing as part of a future mission into supporting other templating languages. We've added it to our roadmap board here.

[penx]

hi, any update on this? Is this something that could be looked at soon?

[36degrees]

Rolling this issue up into a slightly broader epic: https://github.com/alphagov/govuk-frontend/issues/1830

Thanks @penx for your input – it'll be really helpful when we pick this up.