github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/unit/components/stats-time-series-test.js (about) 1 import { module, test } from 'qunit'; 2 import { setupTest } from 'ember-qunit'; 3 import moment from 'moment'; 4 import d3Format from 'd3-format'; 5 import d3TimeFormat from 'd3-time-format'; 6 import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory'; 7 8 module('Unit | Component | stats-time-series', function(hooks) { 9 setupTest(hooks); 10 setupGlimmerComponentFactory(hooks, 'stats-time-series'); 11 12 const ts = (offset, resolution = 'm') => 13 moment() 14 .subtract(offset, resolution) 15 .toDate(); 16 17 const wideData = [ 18 { timestamp: ts(20), percent: 0.5 }, 19 { timestamp: ts(18), percent: 0.5 }, 20 { timestamp: ts(16), percent: 0.4 }, 21 { timestamp: ts(14), percent: 0.3 }, 22 { timestamp: ts(12), percent: 0.9 }, 23 { timestamp: ts(10), percent: 0.3 }, 24 { timestamp: ts(8), percent: 0.3 }, 25 { timestamp: ts(6), percent: 0.4 }, 26 { timestamp: ts(4), percent: 0.5 }, 27 { timestamp: ts(2), percent: 0.6 }, 28 { timestamp: ts(0), percent: 0.6 }, 29 ]; 30 31 const narrowData = [ 32 { timestamp: ts(20, 's'), percent: 0.5 }, 33 { timestamp: ts(18, 's'), percent: 0.5 }, 34 { timestamp: ts(16, 's'), percent: 0.4 }, 35 { timestamp: ts(14, 's'), percent: 0.3 }, 36 { timestamp: ts(12, 's'), percent: 0.9 }, 37 { timestamp: ts(10, 's'), percent: 0.3 }, 38 ]; 39 40 const unboundedData = [ 41 { timestamp: ts(20, 's'), percent: -0.5 }, 42 { timestamp: ts(18, 's'), percent: 1.5 }, 43 ]; 44 45 const nullData = [ 46 { timestamp: ts(20, 's'), percent: null }, 47 { timestamp: ts(18, 's'), percent: null }, 48 ]; 49 50 test('xFormat is time-formatted for hours, minutes, and seconds', function(assert) { 51 const chart = this.createComponent({ data: wideData }); 52 53 wideData.forEach(datum => { 54 assert.equal( 55 chart.xFormat(datum.timestamp), 56 d3TimeFormat.timeFormat('%H:%M:%S')(datum.timestamp) 57 ); 58 }); 59 }); 60 61 test('yFormat is percent-formatted', function(assert) { 62 const chart = this.createComponent({ data: wideData }); 63 64 wideData.forEach(datum => { 65 assert.equal(chart.yFormat(datum.percent), d3Format.format('.1~%')(datum.percent)); 66 }); 67 }); 68 69 test('x scale domain is at least five minutes', function(assert) { 70 const chart = this.createComponent({ data: narrowData }); 71 72 assert.equal( 73 +chart.xScale(narrowData, 0).domain()[0], 74 +moment(Math.max(...narrowData.mapBy('timestamp'))) 75 .subtract(5, 'm') 76 .toDate(), 77 'The lower bound of the xScale is 5 minutes ago' 78 ); 79 }); 80 81 test('x scale domain is greater than five minutes when the domain of the data is larger than five minutes', function(assert) { 82 const chart = this.createComponent({ data: wideData }); 83 84 assert.equal( 85 +chart.xScale(wideData, 0).domain()[0], 86 Math.min(...wideData.mapBy('timestamp')), 87 'The lower bound of the xScale is the oldest timestamp in the dataset' 88 ); 89 }); 90 91 test('y scale domain is typically 0 to 1 (0 to 100%)', function(assert) { 92 const chart = this.createComponent({ data: wideData }); 93 94 assert.deepEqual( 95 [Math.min(...wideData.mapBy('percent')), Math.max(...wideData.mapBy('percent'))], 96 [0.3, 0.9], 97 'The bounds of the value prop of the dataset is narrower than 0 - 1' 98 ); 99 100 assert.deepEqual( 101 chart.yScale(wideData, 0).domain(), 102 [0, 1], 103 'The bounds of the yScale are still 0 and 1' 104 ); 105 }); 106 107 test('the extent of the y domain overrides the default 0 to 1 domain when there are values beyond these bounds', function(assert) { 108 const chart = this.createComponent({ data: unboundedData }); 109 110 assert.deepEqual( 111 chart.yScale(unboundedData, 0).domain(), 112 [-0.5, 1.5], 113 'The bounds of the yScale match the bounds of the unbounded data' 114 ); 115 116 chart.args.data = [unboundedData[0]]; 117 118 assert.deepEqual( 119 chart.yScale(chart.args.data, 0).domain(), 120 [-0.5, 1], 121 'The upper bound is still the default 1, but the lower bound is overridden due to the unbounded low value' 122 ); 123 124 chart.args.data = [unboundedData[1]]; 125 126 assert.deepEqual( 127 chart.yScale(chart.args.data, 0).domain(), 128 [0, 1.5], 129 'The lower bound is still the default 0, but the upper bound is overridden due to the unbounded high value' 130 ); 131 }); 132 133 test('when there are only empty frames in the data array, the default y domain is used', function(assert) { 134 const chart = this.createComponent({ data: nullData }); 135 136 assert.deepEqual(chart.yScale(nullData, 0).domain(), [0, 1], 'The bounds are 0 and 1'); 137 }); 138 });