Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Adding unit tests for lib/shared #3600

Merged
merged 22 commits into from
Nov 4, 2017
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion lib/shared/Activator.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,11 @@ Activator.prototype.destroy = function () {
if (this.onClick) {
document.body.removeEventListener('click', this.onClick);
}

// remove keycharm
if (this.keycharm !== undefined) {
this.keycharm.destroy();
}
this.keycharm = null;
// cleanup hammer instances
this.hammer.destroy();
this.hammer = null;
Expand Down
7 changes: 4 additions & 3 deletions lib/shared/ColorPicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ let Hammer = require('../module/hammer');
let hammerUtil = require('../hammerUtil');
let util = require('../util');


var htmlColors = {black: '#000000', navy: '#000080', darkblue: '#00008B', mediumblue: '#0000CD', blue: '#0000FF', darkgreen: '#006400', green: '#008000', teal: '#008080', darkcyan: '#008B8B', deepskyblue: '#00BFFF', darkturquoise: '#00CED1', mediumspringgreen: '#00FA9A', lime: '#00FF00', springgreen: '#00FF7F', aqua: '#00FFFF', cyan: '#00FFFF', midnightblue: '#191970', dodgerblue: '#1E90FF', lightseagreen: '#20B2AA', forestgreen: '#228B22', seagreen: '#2E8B57', darkslategray: '#2F4F4F', limegreen: '#32CD32', mediumseagreen: '#3CB371', turquoise: '#40E0D0', royalblue: '#4169E1', steelblue: '#4682B4', darkslateblue: '#483D8B', mediumturquoise: '#48D1CC', indigo: '#4B0082', darkolivegreen: '#556B2F', cadetblue: '#5F9EA0', cornflowerblue: '#6495ED', mediumaquamarine: '#66CDAA', dimgray: '#696969', slateblue: '#6A5ACD', olivedrab: '#6B8E23', slategray: '#708090', lightslategray: '#778899', mediumslateblue: '#7B68EE', lawngreen: '#7CFC00', chartreuse: '#7FFF00', aquamarine: '#7FFFD4', maroon: '#800000', purple: '#800080', olive: '#808000', gray: '#808080', skyblue: '#87CEEB', lightskyblue: '#87CEFA', blueviolet: '#8A2BE2', darkred: '#8B0000', darkmagenta: '#8B008B', saddlebrown: '#8B4513', darkseagreen: '#8FBC8F', lightgreen: '#90EE90', mediumpurple: '#9370D8', darkviolet: '#9400D3', palegreen: '#98FB98', darkorchid: '#9932CC', yellowgreen: '#9ACD32', sienna: '#A0522D', brown: '#A52A2A', darkgray: '#A9A9A9', lightblue: '#ADD8E6', greenyellow: '#ADFF2F', paleturquoise: '#AFEEEE', lightsteelblue: '#B0C4DE', powderblue: '#B0E0E6', firebrick: '#B22222', darkgoldenrod: '#B8860B', mediumorchid: '#BA55D3', rosybrown: '#BC8F8F', darkkhaki: '#BDB76B', silver: '#C0C0C0', mediumvioletred: '#C71585', indianred: '#CD5C5C', peru: '#CD853F', chocolate: '#D2691E', tan: '#D2B48C', lightgrey: '#D3D3D3', palevioletred: '#D87093', thistle: '#D8BFD8', orchid: '#DA70D6', goldenrod: '#DAA520', crimson: '#DC143C', gainsboro: '#DCDCDC', plum: '#DDA0DD', burlywood: '#DEB887', lightcyan: '#E0FFFF', lavender: '#E6E6FA', darksalmon: '#E9967A', violet: '#EE82EE', palegoldenrod: '#EEE8AA', lightcoral: '#F08080', khaki: '#F0E68C', aliceblue: '#F0F8FF', honeydew: '#F0FFF0', azure: '#F0FFFF', sandybrown: '#F4A460', wheat: '#F5DEB3', beige: '#F5F5DC', whitesmoke: '#F5F5F5', mintcream: '#F5FFFA', ghostwhite: '#F8F8FF', salmon: '#FA8072', antiquewhite: '#FAEBD7', linen: '#FAF0E6', lightgoldenrodyellow: '#FAFAD2', oldlace: '#FDF5E6', red: '#FF0000', fuchsia: '#FF00FF', magenta: '#FF00FF', deeppink: '#FF1493', orangered: '#FF4500', tomato: '#FF6347', hotpink: '#FF69B4', coral: '#FF7F50', darkorange: '#FF8C00', lightsalmon: '#FFA07A', orange: '#FFA500', lightpink: '#FFB6C1', pink: '#FFC0CB', gold: '#FFD700', peachpuff: '#FFDAB9', navajowhite: '#FFDEAD', moccasin: '#FFE4B5', bisque: '#FFE4C4', mistyrose: '#FFE4E1', blanchedalmond: '#FFEBCD', papayawhip: '#FFEFD5', lavenderblush: '#FFF0F5', seashell: '#FFF5EE', cornsilk: '#FFF8DC', lemonchiffon: '#FFFACD', floralwhite: '#FFFAF0', snow: '#FFFAFA', yellow: '#FFFF00', lightyellow: '#FFFFE0', ivory: '#FFFFF0', white: '#FFFFFF'};

/**
* @param {number} [pixelRatio=1]
*/
Expand Down Expand Up @@ -78,7 +81,6 @@ class ColorPicker {
* @private
*/
_isColorString(color) {
var htmlColors = {black: '#000000',navy: '#000080',darkblue: '#00008B',mediumblue: '#0000CD',blue: '#0000FF',darkgreen: '#006400',green: '#008000',teal: '#008080',darkcyan: '#008B8B',deepskyblue: '#00BFFF',darkturquoise: '#00CED1',mediumspringgreen: '#00FA9A',lime: '#00FF00',springgreen: '#00FF7F',aqua: '#00FFFF',cyan: '#00FFFF',midnightblue: '#191970',dodgerblue: '#1E90FF',lightseagreen: '#20B2AA',forestgreen: '#228B22',seagreen: '#2E8B57',darkslategray: '#2F4F4F',limegreen: '#32CD32',mediumseagreen: '#3CB371',turquoise: '#40E0D0',royalblue: '#4169E1',steelblue: '#4682B4',darkslateblue: '#483D8B',mediumturquoise: '#48D1CC',indigo: '#4B0082',darkolivegreen: '#556B2F',cadetblue: '#5F9EA0',cornflowerblue: '#6495ED',mediumaquamarine: '#66CDAA',dimgray: '#696969',slateblue: '#6A5ACD',olivedrab: '#6B8E23',slategray: '#708090',lightslategray: '#778899',mediumslateblue: '#7B68EE',lawngreen: '#7CFC00',chartreuse: '#7FFF00',aquamarine: '#7FFFD4',maroon: '#800000',purple: '#800080',olive: '#808000',gray: '#808080',skyblue: '#87CEEB',lightskyblue: '#87CEFA',blueviolet: '#8A2BE2',darkred: '#8B0000',darkmagenta: '#8B008B',saddlebrown: '#8B4513',darkseagreen: '#8FBC8F',lightgreen: '#90EE90',mediumpurple: '#9370D8',darkviolet: '#9400D3',palegreen: '#98FB98',darkorchid: '#9932CC',yellowgreen: '#9ACD32',sienna: '#A0522D',brown: '#A52A2A',darkgray: '#A9A9A9',lightblue: '#ADD8E6',greenyellow: '#ADFF2F',paleturquoise: '#AFEEEE',lightsteelblue: '#B0C4DE',powderblue: '#B0E0E6',firebrick: '#B22222',darkgoldenrod: '#B8860B',mediumorchid: '#BA55D3',rosybrown: '#BC8F8F',darkkhaki: '#BDB76B',silver: '#C0C0C0',mediumvioletred: '#C71585',indianred: '#CD5C5C',peru: '#CD853F',chocolate: '#D2691E',tan: '#D2B48C',lightgrey: '#D3D3D3',palevioletred: '#D87093',thistle: '#D8BFD8',orchid: '#DA70D6',goldenrod: '#DAA520',crimson: '#DC143C',gainsboro: '#DCDCDC',plum: '#DDA0DD',burlywood: '#DEB887',lightcyan: '#E0FFFF',lavender: '#E6E6FA',darksalmon: '#E9967A',violet: '#EE82EE',palegoldenrod: '#EEE8AA',lightcoral: '#F08080',khaki: '#F0E68C',aliceblue: '#F0F8FF',honeydew: '#F0FFF0',azure: '#F0FFFF',sandybrown: '#F4A460',wheat: '#F5DEB3',beige: '#F5F5DC',whitesmoke: '#F5F5F5',mintcream: '#F5FFFA',ghostwhite: '#F8F8FF',salmon: '#FA8072',antiquewhite: '#FAEBD7',linen: '#FAF0E6',lightgoldenrodyellow: '#FAFAD2',oldlace: '#FDF5E6',red: '#FF0000',fuchsia: '#FF00FF',magenta: '#FF00FF',deeppink: '#FF1493',orangered: '#FF4500',tomato: '#FF6347',hotpink: '#FF69B4',coral: '#FF7F50',darkorange: '#FF8C00',lightsalmon: '#FFA07A',orange: '#FFA500',lightpink: '#FFB6C1',pink: '#FFC0CB',gold: '#FFD700',peachpuff: '#FFDAB9',navajowhite: '#FFDEAD',moccasin: '#FFE4B5',bisque: '#FFE4C4',mistyrose: '#FFE4E1',blanchedalmond: '#FFEBCD',papayawhip: '#FFEFD5',lavenderblush: '#FFF0F5',seashell: '#FFF5EE',cornsilk: '#FFF8DC',lemonchiffon: '#FFFACD',floralwhite: '#FFFAF0',snow: '#FFFAFA',yellow: '#FFFF00',lightyellow: '#FFFFE0',ivory: '#FFFFF0',white: '#FFFFFF'};
if (typeof color === 'string') {
return htmlColors[color];
}
Expand All @@ -90,7 +92,7 @@ class ColorPicker {
* Supported formats:
* 'red' --> HTML color string
* '#ffffff' --> hex string
* 'rbg(255,255,255)' --> rgb string
* 'rgb(255,255,255)' --> rgb string
* 'rgba(255,255,255,1.0)' --> rgba string
* {r:255,g:255,b:255} --> rgb object
* {r:255,g:255,b:255,a:1.0} --> rgba object
Expand Down Expand Up @@ -359,7 +361,6 @@ class ColorPicker {
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1);

this.colorPickerCanvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
}

Expand Down
40 changes: 24 additions & 16 deletions lib/shared/Configurator.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,9 @@ class Configurator {
this.options.filter = options.join();
}
else if (typeof options === 'object') {
if (options == null) {
throw new TypeError('options cannot be null');
}
if (options.container !== undefined) {
this.options.container = options.container;
}
Expand Down Expand Up @@ -150,22 +153,7 @@ class Configurator {
counter++;
}
}

if (this.options.showButton === true) {
let generateButton = document.createElement('div');
generateButton.className = 'vis-configuration vis-config-button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = () => {this._printOptions();};
generateButton.onmouseover = () => {generateButton.className = 'vis-configuration vis-config-button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-configuration vis-config-button';};

this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-configuration vis-config-option-container';

this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
}

this._makeButton();
this._push();
//~ this.colorPicker.insertTo(this.container);
}
Expand Down Expand Up @@ -383,7 +371,27 @@ class Configurator {
this.popupHistory[itemIndex] = popupValue;
this._setupPopup(popupString, itemIndex);
}
}

/**
* make a button object
* @private
*/
_makeButton() {
if (this.options.showButton === true) {
let generateButton = document.createElement('div');
generateButton.className = 'vis-configuration vis-config-button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = () => {this._printOptions();};
generateButton.onmouseover = () => {generateButton.className = 'vis-configuration vis-config-button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-configuration vis-config-button';};

this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-configuration vis-config-option-container';

this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
}
}


Expand Down
41 changes: 2 additions & 39 deletions lib/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,6 @@ exports.recursiveDOMDelete = function (DOMobject) {
}
};

