Generate fixtures.json files for components on build:package

Fixtures files contain the component name  and all examples with the output html to allow maintainers to test their own HTML against ours

tasks/gulp/__tests__/after-build-package.test.js

@@ -13,6 +13,7 @@ const lib = require('../../../lib/file-helper')
 const { renderSass } = require('../../../lib/jest-helpers')
 
 const readFile = util.promisify(fs.readFile)
+const componentNames = lib.allComponents.slice()
 
 describe('package/', () => {
   it('should contain the expected files', () => {
@@ -47,6 +48,7 @@ describe('package/', () => {
         'package.json',
         'govuk-prototype-kit.config.json',
         '**/macro-options.json',
+        '**/fixtures.json',
         'README.md'
       ]
 
@@ -100,8 +102,6 @@ describe('package/', () => {
   })
 
   describe('component', () => {
-    const componentNames = lib.allComponents.slice()
-
     it.each(componentNames)('\'%s\' should have macro-options.json that contains JSON', (name) => {
       const filePath = path.join(configPaths.package, 'govuk', 'components', name, 'macro-options.json')
       return readFile(filePath, 'utf8')
@@ -124,4 +124,30 @@ describe('package/', () => {
         })
     })
   })
+
+  describe('fixtures', () => {
+    it.each(componentNames)('\'%s\' should have fixtures.json that contains JSON', (name) => {
+      const filePath = path.join(configPaths.package, 'govuk', 'components', name, 'fixtures.json')
+      return readFile(filePath, 'utf8')
+        .then((data) => {
+          var parsedData = JSON.parse(data)
+          // We expect the component JSON to contain "component" and an array of "examples" with "name", "options", and "html"
+          expect(parsedData).toEqual(
+            expect.objectContaining({
+              component: name,
+              examples: expect.arrayContaining([
+                expect.objectContaining({
+                  name: expect.any(String),
+                  options: expect.any(Object),
+                  html: expect.any(String)
+                })
+              ])
+            })
+          )
+        })
+        .catch(error => {
+          throw error
+        })
+    })
+  })
 })

tasks/gulp/copy-to-destination.js

@@ -1,5 +1,6 @@
 'use strict'
 
+const nunjucks = require('nunjucks')
 const gulp = require('gulp')
 const configPaths = require('../../config/paths.json')
 const postcss = require('gulp-postcss')
@@ -30,6 +31,49 @@ gulp.task('copy-files', () => {
     ], { syntax: require('postcss-scss') }))
     .pipe(scssFiles.restore)
     .pipe(yamlFiles)
+    .pipe(map(function (file, done) {
+      const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
+      const componentYamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+      const componentTemplatePath = path.join(configPaths.components, componentName, 'template.njk')
+      let yaml
+
+      try {
+        yaml = fs.readFileSync(componentYamlPath, { encoding: 'utf8', json: true })
+      } catch (e) {
+        console.error('ENOENT: no such file or directory: ', componentYamlPath)
+      }
+
+      if (yaml) {
+        const json = yamlToJson.safeLoad(yaml)
+        const examplesJson = json.examples
+        const paramsJson = json.params
+
+        if (examplesJson && paramsJson) {
+          const fixtures = {
+            component: componentName,
+            examples: []
+          }
+
+          examplesJson.forEach(function (example) {
+            const fixture = {
+              name: example.name,
+              options: example.data,
+              html: nunjucks.render(componentTemplatePath, { params: example.data }).trim()
+            }
+
+            fixtures.examples.push(fixture)
+          })
+
+          file.contents = Buffer.from(JSON.stringify(fixtures, null, 4))
+          done(null, file)
+        }
+      }
+    }))
+    .pipe(rename(path => {
+      path.basename = 'fixtures'
+      path.extname = '.json'
+    }))
+    .pipe(yamlFiles)
     .pipe(map(function (file, done) {
       const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
       const componentPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)