Merge pull request #1235 from alphagov/add-tests-imports

Test that parts of GOV.UK Frontend can be imported individually

CHANGELOG.md

@@ -101,6 +101,23 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Ensure that files within the core, objects and overrides layers can be
+  imported individually
+
+  Unlike components, the files within these layers did not previously import
+  their dependencies (for example, most of them require the govuk-exports mixin
+  but did not import it).
+
+  We've also added tests to ensure that files within these layers can be
+  imported and rendered to CSS without erroring, which should catch this in the
+  future.
+
+  Thanks to [Alasdair McLeay](https://github.com/penx) for originally raising a
+  PR to fix this.
+
+  ([PR #1235](https://github.com/alphagov/govuk-frontend/pull/1235))
+
+
 - Ensure inset component does not misalign nested components
 
   Thanks to [Paul Hayes](https://github.com/fofr) for raising this issue.

lib/jest-helpers.js

@@ -1,11 +1,16 @@
 'use strict'
 
-const path = require('path')
 const fs = require('fs')
-const nunjucks = require('nunjucks')
+const path = require('path')
+const util = require('util')
+
 const cheerio = require('cheerio')
+const nunjucks = require('nunjucks')
 const yaml = require('js-yaml')
 
+const sass = require('node-sass')
+const sassRender = util.promisify(sass.render)
+
 const configPaths = require('../config/paths.json')
 const { componentNameToMacroName } = require('./helper-functions.js')
 
@@ -65,6 +70,19 @@ function getExamples (componentName) {
   return examples
 }
 
+/**
+ * Render Sass
+ *
+ * @param {object} options Options to pass to sass.render
+ * @return {promise} Result of calling sass.render
+ */
+function renderSass (options) {
+  return sassRender({
+    includePaths: [ configPaths.src ],
+    ...options
+  })
+}
+
 /**
  * Get the raw HTML representation of a component, and remove any other
  * child elements that do not match the component.
@@ -83,4 +101,4 @@ function htmlWithClassName ($, className) {
   return $.html($component)
 }
 
-module.exports = { render, getExamples, htmlWithClassName }
+module.exports = { render, getExamples, htmlWithClassName, renderSass }

src/components/all.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
 
 const { allComponents } = require('../../lib/file-helper')
+const { renderSass } = require('../../lib/jest-helpers')
 
 const configPaths = require('../../config/paths.json')
 
@@ -21,3 +22,9 @@ describe('When nunjucks is configured with a different base path', () => {
     }).not.toThrow()
   })
 })
+
+it.each(allComponents)('%s.scss renders to CSS without errors', (component) => {
+  return renderSass({
+    file: `${configPaths.src}/components/${component}/_${component}.scss`
+  })
+})

src/core/_global-styles.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @import "links";
 @import "typography";
 

src/core/_links.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/core/links") {
 
   %govuk-link {

src/core/_lists.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/core/lists") {
 
   %govuk-list {

src/core/_section-break.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/core/section-break") {
 
   %govuk-section-break {

src/core/_template.scss

@@ -1,4 +1,6 @@
 @import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
 
 @include govuk-exports("govuk/core/template") {
 

src/core/_typography.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/core/typography") {
 
   // Headings

src/core/core.test.js

@@ -0,0 +1,11 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const { renderSass } = require('../../lib/jest-helpers')
+const configPaths = require('../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/core/**/*.scss`)
+
+it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+  return renderSass({ file: file })
+})

src/objects/_form-group.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/objects/form-group") {
 
   .govuk-form-group {

src/objects/_grid.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/objects/grid") {
 
   .govuk-grid-row {

src/objects/_main-wrapper.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 // Example usage with Breadcrumbs, phase banners, back links:
 // <div class="govuk-width-container">
 //   <!-- Breadcrumbs, phase banners, back links are placed in here. -->

src/objects/_width-container.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @mixin govuk-width-container {
   // Limit the width of the container to the page width
   max-width: $govuk-page-width;

src/objects/objects.test.js

@@ -0,0 +1,11 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const { renderSass } = require('../../lib/jest-helpers')
+const configPaths = require('../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/objects/**/*.scss`)
+
+it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+  return renderSass({ file: file })
+})

src/overrides/_display.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/overrides/display") {
 
   .govuk-\!-display-inline {

src/overrides/_spacing.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 ////
 /// @group overrides
 ////

src/overrides/_typography.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/overrides/typography") {
   // Font size and line height
 

src/overrides/_width.scss

@@ -1,3 +1,7 @@
+@import "../settings/all";
+@import "../tools/all";
+@import "../helpers/all";
+
 @include govuk-exports("govuk/overrides/width") {
   .govuk-\!-width-full {
     width: 100% !important;

src/overrides/overrides.test.js

@@ -0,0 +1,11 @@
+/* eslint-env jest */
+
+const glob = require('glob')
+const { renderSass } = require('../../lib/jest-helpers')
+const configPaths = require('../../config/paths.json')
+
+const sassFiles = glob.sync(`${configPaths.src}/overrides/**/*.scss`)
+
+it.each(sassFiles)('%s renders to CSS without errors', (file) => {
+  return renderSass({ file: file })
+})