github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/ui/tests/integration/job-page/parts/summary-test.js (about)

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