From 0a258b1a9f69b61c74b482e1d37cc0a3a1f8a073 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Mon, 11 May 2020 16:58:17 -0700 Subject: [PATCH] Test coverage for the gauge chart --- ui/app/templates/components/gauge-chart.hbs | 6 +-- ui/tests/integration/gauge-chart-test.js | 53 ++++++++++++++++++++ ui/tests/pages/components/gauge-chart.js | 9 ++++ ui/tests/unit/components/gauge-chart-test.js | 27 ++++++++++ 4 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 ui/tests/integration/gauge-chart-test.js create mode 100644 ui/tests/pages/components/gauge-chart.js create mode 100644 ui/tests/unit/components/gauge-chart-test.js diff --git a/ui/app/templates/components/gauge-chart.hbs b/ui/app/templates/components/gauge-chart.hbs index fcd94f26643..38bb1913762 100644 --- a/ui/app/templates/components/gauge-chart.hbs +++ b/ui/app/templates/components/gauge-chart.hbs @@ -1,4 +1,4 @@ - + @@ -14,6 +14,6 @@
-

{{label}}

-

{{format-percentage value total=total complement=complement}}

+

{{label}}

+

{{format-percentage value total=total complement=complement}}

diff --git a/ui/tests/integration/gauge-chart-test.js b/ui/tests/integration/gauge-chart-test.js new file mode 100644 index 00000000000..aa3ddd06a82 --- /dev/null +++ b/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 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` +
+ {{gauge-chart + value=value + total=total + label=label}} +
+ `); + + const svg = find('[data-test-gauge-svg]'); + + assert.equal(window.getComputedStyle(svg).width, '100px'); + assert.equal(svg.getAttribute('height'), 50); + }); +}); diff --git a/ui/tests/pages/components/gauge-chart.js b/ui/tests/pages/components/gauge-chart.js new file mode 100644 index 00000000000..04b59287c18 --- /dev/null +++ b/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]'), +}); diff --git a/ui/tests/unit/components/gauge-chart-test.js b/ui/tests/unit/components/gauge-chart-test.js new file mode 100644 index 00000000000..771da46a114 --- /dev/null +++ b/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); + }); +});