govuk_publishing_components 1.9.0 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d37415f4cc96c324a96aebd7d9148c4bd9455235
-  data.tar.gz: ed11d8dc99ba4157a218f65637ba961f0a78f776
+  metadata.gz: 231f4e05eaee81049ea4f72bf5ec1ced16026e3f
+  data.tar.gz: f1564c8de553159a32af562e96dcca4931f2a554
 SHA512:
-  metadata.gz: 139fedd5ba05a0ba2b718805848c74e3baa870ecc2bbd7044adb8eee6d4302dbbb4499e9f16b0717dd303dd93657d4d0304dd85450b35139e35fb184a52d9414
-  data.tar.gz: fefde1f7e234ea983d4f73418cd298862e8907c57a02ec647f90b55c860587358727c8bc25cead88ca2c376e328c79dfa9638f528ce5502fd6f75973929676c1
+  metadata.gz: a32780c774231f52e107781140fa301643437b5ff976b63f7fc3f3e2b3a41ecbb786aa742c738039dac6bff514b770f1d7a70cd468e16b56be704ebd1ab04d81
+  data.tar.gz: '0724197ba6f3f37e563bd7b24826d1fb9c8b1942b39332d3fe21d9b6c12d3a1751ebd2dcccba59c45bd248d3ae6777327299283554a6b25d47b725f9517ebbe9'

data/README.md

@@ -121,6 +121,17 @@ if !Rails.env.production? || ENV['HEROKU_APP_NAME'].present?
 end
 ```
 
+## Automated Testing
+### Visual Diff Tool
+The component guide includes a visual diff tool that should make it easier to spot when you are introducing visual regressions in your components.
+
+It can be run on a locally running version of the component guide, to compare it to the heroku master deploy. For example: [government-frontend.dev.gov.uk/component-guide](government-frontend.dev.gov.uk/component-guide) will be compared to [government-frontend.herokuapp.com/component-guide](government-frontend.herokuapp.com/component-guide).
+
+The tool can be run via the console using the following command:
+```js
+  window.GOVUK.VisualDiffTool()`
+```
+
 ## Licence
 
 [MIT Licence](LICENCE.md)

data/app/assets/javascripts/govuk_publishing_components/accessibility-test.js

@@ -12,7 +12,12 @@
 
     var axeOptions = {
       restoreScroll: true,
-      include: [selector]
+      include: [selector],
+      rules: {
+        "duplicate-id": {
+          enabled: false
+        }
+      }
     }
 
     // TODO: Remove when aXe core patched

data/app/assets/javascripts/govuk_publishing_components/visual-regression.js

@@ -0,0 +1,75 @@
+(function (window, document) {
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.VisualDiffTool = function (currentWindowLocation) {
+    const visualDiffSelector = 'visual-diff';
+    var existingIframe = document.getElementById(visualDiffSelector);
+    var windowLocation = currentWindowLocation || window.location;
+
+    if (existingIframe) {
+      existingIframe.parentNode.removeChild(existingIframe);
+      document.body.style.filter = null;
+    } else {
+      var iframe = document.createElement('iframe');
+      iframe.id =  visualDiffSelector;
+      iframe.setAttribute('scrolling', 'no');
+      _setElementStyles(iframe, {
+        'width': '100%',
+        'height': document.body.scrollHeight + 'px',
+        'position': 'absolute',
+        'top': '0',
+        'pointer-events': 'none',
+        'border': '0'
+      });
+      iframe.style.setProperty('z-index', '999','important');
+
+      // For browsers that support it, do mix-blend-mode diff
+      if ('mix-blend-mode' in document.body.style) {
+        _setElementStyles(iframe, {'mix-blend-mode': 'difference'});
+        document.body.style.filter = 'invert(100%)';
+      } else {
+        // Else do a simple overlay of the live page for comparison (IE and Edge)
+        _setElementStyles(iframe, {'opacity': '0.7'});
+      }
+
+      iframe.src = _processComparisonURL(windowLocation);
+
+      if (iframe.src) {
+        document.body.appendChild(iframe);
+        console.log("comparing to " + iframe.src);
+      }
+    }
+  };
+
+  var _processComparisonURL = function (url) {
+    var href = url.href;
+    var host = url.host;
+
+    if (href.includes('dev.gov.uk/component-guide')) {
+      var appName = host.split('.')[0];
+
+      if (appName === 'static') {
+        appName = 'govuk-static';
+      }
+
+      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'));
+    } else if (href.includes('dev.gov.uk')) {
+      return _forceHTTPS(href.replace(host, 'www.gov.uk'));
+    } else if (href.includes('-pr-')) {
+      var appName = host.split('-pr')[0];
+      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'));
+    } else {
+      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment');
+    }
+  };
+
+  var _forceHTTPS = function(href) {
+    return href.replace('http://', 'https://');
+  }
+
+  var _setElementStyles = function(element, styles) {
+    for (var style in styles) {
+      element.style[style] = styles[style];
+    }
+  };
+})(window, document);

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '1.9.0'.freeze
+  VERSION = '1.10.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 1.9.0
+  version: 1.10.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-20 00:00:00.000000000 Z
+date: 2017-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -194,6 +194,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/application.js
 - app/assets/javascripts/govuk_publishing_components/vendor/axe.min.js
 - app/assets/javascripts/govuk_publishing_components/vendor/matches-polyfill.min.js
+- app/assets/javascripts/govuk_publishing_components/visual-regression.js
 - app/assets/stylesheets/govuk_publishing_components/application.scss
 - app/controllers/govuk_publishing_components/application_controller.rb
 - app/controllers/govuk_publishing_components/component_guide_controller.rb