darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 18:03:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4023 from alphagov/bump-npm-modules

Browse Source 
Bump gulp & gulp-sass to latest versions
This commit is contained in:
Tom Byers
2021-09-22 14:23:20 +01:00
committed by GitHub
parent a02596c481 37ae04f67e
commit a06a1b1672
5 changed files with 75 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@@ -25,7 +25,7 @@ VIRTUALENV_ROOT := $(shell [ -z $$VIRTUAL_ENV ] && echo $$(pwd)/venv || echo $$V
.PHONY: bootstrap .PHONY: bootstrap
bootstrap: generate-version-file ## Set up everything to run the app bootstrap: generate-version-file ## Set up everything to run the app
pip3 install -r requirements_for_test.txt pip3 install -r requirements_for_test.txt
npm install && npm rebuild node-sass && npm run build npm install && npm run build
.PHONY: run-flask .PHONY: run-flask
run-flask: ## Run flask run-flask: ## Run flask

17
app/assets/javascripts/updateContent.js
View File

@@ -2,7 +2,6 @@
"use strict"; "use strict";
var queues = {}; var queues = {};
var dd = new global.diffDOM();
var defaultInterval = 2000; var defaultInterval = 2000;
var interval = 0; var interval = 0;
@@ -11,10 +10,18 @@
1000 1000
)); ));
var getRenderer = $component => response => dd.apply( var getRenderer = $component => {
$component.get(0), var key = $component.data('key'); // use closure to retain key when component is replaced
dd.diff($component.get(0), $(response[$component.data('key')]).get(0)) return response => {
); $component = $(
global.domdiff(
$component.parent().get(0),
[$component.get(0)],
[$(response[key]).get(0)]
)[0]
);
};
};
var getQueue = resource => ( var getQueue = resource => (
queues[resource] = queues[resource] || [] queues[resource] = queues[resource] || []

7
gulpfile.js
View File

@@ -20,7 +20,7 @@ plugins.cssUrlAdjuster = require('gulp-css-url-adjuster');
plugins.jshint = require('gulp-jshint'); plugins.jshint = require('gulp-jshint');
plugins.prettyerror = require('gulp-prettyerror'); plugins.prettyerror = require('gulp-prettyerror');
plugins.rollup = require('gulp-better-rollup') 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.sassLint = require('gulp-sass-lint');
plugins.uglify = require('gulp-uglify'); plugins.uglify = require('gulp-uglify');
@@ -146,7 +146,7 @@ const javascripts = () => {
paths.npm + 'hogan.js/dist/hogan-3.0.2.js', paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
paths.npm + 'jquery/dist/jquery.min.js', paths.npm + 'jquery/dist/jquery.min.js',
paths.npm + 'query-command-supported/dist/queryCommandSupported.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 + 'timeago/jquery.timeago.js',
paths.npm + 'textarea-caret/index.js', paths.npm + 'textarea-caret/index.js',
paths.npm + 'cbor-js/cbor.js' paths.npm + 'cbor-js/cbor.js'
@@ -207,8 +207,7 @@ const sass = () => {
paths.src + '/stylesheets/print.scss' paths.src + '/stylesheets/print.scss'
]) ])
.pipe(plugins.prettyerror()) .pipe(plugins.prettyerror())
.pipe(plugins.sass({ .pipe(plugins.sass.sync({
outputStyle: 'nested',
includePaths: [ includePaths: [
paths.npm + 'govuk-elements-sass/public/sass/', paths.npm + 'govuk-elements-sass/public/sass/',
paths.toolkit + 'stylesheets/', paths.toolkit + 'stylesheets/',

15
package.json
View File

@@ -3,7 +3,7 @@
"version": "0.0.1", "version": "0.0.1",
"description": "Admin front end for GOV.UK Notify", "description": "Admin front end for GOV.UK Notify",
"engines": { "engines": {
"node": "10.15.3" "node": ">=10.15.3"
}, },
"scripts": { "scripts": {
"test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts", "test": "gulp lint && jest --config tests/javascripts/jest.config.js tests/javascripts",
@@ -23,24 +23,25 @@
"@babel/preset-env": "7.4.2", "@babel/preset-env": "7.4.2",
"cbor-js": "0.1.0", "cbor-js": "0.1.0",
"del": "5.1.0", "del": "5.1.0",
"diff-dom": "2.5.1", "domdiff": "2.2.2",
"govuk_frontend_toolkit": "8.1.0", "govuk_frontend_toolkit": "8.1.0",
"govuk-elements-sass": "3.1.2", "govuk-elements-sass": "3.1.2",
"govuk-frontend": "2.13.0", "govuk-frontend": "2.13.0",
"gulp": "4.0.0", "gulp": "4.0.2",
"gulp-add-src": "1.0.0", "gulp-add-src": "1.0.0",
"gulp-babel": "8.0.0", "gulp-babel": "8.0.0",
"gulp-better-rollup": "4.0.1", "gulp-better-rollup": "4.0.1",
"gulp-clean-css": "4.2.0", "gulp-clean-css": "4.3.0",
"gulp-concat": "2.6.1", "gulp-concat": "2.6.1",
"gulp-include": "2.3.1", "gulp-include": "2.4.1",
"gulp-sass": "4.0.2", "gulp-sass": "5.0.0",
"gulp-uglify": "3.0.2", "gulp-uglify": "3.0.2",
"hogan": "1.0.2", "hogan": "1.0.2",
"jquery": "3.5.0", "jquery": "3.5.0",
"leaflet": "1.6.0", "leaflet": "1.6.0",
"query-command-supported": "1.0.0", "query-command-supported": "1.0.0",
"rollup": "1.23.1", "rollup": "1.23.1",
"sass": "1.32.7",
"streamqueue": "1.1.2", "streamqueue": "1.1.2",
"textarea-caret": "3.1.0", "textarea-caret": "3.1.0",
"timeago": "1.6.5" "timeago": "1.6.5"
@@ -48,7 +49,7 @@
"devDependencies": { "devDependencies": {
"gulp-css-url-adjuster": "0.2.3", "gulp-css-url-adjuster": "0.2.3",
"gulp-jshint": "2.1.0", "gulp-jshint": "2.1.0",
"gulp-prettyerror": "1.2.1", "gulp-prettyerror": "2.0.0",
"gulp-sass-lint": "1.4.0", "gulp-sass-lint": "1.4.0",
"jest": "24.7.1", "jest": "24.7.1",
"jest-date-mock": "^1.0.8", "jest-date-mock": "^1.0.8",

92
tests/javascripts/updateContent.test.js
View File

@@ -31,9 +31,13 @@ beforeAll(() => {
$.ajax.mockImplementation(() => jqueryAJAXReturnObj); $.ajax.mockImplementation(() => jqueryAJAXReturnObj);
// because we're running in node, diffDOM executes as a module // using require to execute the version we use in our our frontend build here can't add
// in the normal browser environment it will attach to window so we replicate that here // the domdiff variable to this scope like it does when executed in browsers because
window.diffDOM = require('../../node_modules/diff-dom/diffDOM.js'); // 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'); require('../../app/assets/javascripts/updateContent.js');
}); });
@@ -44,52 +48,58 @@ afterAll(() => {
describe('Update content', () => { describe('Update content', () => {
let HTMLString;
let initialHTMLString;
beforeEach(() => { beforeEach(() => {
// store HTML in string to allow use in AJAX responses // store HTML in string to allow use in AJAX responses
HTMLString = ` HTMLString = `
<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite"> <div class="bottom-gutter ajax-block-container">
<div class="bottom-gutter ajax-block-container"> <ul role="tablist" class="pill">
<ul role="tablist" class="pill"> <li aria-selected="true" role="tab">
<li aria-selected="true" role="tab"> <div class="pill-selected-item" tabindex="0">
<div class="pill-selected-item" tabindex="0"> <div class="big-number-smaller">
<div class="big-number-smaller"> <div class="big-number-number">0</div>
<div class="big-number-number">0</div>
</div>
<div class="pill-label">total</div>
</div> </div>
</li> <div class="pill-label">total</div>
<li aria-selected="false" role="tab"> </div>
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=sending"> </li>
<div class="big-number-smaller"> <li aria-selected="false" role="tab">
<div class="big-number-number">0</div> <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=sending">
</div> <div class="big-number-smaller">
<div class="pill-label">sending</div> <div class="big-number-number">0</div>
</a> </div>
</li> <div class="pill-label">sending</div>
<li aria-selected="false" role="tab"> </a>
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=delivered"> </li>
<div class="big-number-smaller"> <li aria-selected="false" role="tab">
<div class="big-number-number">0</div> <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=delivered">
</div> <div class="big-number-smaller">
<div class="pill-label">delivered</div> <div class="big-number-number">0</div>
</a> </div>
</li> <div class="pill-label">delivered</div>
<li aria-selected="false" role="tab"> </a>
<a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=failed"> </li>
<div class="big-number-smaller"> <li aria-selected="false" role="tab">
<div class="big-number-number">0</div> <a class="govuk-link govuk-link--no-visited-state" href="/services/6658542f-0cad-491f-bec8-ab8457700ead/notifications/email?status=failed">
</div> <div class="big-number-smaller">
<div class="pill-label">failed</div> <div class="big-number-number">0</div>
</a> </div>
</li> <div class="pill-label">failed</div>
</ul> </a>
</div> </li>
</ul>
</div>`; </div>`;
document.body.innerHTML = HTMLString;
// default the response to match the existing content initialHTMLString = `<div data-module="update-content" data-resource="${resourceURL}" data-key="${updateKey}" aria-live="polite">
${HTMLString}
</div>`;
document.body.innerHTML = initialHTMLString;
// default the response to match the content inside div[data-module]
responseObj[updateKey] = HTMLString; responseObj[updateKey] = HTMLString;
}); });