github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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(
    40        xDomainHigh,
    41        12,
    42        'When the data changes, the xScale is recalculated'
    43      );
    44    });
    45  
    46    test('y scale domain uses the max value in the data based off of yProp, but is always zero-based', function (assert) {
    47      const chart = this.createComponent({
    48        yProp: 'bar',
    49        data,
    50      });
    51  
    52      let [yDomainLow, yDomainHigh] = chart.yScale.domain();
    53      assert.equal(yDomainLow, 0, 'Domain lower bound is always 0');
    54      assert.equal(
    55        yDomainHigh,
    56        Math.max(...data.mapBy('bar')),
    57        'Domain upper bound is the highest bar value'
    58      );
    59  
    60      chart.args.data = [...data, { foo: 12, bar: 600 }];
    61  
    62      [, yDomainHigh] = chart.yScale.domain();
    63      assert.equal(
    64        yDomainHigh,
    65        600,
    66        'When the data changes, the yScale is recalculated'
    67      );
    68    });
    69  
    70    test('the number of yTicks is always odd (to always have a mid-line) and is based off the chart height', function (assert) {
    71      const chart = this.createComponent({
    72        yProp: 'bar',
    73        data,
    74      });
    75  
    76      chart.height = 100;
    77      assert.equal(chart.yTicks.length, 3);
    78  
    79      chart.height = 240;
    80      assert.equal(chart.yTicks.length, 5);
    81  
    82      chart.height = 242;
    83      assert.equal(chart.yTicks.length, 7);
    84    });
    85  
    86    test('the values for yTicks are rounded to whole numbers', function (assert) {
    87      const chart = this.createComponent({
    88        yProp: 'bar',
    89        data,
    90      });
    91  
    92      chart.height = 100;
    93      assert.deepEqual(chart.yTicks, [0, 250, 500]);
    94  
    95      chart.height = 240;
    96      assert.deepEqual(chart.yTicks, [0, 125, 250, 375, 500]);
    97  
    98      chart.height = 242;
    99      assert.deepEqual(chart.yTicks, [0, 83, 167, 250, 333, 417, 500]);
   100    });
   101  
   102    test('the values for yTicks are fractions when the domain is between 0 and 1', function (assert) {
   103      const chart = this.createComponent({
   104        yProp: 'bar',
   105        data: [
   106          { foo: 1, bar: 0.1 },
   107          { foo: 2, bar: 0.2 },
   108          { foo: 3, bar: 0.3 },
   109          { foo: 8, bar: 0.4 },
   110          { foo: 4, bar: 0.5 },
   111        ],
   112      });
   113  
   114      chart.height = 100;
   115      assert.deepEqual(chart.yTicks, [0, 0.25, 0.5]);
   116    });
   117  
   118    test('activeDatumLabel is the xProp value of the activeDatum formatted with xFormat', function (assert) {
   119      const chart = this.createComponent({
   120        xProp: 'foo',
   121        yProp: 'bar',
   122        data,
   123      });
   124  
   125      chart.activeDatum = data[1];
   126  
   127      assert.equal(
   128        chart.activeDatumLabel,
   129        d3Format.format(',')(data[1].foo),
   130        'activeDatumLabel correctly formats the correct prop of the correct datum'
   131      );
   132    });
   133  
   134    test('activeDatumValue is the yProp value of the activeDatum formatted with yFormat', function (assert) {
   135      const chart = this.createComponent({
   136        xProp: 'foo',
   137        yProp: 'bar',
   138        data,
   139      });
   140  
   141      chart.activeDatum = data[1];
   142  
   143      assert.equal(
   144        chart.activeDatumValue,
   145        d3Format.format(',.2~r')(data[1].bar),
   146        'activeDatumValue correctly formats the correct prop of the correct datum'
   147      );
   148    });
   149  });