Merge pull request #3086 from alphagov/add-js-tests-for-colour-preview

Add tests for colour preview

tests/javascripts/colourPreview.test.js

@@ -0,0 +1,139 @@
+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="form-group" data-module="colour-preview">
+        <label class="form-label" for="colour">
+          Colour
+        </label>
+        <input class="form-control form-control-1-4" id="colour" name="colour" rows="8" type="text" value="">
+      </div>`;
+
+    field = document.querySelector('.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)');
+
+    });
+
+  });
+
+});