Skip to content

Commit

Permalink
feat(config): clientDisplayNone sets client elements display none. (#…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
johnjbarton authored Sep 9, 2019
1 parent 019bfd4 commit 6235e68
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 3 deletions.
8 changes: 7 additions & 1 deletion client/karma.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion client/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
9 changes: 9 additions & 0 deletions docs/config/01-configuration-file.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 17 additions & 1 deletion test/client/karma.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
}
Expand Down Expand Up @@ -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')
Expand Down

0 comments on commit 6235e68

Please sign in to comment.