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

     1  import { module, test } from 'qunit';
     2  import { setupRenderingTest } from 'ember-qunit';
     3  import { render, triggerEvent } from '@ember/test-helpers';
     4  import { hbs } from 'ember-cli-htmlbars';
     5  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     6  
     7  module('Integration | Component | das/recommendation-chart', function (hooks) {
     8    setupRenderingTest(hooks);
     9  
    10    test('it renders a chart for a recommended CPU increase', async function (assert) {
    11      assert.expect(5);
    12  
    13      this.set('resource', 'CPU');
    14      this.set('current', 1312);
    15      this.set('recommended', 1919);
    16      this.set('stats', {});
    17  
    18      await render(
    19        hbs`<Das::RecommendationChart
    20              @resource={{resource}}
    21              @currentValue={{current}}
    22              @recommendedValue={{recommended}}
    23              @stats={{stats}}
    24            />`
    25      );
    26  
    27      assert.dom('.recommendation-chart.increase').exists();
    28      assert.dom('.recommendation-chart .resource').hasText('CPU');
    29      assert.dom('.recommendation-chart .icon-is-arrow-up').exists();
    30      assert.dom('text.percent').hasText('+46%');
    31      await componentA11yAudit(this.element, assert);
    32    });
    33  
    34    test('it renders a chart for a recommended memory decrease', async function (assert) {
    35      assert.expect(5);
    36  
    37      this.set('resource', 'MemoryMB');
    38      this.set('current', 1919);
    39      this.set('recommended', 1312);
    40      this.set('stats', {});
    41  
    42      await render(
    43        hbs`<Das::RecommendationChart
    44              @resource={{resource}}
    45              @currentValue={{current}}
    46              @recommendedValue={{recommended}}
    47              @stats={{stats}}
    48            />`
    49      );
    50  
    51      assert.dom('.recommendation-chart.decrease').exists();
    52      assert.dom('.recommendation-chart .resource').hasText('Mem');
    53      assert.dom('.recommendation-chart .icon-is-arrow-down').exists();
    54      assert.dom('text.percent').hasText('−32%');
    55      await componentA11yAudit(this.element, assert);
    56    });
    57  
    58    test('it handles the maximum being far beyond the recommended', async function (assert) {
    59      this.set('resource', 'CPU');
    60      this.set('current', 1312);
    61      this.set('recommended', 1919);
    62      this.set('stats', {
    63        max: 3000,
    64      });
    65  
    66      await render(
    67        hbs`<Das::RecommendationChart
    68              @resource={{resource}}
    69              @currentValue={{current}}
    70              @recommendedValue={{recommended}}
    71              @stats={{stats}}
    72            />`
    73      );
    74  
    75      const chartSvg = this.element.querySelector('.recommendation-chart svg');
    76      const maxLine = chartSvg.querySelector('line.stat.max');
    77  
    78      assert.ok(maxLine.getAttribute('x1') < chartSvg.clientWidth);
    79    });
    80  
    81    test('it can be disabled and will show no delta', async function (assert) {
    82      assert.expect(6);
    83  
    84      this.set('resource', 'CPU');
    85      this.set('current', 1312);
    86      this.set('recommended', 1919);
    87      this.set('stats', {});
    88  
    89      await render(
    90        hbs`<Das::RecommendationChart
    91              @resource={{resource}}
    92              @currentValue={{current}}
    93              @recommendedValue={{recommended}}
    94              @stats={{stats}}
    95              @disabled={{true}}
    96            />`
    97      );
    98  
    99      assert.dom('.recommendation-chart.disabled');
   100      assert.dom('.recommendation-chart.increase').doesNotExist();
   101      assert.dom('.recommendation-chart rect.delta').doesNotExist();
   102      assert.dom('.recommendation-chart .changes').doesNotExist();
   103      assert.dom('.recommendation-chart .resource').hasText('CPU');
   104      assert.dom('.recommendation-chart .icon-is-arrow-up').exists();
   105      await componentA11yAudit(this.element, assert);
   106    });
   107  
   108    test('the stats labels shift aligment and disappear to account for space', async function (assert) {
   109      this.set('resource', 'CPU');
   110      this.set('current', 50);
   111      this.set('recommended', 100);
   112  
   113      this.set('stats', {
   114        mean: 5,
   115        p99: 99,
   116        max: 100,
   117      });
   118  
   119      await render(
   120        hbs`<Das::RecommendationChart
   121              @resource={{resource}}
   122              @currentValue={{current}}
   123              @recommendedValue={{recommended}}
   124              @stats={{stats}}
   125            />`
   126      );
   127  
   128      assert.dom('[data-test-label=max]').hasClass('right');
   129  
   130      this.set('stats', {
   131        mean: 5,
   132        p99: 6,
   133        max: 100,
   134      });
   135  
   136      assert.dom('[data-test-label=max]').hasNoClass('right');
   137      assert.dom('[data-test-label=p99]').hasClass('right');
   138  
   139      this.set('stats', {
   140        mean: 5,
   141        p99: 6,
   142        max: 7,
   143      });
   144  
   145      assert.dom('[data-test-label=max]').hasClass('right');
   146      assert.dom('[data-test-label=p99]').hasClass('hidden');
   147    });
   148  
   149    test('a legend tooltip shows the sorted stats values on hover', async function (assert) {
   150      this.set('resource', 'CPU');
   151      this.set('current', 50);
   152      this.set('recommended', 101);
   153  
   154      this.set('stats', {
   155        mean: 5,
   156        p99: 99,
   157        max: 100,
   158        min: 1,
   159        median: 55,
   160      });
   161  
   162      await render(
   163        hbs`<Das::RecommendationChart
   164              @resource={{resource}}
   165              @currentValue={{current}}
   166              @recommendedValue={{recommended}}
   167              @stats={{stats}}
   168            />`
   169      );
   170  
   171      assert.dom('.chart-tooltip').isNotVisible();
   172  
   173      await triggerEvent('.recommendation-chart', 'mousemove');
   174  
   175      assert.dom('.chart-tooltip').isVisible();
   176  
   177      assert.dom('.chart-tooltip li:nth-child(1)').hasText('Min 1');
   178      assert.dom('.chart-tooltip li:nth-child(2)').hasText('Mean 5');
   179      assert.dom('.chart-tooltip li:nth-child(3)').hasText('Current 50');
   180      assert.dom('.chart-tooltip li:nth-child(4)').hasText('Median 55');
   181      assert.dom('.chart-tooltip li:nth-child(5)').hasText('99th 99');
   182      assert.dom('.chart-tooltip li:nth-child(6)').hasText('Max 100');
   183      assert.dom('.chart-tooltip li:nth-child(7)').hasText('New 101');
   184  
   185      assert.dom('.chart-tooltip li.active').doesNotExist();
   186  
   187      await triggerEvent('.recommendation-chart text.changes.new', 'mouseenter');
   188      assert.dom('.chart-tooltip li:nth-child(7).active').exists();
   189  
   190      await triggerEvent('.recommendation-chart line.stat.max', 'mouseenter');
   191      assert.dom('.chart-tooltip li:nth-child(6).active').exists();
   192  
   193      await triggerEvent('.recommendation-chart rect.stat.p99', 'mouseenter');
   194      assert.dom('.chart-tooltip li:nth-child(5).active').exists();
   195  
   196      await triggerEvent('.recommendation-chart', 'mouseleave');
   197  
   198      assert.dom('.chart-tooltip').isNotVisible();
   199    });
   200  });