55 lines
1.9 KiB
JavaScript
55 lines
1.9 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render, triggerEvent } from '@ember/test-helpers';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
|
|
const COUNTERS = [
|
|
{ start_time: '2019-04-01T00:00:00Z', total: 5500 },
|
|
{ start_time: '2019-05-01T00:00:00Z', total: 4500 },
|
|
{ start_time: '2019-06-01T00:00:00Z', total: 5000 },
|
|
];
|
|
|
|
module('Integration | Component | http-requests-bar-chart', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
hooks.beforeEach(function() {
|
|
this.set('counters', COUNTERS);
|
|
});
|
|
|
|
test('it renders', async function(assert) {
|
|
await render(hbs`<HttpRequestsBarChart @counters={{counters}}/>`);
|
|
|
|
assert.dom('.http-requests-bar-chart').exists();
|
|
});
|
|
|
|
test('it renders the correct number of bars, ticks, and gridlines', async function(assert) {
|
|
await render(hbs`<HttpRequestsBarChart @counters={{counters}}/>`);
|
|
|
|
assert.equal(this.element.querySelectorAll('.bar').length, 6, 'it renders the bars and shadow bars');
|
|
assert.equal(this.element.querySelectorAll('.tick').length, 9), 'it renders the ticks and gridlines';
|
|
});
|
|
|
|
test('it formats the ticks', async function(assert) {
|
|
await render(hbs`<HttpRequestsBarChart @counters={{counters}}/>`);
|
|
|
|
assert.equal(
|
|
this.element.querySelector('.x-axis>.tick').textContent,
|
|
'Apr 2019',
|
|
'x axis ticks should should show the month and year'
|
|
);
|
|
assert.equal(
|
|
this.element.querySelectorAll('.y-axis>.tick')[1].textContent,
|
|
'2k',
|
|
'y axis ticks should round to the nearest thousand'
|
|
);
|
|
});
|
|
|
|
test('it renders a tooltip', async function(assert) {
|
|
await render(hbs`<HttpRequestsBarChart @counters={{counters}}/>`);
|
|
await triggerEvent('.shadow-bars>.bar', 'mouseenter');
|
|
const tooltipLabel = document.querySelector('.d3-tooltip .date');
|
|
|
|
assert.equal(tooltipLabel.textContent, 'April 2019', 'it shows the tooltip with the formatted date');
|
|
});
|
|
});
|