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