Merge pull request #3106 from alphagov/add-js-tests-for-preview-pane

Add js tests for preview pane

tests/javascripts/support/helpers/globals.js

@@ -0,0 +1,89 @@
+// helpers for mocking objects attached to the global space as properties, ie. window.location
+
+class LocationMock {
+
+  constructor (URL) {
+
+    this._location = window.location;
+
+    // setting href sets all sub-properties
+    this.href = URL;
+
+    // JSDOM sets window.location as non-configurable
+    // the only way to mock it, currently, is to replace it completely
+    delete window.location;
+    window.location = this;
+
+  }
+
+  get href () {
+
+    return `${this.protocol}://${this.host}${this.pathname}${this.search}${this.hash}`
+
+  }
+
+  set href (value) {
+
+    const partNames = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash'];
+
+    const protocol = '(https:|http:)';
+    const hostname = '[^\\/]+';
+    const port = '(:\\d)';
+    const pathname = '([^?]+)';
+    const search = '([^#])';
+    const hash = '(#[\\x00-\\x7F])'; // match any ASCII character
+
+    const re = new RegExp(`^${protocol}{0,1}(?:\\/\\/){0,1}(${hostname}${port}{0,1}){0,1}${pathname}{0,1}${search}{0,1}${hash}{0,1}$`);
+    const match = value.match(re)
+
+    if (match === null) { throw Error(`${value} is not a valid URL`); }
+
+    match.forEach((part, idx) => {
+
+      let partName;
+
+      // 0 index is whole match, we want the groups
+      if (idx > 0) {
+        partName = partNames[idx - 1];
+
+        if (part !== undefined) {
+          this[partName] = part;
+        } else if (!(partName in this)) { // only get value from window.location if property not set
+          this[partName] = this._location[partName];
+        }
+      }
+
+    });
+
+  }
+
+  get host () {
+
+    return `${this.hostname}:${this.port}`;
+
+  }
+
+  set host (value) {
+
+    const parts = value.split(':');
+
+    this.hostname = parts[0];
+    this.protocol = parts[1];
+
+  }
+
+  // origin is read-only
+  get origin () {
+
+    return `${this.protol}://${this.hostname}`;
+
+  }
+
+  reset () {
+
+    window.location = this._location;
+
+  }
+}
+
+exports.LocationMock = LocationMock;

tests/javascripts/support/helpers/html.js

@@ -1,6 +1,6 @@
 // helpers for generating patterns of HTML
 
-function getRadios (fields) {
+function getRadios (fields, name) {
   const result = '';
 
   return fields.map((field, idx) => {
@@ -8,8 +8,8 @@ function getRadios (fields) {
 
     return `
       <div class="multiple-choice">
-        <input id="choose-${field.name}-1" name="choose-${field.name}-1" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
-        <label class="block-label" for="choose-${field.name}-1">
+        <input id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="block-label" for="${name}-1">
           ${field.label}
         </label>
       </div>`;
@@ -22,11 +22,11 @@ function getRadioGroup (data) {
   data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
   radioGroup.innerHTML = `
     <div class="form-group ">
-      <fieldset id="choose-${data.name}">
+      <fieldset id="${data.name}">
         <legend class="form-label">
-           Choose ${data.label}
+          ${data.label}
         </legend>
-        ${getRadios(data.fields)}
+        ${getRadios(data.fields, data.name)}
       </fieldset>
     </div>`;