github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/job-page/parts/summary-test.js (about)

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