4c9dec60b7
* initialize tooltip * style tooltip * show date in tooltip * show tooltip on hover * style tooltip * add hover padding for when bar is very short * add tooltip test and format tooltip date * revert to using real data * update comment about binding the tooltip to shadowBars * remove d3array * use double colons for pseudo elements * use elementId in bars-container id name to prevent clashing * use Object.freeze to eliminate linting error
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');
|
|
});
|
|
});
|