github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/tests/unit/components/line-chart-test.js (about) 1 import { module, test } from 'qunit'; 2 import { setupTest } from 'ember-qunit'; 3 import d3Format from 'd3-format'; 4 5 module('Unit | Component | line-chart', function(hooks) { 6 setupTest(hooks); 7 8 const data = [ 9 { foo: 1, bar: 100 }, 10 { foo: 2, bar: 200 }, 11 { foo: 3, bar: 300 }, 12 { foo: 8, bar: 400 }, 13 { foo: 4, bar: 500 }, 14 ]; 15 16 test('x scale domain is the min and max values in data based on the xProp value', function(assert) { 17 const chart = this.owner.factoryFor('component:line-chart').create(); 18 19 chart.setProperties({ 20 xProp: 'foo', 21 data, 22 }); 23 24 let [xDomainLow, xDomainHigh] = chart.get('xScale').domain(); 25 assert.equal( 26 xDomainLow, 27 Math.min(...data.mapBy('foo')), 28 'Domain lower bound is the lowest foo value' 29 ); 30 assert.equal( 31 xDomainHigh, 32 Math.max(...data.mapBy('foo')), 33 'Domain upper bound is the highest foo value' 34 ); 35 36 chart.set('data', [...data, { foo: 12, bar: 600 }]); 37 38 [, xDomainHigh] = chart.get('xScale').domain(); 39 assert.equal(xDomainHigh, 12, 'When the data changes, the xScale is recalculated'); 40 }); 41 42 test('y scale domain uses the max value in the data based off of yProp, but is always zero-based', function(assert) { 43 const chart = this.owner.factoryFor('component:line-chart').create(); 44 45 chart.setProperties({ 46 yProp: 'bar', 47 data, 48 }); 49 50 let [yDomainLow, yDomainHigh] = chart.get('yScale').domain(); 51 assert.equal(yDomainLow, 0, 'Domain lower bound is always 0'); 52 assert.equal( 53 yDomainHigh, 54 Math.max(...data.mapBy('bar')), 55 'Domain upper bound is the highest bar value' 56 ); 57 58 chart.set('data', [...data, { foo: 12, bar: 600 }]); 59 60 [, yDomainHigh] = chart.get('yScale').domain(); 61 assert.equal(yDomainHigh, 600, 'When the data changes, the yScale is recalculated'); 62 }); 63 64 test('the number of yTicks is always odd (to always have a mid-line) and is based off the chart height', function(assert) { 65 const chart = this.owner.factoryFor('component:line-chart').create(); 66 67 chart.setProperties({ 68 yProp: 'bar', 69 xAxisOffset: 100, 70 data, 71 }); 72 73 assert.equal(chart.get('yTicks').length, 3); 74 75 chart.set('xAxisOffset', 240); 76 assert.equal(chart.get('yTicks').length, 5); 77 78 chart.set('xAxisOffset', 241); 79 assert.equal(chart.get('yTicks').length, 7); 80 }); 81 82 test('the values for yTicks are rounded to whole numbers', function(assert) { 83 const chart = this.owner.factoryFor('component:line-chart').create(); 84 85 chart.setProperties({ 86 yProp: 'bar', 87 xAxisOffset: 100, 88 data, 89 }); 90 91 assert.deepEqual(chart.get('yTicks'), [0, 250, 500]); 92 93 chart.set('xAxisOffset', 240); 94 assert.deepEqual(chart.get('yTicks'), [0, 125, 250, 375, 500]); 95 96 chart.set('xAxisOffset', 241); 97 assert.deepEqual(chart.get('yTicks'), [0, 83, 167, 250, 333, 417, 500]); 98 }); 99 100 test('the values for yTicks are fractions when the domain is between 0 and 1', function(assert) { 101 const chart = this.owner.factoryFor('component:line-chart').create(); 102 103 chart.setProperties({ 104 yProp: 'bar', 105 xAxisOffset: 100, 106 data: [ 107 { foo: 1, bar: 0.1 }, 108 { foo: 2, bar: 0.2 }, 109 { foo: 3, bar: 0.3 }, 110 { foo: 8, bar: 0.4 }, 111 { foo: 4, bar: 0.5 }, 112 ], 113 }); 114 115 assert.deepEqual(chart.get('yTicks'), [0, 0.25, 0.5]); 116 }); 117 118 test('activeDatumLabel is the xProp value of the activeDatum formatted with xFormat', function(assert) { 119 const chart = this.owner.factoryFor('component:line-chart').create(); 120 121 chart.setProperties({ 122 xProp: 'foo', 123 yProp: 'bar', 124 data, 125 activeDatum: data[1], 126 }); 127 128 assert.equal( 129 chart.get('activeDatumLabel'), 130 d3Format.format(',')(data[1].foo), 131 'activeDatumLabel correctly formats the correct prop of the correct datum' 132 ); 133 }); 134 135 test('activeDatumValue is the yProp value of the activeDatum formatted with yFormat', function(assert) { 136 const chart = this.owner.factoryFor('component:line-chart').create(); 137 138 chart.setProperties({ 139 xProp: 'foo', 140 yProp: 'bar', 141 data, 142 activeDatum: data[1], 143 }); 144 145 assert.equal( 146 chart.get('activeDatumValue'), 147 d3Format.format(',.2~r')(data[1].bar), 148 'activeDatumValue correctly formats the correct prop of the correct datum' 149 ); 150 }); 151 });