diff --git a/Makefile b/Makefile index 2ff1b1ed6..484f78867 100644 --- a/Makefile +++ b/Makefile @@ -25,7 +25,7 @@ VIRTUALENV_ROOT := $(shell [ -z $$VIRTUAL_ENV ] && echo $$(pwd)/venv || echo $$V .PHONY: bootstrap bootstrap: generate-version-file ## Set up everything to run the app pip3 install -r requirements_for_test.txt - npm install && npm rebuild node-sass && npm run build + npm install && npm run build .PHONY: run-flask run-flask: ## Run flask diff --git a/app/assets/javascripts/updateContent.js b/app/assets/javascripts/updateContent.js index b607e77df..85cfa61e5 100644 --- a/app/assets/javascripts/updateContent.js +++ b/app/assets/javascripts/updateContent.js @@ -2,7 +2,6 @@ "use strict"; var queues = {}; - var dd = new global.diffDOM(); var defaultInterval = 2000; var interval = 0; @@ -11,10 +10,18 @@ 1000 )); - var getRenderer = $component => response => dd.apply( - $component.get(0), - dd.diff($component.get(0), $(response[$component.data('key')]).get(0)) - ); + var getRenderer = $component => { + var key = $component.data('key'); // use closure to retain key when component is replaced + return response => { + $component = $( + global.domdiff( + $component.parent().get(0), + [$component.get(0)], + [$(response[key]).get(0)] + )[0] + ); + }; + }; var getQueue = resource => ( queues[resource] = queues[resource] || [] diff --git a/gulpfile.js b/gulpfile.js index 35b51964e..68964ea9d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,7 +20,7 @@ plugins.cssUrlAdjuster = require('gulp-css-url-adjuster'); plugins.jshint = require('gulp-jshint'); plugins.prettyerror = require('gulp-prettyerror'); plugins.rollup = require('gulp-better-rollup') -plugins.sass = require('gulp-sass'); +plugins.sass = require('gulp-sass')(require('sass')); plugins.sassLint = require('gulp-sass-lint'); plugins.uglify = require('gulp-uglify'); @@ -146,7 +146,7 @@ const javascripts = () => { paths.npm + 'hogan.js/dist/hogan-3.0.2.js', paths.npm + 'jquery/dist/jquery.min.js', paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js', - paths.npm + 'diff-dom/diffDOM.js', + paths.npm + 'domdiff/min.js', paths.npm + 'timeago/jquery.timeago.js', paths.npm + 'textarea-caret/index.js', paths.npm + 'cbor-js/cbor.js' @@ -207,8 +207,7 @@ const sass = () => { paths.src + '/stylesheets/print.scss' ]) .pipe(plugins.prettyerror()) - .pipe(plugins.sass({ - outputStyle: 'nested', + .pipe(plugins.sass.sync({ includePaths: [ paths.npm + 'govuk-elements-sass/public/sass/', paths.toolkit + 'stylesheets/', diff --git a/package.json b/package.json index e062a4ee1..726b41cfd 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "description": "Admin front end for GOV.UK Notify", "engines": { - "node": "10.15.3" + "node": ">=10.15.3" }, "scripts": { "test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts", @@ -23,24 +23,25 @@ "@babel/preset-env": "7.4.2", "cbor-js": "0.1.0", "del": "5.1.0", - "diff-dom": "2.5.1", + "domdiff": "2.2.2", "govuk_frontend_toolkit": "8.1.0", "govuk-elements-sass": "3.1.2", "govuk-frontend": "2.13.0", - "gulp": "4.0.0", + "gulp": "4.0.2", "gulp-add-src": "1.0.0", "gulp-babel": "8.0.0", "gulp-better-rollup": "4.0.1", - "gulp-clean-css": "4.2.0", + "gulp-clean-css": "4.3.0", "gulp-concat": "2.6.1", - "gulp-include": "2.3.1", - "gulp-sass": "4.0.2", + "gulp-include": "2.4.1", + "gulp-sass": "5.0.0", "gulp-uglify": "3.0.2", "hogan": "1.0.2", "jquery": "3.5.0", "leaflet": "1.6.0", "query-command-supported": "1.0.0", "rollup": "1.23.1", + "sass": "1.32.7", "streamqueue": "1.1.2", "textarea-caret": "3.1.0", "timeago": "1.6.5" @@ -48,7 +49,7 @@ "devDependencies": { "gulp-css-url-adjuster": "0.2.3", "gulp-jshint": "2.1.0", - "gulp-prettyerror": "1.2.1", + "gulp-prettyerror": "2.0.0", "gulp-sass-lint": "1.4.0", "jest": "24.7.1", "jest-date-mock": "^1.0.8", diff --git a/tests/javascripts/updateContent.test.js b/tests/javascripts/updateContent.test.js index 2d5a36c66..c1496b4b7 100644 --- a/tests/javascripts/updateContent.test.js +++ b/tests/javascripts/updateContent.test.js @@ -31,9 +31,13 @@ beforeAll(() => { $.ajax.mockImplementation(() => jqueryAJAXReturnObj); - // because we're running in node, diffDOM executes as a module - // in the normal browser environment it will attach to window so we replicate that here - window.diffDOM = require('../../node_modules/diff-dom/diffDOM.js'); + // using require to execute the version we use in our our frontend build here can't add + // the domdiff variable to this scope like it does when executed in browsers because + // that version doesn't export it + // we use CommonJS version instead because it does (as the default property) + // see https://nodejs.org/en/knowledge/getting-started/what-is-require/ for more info + // also, we're not a browser so we need to manually attach domdiff to window + window.domdiff = require('domdiff/cjs').default; require('../../app/assets/javascripts/updateContent.js'); }); @@ -44,52 +48,58 @@ afterAll(() => { describe('Update content', () => { + let HTMLString; + let initialHTMLString; + beforeEach(() => { // store HTML in string to allow use in AJAX responses HTMLString = ` -
-
-
`; - document.body.innerHTML = HTMLString; - // default the response to match the existing content + initialHTMLString = `
+ ${HTMLString} +
`; + + document.body.innerHTML = initialHTMLString; + + // default the response to match the content inside div[data-module] responseObj[updateKey] = HTMLString; });