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  });