import { find, findAll, click, render, triggerEvent } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import sinon from 'sinon';
import moment from 'moment';
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
const REF_DATE = new Date();
module('Integration | Component | line-chart', function (hooks) {
setupRenderingTest(hooks);
test('when a chart has annotations, they are rendered in order', async function (assert) {
const annotations = [
{ x: 2, type: 'info' },
{ x: 1, type: 'error' },
{ x: 3, type: 'info' },
];
this.setProperties({
annotations,
data: [
{ x: 1, y: 1 },
{ x: 10, y: 10 },
],
});
await render(hbs`
<:after as |c|>
`);
const sortedAnnotations = annotations.sortBy('x');
findAll('[data-test-annotation]').forEach((annotation, idx) => {
const datum = sortedAnnotations[idx];
assert.equal(
annotation.querySelector('button').getAttribute('title'),
`${datum.type} event at ${datum.x}`
);
});
await componentA11yAudit(this.element, assert);
});
test('when a chart has annotations and is timeseries, annotations are sorted reverse-chronologically', async function (assert) {
const annotations = [
{
x: moment(REF_DATE).add(2, 'd').toDate(),
type: 'info',
},
{
x: moment(REF_DATE).add(1, 'd').toDate(),
type: 'error',
},
{
x: moment(REF_DATE).add(3, 'd').toDate(),
type: 'info',
},
];
this.setProperties({
annotations,
data: [
{ x: 1, y: 1 },
{ x: 10, y: 10 },
],
});
await render(hbs`
<:after as |c|>
`);
const sortedAnnotations = annotations.sortBy('x').reverse();
findAll('[data-test-annotation]').forEach((annotation, idx) => {
const datum = sortedAnnotations[idx];
assert.equal(
annotation.querySelector('button').getAttribute('title'),
`${datum.type} event at ${moment(datum.x).format('MMM DD, HH:mm')}`
);
});
});
test('clicking annotations calls the onAnnotationClick action with the annotation as an argument', async function (assert) {
const annotations = [{ x: 2, type: 'info', meta: { data: 'here' } }];
this.setProperties({
annotations,
data: [
{ x: 1, y: 1 },
{ x: 10, y: 10 },
],
click: sinon.spy(),
});
await render(hbs`
<:after as |c|>
`);
await click('[data-test-annotation] button');
assert.ok(this.click.calledWith(annotations[0]));
});
test('annotations will have staggered heights when too close to be positioned side-by-side', async function (assert) {
const annotations = [
{ x: 2, type: 'info' },
{ x: 2.4, type: 'error' },
{ x: 9, type: 'info' },
];
this.setProperties({
annotations,
data: [
{ x: 1, y: 1 },
{ x: 10, y: 10 },
],
click: sinon.spy(),
});
await render(hbs`
<:after as |c|>
`);
const annotationEls = findAll('[data-test-annotation]');
assert.notOk(annotationEls[0].classList.contains('is-staggered'));
assert.ok(annotationEls[1].classList.contains('is-staggered'));
assert.notOk(annotationEls[2].classList.contains('is-staggered'));
await componentA11yAudit(this.element, assert);
});
test('horizontal annotations render in order', async function (assert) {
const annotations = [
{ y: 2, label: 'label one' },
{ y: 9, label: 'label three' },
{ y: 2.4, label: 'label two' },
];
this.setProperties({
annotations,
data: [
{ x: 1, y: 1 },
{ x: 10, y: 10 },
],
});
await render(hbs`
<:after as |c|>
`);
const annotationEls = findAll('[data-test-annotation]');
annotations
.sortBy('y')
.reverse()
.forEach((annotation, index) => {
assert.equal(annotationEls[index].textContent.trim(), annotation.label);
});
});
test('the tooltip includes information on the data closest to the mouse', async function (assert) {
const series1 = [
{ x: 1, y: 2 },
{ x: 3, y: 3 },
{ x: 5, y: 4 },
];
const series2 = [
{ x: 2, y: 10 },
{ x: 4, y: 9 },
{ x: 6, y: 8 },
];
this.setProperties({
data: [
{ series: 'One', data: series1 },
{ series: 'Two', data: series2 },
],
});
await render(hbs`
<:svg as |c|>
{{#each this.data as |series idx|}}
{{/each}}
<:after as |c|>
{{series.series}}
{{datum.formattedY}}
`);
// All tooltip events are attached to the hover target
const hoverTarget = find('[data-test-hover-target]');
// Mouse to data mapping happens based on the clientX of the MouseEvent
const bbox = hoverTarget.getBoundingClientRect();
// The MouseEvent needs to be translated based on the location of the hover target
const xOffset = bbox.x;
// An interval here is the width between x values given the fixed dimensions of the line chart
// and the domain of the data
const interval = bbox.width / 5;
// MouseEnter triggers the tooltip visibility
await triggerEvent(hoverTarget, 'mouseenter');
// MouseMove positions the tooltip and updates the active datum
await triggerEvent(hoverTarget, 'mousemove', { clientX: xOffset + interval * 1 + 5 });
assert.equal(findAll('[data-test-chart-tooltip] li').length, 1);
assert.equal(find('[data-test-chart-tooltip] .label').textContent.trim(), this.data[1].series);
assert.equal(
find('[data-test-chart-tooltip] .value').textContent.trim(),
series2.find((d) => d.x === 2).y
);
// When the mouse falls between points and each series has points with different x values,
// points will only be shown in the tooltip if they are close enough to the closest point
// to the cursor.
// This event is intentionally between points such that both points are within proximity.
const expected = [
{ label: this.data[0].series, value: series1.find((d) => d.x === 3).y },
{ label: this.data[1].series, value: series2.find((d) => d.x === 2).y },
];
await triggerEvent(hoverTarget, 'mousemove', { clientX: xOffset + interval * 1.5 + 5 });
assert.equal(findAll('[data-test-chart-tooltip] li').length, 2);
findAll('[data-test-chart-tooltip] li').forEach((tooltipEntry, index) => {
assert.equal(tooltipEntry.querySelector('.label').textContent.trim(), expected[index].label);
assert.equal(tooltipEntry.querySelector('.value').textContent.trim(), expected[index].value);
});
});
});