Test coverage for the gauge chart

ui/app/templates/components/gauge-chart.hbs

@@ -1,4 +1,4 @@
-<svg data-test-gauge-chart role="img" height={{height}}>
+<svg data-test-gauge-svg role="img" height={{height}}>
   <defs>
     <linearGradient x1="0" x2="1" y1="0" y2="0" class="{{chartClass}}" id="{{fillId}}">
       <stop class="start" offset="0%" />
@@ -14,6 +14,6 @@
   </g>
 </svg>
 <div class="metric">
-  <h3 class="label">{{label}}</h3>
-  <p class="value">{{format-percentage value total=total complement=complement}}</p>
+  <h3 data-test-label class="label">{{label}}</h3>
+  <p data-test-percentage class="value">{{format-percentage value total=total complement=complement}}</p>
 </div>

ui/tests/integration/gauge-chart-test.js

@@ -0,0 +1,53 @@
+import { find, render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { create } from 'ember-cli-page-object';
+import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart';
+
+const GaugeChart = create(gaugeChart());
+
+module('Integration | Component | gauge chart', function(hooks) {
+  setupRenderingTest(hooks);
+
+  const commonProperties = () => ({
+    value: 5,
+    total: 10,
+    label: 'Gauge',
+  });
+
+  test('presents as an svg, a formatted percentage, and an svg', async function(assert) {
+    const props = commonProperties();
+    this.setProperties(props);
+
+    await render(hbs`
+      {{gauge-chart
+        value=value
+        total=total
+        label=label}}
+    `);
+
+    assert.equal(GaugeChart.label, props.label);
+    assert.equal(GaugeChart.percentage, '50%');
+    assert.ok(GaugeChart.svgIsPresent);
+  });
+
+  test('the width of the chart is determined based on the container and the height is a function of the width', async function(assert) {
+    const props = commonProperties();
+    this.setProperties(props);
+
+    await render(hbs`
+      <div style="width:100px">
+        {{gauge-chart
+          value=value
+          total=total
+          label=label}}
+      </div>
+    `);
+
+    const svg = find('[data-test-gauge-svg]');
+
+    assert.equal(window.getComputedStyle(svg).width, '100px');
+    assert.equal(svg.getAttribute('height'), 50);
+  });
+});

ui/tests/pages/components/gauge-chart.js

@@ -0,0 +1,9 @@
+import { isPresent, text } from 'ember-cli-page-object';
+
+export default scope => ({
+  scope,
+
+  svgIsPresent: isPresent('[data-test-gauge-svg]'),
+  label: text('[data-test-label]'),
+  percentage: text('[data-test-percentage]'),
+});

ui/tests/unit/components/gauge-chart-test.js

@@ -0,0 +1,27 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Component | gauge-chart', function(hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.subject = this.owner.factoryFor('component:gauge-chart');
+  });
+
+  test('percent is a function of value and total OR complement', function(assert) {
+    const chart = this.subject.create();
+    chart.setProperties({
+      value: 5,
+      total: 10,
+    });
+
+    assert.equal(chart.percent, 0.5);
+
+    chart.setProperties({
+      total: null,
+      complement: 15,
+    });
+
+    assert.equal(chart.percent, 0.25);
+  });
+});