github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/unit/components/stats-time-series-test.js (about)

     1  import { module, test } from 'qunit';
     2  import { setupTest } from 'ember-qunit';
     3  import moment from 'moment';
     4  import d3Format from 'd3-format';
     5  import d3TimeFormat from 'd3-time-format';
     6  import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory';
     7  
     8  module('Unit | Component | stats-time-series', function(hooks) {
     9    setupTest(hooks);
    10    setupGlimmerComponentFactory(hooks, 'stats-time-series');
    11  
    12    const ts = (offset, resolution = 'm') =>
    13      moment()
    14        .subtract(offset, resolution)
    15        .toDate();
    16  
    17    const wideData = [
    18      { timestamp: ts(20), percent: 0.5 },
    19      { timestamp: ts(18), percent: 0.5 },
    20      { timestamp: ts(16), percent: 0.4 },
    21      { timestamp: ts(14), percent: 0.3 },
    22      { timestamp: ts(12), percent: 0.9 },
    23      { timestamp: ts(10), percent: 0.3 },
    24      { timestamp: ts(8), percent: 0.3 },
    25      { timestamp: ts(6), percent: 0.4 },
    26      { timestamp: ts(4), percent: 0.5 },
    27      { timestamp: ts(2), percent: 0.6 },
    28      { timestamp: ts(0), percent: 0.6 },
    29    ];
    30  
    31    const narrowData = [
    32      { timestamp: ts(20, 's'), percent: 0.5 },
    33      { timestamp: ts(18, 's'), percent: 0.5 },
    34      { timestamp: ts(16, 's'), percent: 0.4 },
    35      { timestamp: ts(14, 's'), percent: 0.3 },
    36      { timestamp: ts(12, 's'), percent: 0.9 },
    37      { timestamp: ts(10, 's'), percent: 0.3 },
    38    ];
    39  
    40    const unboundedData = [
    41      { timestamp: ts(20, 's'), percent: -0.5 },
    42      { timestamp: ts(18, 's'), percent: 1.5 },
    43    ];
    44  
    45    const nullData = [
    46      { timestamp: ts(20, 's'), percent: null },
    47      { timestamp: ts(18, 's'), percent: null },
    48    ];
    49  
    50    test('xFormat is time-formatted for hours, minutes, and seconds', function(assert) {
    51      const chart = this.createComponent({ data: wideData });
    52  
    53      wideData.forEach(datum => {
    54        assert.equal(
    55          chart.xFormat(datum.timestamp),
    56          d3TimeFormat.timeFormat('%H:%M:%S')(datum.timestamp)
    57        );
    58      });
    59    });
    60  
    61    test('yFormat is percent-formatted', function(assert) {
    62      const chart = this.createComponent({ data: wideData });
    63  
    64      wideData.forEach(datum => {
    65        assert.equal(chart.yFormat(datum.percent), d3Format.format('.1~%')(datum.percent));
    66      });
    67    });
    68  
    69    test('x scale domain is at least five minutes', function(assert) {
    70      const chart = this.createComponent({ data: narrowData });
    71  
    72      assert.equal(
    73        +chart.xScale(narrowData, 0).domain()[0],
    74        +moment(Math.max(...narrowData.mapBy('timestamp')))
    75          .subtract(5, 'm')
    76          .toDate(),
    77        'The lower bound of the xScale is 5 minutes ago'
    78      );
    79    });
    80  
    81    test('x scale domain is greater than five minutes when the domain of the data is larger than five minutes', function(assert) {
    82      const chart = this.createComponent({ data: wideData });
    83  
    84      assert.equal(
    85        +chart.xScale(wideData, 0).domain()[0],
    86        Math.min(...wideData.mapBy('timestamp')),
    87        'The lower bound of the xScale is the oldest timestamp in the dataset'
    88      );
    89    });
    90  
    91    test('y scale domain is typically 0 to 1 (0 to 100%)', function(assert) {
    92      const chart = this.createComponent({ data: wideData });
    93  
    94      assert.deepEqual(
    95        [Math.min(...wideData.mapBy('percent')), Math.max(...wideData.mapBy('percent'))],
    96        [0.3, 0.9],
    97        'The bounds of the value prop of the dataset is narrower than 0 - 1'
    98      );
    99  
   100      assert.deepEqual(
   101        chart.yScale(wideData, 0).domain(),
   102        [0, 1],
   103        'The bounds of the yScale are still 0 and 1'
   104      );
   105    });
   106  
   107    test('the extent of the y domain overrides the default 0 to 1 domain when there are values beyond these bounds', function(assert) {
   108      const chart = this.createComponent({ data: unboundedData });
   109  
   110      assert.deepEqual(
   111        chart.yScale(unboundedData, 0).domain(),
   112        [-0.5, 1.5],
   113        'The bounds of the yScale match the bounds of the unbounded data'
   114      );
   115  
   116      chart.args.data = [unboundedData[0]];
   117  
   118      assert.deepEqual(
   119        chart.yScale(chart.args.data, 0).domain(),
   120        [-0.5, 1],
   121        'The upper bound is still the default 1, but the lower bound is overridden due to the unbounded low value'
   122      );
   123  
   124      chart.args.data = [unboundedData[1]];
   125  
   126      assert.deepEqual(
   127        chart.yScale(chart.args.data, 0).domain(),
   128        [0, 1.5],
   129        'The lower bound is still the default 0, but the upper bound is overridden due to the unbounded high value'
   130      );
   131    });
   132  
   133    test('when there are only empty frames in the data array, the default y domain is used', function(assert) {
   134      const chart = this.createComponent({ data: nullData });
   135  
   136      assert.deepEqual(chart.yScale(nullData, 0).domain(), [0, 1], 'The bounds are 0 and 1');
   137    });
   138  });