github.com/hernad/nomad@v1.6.112/ui/tests/unit/components/line-chart-test.js (about)

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