Merge pull request #1925 from alphagov/generate-fixtures

Generate fixtures.json files for components on build:package

CHANGELOG.md

@@ -4,6 +4,11 @@
 
 ### New features
 
+#### Add HTML test fixtures
+You can use our test fixtures to check you're outputting the same HTML that GOV.UK Frontend uses.
+
+This was added in [pull request #1925: Generate fixtures.json files for components on build:package](https://github.com/alphagov/govuk-frontend/pull/1925)
+
 #### Add new brand colour for The Foreign, Commonwealth and Development Office (FCDO)
 
 This was added in [pull request #1918: Add new brand colour for FCDO](https://github.com/alphagov/govuk-frontend/pull/1918).

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 "fixtures" with "name", "options", and "html"
+          expect(parsedData).toEqual(
+            expect.objectContaining({
+              component: name,
+              fixtures: 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')
@@ -31,29 +32,17 @@ gulp.task('copy-files', () => {
     .pipe(scssFiles.restore)
     .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`)
-      let yaml
-      let json
-      let paramsJson
-
-      try {
-        yaml = fs.readFileSync(componentPath, { encoding: 'utf8', json: true })
-      } catch (e) {
-        console.error('ENOENT: no such file or directory: ', componentPath)
-      }
-
-      if (yaml) {
-        json = yamlToJson.safeLoad(yaml)
-        paramsJson = json.params // We only want the 'params' data from component yaml
-
-        if (paramsJson) {
-          file.contents = Buffer.from(JSON.stringify(paramsJson, null, 4))
-        } else {
-          console.error(componentPath + ' is missing "params"')
-        }
-      }
-      done(null, file)
+      const fixturesFile = generateFixtures(file)
+      done(null, fixturesFile)
+    }))
+    .pipe(rename(path => {
+      path.basename = 'fixtures'
+      path.extname = '.json'
+    }))
+    .pipe(yamlFiles)
+    .pipe(map(function (file, done) {
+      const macroFile = generateMacroOptions(file)
+      done(null, macroFile)
     }))
     .pipe(rename(path => {
       path.basename = 'macro-options'
@@ -62,3 +51,69 @@ gulp.task('copy-files', () => {
     .pipe(yamlFiles.restore)
     .pipe(gulp.dest(taskArguments.destination + '/govuk/'))
 })
+
+function generateFixtures (file) {
+  const json = convertYamlToJson(file)
+  const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
+  const componentTemplatePath = path.join(configPaths.components, componentName, 'template.njk')
+
+  if (json) {
+    const examplesJson = json.examples
+
+    if (examplesJson) {
+      const fixtures = {
+        component: componentName,
+        fixtures: []
+      }
+
+      examplesJson.forEach(function (example) {
+        const fixture = {
+          name: example.name,
+          options: example.data,
+          html: nunjucks.render(componentTemplatePath, { params: example.data }).trim()
+        }
+
+        fixtures.fixtures.push(fixture)
+      })
+
+      file.contents = Buffer.from(JSON.stringify(fixtures, null, 4))
+      return file
+    } else {
+      console.error(file.path + ' is missing "examples" and/or "params"')
+    }
+  }
+}
+
+function generateMacroOptions (file) {
+  const json = convertYamlToJson(file)
+  let paramsJson
+
+  if (json) {
+    paramsJson = json.params // We only want the 'params' data from component yaml
+
+    if (paramsJson) {
+      file.contents = Buffer.from(JSON.stringify(paramsJson, null, 4))
+      return file
+    } else {
+      console.error(file.path + ' is missing "params"')
+    }
+  }
+}
+
+function convertYamlToJson (file) {
+  const componentName = path.dirname(file.path).split(path.sep).slice(-1).toString()
+  const componentPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
+  let yaml
+
+  try {
+    yaml = fs.readFileSync(componentPath, { encoding: 'utf8', json: true })
+  } catch (e) {
+    console.error('ENOENT: no such file or directory: ', componentPath)
+  }
+
+  if (yaml) {
+    return yamlToJson.safeLoad(yaml)
+  }
+
+  return false
+}