github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/line-chart-test.js (about) 1 import { findAll, click, render } from '@ember/test-helpers'; 2 import { module, test } from 'qunit'; 3 import { setupRenderingTest } from 'ember-qunit'; 4 import hbs from 'htmlbars-inline-precompile'; 5 import sinon from 'sinon'; 6 import moment from 'moment'; 7 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 8 9 const REF_DATE = new Date(); 10 11 module('Integration | Component | line-chart', function(hooks) { 12 setupRenderingTest(hooks); 13 14 test('when a chart has annotations, they are rendered in order', async function(assert) { 15 const annotations = [ 16 { x: 2, type: 'info' }, 17 { x: 1, type: 'error' }, 18 { x: 3, type: 'info' }, 19 ]; 20 this.setProperties({ 21 annotations, 22 data: [ 23 { x: 1, y: 1 }, 24 { x: 10, y: 10 }, 25 ], 26 }); 27 28 await render(hbs` 29 <LineChart 30 @xProp="x" 31 @yProp="y" 32 @data={{this.data}}> 33 <:after as |c|> 34 <c.VAnnotations @annotations={{this.annotations}} /> 35 </:after> 36 </LineChart> 37 `); 38 39 const sortedAnnotations = annotations.sortBy('x'); 40 findAll('[data-test-annotation]').forEach((annotation, idx) => { 41 const datum = sortedAnnotations[idx]; 42 assert.equal( 43 annotation.querySelector('button').getAttribute('title'), 44 `${datum.type} event at ${datum.x}` 45 ); 46 }); 47 48 await componentA11yAudit(this.element, assert); 49 }); 50 51 test('when a chart has annotations and is timeseries, annotations are sorted reverse-chronologically', async function(assert) { 52 const annotations = [ 53 { 54 x: moment(REF_DATE) 55 .add(2, 'd') 56 .toDate(), 57 type: 'info', 58 }, 59 { 60 x: moment(REF_DATE) 61 .add(1, 'd') 62 .toDate(), 63 type: 'error', 64 }, 65 { 66 x: moment(REF_DATE) 67 .add(3, 'd') 68 .toDate(), 69 type: 'info', 70 }, 71 ]; 72 this.setProperties({ 73 annotations, 74 data: [ 75 { x: 1, y: 1 }, 76 { x: 10, y: 10 }, 77 ], 78 }); 79 80 await render(hbs` 81 <LineChart 82 @xProp="x" 83 @yProp="y" 84 @timeseries={{true}} 85 @data={{this.data}}> 86 <:after as |c|> 87 <c.VAnnotations @annotations={{this.annotations}} /> 88 </:after> 89 </LineChart> 90 `); 91 92 const sortedAnnotations = annotations.sortBy('x').reverse(); 93 findAll('[data-test-annotation]').forEach((annotation, idx) => { 94 const datum = sortedAnnotations[idx]; 95 assert.equal( 96 annotation.querySelector('button').getAttribute('title'), 97 `${datum.type} event at ${moment(datum.x).format('MMM DD, HH:mm')}` 98 ); 99 }); 100 }); 101 102 test('clicking annotations calls the onAnnotationClick action with the annotation as an argument', async function(assert) { 103 const annotations = [{ x: 2, type: 'info', meta: { data: 'here' } }]; 104 this.setProperties({ 105 annotations, 106 data: [ 107 { x: 1, y: 1 }, 108 { x: 10, y: 10 }, 109 ], 110 click: sinon.spy(), 111 }); 112 113 await render(hbs` 114 <LineChart 115 @xProp="x" 116 @yProp="y" 117 @data={{this.data}}> 118 <:after as |c|> 119 <c.VAnnotations @annotations={{this.annotations}} @annotationClick={{this.click}} /> 120 </:after> 121 </LineChart> 122 `); 123 124 await click('[data-test-annotation] button'); 125 assert.ok(this.click.calledWith(annotations[0])); 126 }); 127 128 test('annotations will have staggered heights when too close to be positioned side-by-side', async function(assert) { 129 const annotations = [ 130 { x: 2, type: 'info' }, 131 { x: 2.4, type: 'error' }, 132 { x: 9, type: 'info' }, 133 ]; 134 this.setProperties({ 135 annotations, 136 data: [ 137 { x: 1, y: 1 }, 138 { x: 10, y: 10 }, 139 ], 140 click: sinon.spy(), 141 }); 142 143 await render(hbs` 144 <div style="width:200px;"> 145 <LineChart 146 @xProp="x" 147 @yProp="y" 148 @data={{this.data}}> 149 <:after as |c|> 150 <c.VAnnotations @annotations={{this.annotations}} /> 151 </:after> 152 </LineChart> 153 </div> 154 `); 155 156 const annotationEls = findAll('[data-test-annotation]'); 157 assert.notOk(annotationEls[0].classList.contains('is-staggered')); 158 assert.ok(annotationEls[1].classList.contains('is-staggered')); 159 assert.notOk(annotationEls[2].classList.contains('is-staggered')); 160 161 await componentA11yAudit(this.element, assert); 162 }); 163 });