github.com/zoomfoo/nomad@v0.8.5-0.20180907175415-f28fd3a1a056/ui/tests/integration/job-page/parts/summary-test.js (about)

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