darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 02:44:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

2489 - Clean up site js

Browse Source
This commit is contained in:
Jonathan Bobel
2025-04-07 15:25:29 -04:00
parent ee8213f670
commit 9921809f90
5 changed files with 6 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/javascripts/colourPreview.js
View File

@@ -1,29 +0,0 @@
(function(Modules) {
"use strict";
let isSixDigitHex = value => value.match(/^#[0-9A-F]{6}$/i);
let colourOrWhite = value => isSixDigitHex(value) ? value : '#FFFFFF';
Modules.ColourPreview = function() {
this.start = component => {
this.$input = $(component);
this.$input.closest('.usa-form-group').append(
this.$preview = $('<span class="textbox-colour-preview"></span>')
);
this.$input
.on('input', this.update)
.trigger('input');
};
this.update = () => this.$preview.css(
'background', colourOrWhite(this.$input.val())
);
};
})(window.GOVUK.Modules);

24
app/assets/javascripts/homepage.js
View File

@@ -1,24 +0,0 @@
(function(window) {
"use strict";
window.GOVUK.Modules.Homepage = function() {
this.start = function(component) {
let $component = $(component);
let iterations = 0;
let timeout = null;
$component.on('click', () => {
if (++iterations == 5) {
$component.toggleClass('product-page-intro-wrapper--alternative');
}
clearTimeout(timeout);
timeout = setTimeout(() => iterations = 0, 1500);
});
};
};
})(window);

2
gulpfile.js
View File

@@ -68,13 +68,11 @@ const javascripts = () => {
paths.src + 'javascripts/errorTracking.js',
paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
paths.src + 'javascripts/fullscreenTable.js',
paths.src + 'javascripts/colourPreview.js',
paths.src + 'javascripts/templateFolderForm.js',
paths.src + 'javascripts/collapsibleCheckboxes.js',
paths.src + 'javascripts/radioSlider.js',
paths.src + 'javascripts/updateStatus.js',
paths.src + 'javascripts/errorBanner.js',
paths.src + 'javascripts/homepage.js',
paths.src + 'javascripts/timeoutPopup.js',
paths.src + 'javascripts/date.js',
paths.src + 'javascripts/loginAlert.js',

6
tests/javascripts/activityChart.test.js
View File

@@ -18,6 +18,12 @@ Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
});
// beforeAll hook to set up the DOM and load D3.js script
beforeAll(() => {
jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => ({
resolvedOptions: () => ({ timeZone: 'UTC' })
}));
});
beforeAll(done => {
// Set up the DOM with the D3 script included
document.body.innerHTML = `

139
tests/javascripts/colourPreview.test.js
View File

@@ -1,139 +0,0 @@
const helpers = require('./support/helpers.js');
beforeAll(() => {
require('../../app/assets/javascripts/colourPreview.js');
});
afterAll(() => {
require('./support/teardown.js');
});
describe('Colour preview', () => {
let field;
let textbox;
let swatchEl;
beforeEach(() => {
// set up DOM
document.body.innerHTML = `
<div class="usa-form-group">
<label class="govuk-form-label" for="colour">
Colour
</label>
<input class="govuk-input govuk-input--width-6" id="colour" name="colour" rows="8" type="text" value="" data-module="colour-preview">
</div>`;
field = document.querySelector('.usa-form-group');
textbox = document.querySelector('input[type=text]');
});
afterEach(() => {
document.body.innerHTML = '';
});
describe("When the page loads", () => {
test("It should add a swatch element for the preview", () => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
expect(swatchEl).not.toBeNull();
});
test("If the textbox is empty it should make the swatch white", () => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// textbox defaults to empty
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
textbox.setAttribute('value', '#00FF00');
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
});
test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
textbox.setAttribute('value', 'green');
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
// colours are output in RGB
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
});
describe("When input is added to the textbox", () => {
beforeEach(() => {
// start the module
window.GOVUK.modules.start();
swatchEl = document.querySelector('.textbox-colour-preview');
});
test("If the textbox is empty it should make the swatch white", () => {
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
test("If the textbox has a value which is a hex code it should add that colour to the swatch", () => {
textbox.setAttribute('value', '#00FF00');
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(0, 255, 0)');
});
test("If the textbox has a value which isn't a hex code it should make the swatch white", () => {
textbox.setAttribute('value', 'green');
helpers.triggerEvent(document.querySelector('input[type=text]'), 'input');
// textbox defaults to empty
expect(swatchEl.style.background).toEqual('rgb(255, 255, 255)');
});
});
});