Merge pull request #588 from alphagov/fix-components-relying-on-globa…

…l-builds

Fix components relying on global builds

CHANGELOG.md

@@ -26,6 +26,8 @@ Internal:
 (PR [#574](https://github.com/alphagov/govuk-frontend/pull/574))
 - Ensure render function does not have undefined object
   (PR [#587](https://github.com/alphagov/govuk-frontend/pull/587))
+- Fix components relying on global builds
+  (PR [#588](https://github.com/alphagov/govuk-frontend/pull/588))
 
 ## 0.0.25-alpha (Breaking release)
 

package.json

@@ -22,7 +22,7 @@
     "build:dist": "node bin/check-nvmrc.js && gulp build:dist --destination 'dist' && npm run test:build:dist",
     "test": "standard && gulp test && npm run test:app && npm run test:components && npm run test:generate:readme",
     "test:app": "jest app/__tests__/app.test.js --forceExit # express server fails to end process",
-    "test:components": "jest src/",
+    "test:components": "jest src/ && jest tasks/gulp/__tests__/check-individual-components-compile.test.js",
     "test:generate:readme": "jest tasks/gulp/__tests__/check-generate-readme.test.js",
     "test:build:packages": "jest tasks/gulp/__tests__/after-build-packages.test.js",
     "test:build:dist": "jest tasks/gulp/__tests__/after-build-dist.test.js"
@@ -57,6 +57,7 @@
     "js-yaml": "^3.10.0",
     "lerna": "^2.3.1",
     "merge-stream": "^1.0.1",
+    "node-sass": "^4.7.2",
     "nodemon": "^1.12.1",
     "oldie": "^1.3.0",
     "postcss-normalize": "^3.0.0",

src/footer/_footer.scss

@@ -1,3 +1,5 @@
+@import "../globals/common";
+
 @include govuk-exports("footer") {
 
   $govuk-footer-background: $govuk-grey-3;

tasks/gulp/__tests__/check-individual-components-compile.test.js

@@ -0,0 +1,37 @@
+/* eslint-env jest */
+
+const path = require('path')
+
+const sass = require('node-sass')
+
+const lib = require('../../../lib/file-helper')
+const configPaths = require('../../../config/paths.json')
+
+const sassRender = (options) => {
+  return new Promise((resolve, reject) => {
+    sass.render(options, (error, result) => {
+      if (error) {
+        return reject(error)
+      }
+      return resolve(result)
+    })
+  })
+}
+
+describe('Individual components', () => {
+  it('should compile individual scss files without throwing exceptions', done => {
+    const componentNames = lib.SrcFilteredComponentList.slice()
+
+    const getSassRenders = () => {
+      return componentNames.map(name => {
+        const filePath = path.join(configPaths.src, name, `_${name}.scss`)
+        return sassRender({ file: filePath })
+      })
+    }
+
+    Promise
+      .all(getSassRenders())
+      .then(() => { done() })
+      .catch(error => { throw error })
+  })
+})