github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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      this.server.create('job', 'periodic', {
    27        createAllocations: false,
    28      });
    29  
    30      await this.store.findAll('job');
    31  
    32      this.set('job', this.store.peekAll('job').get('firstObject'));
    33  
    34      await render(hbs`
    35        <JobPage::Parts::Summary @job={{job}} />
    36      `);
    37  
    38      assert.ok(find('[data-test-children-status-bar]'), 'Children status bar found');
    39      assert.notOk(find('[data-test-allocation-status-bar]'), 'Allocation status bar not found');
    40  
    41      await componentA11yAudit(this.element, assert);
    42    });
    43  
    44    test('jobs without children use the allocations diagram', async function(assert) {
    45      this.server.create('job', {
    46        createAllocations: false,
    47      });
    48  
    49      await this.store.findAll('job');
    50  
    51      this.set('job', this.store.peekAll('job').get('firstObject'));
    52  
    53      await render(hbs`
    54        <JobPage::Parts::Summary @job={{job}} />
    55      `);
    56  
    57      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation status bar found');
    58      assert.notOk(find('[data-test-children-status-bar]'), 'Children status bar not found');
    59  
    60      await componentA11yAudit(this.element, assert);
    61    });
    62  
    63    test('the allocations diagram lists all allocation status figures', async function(assert) {
    64      this.server.create('job', {
    65        createAllocations: false,
    66      });
    67  
    68      await this.store.findAll('job');
    69  
    70      this.set('job', this.store.peekAll('job').get('firstObject'));
    71  
    72      await render(hbs`
    73        <JobPage::Parts::Summary @job={{job}} />
    74      `);
    75  
    76      assert.equal(
    77        find('[data-test-legend-value="queued"]').textContent,
    78        this.get('job.queuedAllocs'),
    79        `${this.get('job.queuedAllocs')} are queued`
    80      );
    81  
    82      assert.equal(
    83        find('[data-test-legend-value="starting"]').textContent,
    84        this.get('job.startingAllocs'),
    85        `${this.get('job.startingAllocs')} are starting`
    86      );
    87  
    88      assert.equal(
    89        find('[data-test-legend-value="running"]').textContent,
    90        this.get('job.runningAllocs'),
    91        `${this.get('job.runningAllocs')} are running`
    92      );
    93  
    94      assert.equal(
    95        find('[data-test-legend-value="complete"]').textContent,
    96        this.get('job.completeAllocs'),
    97        `${this.get('job.completeAllocs')} are complete`
    98      );
    99  
   100      assert.equal(
   101        find('[data-test-legend-value="failed"]').textContent,
   102        this.get('job.failedAllocs'),
   103        `${this.get('job.failedAllocs')} are failed`
   104      );
   105  
   106      assert.equal(
   107        find('[data-test-legend-value="lost"]').textContent,
   108        this.get('job.lostAllocs'),
   109        `${this.get('job.lostAllocs')} are lost`
   110      );
   111    });
   112  
   113    test('the children diagram lists all children status figures', async function(assert) {
   114      this.server.create('job', 'periodic', {
   115        createAllocations: false,
   116      });
   117  
   118      await this.store.findAll('job');
   119  
   120      this.set('job', this.store.peekAll('job').get('firstObject'));
   121  
   122      await render(hbs`
   123        <JobPage::Parts::Summary @job={{job}} />
   124      `);
   125  
   126      assert.equal(
   127        find('[data-test-legend-value="queued"]').textContent,
   128        this.get('job.pendingChildren'),
   129        `${this.get('job.pendingChildren')} are pending`
   130      );
   131  
   132      assert.equal(
   133        find('[data-test-legend-value="running"]').textContent,
   134        this.get('job.runningChildren'),
   135        `${this.get('job.runningChildren')} are running`
   136      );
   137  
   138      assert.equal(
   139        find('[data-test-legend-value="complete"]').textContent,
   140        this.get('job.deadChildren'),
   141        `${this.get('job.deadChildren')} are dead`
   142      );
   143    });
   144  
   145    test('the summary block can be collapsed', async function(assert) {
   146      this.server.create('job', {
   147        createAllocations: false,
   148      });
   149  
   150      await this.store.findAll('job');
   151  
   152      this.set('job', this.store.peekAll('job').get('firstObject'));
   153  
   154      await render(hbs`
   155        <JobPage::Parts::Summary @job={{job}} />
   156      `);
   157  
   158      await click('[data-test-accordion-toggle]');
   159  
   160      assert.notOk(find('[data-test-accordion-body]'), 'No accordion body');
   161      assert.notOk(find('[data-test-legend]'), 'No legend');
   162    });
   163  
   164    test('when collapsed, the summary block includes an inline version of the chart', async function(assert) {
   165      this.server.create('job', {
   166        createAllocations: false,
   167      });
   168  
   169      await this.store.findAll('job');
   170  
   171      await this.set('job', this.store.peekAll('job').get('firstObject'));
   172  
   173      await render(hbs`
   174        <JobPage::Parts::Summary @job={{job}} />
   175      `);
   176  
   177      await click('[data-test-accordion-toggle]');
   178  
   179      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
   180      assert.ok(
   181        find('.inline-chart [data-test-allocation-status-bar]'),
   182        'Allocation bar is rendered in an inline-chart container'
   183      );
   184  
   185      await componentA11yAudit(this.element, assert);
   186    });
   187  
   188    test('the collapsed/expanded state is persisted to localStorage', async function(assert) {
   189      this.server.create('job', {
   190        createAllocations: false,
   191      });
   192  
   193      await this.store.findAll('job');
   194  
   195      this.set('job', this.store.peekAll('job').get('firstObject'));
   196  
   197      await render(hbs`
   198        <JobPage::Parts::Summary @job={{job}} />
   199      `);
   200  
   201      assert.notOk(window.localStorage.nomadExpandJobSummary, 'No value in localStorage yet');
   202      await click('[data-test-accordion-toggle]');
   203  
   204      assert.equal(
   205        window.localStorage.nomadExpandJobSummary,
   206        'false',
   207        'Value is stored for the collapsed state'
   208      );
   209    });
   210  
   211    test('the collapsed/expanded state from localStorage is used for the initial state when available', async function(assert) {
   212      this.server.create('job', {
   213        createAllocations: false,
   214      });
   215  
   216      await this.store.findAll('job');
   217  
   218      window.localStorage.nomadExpandJobSummary = 'false';
   219  
   220      this.set('job', this.store.peekAll('job').get('firstObject'));
   221  
   222      await render(hbs`
   223        <JobPage::Parts::Summary @job={{job}} />
   224      `);
   225  
   226      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
   227      assert.ok(
   228        find('.inline-chart [data-test-allocation-status-bar]'),
   229        'Allocation bar is rendered in an inline-chart container'
   230      );
   231  
   232      await click('[data-test-accordion-toggle]');
   233  
   234      assert.equal(
   235        window.localStorage.nomadExpandJobSummary,
   236        'true',
   237        'localStorage value still toggles'
   238      );
   239      assert.ok(find('[data-test-accordion-body]'), 'Summary still expands');
   240    });
   241  });