github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/scale-events-chart-test.js (about)

     1  import { module, test } from 'qunit';
     2  import { setupRenderingTest } from 'ember-qunit';
     3  import { click, find, findAll, render } from '@ember/test-helpers';
     4  import hbs from 'htmlbars-inline-precompile';
     5  import moment from 'moment';
     6  import setupCodeMirror from 'nomad-ui/tests/helpers/codemirror';
     7  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     8  
     9  module('Integration | Component | scale-events-chart', function (hooks) {
    10    setupRenderingTest(hooks);
    11    setupCodeMirror(hooks);
    12  
    13    const events = [
    14      {
    15        time: new Date('2020-08-05T04:06:00'),
    16        count: 2,
    17        hasCount: true,
    18        meta: {},
    19        message: '',
    20        error: false,
    21      },
    22      {
    23        time: new Date('2020-08-06T04:06:00'),
    24        count: 3,
    25        hasCount: true,
    26        meta: {},
    27        message: '',
    28        error: false,
    29      },
    30      {
    31        time: new Date('2020-08-07T04:06:00'),
    32        count: 4,
    33        hasCount: true,
    34        meta: {},
    35        message: '',
    36        error: false,
    37      },
    38      {
    39        time: new Date('2020-08-06T04:06:00'),
    40        hasCount: false,
    41        meta: { prop: { deep: true }, five: 5 },
    42        message: 'Something went wrong',
    43        error: true,
    44      },
    45      {
    46        time: new Date('2020-08-05T04:06:00'),
    47        hasCount: false,
    48        meta: {},
    49        message: 'Something insightful',
    50        error: false,
    51      },
    52    ];
    53  
    54    test('each event is rendered as an annotation', async function (assert) {
    55      assert.expect(2);
    56  
    57      this.set('events', events);
    58      await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
    59  
    60      assert.equal(
    61        findAll('[data-test-annotation]').length,
    62        events.filter((ev) => ev.count == null).length
    63      );
    64      await componentA11yAudit(this.element, assert);
    65    });
    66  
    67    test('clicking an annotation presents details for the event', async function (assert) {
    68      assert.expect(6);
    69  
    70      const annotation = events.rejectBy('hasCount').sortBy('time').reverse()[0];
    71  
    72      this.set('events', events);
    73      await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
    74  
    75      assert.notOk(find('[data-test-event-details]'));
    76      await click('[data-test-annotation] button');
    77  
    78      assert.ok(find('[data-test-event-details]'));
    79      assert.equal(
    80        find('[data-test-timestamp]').textContent,
    81        moment(annotation.time).format('MMM DD HH:mm:ss ZZ')
    82      );
    83      assert.equal(find('[data-test-message]').textContent, annotation.message);
    84      assert.equal(
    85        getCodeMirrorInstance('[data-test-json-viewer]').getValue(),
    86        JSON.stringify(annotation.meta, null, 2)
    87      );
    88  
    89      await componentA11yAudit(this.element, assert);
    90    });
    91  
    92    test('clicking an active annotation closes event details', async function (assert) {
    93      this.set('events', events);
    94  
    95      await render(hbs`<ScaleEventsChart @events={{this.events}} />`);
    96      assert.notOk(find('[data-test-event-details]'));
    97  
    98      await click('[data-test-annotation] button');
    99      assert.ok(find('[data-test-event-details]'));
   100  
   101      await click('[data-test-annotation] button');
   102      assert.notOk(find('[data-test-event-details]'));
   103    });
   104  });