github.com/hernad/nomad@v1.6.112/ui/tests/integration/components/job-page/parts/summary-test.js (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  import hbs from 'htmlbars-inline-precompile';
     7  import { find, click, render } from '@ember/test-helpers';
     8  import { module, test } from 'qunit';
     9  import { setupRenderingTest } from 'ember-qunit';
    10  import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
    11  import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
    12  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
    13  
    14  module('Integration | Component | job-page/parts/summary', function (hooks) {
    15    setupRenderingTest(hooks);
    16  
    17    hooks.beforeEach(function () {
    18      fragmentSerializerInitializer(this.owner);
    19      window.localStorage.clear();
    20      this.store = this.owner.lookup('service:store');
    21      this.server = startMirage();
    22      this.server.create('namespace');
    23      this.server.create('node-pool');
    24    });
    25  
    26    hooks.afterEach(function () {
    27      this.server.shutdown();
    28      window.localStorage.clear();
    29    });
    30  
    31    test('jobs with children use the children diagram', async function (assert) {
    32      assert.expect(3);
    33  
    34      this.server.create('job', 'periodic', {
    35        createAllocations: false,
    36      });
    37  
    38      await this.store.findAll('job');
    39  
    40      this.set('job', this.store.peekAll('job').get('firstObject'));
    41  
    42      await render(hbs`
    43        <JobPage::Parts::Summary @job={{job}} />
    44      `);
    45  
    46      assert.ok(
    47        find('[data-test-children-status-bar]'),
    48        'Children status bar found'
    49      );
    50      assert.notOk(
    51        find('[data-test-allocation-status-bar]'),
    52        'Allocation status bar not found'
    53      );
    54  
    55      await componentA11yAudit(this.element, assert);
    56    });
    57  
    58    test('jobs without children use the allocations diagram', async function (assert) {
    59      assert.expect(3);
    60  
    61      this.server.create('job', {
    62        createAllocations: false,
    63      });
    64  
    65      await this.store.findAll('job');
    66  
    67      this.set('job', this.store.peekAll('job').get('firstObject'));
    68  
    69      await render(hbs`
    70        <JobPage::Parts::Summary @job={{job}} />
    71      `);
    72  
    73      assert.ok(
    74        find('[data-test-allocation-status-bar]'),
    75        'Allocation status bar found'
    76      );
    77      assert.notOk(
    78        find('[data-test-children-status-bar]'),
    79        'Children status bar not found'
    80      );
    81  
    82      await componentA11yAudit(this.element, assert);
    83    });
    84  
    85    test('the allocations diagram lists all allocation status figures', async function (assert) {
    86      this.server.create('job', {
    87        createAllocations: false,
    88      });
    89  
    90      await this.store.findAll('job');
    91  
    92      this.set('job', this.store.peekAll('job').get('firstObject'));
    93  
    94      await render(hbs`
    95        <JobPage::Parts::Summary @job={{job}} />
    96      `);
    97  
    98      assert.equal(
    99        find('[data-test-legend-value="queued"]').textContent,
   100        this.get('job.queuedAllocs'),
   101        `${this.get('job.queuedAllocs')} are queued`
   102      );
   103  
   104      assert.equal(
   105        find('[data-test-legend-value="starting"]').textContent,
   106        this.get('job.startingAllocs'),
   107        `${this.get('job.startingAllocs')} are starting`
   108      );
   109  
   110      assert.equal(
   111        find('[data-test-legend-value="running"]').textContent,
   112        this.get('job.runningAllocs'),
   113        `${this.get('job.runningAllocs')} are running`
   114      );
   115  
   116      assert.equal(
   117        find('[data-test-legend-value="complete"]').textContent,
   118        this.get('job.completeAllocs'),
   119        `${this.get('job.completeAllocs')} are complete`
   120      );
   121  
   122      assert.equal(
   123        find('[data-test-legend-value="failed"]').textContent,
   124        this.get('job.failedAllocs'),
   125        `${this.get('job.failedAllocs')} are failed`
   126      );
   127  
   128      assert.equal(
   129        find('[data-test-legend-value="lost"]').textContent,
   130        this.get('job.lostAllocs'),
   131        `${this.get('job.lostAllocs')} are lost`
   132      );
   133    });
   134  
   135    test('the children diagram lists all children status figures', async function (assert) {
   136      this.server.create('job', 'periodic', {
   137        createAllocations: false,
   138      });
   139  
   140      await this.store.findAll('job');
   141  
   142      this.set('job', this.store.peekAll('job').get('firstObject'));
   143  
   144      await render(hbs`
   145        <JobPage::Parts::Summary @job={{job}} />
   146      `);
   147  
   148      assert.equal(
   149        find('[data-test-legend-value="queued"]').textContent,
   150        this.get('job.pendingChildren'),
   151        `${this.get('job.pendingChildren')} are pending`
   152      );
   153  
   154      assert.equal(
   155        find('[data-test-legend-value="running"]').textContent,
   156        this.get('job.runningChildren'),
   157        `${this.get('job.runningChildren')} are running`
   158      );
   159  
   160      assert.equal(
   161        find('[data-test-legend-value="complete"]').textContent,
   162        this.get('job.deadChildren'),
   163        `${this.get('job.deadChildren')} are dead`
   164      );
   165    });
   166  
   167    test('the summary block can be collapsed', async function (assert) {
   168      this.server.create('job', {
   169        createAllocations: false,
   170      });
   171  
   172      await this.store.findAll('job');
   173  
   174      this.set('job', this.store.peekAll('job').get('firstObject'));
   175  
   176      await render(hbs`
   177        <JobPage::Parts::Summary @job={{job}} />
   178      `);
   179  
   180      await click('[data-test-accordion-toggle]');
   181  
   182      assert.notOk(find('[data-test-accordion-body]'), 'No accordion body');
   183      assert.notOk(find('[data-test-legend]'), 'No legend');
   184    });
   185  
   186    test('when collapsed, the summary block includes an inline version of the chart', async function (assert) {
   187      assert.expect(3);
   188  
   189      this.server.create('job', {
   190        createAllocations: false,
   191      });
   192  
   193      await this.store.findAll('job');
   194  
   195      await this.set('job', this.store.peekAll('job').get('firstObject'));
   196  
   197      await render(hbs`
   198        <JobPage::Parts::Summary @job={{job}} />
   199      `);
   200  
   201      await click('[data-test-accordion-toggle]');
   202  
   203      assert.ok(
   204        find('[data-test-allocation-status-bar]'),
   205        'Allocation bar still existed'
   206      );
   207      assert.ok(
   208        find('.inline-chart [data-test-allocation-status-bar]'),
   209        'Allocation bar is rendered in an inline-chart container'
   210      );
   211  
   212      await componentA11yAudit(this.element, assert);
   213    });
   214  
   215    test('the collapsed/expanded state is persisted to localStorage', async function (assert) {
   216      this.server.create('job', {
   217        createAllocations: false,
   218      });
   219  
   220      await this.store.findAll('job');
   221  
   222      this.set('job', this.store.peekAll('job').get('firstObject'));
   223  
   224      await render(hbs`
   225        <JobPage::Parts::Summary @job={{job}} />
   226      `);
   227  
   228      assert.notOk(
   229        window.localStorage.nomadExpandJobSummary,
   230        'No value in localStorage yet'
   231      );
   232      await click('[data-test-accordion-toggle]');
   233  
   234      assert.equal(
   235        window.localStorage.nomadExpandJobSummary,
   236        'false',
   237        'Value is stored for the collapsed state'
   238      );
   239    });
   240  
   241    test('the collapsed/expanded state from localStorage is used for the initial state when available', async function (assert) {
   242      this.server.create('job', {
   243        createAllocations: false,
   244      });
   245  
   246      await this.store.findAll('job');
   247  
   248      window.localStorage.nomadExpandJobSummary = 'false';
   249  
   250      this.set('job', this.store.peekAll('job').get('firstObject'));
   251  
   252      await render(hbs`
   253        <JobPage::Parts::Summary @job={{job}} />
   254      `);
   255  
   256      assert.ok(
   257        find('[data-test-allocation-status-bar]'),
   258        'Allocation bar still existed'
   259      );
   260      assert.ok(
   261        find('.inline-chart [data-test-allocation-status-bar]'),
   262        'Allocation bar is rendered in an inline-chart container'
   263      );
   264  
   265      await click('[data-test-accordion-toggle]');
   266  
   267      assert.equal(
   268        window.localStorage.nomadExpandJobSummary,
   269        'true',
   270        'localStorage value still toggles'
   271      );
   272      assert.ok(find('[data-test-accordion-body]'), 'Summary still expands');
   273    });
   274  });