4fd783d3f4
* Add http request volume table (#6765) * init http metrics page * remove flex-table-column * add http requests table * calculate percent change between each counter * start percent change tests * style request table * show percent more/less glyph * add percent more less tests * add inline alert about recorded metrics * make arrows diagonal * remove conditional inside countersWithChange * add better error msg * use tagName and wrapping element a la glimmer components * extend ClusterRouteBase so auth and seal checks happen * make table accessible * remove curlies * add HttpRequestsTable to storybook * make table accessible * use qunit dom for better assertions * remove EmptyState since we will never have 0 requests * ensure counters is set in test context * Http request volume/add barchart (#6814) * Add http request volume table (#6765) * init http metrics page * remove flex-table-column * add http requests table * calculate percent change between each counter * start percent change tests * style request table * show percent more/less glyph * add percent more less tests * add inline alert about recorded metrics * make arrows diagonal * remove conditional inside countersWithChange * add better error msg * use tagName and wrapping element a la glimmer components * extend ClusterRouteBase so auth and seal checks happen * make table accessible * remove curlies * add HttpRequestsTable to storybook * make table accessible * use qunit dom for better assertions * remove EmptyState since we will never have 0 requests * ensure counters is set in test context * add http-requests-bar-chart * add HttpRequestsBarChart tests * add HttpRequestsBarChart to Storybook * format total number of requests according to locale * do not show extra minus sign when percent change is negative * add link to request metrics in status bar menu * only show bar chart if we have data for more than 1 month * make ticks lighter * ensure charts show data for correct month * make example counters response look like the adapter response instead of the raw api response * ensure ui shows the same utc date as the api response * add format-utc tests * downgrade to d3 v4 to support ie11 * add gridlines * move dasharray to css * use scheduleOnce instead of debounce to prevent multiple re-renders * add key function to bars * add exit case when data is no longer in parsedCounters * fix timestamp in table test * fix timestamps * use utcParse and fallback to isoParse for non-UTC dates * fix bar chart tests
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render } 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, 3);
|
|
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}}/>`);
|
|
|
|
debugger;
|
|
|
|
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'
|
|
);
|
|
});
|
|
});
|