Merge pull request #1988 from alphagov/auto-restart-when-settings-cre…

…ated-and-removed

Auto restart when settings created and removed

cypress/e2e/dev/1-watch-files/watch-settings-styles.cypress.js

@@ -0,0 +1,50 @@
+// core dependencies
+const path = require('path')
+
+// local dependencies
+const { waitForApplication, createFile, deleteFile, replaceInFile } = require('../../utils')
+
+const appStylesPath = path.join('app', 'assets', 'sass')
+const appStylesFolder = path.join(Cypress.env('projectFolder'), appStylesPath)
+
+const settingsStyle = path.join(appStylesFolder, 'settings.scss')
+
+const RED = 'rgb(255, 0, 0)'
+const GREEN = 'rgb(0, 255, 0)'
+
+const settingsContent = `$govuk-brand-colour: ${RED}`
+const changedSettingsContent = `$govuk-brand-colour: ${GREEN}`
+
+describe('watching settings.scss', () => {
+  before(() => {
+    cy.task('deleteFile', { filename: settingsStyle })
+  })
+
+  it('Successfully reload settings changes', () => {
+    waitForApplication()
+
+    cy.task('log', 'The colour of the header bottom border should be as designed')
+    cy.get('.govuk-header__container').should('not.have.css', 'border-bottom-color', RED)
+
+    createFile(settingsStyle, { data: settingsContent })
+
+    waitForApplication()
+
+    cy.task('log', 'The colour of the header bottom border should be changed to red')
+    cy.get('.govuk-header__container').should('have.css', 'border-bottom-color', RED)
+
+    replaceInFile(settingsStyle, settingsContent, '', changedSettingsContent)
+
+    waitForApplication()
+
+    cy.task('log', 'The colour of the header bottom border should be changed to green')
+    cy.get('.govuk-header__container').should('have.css', 'border-bottom-color', GREEN)
+
+    deleteFile(settingsStyle)
+
+    waitForApplication()
+
+    cy.task('log', 'The colour of the header bottom border should be as designed')
+    cy.get('.govuk-header__container').should('not.have.css', 'border-bottom-color', GREEN)
+  })
+})

lib/build.js

@@ -140,5 +140,6 @@ function autoImportComponentsSync () {
 
 module.exports = {
   generateAssetsSync,
-  generateCssSync
+  generateCssSync,
+  proxyUserSassIfItExists
 }

lib/dev-server.js

@@ -9,7 +9,7 @@ const fse = require('fs-extra')
 const nodemon = require('nodemon')
 
 // local dependencies
-const { generateAssetsSync, generateCssSync } = require('./build')
+const { generateAssetsSync, generateCssSync, proxyUserSassIfItExists } = require('./build')
 const plugins = require('./plugins/plugins')
 const { collectDataUsage } = require('./usage-data')
 const utils = require('./utils')
@@ -37,14 +37,22 @@ async function runDevServer () {
   watchAfterStarting(nodemon)
 }
 
+function proxyAndGenerateCssSync (fullFilename) {
+  const filename = fullFilename.split(path.sep).pop().toLowerCase()
+  if (filename === 'settings.scss') {
+    proxyUserSassIfItExists(filename)
+    generateCssSync()
+  }
+}
+
 function watchSass (sassPath) {
   if (!fse.existsSync(sassPath)) return
   chokidar.watch(sassPath, {
     ignoreInitial: true,
     disableGlobbing: true // Prevents square brackets from being mistaken for globbing characters
-  }).on('all', () => {
-    generateCssSync()
-  })
+  }).on('add', proxyAndGenerateCssSync)
+    .on('unlink', proxyAndGenerateCssSync)
+    .on('all', generateCssSync)
 }
 
 function watchBeforeStarting () {