Skip to content

Commit

Permalink
Test coverage for the gauge chart
Browse files Browse the repository at this point in the history
  • Loading branch information
DingoEatingFuzz committed May 13, 2020
1 parent b3475ad commit 0a258b1
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 3 deletions.
6 changes: 3 additions & 3 deletions ui/app/templates/components/gauge-chart.hbs
Original file line number Diff line number Diff line change
@@ -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%" />
Expand All @@ -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>
53 changes: 53 additions & 0 deletions ui/tests/integration/gauge-chart-test.js
Original file line number Diff line number Diff line change
@@ -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 a label', 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);
});
});
9 changes: 9 additions & 0 deletions ui/tests/pages/components/gauge-chart.js
Original file line number Diff line number Diff line change
@@ -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]'),
});
27 changes: 27 additions & 0 deletions ui/tests/unit/components/gauge-chart-test.js
Original file line number Diff line number Diff line change
@@ -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);
});
});

0 comments on commit 0a258b1

Please sign in to comment.