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