Tests for the summary job page part

ui/app/components/allocation-status-bar.js

@@ -6,6 +6,8 @@ export default DistributionBar.extend({
 
   allocationContainer: null,
 
+  'data-test-allocation-status-bar': true,
+
   data: computed(
     'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs}',
     function() {

ui/app/components/children-status-bar.js

@@ -6,6 +6,8 @@ export default DistributionBar.extend({
 
   job: null,
 
+  'data-test-children-status-bar': true,
+
   data: computed('job.{pendingChildren,runningChildren,deadChildren}', function() {
     if (!this.get('job')) {
       return [];

ui/app/templates/components/job-page/parts/summary.hbs

@@ -12,7 +12,7 @@
     allocationContainer=job
     job=job
     class="split-view" as |chart|}}
-    <ol data-test-allocations-legend class="legend">
+    <ol data-test-legend class="legend">
       {{#each chart.data as |datum index|}}
         <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
           <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />

ui/tests/integration/job-page/parts/summary-test.js

@@ -0,0 +1,150 @@
+import { getOwner } from '@ember/application';
+import hbs from 'htmlbars-inline-precompile';
+import wait from 'ember-test-helpers/wait';
+import { find } from 'ember-native-dom-helpers';
+import { test, moduleForComponent } from 'ember-qunit';
+import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
+import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+
+moduleForComponent('job-page/parts/summary', 'Integration | Component | job-page/parts/summary', {
+  integration: true,
+  beforeEach() {
+    fragmentSerializerInitializer(getOwner(this));
+    window.localStorage.clear();
+    this.store = getOwner(this).lookup('service:store');
+    this.server = startMirage();
+    this.server.create('namespace');
+  },
+});
+
+test('jobs with children use the children diagram', function(assert) {
+  this.server.create('job', 'periodic', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    this.set('job', this.store.peekAll('job').get('firstObject'));
+
+    this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+    return wait().then(() => {
+      assert.ok(find('[data-test-children-status-bar]'), 'Children status bar found');
+      assert.notOk(find('[data-test-allocation-status-bar]'), 'Allocation status bar not found');
+    });
+  });
+});
+
+test('jobs without children use the allocations diagram', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    this.set('job', this.store.peekAll('job').get('firstObject'));
+
+    this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+    return wait().then(() => {
+      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation status bar found');
+      assert.notOk(find('[data-test-children-status-bar]'), 'Children status bar not found');
+    });
+  });
+});
+
+test('the allocations diagram lists all allocation status figures', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    this.set('job', this.store.peekAll('job').get('firstObject'));
+
+    this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+    return wait().then(() => {
+      assert.equal(
+        find('[data-test-legend-value="queued"]').textContent,
+        this.get('job.queuedAllocs'),
+        `${this.get('job.queuedAllocs')} are queued`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="starting"]').textContent,
+        this.get('job.startingAllocs'),
+        `${this.get('job.startingAllocs')} are starting`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="running"]').textContent,
+        this.get('job.runningAllocs'),
+        `${this.get('job.runningAllocs')} are running`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="complete"]').textContent,
+        this.get('job.completeAllocs'),
+        `${this.get('job.completeAllocs')} are complete`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="failed"]').textContent,
+        this.get('job.failedAllocs'),
+        `${this.get('job.failedAllocs')} are failed`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="lost"]').textContent,
+        this.get('job.lostAllocs'),
+        `${this.get('job.lostAllocs')} are lost`
+      );
+    });
+  });
+});
+
+test('the children diagram lists all children status figures', function(assert) {
+  this.server.create('job', 'periodic', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  return wait().then(() => {
+    this.set('job', this.store.peekAll('job').get('firstObject'));
+
+    this.render(hbs`
+      {{job-page/parts/summary job=job}}
+    `);
+
+    return wait().then(() => {
+      assert.equal(
+        find('[data-test-legend-value="queued"]').textContent,
+        this.get('job.pendingChildren'),
+        `${this.get('job.pendingChildren')} are pending`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="running"]').textContent,
+        this.get('job.runningChildren'),
+        `${this.get('job.runningChildren')} are running`
+      );
+
+      assert.equal(
+        find('[data-test-legend-value="complete"]').textContent,
+        this.get('job.deadChildren'),
+        `${this.get('job.deadChildren')} are dead`
+      );
+    });
+  });
+});