diff options
Diffstat (limited to 'priv/static/metrics-graphics-3.0-alpha3/tests')
18 files changed, 1995 insertions, 0 deletions
diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/charts/bar_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/bar_test.js new file mode 100644 index 0000000..db02b56 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/bar_test.js @@ -0,0 +1,95 @@ +var target = '#qunit-fixture', + defaults; + +module('bar', { + setup: function() { + defaults = { + target: target, + chart_type: 'bar', + x_accessor: 'value', + y_accessor: 'label', + transition_on_update: false, + data: [{ + label: 'Bar 1', + value: 100 + },{ + label: 'Bar 2', + value: 200 + },{ + label: 'Bar 3', + value: 300 + }] + }; + } +}); + +test('Correct number of bars are added', function() { + expect(1); + MG.data_graphic(defaults); + equal(document.querySelectorAll('.mg-bar').length, 3, 'Should have 3 bars'); +}); + +test('Triggers callbacks when provided', function() { + var mouseoverCalled = false, + mousemoveCalled = false, + mouseoutCalled = false, + + params = extend(defaults, { + mouseover: function() { + mouseoverCalled = true; + }, + mousemove: function() { + mousemoveCalled = true; + }, + mouseout: function() { + mouseoutCalled = true; + } + }); + + MG.data_graphic(params); + + var bar = document.getElementsByClassName('mg-bar-rollover')[0]; + + bar.dispatchEvent(generateMouseEvent('mouseover')); + equal(mouseoverCalled, true, 'mouseover was called'); + + bar.dispatchEvent(generateMouseEvent('mousemove')); + equal(mousemoveCalled, true, 'mousemove was called'); + + bar.dispatchEvent(generateMouseEvent('mouseout')); + equal(mouseoutCalled, true, 'mouseout was called'); +}); + +// test('When updating', function() { +// var bars = [{ +// label: 'Bar 1', +// value: 100, +// predictor: 75, +// baseline: 50 +// }]; + +// var params = extend(defaults, { +// data: bars, +// height: 100, +// width: 300, +// orientation: 'vertical', +// predictor_accessor: 'predictor', +// baseline_accessor: 'baseline', +// animate_on_load: false, +// transition_on_update: false +// }); + +// MG.data_graphic(params); +// equal(164, d3.select(target).select('.mg-barplot .mg-bar').attr('width'), 'initial bar size is correct'); +// equal(123, d3.select(target).select('.mg-barplot .mg-bar-prediction').attr('width'), 'initial predictor size is correct'); +// equal(160, d3.select(target).select('.mg-barplot .mg-bar-baseline').attr('x1'), 'initial baseline position is correct'); + +// params.data[0][0].value = 50; +// params.data[0][0].predictor = 100; +// params.data[0][0].baseline = 75; + +// MG.data_graphic(params); +// equal(82, d3.select(target).select('.mg-barplot .mg-bar').attr('width'), 'the bars are redrawn with correct sizes'); +// equal(164, d3.select(target).select('.mg-barplot .mg-bar-prediction').attr('width'), 'the predictors are redrawn with correct sizes'); +// equal(201, d3.select(target).select('.mg-barplot .mg-bar-baseline').attr('x1'), 'the baseline is redrawn in the correct position'); +// }); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/charts/histogram_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/histogram_test.js new file mode 100644 index 0000000..2e69e70 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/histogram_test.js @@ -0,0 +1,64 @@ +module('histogram'); + + +// THIS TEST NEEDS TO BE REWRITTEN AS A RESULT OF #614 +// test('A solitary active datapoint exists', function() { +// var params = { +// target: '#qunit-fixture', +// data: d3.range(10000).map(d3.random.bates(10)), +// chart_type: 'histogram', +// linked: true +// }; + +// MG.data_graphic(params); +// equal(document.querySelectorAll('.mg-active-datapoint').length, 1, 'One active datapoint exists'); +// }); + +test('Rollovers exist', function() { + var params = { + target: '#qunit-fixture', + data: d3.range(10000).map(d3.randomBates(10)), + chart_type: 'histogram', + linked: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-rollover-rect'), 'Rollovers exist'); +}); + +test('We have only one set of rollovers', function() { + var params = { + target: '#qunit-fixture', + data: d3.range(10000).map(d3.randomBates(10)), + chart_type: 'histogram', + linked: true + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-rollover-rect').length, 1, 'One set of rollovers exists'); +}); + +test('Linked chart has the required class set', function() { + var params = { + target: '#qunit-fixture', + data: d3.range(10000).map(d3.randomBates(10)), + chart_type: 'histogram', + 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('Histogram exists', function() { + var params = { + target: '#qunit-fixture', + data: d3.range(10000).map(d3.randomBates(10)), + chart_type: 'histogram', + linked: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-histogram'), 'Histogram exists'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/charts/line_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/line_test.js new file mode 100644 index 0000000..530f76b --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/line_test.js @@ -0,0 +1,289 @@ +module('line'); + +test('Confidence band is added', 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}], + show_confidence_band: ['l', 'u'] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-confidence-band'), 'Confidence band is added'); +}); + +test('Only one confidence 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}], + show_confidence_band: ['l', 'u'], + title: 'confidence added multiple calls' + }; + var params2 = MG.clone(params) + MG.data_graphic(params); + MG.data_graphic(params2); + equal(document.querySelectorAll(params.target + ' .mg-confidence-band').length, 1, 'We only have one confidence band'); +}); + +test('args.area set to 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-main-area'), 'Path set for area'); +}); + +test('args.area 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}], + area: false + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-main-area'), null, 'No path for area'); +}); + +// NEEDS TO BE REWRITTEN IN LIGHT OF #614 +// test('A solitary active datapoint exists', 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-active-datapoint').length, 1, 'One active datapoint exists'); +// }); + +test('A solitary rollover circle exists', 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-line-rollover-circle').length, 1, 'One rollover circle exists'); +}); + +test('Rollovers work for single lines', 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-rollover-rect'), 'Rollovers exist'); +}); + +test('Rollovers work for multiple lines', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]] + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-voronoi'), 'Rollovers exist'); +}); + +test('We have only one set of rollovers for single lines', 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-rollover-rect').length, 1, 'One set of rollovers exists'); +}); + +test('We have only one set of rollovers for multiple lines', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]] + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-voronoi').length, 1, 'One set of rollovers exists'); +}); + +test('We use the rect-style rollovers when `aggregate_rolloveres == true`', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]], + aggregate_rollover: true + }; + + MG.data_graphic(params); + + // ensure rollover returns aggregated result data + equal(document.querySelectorAll('.mg-voronoi').length, 0, 'Voronoi rollover is not generated'); + equal(document.querySelectorAll('.mg-rollover-rect').length, 1, 'Rect rollover is generated'); +}); + +test('There are as many lines as data series (one)', 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-main-line').length, 1, 'One line exists'); +}); + +test('There are as many lines as data series (two)', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]] + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-main-line').length, 2, 'Two lines exist'); +}); + +test('There are as many lines as data series (two) on multiple calls to an existing chart', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]] + }; + var params2 = MG.clone(params); + MG.data_graphic(params); + MG.data_graphic(params2); + + equal(document.querySelectorAll('.mg-main-line').length, 2, 'Two lines exist'); +}); + +test('No zombie lines when we update a chart with fewer lines', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]] + }; + + var params2 = { + 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(params2); + + equal(document.querySelectorAll('.mg-main-line').length, 1, 'One line exists'); +}); + +test('Rollover circle is visible on load if the dataset is of length 1', function() { + var data = [{"date": '2014-02-01', "value": 6}]; + var data = MG.convert.date(data, 'date'); + + MG.data_graphic({ + data: data, + target: "#qunit-fixture" + }); + + deepEqual(d3.select('.mg-line-rollover-circle').style('opacity'), "1", 'Rollover circle is visible'); +}); + +// NEEDS TO BE REWRITTEN IN LIGHT OF #614 +// test('Only one active data point container 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-active-datapoint-container').length, 1, 'We only have one active data point container'); +// }); + +test('No zombie lines when custom_line_color_map is set', function() { + var data = []; + data[0] = [{'date': new Date('2015-03-05'), 'value': 12000}]; + data[1] = [{'date': new Date('2015-03-06'), 'value': 35000}]; + data[2] = [{'date': new Date('2015-03-07'), 'value': 23000},{'date': new Date('2015-03-08'), 'value': 20000}]; + + MG.data_graphic({ + data: data, + target: '#qunit-fixture', + max_data_size: 5, + custom_line_color_map: [3,4,5] + }); + + MG.data_graphic({ + data: data, + target: '#qunit-fixture', + max_data_size: 5, + custom_line_color_map: [1,2,3] + }); + + equal(document.querySelectorAll('.mg-main-line.mg-line5-color').length, 0, 'Line 5 was removed on update'); +}); + +test('Only one line legend 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}], + legend: ['US', 'CA'], + line_legends: true + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll('.mg-line-legend').length, 1, 'We only have one mg-line-legend'); +}); + +test('Only one active data point container added on multiple calls to the same target element (lines)', 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('.mg-active-datapoint-container').length, 1, 'We only have one mg-active-datapoint-container with lines'); +}); + +test('When 1 data series is empty (out of 2) and missing_is_zero is true, remaining line is rendered', function() { + var data = []; + data[0] = []; + data[1] = [{'date': new Date('2015-03-07'), 'value': 23000},{'date': new Date('2015-03-08'), 'value': 20000}]; + + MG.data_graphic({ + target: '#qunit-fixture', + data: data, + missing_is_zero: true + }); + + equal(document.querySelectorAll('.mg-main-line').length, 1, 'Line for non-empty data series is still rendered'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/charts/missing_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/missing_test.js new file mode 100644 index 0000000..f50ee2a --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/missing_test.js @@ -0,0 +1,90 @@ +module('missing'); + +test('Missing chart\'s text matches specified missing_text', function() { + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + missing_text: 'In an astral plane that was never meant to fly...' + }; + + MG.data_graphic(params); + equal(document.querySelector('.mg-missing-text').textContent, + params.missing_text, + 'Missing chart\'s text matches missing_text'); +}); + +test('Only one mg-missing-pane on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + missing_text: 'In an astral plane that was never meant to fly...' + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll(params.target + ' .mg-missing-pane').length, 1, 'We only have one mg-missing-pane'); +}); + +test('Only one mg-missing-text on multiple calls to the same target element', function() { + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + missing_text: 'In an astral plane that was never meant to fly...' + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll(params.target + ' .mg-missing-text').length, 1, 'We only have one mg-missing-text'); +}); + +test('missing chart obeys full_width: true', function() { + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + full_width: true, + missing_text: 'In an astral plane that was never meant to fly...' + }; + document.querySelector('#qunit-fixture').style.width='700px'; + + MG.data_graphic(params); + + equal(document.querySelector('#qunit-fixture svg').getAttribute('width'), 700, 'The missing chart svg has same width as parent element.'); +}); + +test('missing chart obeys full_height: true', function() { + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + full_height: true, + missing_text: 'In an astral plane that was never meant to fly...' + }; + document.querySelector('#qunit-fixture').style.height='700px'; + + MG.data_graphic(params); + + equal(document.querySelector('#qunit-fixture svg').getAttribute('height'), 700, 'The missing chart svg has same width as parent element.'); +}); + +test('Missing chart\'s width is set correctly on subsequent calls to existing chart', function() { + var params_0 = { + target: '#qunit-fixture', + chart_type: 'missing-data', + missing_text: 'In an astral plane that was never meant to fly...' + }; + + var params = { + target: '#qunit-fixture', + chart_type: 'missing-data', + missing_text: 'In an astral plane that was never meant to fly...', + 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'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/charts/point_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/point_test.js new file mode 100644 index 0000000..e26fc58 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/charts/point_test.js @@ -0,0 +1,137 @@ +module('point'); +// this test doesn't work properly. +// test('A solitary active datapoint exists', function() { +// var params = { +// target: '#qunit-fixture', +// data: [{'date': new Date('2014-01-01'), 'value': 12}, +// {'date': new Date('2014-03-01'), 'value': 18}], +// chart_type: 'point' +// }; + +// MG.data_graphic(params); +// equal(document.querySelectorAll('.mg-active-datapoint').length, 1, 'One active datapoint exists'); +// }); + +test('Rollovers exist', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]], + chart_type: 'point' + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-voronoi'), 'Rollovers exist'); +}); + +test('We have only one set of rollovers', function() { + var params = { + target: '#qunit-fixture', + data: [[{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + [{'date': new Date('2014-01-01'), 'value': 120}, + {'date': new Date('2014-03-01'), 'value': 180}]], + chart_type: 'point' + }; + + MG.data_graphic(params); + equal(document.querySelectorAll('.mg-voronoi').length, 1, 'One set of rollovers 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, + chart_type: 'point' + }; + + 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, + chart_type: 'point' + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll('.mg-x-rug').length, 2, 'We only have one rugplot (two ticks) on the x-axis'); +}); + +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, + chart_type: 'point' + }; + + 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, + chart_type: 'point' + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + equal(document.querySelectorAll('.mg-y-rug').length, 2, 'We only have one rugplot (two ticks) on the y-axis'); +}); + +test('args.least_squares', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + chart_type: 'point', + least_squares: true + }; + + MG.data_graphic(params); + ok(document.querySelector('.mg-least-squares-line'), 'Least-squares line exists'); +}); + +test('Only one least-squares line 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}], + chart_type: 'point', + least_squares: true + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + equal(document.querySelectorAll('.mg-least-squares-line').length, 1, 'We only have one least-squares line'); +}); + +test('Only one active data point container added on multiple calls to the same target element (points)', function() { + var params = { + target: '#qunit-fixture', + data: [{'date': new Date('2014-01-01'), 'value': 12}, + {'date': new Date('2014-03-01'), 'value': 18}], + chart_type: 'point' + }; + + MG.data_graphic(params); + MG.data_graphic(MG.clone(params)); + + equal(document.querySelectorAll('.mg-active-datapoint-container').length, 1, 'We only have one mg-active-datapoint-container with points'); +}); 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'); +}); diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/helpers.js b/priv/static/metrics-graphics-3.0-alpha3/tests/helpers.js new file mode 100644 index 0000000..22d30ad --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/helpers.js @@ -0,0 +1,20 @@ +function generateMouseEvent(type) { + var event = document.createEvent('MouseEvent'); + event.initEvent(type, true, true); + return event; +} + +// essentially the same as $.extend +function extend(){ + var result = {}, + $__arguments = [].slice.call(arguments); + + $__arguments.forEach(function(obj) { + for (var prop in obj) { + if (obj.hasOwnProperty(prop)) { + result[prop] = obj[prop]; + } + } + }); + return result; +} diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/misc/.gitkeep b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/.gitkeep diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/misc/process_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/process_test.js new file mode 100644 index 0000000..4495b75 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/process_test.js @@ -0,0 +1,14 @@ +module('process'); + +test('args.missing_is_zero doesn\'t throw a "args.data[0][0] is undefined" error', function() { + var data = [{"date": new Date('2014-02-02'), "value": 6}]; + var params = { + data: data, + target: "#qunit-fixture", + missing_is_zero: true + }; + + MG.data_graphic(params); + + equal(params.data.length, 1, 'args.data is defined'); +});
\ No newline at end of file diff --git a/priv/static/metrics-graphics-3.0-alpha3/tests/misc/utility_test.js b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/utility_test.js new file mode 100644 index 0000000..7af4e00 --- /dev/null +++ b/priv/static/metrics-graphics-3.0-alpha3/tests/misc/utility_test.js @@ -0,0 +1,90 @@ +module('utility'); + +test('MG.convert.date', function() { + var data = [{'date': '2014-01-01', 'value': 12}, + {'date': '2014-03-01', 'value': 18}]; + + MG.convert.date(data, 'date'); + equal($.type(data[0].date), 'date', 'First date is of type date'); + equal($.type(data[0].date), 'date', 'Second date is of type date'); +}); + +test('MG.convert.date with an alternative timestamp style', function() { + var data = [{'date': '2014-20-12', 'value': 12}, + {'date': '2014-21-12', 'value': 18}]; + + MG.convert.date(data, 'date', '%Y-%d-%m'); + equal($.type(data[0].date), 'date', 'First date is of type date'); + equal($.type(data[0].date), 'date', 'Second date is of type date'); +}); + +test('MG.convert.number', function() { + var data = [{'date': '2014-20-12', 'value': '12'}, + {'date': '2014-21-12', 'value': '18'}]; + + MG.convert.number(data, 'value'); + equal($.type(data[0].value), 'number', 'First value is a number'); + equal($.type(data[0].value), 'number', 'Second value is a number'); +}); + +test('mg_get_svg_child_of', function(){ + d3.select('#qunit-fixture').append('svg'); + + var svg_element_with_node = mg_get_svg_child_of(document.querySelector('#qunit-fixture')); + var svg_element_with_text = mg_get_svg_child_of('#qunit-fixture'); + + equal(svg_element_with_node.nodes().length, 1, 'Node-based argument should return a d3 selection with svg.'); + equal(svg_element_with_node.nodes().length, 1, 'Selector-based argument should return a d3 selection with svg.'); +}); + + +test('mg_target_ref', function() { + var chart_area2 = document.createElement('div'); + mg_target_ref(chart_area2); + ok(chart_area2.getAttribute('data-mg-uid').match(/mg-[\d]/), 'applies generated ID to DOM element'); +}); + +test('Overlapping markers are taken care of', function() { + var params = { + data: [{ + "date": new Date('2016-01-01'), + "value": 6 + }, + { + "date": new Date('2016-01-02'), + "value": 8 + }, + { + "date": new Date('2016-01-03'), + "value": 34 + }, + { + "date": new Date('2016-01-04'), + "value": 38 + }], + markers: [{'date': new Date('2016-01-02'), 'label': 'A happened'},{'date': new Date('2016-01-02'), 'label': 'B happened'}], + target: "#qunit-fixture" + }; + + MG.data_graphic(params); + + equal(mg_is_horizontally_overlapping(d3.selectAll('.mg-marker-text').node(), d3.selectAll('.mg-marker-text').nodes()), false, 'Markers aren\'t overlapping'); +}); + +test('compare_type', function() { + [ + ['number', null, true], + ['number', 1, true], + ['number', 'str', false], + ['number[]', 1, false], + ['number[]', [1], true], + ['object[]', [{}, 1], false], + [['number', 'string'], 1, true], + [['number', 'string'], 'str', true], + [['number', 'string'], {}, false], + [['a', 'b'], 'a', true], + [['a', 'b'], 'c', false] + ].forEach(i => { + equal(compare_type(i[0], i[1]), i[2], i); + }); +}); |