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
alphagov · Aug 24, 2020 · 940d413 · 940d413
1 parent 916e650
commit 940d413
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/tasks/gulp/__tests__/after-build-package.test.js b/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
+        })
+    })
+  })
 })
diff --git a/tasks/gulp/copy-to-destination.js b/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')
@@ -32,25 +33,48 @@ gulp.task('copy-files', () => {
     .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`)
+      const componentYamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+      const componentTemplatePath = path.join(configPaths.components, componentName, 'template.njk')
       let yaml
       let json
       let paramsJson
+      let examplesJson
 
       try {
-        yaml = fs.readFileSync(componentPath, { encoding: 'utf8', json: true })
+        yaml = fs.readFileSync(componentYamlPath, { encoding: 'utf8', json: true })
       } catch (e) {
-        console.error('ENOENT: no such file or directory: ', componentPath)
+        console.error('ENOENT: no such file or directory: ', componentYamlPath)
       }
 
       if (yaml) {
         json = yamlToJson.safeLoad(yaml)
-        paramsJson = json.params // We only want the 'params' data from component yaml
+        examplesJson = json.examples
+        paramsJson = json.params
+
+        if (examplesJson) {
+          const fixturesPath = path.join(taskArguments.destination, '/govuk/components', componentName, 'fixtures.json')
+          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)
+          })
+
+          fs.writeFileSync(fixturesPath, JSON.stringify(fixtures, null, 2))
+        }
 
         if (paramsJson) {
           file.contents = Buffer.from(JSON.stringify(paramsJson, null, 4))
         } else {
-          console.error(componentPath + ' is missing "params"')
+          console.error(componentYamlPath + ' is missing "params"')
         }
       }
       done(null, file)