Test coverage for summary toggle

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

@@ -1,7 +1,7 @@
 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 { find, click } 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';
@@ -152,3 +152,130 @@ test('the children diagram lists all children status figures', function(assert)
     });
   });
 });
+
+test('the summary block can be collapsed', 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(() => {
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.notOk(find('[data-test-accordion-body]'), 'No accordion body');
+      assert.notOk(find('[data-test-legend]'), 'No legend');
+    });
+});
+
+test('when collapsed, the summary block includes an inline version of the chart', 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(() => {
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
+      assert.ok(
+        find('.inline-chart [data-test-allocation-status-bar]'),
+        'Allocation bar is rendered in an inline-chart container'
+      );
+    });
+});
+
+test('the collapsed/expanded state is persisted to localStorage', 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.notOk(window.localStorage.nomadExpandJobSummary, 'No value in localStorage yet');
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.equal(
+        window.localStorage.nomadExpandJobSummary,
+        'false',
+        'Value is stored for the collapsed state'
+      );
+    });
+});
+
+test('the collapsed/expanded state from localStorage is used for the initial state when available', function(assert) {
+  this.server.create('job', {
+    createAllocations: false,
+  });
+
+  this.store.findAll('job');
+
+  window.localStorage.nomadExpandJobSummary = 'false';
+
+  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 bar still existed');
+      assert.ok(
+        find('.inline-chart [data-test-allocation-status-bar]'),
+        'Allocation bar is rendered in an inline-chart container'
+      );
+
+      click('[data-test-accordion-toggle]');
+      return wait();
+    })
+    .then(() => {
+      assert.equal(
+        window.localStorage.nomadExpandJobSummary,
+        'true',
+        'localStorage value still toggles'
+      );
+      assert.ok(find('[data-test-accordion-body]'), 'Summary still expands');
+    });
+});