github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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 import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory'; 5 6 module('Unit | Component | line-chart', function(hooks) { 7 setupTest(hooks); 8 setupGlimmerComponentFactory(hooks, 'line-chart'); 9 10 const data = [ 11 { foo: 1, bar: 100 }, 12 { foo: 2, bar: 200 }, 13 { foo: 3, bar: 300 }, 14 { foo: 8, bar: 400 }, 15 { foo: 4, bar: 500 }, 16 ]; 17 18 test('x scale domain is the min and max values in data based on the xProp value', function(assert) { 19 const chart = this.createComponent({ 20 xProp: 'foo', 21 data, 22 }); 23 24 let [xDomainLow, xDomainHigh] = chart.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.args.data = [...data, { foo: 12, bar: 600 }]; 37 38 [, xDomainHigh] = chart.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.createComponent({ 44 yProp: 'bar', 45 data, 46 }); 47 48 let [yDomainLow, yDomainHigh] = chart.yScale.domain(); 49 assert.equal(yDomainLow, 0, 'Domain lower bound is always 0'); 50 assert.equal( 51 yDomainHigh, 52 Math.max(...data.mapBy('bar')), 53 'Domain upper bound is the highest bar value' 54 ); 55 56 chart.args.data = [...data, { foo: 12, bar: 600 }]; 57 58 [, yDomainHigh] = chart.yScale.domain(); 59 assert.equal(yDomainHigh, 600, 'When the data changes, the yScale is recalculated'); 60 }); 61 62 test('the number of yTicks is always odd (to always have a mid-line) and is based off the chart height', function(assert) { 63 const chart = this.createComponent({ 64 yProp: 'bar', 65 data, 66 }); 67 68 chart.height = 100; 69 assert.equal(chart.yTicks.length, 3); 70 71 chart.height = 240; 72 assert.equal(chart.yTicks.length, 5); 73 74 chart.height = 242; 75 assert.equal(chart.yTicks.length, 7); 76 }); 77 78 test('the values for yTicks are rounded to whole numbers', function(assert) { 79 const chart = this.createComponent({ 80 yProp: 'bar', 81 data, 82 }); 83 84 chart.height = 100; 85 assert.deepEqual(chart.yTicks, [0, 250, 500]); 86 87 chart.height = 240; 88 assert.deepEqual(chart.yTicks, [0, 125, 250, 375, 500]); 89 90 chart.height = 242; 91 assert.deepEqual(chart.yTicks, [0, 83, 167, 250, 333, 417, 500]); 92 }); 93 94 test('the values for yTicks are fractions when the domain is between 0 and 1', function(assert) { 95 const chart = this.createComponent({ 96 yProp: 'bar', 97 data: [ 98 { foo: 1, bar: 0.1 }, 99 { foo: 2, bar: 0.2 }, 100 { foo: 3, bar: 0.3 }, 101 { foo: 8, bar: 0.4 }, 102 { foo: 4, bar: 0.5 }, 103 ], 104 }); 105 106 chart.height = 100; 107 assert.deepEqual(chart.yTicks, [0, 0.25, 0.5]); 108 }); 109 110 test('activeDatumLabel is the xProp value of the activeDatum formatted with xFormat', function(assert) { 111 const chart = this.createComponent({ 112 xProp: 'foo', 113 yProp: 'bar', 114 data, 115 }); 116 117 chart.activeDatum = data[1]; 118 119 assert.equal( 120 chart.activeDatumLabel, 121 d3Format.format(',')(data[1].foo), 122 'activeDatumLabel correctly formats the correct prop of the correct datum' 123 ); 124 }); 125 126 test('activeDatumValue is the yProp value of the activeDatum formatted with yFormat', function(assert) { 127 const chart = this.createComponent({ 128 xProp: 'foo', 129 yProp: 'bar', 130 data, 131 }); 132 133 chart.activeDatum = data[1]; 134 135 assert.equal( 136 chart.activeDatumValue, 137 d3Format.format(',.2~r')(data[1].bar), 138 'activeDatumValue correctly formats the correct prop of the correct datum' 139 ); 140 }); 141 });