diff options
Diffstat (limited to 'priv/static/metrics-graphics-3.0-alpha3/tests/common')
9 files changed, 1196 insertions, 0 deletions
diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/.gitkeep b/priv/static/metrics-graphics-3.0-alpha3/tests/common/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/.gitkeep diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/chart_title_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/chart_title_test.js new file mode 100644 index 0000000..6d71dff --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/chart_title_test.js @@ -0,0 +1,93 @@ +module('chart_title'); + +test('Chart title is updated', function() { + var params = { + title: 'foo', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + var params2 = MG.clone(params); + params2.title = 'bar'; + + MG.data_graphic(params); + MG.data_graphic(params2); + + equal(document.querySelector('.mg-chart-title').textContent, 'bar', 'Chart title is foo'); +}); + +test('Chart title is removed if title is set to blank', function() { + var params = { + title: 'foo', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + var params2 = MG.clone(params); + params2.title = ''; + + MG.data_graphic(params); + MG.data_graphic(params2); + equal(document.querySelector('.mg-chart-title'), null, 'Chart title is not added'); +}); + +test('Chart title is removed if title is not set', function() { + var params = { + title: 'foo', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + var params2 = MG.clone(params); + delete params2.title; + + MG.data_graphic(params); + MG.data_graphic(params2); + equal(document.querySelector('.mg-chart-title'), null, 'Chart title is not added'); +}); + +test('When a description is set, we get a question mark', function() { + var params = { + title: 'foo', + description: 'bar', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + show_tooltips: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-chart-description'), 'Description icon exists'); +}); + +test('When an error is set, we get an exclamation icon', function() { + var params = { + title: 'foo', + description: 'bar', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + error: 'lorem ipsum' + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-chart-title .mg-warning'), 'Error icon exists'); +}); + +test('Chart title is not duplicated on redraw', function() { + var params = { + title: 'foo', + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + var params2 = MG.clone(params); + MG.data_graphic(params); + MG.data_graphic(params2); + + equal(document.querySelectorAll('.mg-chart-title').length, 1, 'there is once chart title'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/data_graphic_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/data_graphic_test.js new file mode 100644 index 0000000..8051483 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/data_graphic_test.js @@ -0,0 +1,59 @@ +module('data_graphic'); + +test('Required arguments are set', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}] + }; + + MG.data_graphic(params); + + ok(params.width, 'args.width is set'); + ok(params.height, 'args.height is set'); + ok(params.data, 'args.data is set'); + ok(params.target, 'args.target is set'); +}); + +test('Dom element works as target', function() { + var params = { + target: document.getElementById('qunit-fixture'), + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}] + }; + + MG.data_graphic(params); + + ok(document.querySelector('#qunit-fixture svg') != null, 'passing in dom element works properly'); +}); + +// Can be removed in 2.x +test('Correctly aliases callbacks when using 1.x-style method names', function() { + var mouseoverCalled = false, + mouseoutCalled = false, + + params = { + target: '#qunit-fixture', + data: [{value: 1, label: 'One'}], + chart_type: 'bar', + rollover_callback: function() { + mouseoverCalled = true; + }, + rollout_callback: function() { + mouseoutCalled = true; + } + }; + + MG.data_graphic(params); + + var bar = document.getElementsByClassName('mg-bar-rollover')[0]; + + bar.dispatchEvent(generateMouseEvent('mouseover')); + equal(mouseoverCalled, true, 'rollover_callback was called'); + + bar.dispatchEvent(generateMouseEvent('mouseout')); + equal(mouseoutCalled, true, 'rollout_callback was called'); + + ok(MG.deprecations.rollover_callback.warned, 'rollover_callback deprecation notice displayed'); + ok(MG.deprecations.rollout_callback.warned, 'rollout_callback deprecation notice displayed'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/hooks_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/hooks_test.js new file mode 100644 index 0000000..1ba30d3 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/hooks_test.js @@ -0,0 +1,159 @@ +module('hooks', { + setup: function() { + delete MG._hooks.test; + } +}); + +test('multiple hooks with the same name execute in order', function() { + var result = ''; + + function hookOne() { + result = result + 'one'; + } + + function hookTwo() { + result = result + 'two'; + } + + MG.add_hook('test', hookOne); + MG.add_hook('test', hookTwo); + + MG.call_hook('test'); + + equal(result, 'onetwo', 'both hooks are called'); +}); + +test('hooks can have context', function() { + var result = {}; + + function contextedHook() { + this.foo = 'bar'; + } + + MG.add_hook('test', contextedHook, result); + + MG.call_hook('test'); + + equal(result.foo, 'bar', 'exectued in the correct context'); +}); + +test('hooks accept single arguments', function() { + var result; + + function singleArgHook(arg) { + result = arg; + equal(typeof arg, 'string', 'correctly passed as a string') + } + + MG.add_hook('test', singleArgHook, null); + + MG.call_hook('test', 'one'); + + equal(result, 'one', 'single argument is received'); +}); + + +test('hooks accept multiple arguments', function() { + var result; + + function multipleArgHook(arg1, arg2, arg3) { + result = [arg1, arg2, arg3].join(' '); + + ok([arg1, arg2, arg3].every(function(arg) { + return typeof arg === 'string'; + }), 'correctly passed as strings'); + } + + MG.add_hook('test', multipleArgHook); + + MG.call_hook('test', 'one', 'two', 'three'); + + equal(result, 'one two three', 'multiple arguments are passed correctly'); +}); + +test('hooks are chained - result from one passed into the next', function() { + var initial = 2, + result; + + function hookOne(arg) { + return arg * 2; + } + + function hookTwo(arg) { + return arg - 1; + } + + MG.add_hook('test', hookOne); + MG.add_hook('test', hookTwo); + + result = MG.call_hook('test', initial); + + equal(result, 3, 'result has been chained'); +}); + +test('hooks should return multiple inputs as an array', function() { + var result; + + function hookOne(arg1, arg2, arg3) { + return [arg1, arg2, arg3]; + } + + function hookTwo(arg1, arg2, arg3) { + return [arg3, arg2, arg1]; + } + + MG.add_hook('test', hookOne); + MG.add_hook('test', hookTwo); + + result = MG.call_hook('test', [1,2,3]); + + equal(result.join('-'), '3-2-1', 'array is passed in the result') +}); + +test('if the result from a chained hook is undefined', function() { + var initial = 2; + + function hookOne(arg) { + // don't return anything + } + + function hookTwo(arg) { + equal(arg, initial, 'initial value is used'); + } + + MG.add_hook('test', hookOne); + MG.add_hook('test', hookTwo); + result = MG.call_hook('test', initial); + + + delete MG._hooks.test; + + function hookThree(arg) { + return arg - 1; + } + + function hookFour(arg) { + // don't return anything + } + + function hookFive(arg) { + equal(initial, arg - 1, 'processed value is passed if it is already set'); + } + + MG.add_hook('test', hookOne); + MG.add_hook('test', hookTwo); + result = MG.call_hook('test', initial); +}); + +test('a hook can only have one registered instance of any function', function() { + function hookOne() {} + + MG.add_hook('test', hookOne); + + try { + MG.add_hook('test', hookOne); + } + catch(error) { + equal(error, 'That function is already registered.', 'an exception is raised'); + } +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/init_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/init_test.js new file mode 100644 index 0000000..b695d46 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/init_test.js @@ -0,0 +1,246 @@ +module('init'); + +test('MG properly detects time series vs. not.', function () { + var params1 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + x_accessor: 'date' + }; + + var params2 = { + target: '#qunit-fixture', + data: [{'date': 5434, 'value': 12}, + {'date': 5435, 'value': 18}], + x_accessor: 'date' + }; + + var params3 = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + [{'date': new Date('2014-11-01'), 'value': 32}, + {'date': new Date('2014-11-02'), 'value': 43}]], + x_accessor: 'date' + }; + mg_merge_args_with_defaults(params1); + mg_merge_args_with_defaults(params2); + mg_merge_args_with_defaults(params3); + mg_is_time_series(params1); + mg_is_time_series(params2); + mg_is_time_series(params3); + + ok(params1.time_series === true, 'Date-accessed data set is a time series.'); + ok(params2.time_series === false, 'Number-accessed data set is not a time series.'); + ok(params3.time_series === true, 'Nested data set w/ dates detected as time series.'); +}); + +test("Chart's width is set correctly on subsequent calls to existing chart", function () { + var params_0 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + }; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + width: 200, + height: 100, + }; + + MG.data_graphic(params_0); + MG.data_graphic(params); + + var width = document.querySelector(params.target + ' svg').clientWidth; + ok(width === 200, "SVG's width matches latest specified width"); +}); + +test("Chart's width is set to parents if full_width: true", function () { + var params = { + target: '#qunit-fixture', + full_width: true, + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + height: 100 + }; + MG.data_graphic(params); + + var svg_width = document.querySelector(params.target + ' svg').clientWidth; + var div_width = document.querySelector(params.target).clientWidth; + + equal(div_width, svg_width, "SVG's width matches parent upon using full_width: true"); +}); + +test("Chart's height is set to parents if full_height: true", function () { + var params = { + target: '#qunit-fixture', + full_height: true, + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + width: 500 + }; + + document.querySelector(params.target).style.height = '500px'; + MG.data_graphic(params); + + var svg_height = document.querySelector(params.target + ' svg').clientHeight; + var div_height = document.querySelector(params.target).clientHeight; + + equal(div_height, svg_height, "SVG's height matches parent upon using full_height: true"); +}); + +test("Won't add SVG element if an SVG element already exists in parent.", function () { + var args1 = { + target: '#qunit-fixture div#exists', + width: 500, + height: 200, + linked: false, + svg: 'FLAG' + }; + + var qunit = document.querySelector('#qunit-fixture'); + var div = document.createElement('div'); + div.id = 'exists'; + div.appendChild(document.createElement('svg')); + qunit.appendChild(div); + var first_number = document.querySelectorAll('svg').length; + mg_add_svg_if_it_doesnt_exist('', args1); + var second_number = document.querySelectorAll('svg').length; + equal(first_number, second_number, 'SVG element not added if it already exists.'); +}); + +test("Chart's height is set correctly on subsequent calls to existing chart", function () { + var params_0 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + }; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + width: 200, + height: 100, + }; + + MG.data_graphic(params_0); + MG.data_graphic(params); + + var height = document.querySelector(params.target + ' svg').clientHeight; + ok(height == params.height, "SVG's height matches latest specified height"); +}); + +test('Charts are plotted correctly when MG is called multiple times on the same target element', function () { + var params_0 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}] + }; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + width: 200, + height: 100, + }; + + MG.data_graphic(params_0); + MG.data_graphic(params); + + // ensure chart types change appropriately + var line = document.querySelector('.mg-main-line'); + ok(line, 'chart_type is `line`, line chart is plotted'); + + // check all the other chart types + var chart_types = [{id: 'point', domElement: '.mg-points'}, + {id: 'histogram', domElement: '.mg-histogram'}, + {id: 'bar', domElement: '.mg-barplot'}]; + + for (var i = 0; i < chart_types.length; i++) { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + chart_type: chart_types[i].id, + width: 200, + height: 100, + }; + + MG.data_graphic(params); + ok(document.querySelector(chart_types[i].domElement), + 'chart_type switched to `' + chart_types[i].id + '`, the correct chart type is plotted'); + + // ensure old chart was removed + equal(document.querySelectorAll('.mg-main-line').length, 0, 'line chart (old one) was removed'); + } +}); + +test('Missing chart has required class name set', function () { + expect(1); + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + chart_type: 'missing-data' + }; + + MG.data_graphic(params); + + var matches = document.querySelector(params.target + ' svg').getAttribute('class').match(/mg-missing/); + ok(matches, 'Missing chart has class `missing` set'); +}); + +test('Linked chart has the required class set', function () { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + linked: true + }; + + MG.data_graphic(params); + + var matches = document.querySelector(params.target + ' svg').getAttribute('class').match(/linked/); + ok(matches, 'Linked chart has class `linked` set'); +}); + +test('args.time_series is set to true when data is time-series', function () { + var params = { + target: '#qunit-fixture', + data: [{'foo': new Date('2014-11-01'), 'value': 12}, + {'foo': new Date('2014-11-02'), 'value': 18}], + x_accessor: 'foo' + }; + + MG.data_graphic(params); + ok(params.time_series, 'args.time_series is set to true when data is time-series'); +}); + +test('args.time_series is set to false when data is not time-series', function () { + var params = { + target: '#qunit-fixture', + data: [{'foo': 100, 'value': 12}, + {'foo': 200, 'value': 18}], + x_accessor: 'foo' + }; + + MG.data_graphic(params); + equal(params.time_series, false, 'args.time_series is set to false when data is not time-series'); +}); + +test('Only one clip path is added on multiple calls to the same target element', function () { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12, 'l': 10, 'u': 14}, + {'date': new Date('2014-03-01'), 'value': 18, 'l': 16, 'u': 20}] + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll('.mg-clip-path').length, 1, 'We only have one clip path'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/markers_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/markers_test.js new file mode 100644 index 0000000..aac7f5b --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/markers_test.js @@ -0,0 +1,160 @@ +module('markers'); + +test('All markers are added if they lie within the visible range', function() { + var markers = [{ + 'date': new Date('2014-02-01'), + 'label': '1st Milestone' + }, { + 'date': new Date('2014-02-02'), + 'label': '2nd Milestone' + }]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + markers: markers + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-markers line').length, markers.length, 'Two markers added'); +}); + +test('Markers that lie outside the visible range are excluded', function() { + var markers = [{ + 'date': new Date('2014-02-01'), + 'label': '1st Milestone' + }, { + 'date': new Date('2014-02-03'), + 'label': '2nd Milestone' + }]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-02-02'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + markers: markers + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-markers line').length, 1, 'One marker added'); +}); + +test('Markers that lie at the edge of the visible range are included', function() { + var markers = [{ + 'date': new Date('2014-02-01'), + 'label': '1st Milestone' + }, { + 'date': new Date('2014-03-01'), + 'label': '2nd Milestone' + }]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-02-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + markers: markers + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-markers line').length, markers.length, 'Two markers added'); +}); + +test('All baselines are added', function() { + var baselines = [{value:50, label:'a baseline'}]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 100}, + {'date': new Date('2014-03-01'), 'value': 10}], + baselines: baselines + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-baselines line').length, markers.length, 'One baseline added'); +}); + +test('Markers\' texts are correctly added', function() { + var markers = [{ + 'date': new Date('2014-02-01'), + 'label': '1st Milestone' + }, { + 'date': new Date('2014-02-02'), + 'label': '2nd Milestone' + }]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 100}, + {'date': new Date('2014-03-01'), 'value': 10}], + markers: markers + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-markers text')[0].textContent, markers[0].label, 'First marker\'s text matches specified one'); + equal(document.querySelectorAll(params.target + ' .mg-markers text')[1].textContent, markers[1].label, 'Second marker\'s text matches specified one'); +}); + +test('Baseline text is correctly added', function() { + var baselines = [{value:50, label:'a baseline'}]; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 100}, + {'date': new Date('2014-03-01'), 'value': 10}], + baselines: baselines + }; + + MG.data_graphic(params); + equal(document.querySelectorAll(params.target + ' .mg-baselines text')[0].textContent, baselines[0].label, 'Baseline text matches specified one'); +}); + +test('When an existing chart is updated with no markers, existing markers are cleared', function() { + var markers = [{ + 'date': new Date('2014-11-02'), + 'label': 'Lorem Ipsum' + }]; + + var params_0 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-03'), 'value': 18}], + markers: markers + }; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 14}, + {'date': new Date('2014-11-03'), 'value': 20}], + }; + + MG.data_graphic(params_0); + MG.data_graphic(params); + + equal(document.querySelectorAll('.mg-markers').length, 0, 'Old markers were cleared'); +}); + +test('When an existing chart is updated with no baselines, existing baselines are cleared', function() { + var baselines = [{ + 'value': 10, + 'label': 'Lorem Ipsum' + }]; + + var params_0 = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-03'), 'value': 18}], + baselines: baselines + }; + + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-11-01'), 'value': 14}, + {'date': new Date('2014-11-03'), 'value': 20}], + }; + + MG.data_graphic(params_0); + MG.data_graphic(params); + + equal(document.querySelectorAll('.mg-baselines').length, 0, 'Old baselines were cleared'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/resize_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/resize_test.js new file mode 100644 index 0000000..c2c380b --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/resize_test.js @@ -0,0 +1,44 @@ +module('resize'); + +test("Resize does not leak listeners", function () { + // Instrument window event listener methods + var realWindowAddEventListener = window.addEventListener; + var realWindowRemoveEventListener = window.removeEventListener; + var resizeListeners = []; + + window.addEventListener = function () { + if (arguments[0] === 'resize' && resizeListeners.indexOf(arguments[1]) === -1) { + resizeListeners.push(arguments[1]); + } + realWindowAddEventListener.apply(this, arguments); + } + + window.removeEventListener = function () { + if (arguments[0] === 'resize') { + var index = resizeListeners.indexOf(arguments[1]); + if (index !== -1) { + resizeListeners.splice(index, 1); + } + } + realWindowRemoveEventListener.apply(this, arguments); + } + + var params = { + target: '#qunit-fixture', + full_width: true, + data: [{'date': new Date('2014-11-01'), 'value': 12}, + {'date': new Date('2014-11-02'), 'value': 18}], + height: 100 + }; + MG.data_graphic(params); + var listenerCountAfterOne = resizeListeners.length; + const REPEAT_CREATE = 20; + for (var i = 0; i < REPEAT_CREATE; i++) { + MG.data_graphic(params); + } + equal(resizeListeners.length, listenerCountAfterOne, "Listener count constant after chart recreated " + REPEAT_CREATE + " times"); + + // Restore default methods + window.addEventListener = realWindowAddEventListener; + window.removeEventListener = realWindowRemoveEventListener; +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/x_axis_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/x_axis_test.js new file mode 100644 index 0000000..61e512c --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/x_axis_test.js @@ -0,0 +1,227 @@ +module('x_axis'); + +test('X-axis is added', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-x-axis'), 'X-axis is added'); +}); + +test('args.x_axis set to false', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_axis: false + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-x-axis'), null, 'X-axis is not added'); +}); + +test('Only one x-axis is added on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll(params.target + ' .mg-x-axis').length, 1, 'We only have one x-axis'); +}); + +test('args.show_secondary_x_label: true', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-year-marker'), 'Year marker exists'); +}); + +test('args.show_secondary_x_label: false', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + show_secondary_x_label: false + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-year-marker'), null, 'Year marker not added'); +}); + +test('args.x_label', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_label: 'foo bar' + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-x-axis .label'), 'X-axis label exists'); +}); + +test('args.labels (scatter plot)', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_label: 'foo bar', + y_label: 'bar foo', + chart_type: 'point' + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-x-axis .label'), 'X-axis label exists'); + ok(document.querySelector('.mg-y-axis .label'), 'Y-axis label exists'); +}); + +test('X-axis doesn\'t break when data object is of length 1', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-x-axis'), 'X-axis exists'); +}); + +test('args.x_rug', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_rug: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-x-rug'), 'X-axis rugplot exists'); +}); + +test('Only one rugplot is added on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_rug: true + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll('.mg-x-rug').length, 2, 'We only have one rugplot on the x-axis'); +}); + +test('args.x_extended_ticks', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + x_extended_ticks: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-extended-xax-ticks'), 'X-axis extended ticks exist'); +}); + +test('Correctly calculates min and max values for line, point and histogram charts', function() { + // single series + var params = { + target: '#qunit-fixture', + x_accessor: 'x', + y_accessor: 'y', + data: [ + [ + {x: 4, y: 5}, + {x: 5, y: 5}, + {x: 6, y: 5}, + {x: 7, y: 5} + ] + ] + }; + MG.data_graphic(params); + equal(params.processed.min_x, 4, 'min is correct for single series'); + equal(params.processed.max_x, 7, 'max is correct for single series'); + + // multiple series + var params2 = { + target: '#qunit-fixture', + x_accessor: 'x', + y_accessor: 'y', + data: [ + [ + {x: 1, y: 5}, + {x: 2, y: 5}, + {x: 3, y: 5}, + {x: 4, y: 5} + ], [ + {x: 5, y: 5}, + {x: 6, y: 5}, + {x: 7, y: 5} + ] + ] + }; + MG.data_graphic(params2); + equal(params2.processed.min_x, 1, 'min is correct for multiple series'); + equal(params2.processed.max_x, 7, 'max is correct for multiple series'); +}); + +/*test('Correctly calculates min and max values for bar chart', function() { + var args; + + // single series + args = { + x_accessor: 'x', + baseline_accessor: 'b', + predictor_accessor: 'p', + chart_type: 'bar', + target: '#qunit-fixture', + data: [ + [ + {x: 4, b: 3, p: 2}, + {x: 5, b: 2, p: 6}, + {x: 6, b: 1, p: 10}, + {x: 7, b: 0, p: 12} + ] + ] + }; + MG.data_graphic(args); + equal(args.processed.min_x, 0, 'min is correct'); + equal(args.processed.max_x, 12, 'max is correct'); +});*/ + +test('Ensure that custom xax_format isn\'t deleted', function() { + var params = { + title: 'foo', + target: '.result', + xax_format: function(d) { return 'humbug'; }, + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + equal(params.xax_format(), 'humbug', 'xax_format hasn\'t been overriden'); +}); + +test('Ensure that default null xax_format is respected; allow MG to recalculate the default on redraw', function() { + var params = { + title: 'foo', + target: '.result', + xax_format: null, + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + equal(params.xax_format, null, 'xax_format is still null'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/common/y_axis_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/common/y_axis_test.js new file mode 100644 index 0000000..7295b64 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/common/y_axis_test.js @@ -0,0 +1,208 @@ +module('y_axis'); + +test('Y-axis is added', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-y-axis'), 'Y-axis is added'); +}); + +test('args.y_axis set to false', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + y_axis: false + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-y-axis'), null, 'Y-axis is not added'); +}); + +test('Only one y-axis is added on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll(params.target + ' .mg-y-axis').length, 1, 'We only have one y-axis'); +}); + +test('Only one mg-category-guides group is added on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + data: [{"year": "1945","sightings": 6},{"year": "1946","sightings": 8}], + chart_type: 'point', + y_accessor: "year", + x_accessor: "sightings", + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll(params.target + ' .mg-category-guides').length, 1, 'We only have one mg-category-guides'); +}); + +test('args.y_label', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + y_label: 'foo bar' + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-y-axis .label'), 'Y-axis label exists'); +}); + +test('Y-axis doesn\'t break when data object is of length 1', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-y-axis'), 'Y-axis exists'); +}); + +// test('args.small_text', function() { +// var params = { +// target: '#qunit-fixture', +// data: [{'date': new Date('2014-01-01'), 'value': 12}], +// small_text: true, +// }; + +// MG.data_graphic(params); +// ok(document.querySelector('.mg-y-axis-small'), 'Small y-axis is set'); +// }); + +test('args.y_rug', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + y_rug: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-y-rug'), 'Y-axis rugplot exists'); +}); + +test('Only one rugplot is added on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + y_rug: true + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + equal(document.querySelectorAll('.mg-y-rug').length, 2, 'We only have one rugplot on the y-axis'); +}); + +test('Default min_y is 0', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}] + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-y-axis text')[0].textContent, 0, 'Y-axis starts at 0'); +}); + +test('args.min_y_from_data', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + min_y_from_data: true + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-y-axis text')[0].textContent, 12, 'Y-axis starts at 12'); +}); + +test('args.min_y set to arbitrary value', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + min_y: 5 + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-y-axis text')[0].textContent, 5, 'Y-axis starts at 5'); +}); + +test('args.y_extended_ticks', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + y_extended_ticks: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-extended-yax-ticks'), 'Y-axis extended ticks exist'); +}); + +test('args.format is set to percentage', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 0.12}, + {'date': new Date('2014-03-01'), 'value': 0.18}], + format: 'percentage' + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-y-axis text')[0].textContent.slice(-1), '%', 'Y-axis units are %'); +}); + +test('percentage args.format is correct', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 0.80}, + {'date': new Date('2014-03-01'), 'value': 1.20}], + format: 'percentage', + height: 400, + min_y_from_data: true + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-y-axis text')[2].textContent, '120%', 'Y-axis label formats correctly'); +}); + +test('args.yax_units', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 2.12}, + {'date': new Date('2014-03-01'), 'value': 4.18}], + yax_units: '$', + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-y-axis text').textContent[0], '$', 'Y-axis units are $'); +}); + +test('When args.max_y is set, ignore inflator', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + max_y: 60, + }; + + MG.data_graphic(params); + var nodes = document.querySelectorAll('.mg-y-axis text'); + equal(nodes[nodes.length - 1].textContent, 60, 'Maximum y-axis value is 60'); +}); |