feat(config): clientDisplayNone sets client elements display none. (#…

…3348)

* feat(config): clientDisplayNone sets client elements display none.

When karma is used for compontent testing with screenshots, the client elements make screenshot comparison
more difficult.  config.client.clientDisplayNone will set the element style to display.none.

* feat(config): Document clientDisplayNone

client/karma.js

@@ -2,7 +2,7 @@ var stringify = require('../common/stringify')
 var constant = require('./constants')
 var util = require('../common/util')
 
-function Karma (socket, iframe, opener, navigator, location) {
+function Karma (socket, iframe, opener, navigator, location, document) {
   var startEmitted = false
   var reloadingContext = false
   var self = this
@@ -266,6 +266,12 @@ function Karma (socket, iframe, opener, navigator, location) {
     reloadingContext = !self.config.clearContext
     navigateContextTo(constant.CONTEXT_URL)
 
+    if (self.config.clientDisplayNone) {
+      [].forEach.call(document.querySelectorAll('#banner, #browsers'), function (el) {
+        el.style.display = 'none'
+      })
+    }
+
     // clear the console before run
     // works only on FF (Safari, Chrome do not allow to clear console from js source)
     if (window.console && window.console.clear) {

client/main.js

@@ -23,4 +23,4 @@ var socket = io(location.host, {
 // instantiate the updater of the view
 new StatusUpdater(socket, util.elm('title'), util.elm('banner'), util.elm('browsers'))
 window.karma = new Karma(socket, util.elm('context'), window.open,
-  window.navigator, window.location)
+  window.navigator, window.location, window.document)

docs/config/01-configuration-file.md

@@ -268,6 +268,15 @@ If true, Karma runs the tests inside the original window without using iframe. I
 If true, Karma clears the context window upon the completion of running the tests. If false, Karma does not clear the context window
 upon the completion of running the tests. Setting this to false is useful when embedding a Jasmine Spec Runner Template.
 
+## client.clientDisplayNone
+**Type:** Boolean
+
+**Default:** `false`
+
+**Description:** Set style display none on client elements.
+
+If true, Karma does not display the banner and browser list. Useful when using karma on component tests with screenshots.
+
 ## colors
 **Type:** Boolean
 

test/client/karma.spec.js

@@ -9,6 +9,7 @@ var MockSocket = require('./mocks').Socket
 
 describe('Karma', function () {
   var socket, k, ck, windowNavigator, windowLocation, windowStub, startSpy, iframe, clientWindow
+  var windowDocument, elements
 
   function setTransportTo (transportName) {
     socket._setTransportNameTo(transportName)
@@ -21,8 +22,10 @@ describe('Karma', function () {
     windowNavigator = {}
     windowLocation = { search: '' }
     windowStub = sinon.stub().returns({})
+    elements = [{ style: {} }, { style: {} }]
+    windowDocument = { querySelectorAll: sinon.stub().returns(elements) }
 
-    k = new ClientKarma(socket, iframe, windowStub, windowNavigator, windowLocation)
+    k = new ClientKarma(socket, iframe, windowStub, windowNavigator, windowLocation, windowDocument)
     clientWindow = {
       karma: k
     }
@@ -57,6 +60,19 @@ describe('Karma', function () {
     assert(windowStub.calledWith('context.html'))
   })
 
+  it('should not set style on elements', function () {
+    var config = {}
+    socket.emit('execute', config)
+    assert(Object.keys(elements[0].style).length === 0)
+  })
+
+  it('should set display none on elements if clientDisplayNone', function () {
+    var config = { clientDisplayNone: true }
+    socket.emit('execute', config)
+    assert(elements[0].style.display === 'none')
+    assert(elements[1].style.display === 'none')
+  })
+
   it('should stop execution', function () {
     sinon.spy(k, 'complete')
     socket.emit('stop')