import { module, test } from 'qunit'; import { setupTest } from 'ember-qunit'; import moment from 'moment'; import d3Format from 'd3-format'; import d3TimeFormat from 'd3-time-format'; module('Unit | Component | stats-time-series', function(hooks) { setupTest(hooks); const ts = (offset, resolution = 'm') => moment() .subtract(offset, resolution) .toDate(); const wideData = [ { timestamp: ts(20), percent: 0.5 }, { timestamp: ts(18), percent: 0.5 }, { timestamp: ts(16), percent: 0.4 }, { timestamp: ts(14), percent: 0.3 }, { timestamp: ts(12), percent: 0.9 }, { timestamp: ts(10), percent: 0.3 }, { timestamp: ts(8), percent: 0.3 }, { timestamp: ts(6), percent: 0.4 }, { timestamp: ts(4), percent: 0.5 }, { timestamp: ts(2), percent: 0.6 }, { timestamp: ts(0), percent: 0.6 }, ]; const narrowData = [ { timestamp: ts(20, 's'), percent: 0.5 }, { timestamp: ts(18, 's'), percent: 0.5 }, { timestamp: ts(16, 's'), percent: 0.4 }, { timestamp: ts(14, 's'), percent: 0.3 }, { timestamp: ts(12, 's'), percent: 0.9 }, { timestamp: ts(10, 's'), percent: 0.3 }, ]; const unboundedData = [ { timestamp: ts(20, 's'), percent: -0.5 }, { timestamp: ts(18, 's'), percent: 1.5 }, ]; const nullData = [ { timestamp: ts(20, 's'), percent: null }, { timestamp: ts(18, 's'), percent: null }, ]; test('xFormat is time-formatted for hours, minutes, and seconds', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', wideData); wideData.forEach(datum => { assert.equal( chart.xFormat()(datum.timestamp), d3TimeFormat.timeFormat('%H:%M:%S')(datum.timestamp) ); }); }); test('yFormat is percent-formatted', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', wideData); wideData.forEach(datum => { assert.equal(chart.yFormat()(datum.percent), d3Format.format('.1~%')(datum.percent)); }); }); test('x scale domain is at least five minutes', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', narrowData); assert.equal( +chart.get('xScale').domain()[0], +moment(Math.max(...narrowData.mapBy('timestamp'))) .subtract(5, 'm') .toDate(), 'The lower bound of the xScale is 5 minutes ago' ); }); test('x scale domain is greater than five minutes when the domain of the data is larger than five minutes', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', wideData); assert.equal( +chart.get('xScale').domain()[0], Math.min(...wideData.mapBy('timestamp')), 'The lower bound of the xScale is the oldest timestamp in the dataset' ); }); test('y scale domain is typically 0 to 1 (0 to 100%)', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', wideData); assert.deepEqual( [Math.min(...wideData.mapBy('percent')), Math.max(...wideData.mapBy('percent'))], [0.3, 0.9], 'The bounds of the value prop of the dataset is narrower than 0 - 1' ); assert.deepEqual( chart.get('yScale').domain(), [0, 1], 'The bounds of the yScale are still 0 and 1' ); }); test('the extent of the y domain overrides the default 0 to 1 domain when there are values beyond these bounds', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', unboundedData); assert.deepEqual( chart.get('yScale').domain(), [-0.5, 1.5], 'The bounds of the yScale match the bounds of the unbounded data' ); chart.set('data', [unboundedData[0]]); assert.deepEqual( chart.get('yScale').domain(), [-0.5, 1], 'The upper bound is still the default 1, but the lower bound is overridden due to the unbounded low value' ); chart.set('data', [unboundedData[1]]); assert.deepEqual( chart.get('yScale').domain(), [0, 1.5], 'The lower bound is still the default 0, but the upper bound is overridden due to the unbounded high value' ); }); test('when there are only empty frames in the data array, the default y domain is used', function(assert) { const chart = this.owner.factoryFor('component:stats-time-series').create(); chart.set('data', nullData); assert.deepEqual(chart.get('yScale').domain(), [0, 1], 'The bounds are 0 and 1'); }); });