/**
* this function gives you a range between 0 and 1 based on the min and max values in the set, the total sum of all values and the current value.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RIP, you useless code!

*
* @param {number} min
* @param {number} max
* @param {number} total
* @param {number} value
* @returns {number}
*/
exports.giveRange = function (min, max, total, value) {
if (max == min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0, (value - min) * scale);
}
};

/**
* Test whether given object is a string
* @param {*} object
Expand Down Expand Up @@ -82,29 +63,13 @@ exports.isDate = function (object) {
};

/**
* Create a semi UUID
* source: http://stackoverflow.com/a/105074/1262753
* Create a UUID
* @return {string} uuid
*/
exports.randomUUID = function () {
return uuid.v4();
};

/**
* assign all keys of an object that are not nested objects to a certain value (used for color objects).
* @param {object} obj
* @param {number} value
*/
exports.assignAllKeys = function (obj, value) {
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof obj[prop] !== 'object') {
obj[prop] = value;
}
}
}
};


/**
* Copy property from b to a if property present in a.
Expand Down Expand Up @@ -1272,7 +1237,7 @@ exports.insertSort = function (a,compare) {
a[j] = k;
}
return a;
}
};


/**
Expand Down Expand Up @@ -1592,8 +1557,6 @@ exports.topMost = function (pile, accessors) {
for (let i = 1; i < accessors.length; i++){
if (candidate) {
candidate = candidate[accessors[i]]
} else {
continue;
}
}
if (typeof candidate != 'undefined') {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
"mocha-jsdom": "^1.1.0",
"nyc": "^11.2.1",
"rimraf": "^2.6.1",
"sinon": "^4.0.1",
"test-console": "^1.0.0",
"uglify-js": "^2.8.29",
"uuid": "^3.1.0",
Expand Down
92 changes: 92 additions & 0 deletions test/Activator.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
var assert = require('assert');
var sinon = require('sinon');
var jsdom_global = require('jsdom-global');

var canvasMockify = require('./canvas-mock');
var Activator = require('../lib/shared/Activator');


describe('Activator', function () {
beforeEach(function() {
this.jsdom_global = jsdom_global(
"<div id='mynetwork'></div>",
{ skipWindowCheck: true}
);
canvasMockify(window);
this.container = document.getElementById('mynetwork');
});

afterEach(function() {
this.jsdom_global();
this.container.remove();
this.container = undefined;
});

describe('constructor', function () {

it('sets defaults', function () {
var activator = new Activator(this.container);
assert.equal(activator.active, false);
});

it('creates overlay', function () {
var activator = new Activator(this.container);
assert.equal(activator.dom.container.children[0].className, 'vis-overlay');
});
});

describe('activate', function () {
it('emits an `activate` event', function () {
var eventSpy = sinon.spy();
var activator = new Activator(this.container);
activator.on('activate', eventSpy);
activator.activate();
assert.equal(activator.active, true);
assert(eventSpy.called, 'Event did not fire.');
assert(eventSpy.calledOnce, 'Event fired more than once');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I sort of half understand what sinon does, so please humor me: what is this assertion good for?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case sinon provides a spy, which acts as a sort of accumulator of meta data, about how it was used.
Similar to a mock, except that I'm able to verify whether or not it was called, how many times, and what arguments it was called with.
This test ensures that if code changes were introduced that prevented the callback from being triggered, or caused it to be triggered multiple times, the test would fail.

});

it('emits a `change` event', function () {
var eventSpy = sinon.spy();
var activator = new Activator(this.container);
activator.on('change', eventSpy);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't help noticing in the code that changed is fired every single time that activate() or deactivate() is called.

What about consecutive same calls, e.g. activate(); activate();? I would expect change not to fire because the state has not changed.

If this is not documented, I would consider this faultly. Please give it some thought.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what to do about this, but would also consider it outside the scope of this particular issue.

I agree with you, but don't know the impact of making corrective changes.

Would you like me to open an issue to investigate?

activator.activate();
assert.equal(activator.active, true);
assert(eventSpy.called, 'Event did not fire.');
assert(eventSpy.calledOnce, 'Event fired more than once');
});
});

describe('deactivate', function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Describe-block is practically identical to the active block. Any chance of DRY-ing?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think drying it would muddy the test state, or make the tests more complex.

it('emits a `deactivate` event', function () {
var eventSpy = sinon.spy();
var activator = new Activator(this.container);
activator.on('deactivate', eventSpy);
activator.deactivate();
assert.equal(activator.active, false);
assert(eventSpy.called, 'Event did not fire.');
assert(eventSpy.calledOnce, 'Event fired more than once');
});

it('emits a `change` event', function () {
var eventSpy = sinon.spy();
var activator = new Activator(this.container);
activator.on('change', eventSpy);
activator.deactivate();
assert.equal(activator.active, false);
assert(eventSpy.called, 'Event did not fire.');
assert(eventSpy.calledOnce, 'Event fired more than once');
});
});

describe('destroy', function () {

it('sets inactive, removes keycharm, and removes hammer', function () {
var activator = new Activator(this.container);
activator.destroy();
assert.equal(activator.active, false);
assert.equal(activator.keycharm, null);
assert.equal(activator.hammer, null);
});
});
});
Loading