Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(567)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tracing/tracing/value/ui/histogram_set_table_test.html

Issue 2747453003: Refactor histogram-set-view to an MVC pattern. (Closed)
Patch Set: Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « tracing/tracing/value/ui/histogram_set_table_row.html ('k') | tracing/tracing/value/ui/histogram_set_view.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tracing/tracing/value/ui/histogram_set_table_test.html
diff --git a/tracing/tracing/value/ui/histogram_set_table_test.html b/tracing/tracing/value/ui/histogram_set_table_test.html
index b9f019635096a6d103cd0cec705224a0913f61ce..be544ad3991864c6b1baafb676a255957dc344bf 100644
--- a/tracing/tracing/value/ui/histogram_set_table_test.html
+++ b/tracing/tracing/value/ui/histogram_set_table_test.html
@@ -8,195 +8,666 @@ found in the LICENSE file.
<link rel="import" href="/tracing/base/assert_utils.html">
<link rel="import" href="/tracing/base/utils.html">
<link rel="import" href="/tracing/ui/base/deep_utils.html">
-<link rel="import" href="/tracing/value/histogram.html">
-<link rel="import" href="/tracing/value/histogram_set.html">
-<link rel="import" href="/tracing/value/ui/histogram_set_table.html">
+<link rel="import" href="/tracing/value/ui/histogram_set_view.html">
<script>
'use strict';
-
tr.b.unittest.testSuite(function() {
+ // TODO(benjhayden): use table-cell and name-cell APIs, don't pierce them.
+
const TEST_BOUNDARIES = tr.v.HistogramBinBoundaries.createLinear(0, 1e3, 20);
- function buildTable(test, histograms) {
- // This logic is intended to mirror results2_template.html in order to
- // prevent bugs due to disparities between tests and production.
+ async function buildTable(test, histograms) {
+ // This should mirror HistogramImporter in order to be as similar to
+ // results.html as possible.
const table = document.createElement('tr-v-ui-histogram-set-table');
+
+ table.viewState = new tr.v.ui.HistogramSetViewState();
+ await table.viewState.update({
+ displayStatisticName: 'avg',
+ groupings: [tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME],
+ });
+
table.style.display = 'none';
- table.histograms = histograms;
test.addHTMLOutput(table);
- table.style.display = '';
- table.displayed();
+
+ table.addEventListener('display-ready', () => {
+ table.style.display = '';
+ });
+
+ const collector = new tr.v.HistogramParameterCollector();
+ collector.process(histograms);
+
+ await table.build(
+ histograms,
+ histograms.sourceHistograms,
+ collector.labels,
+ async message => {
+ await tr.b.animationFrame();
+ });
return table;
}
- test('rebin', function() {
- const histograms = new tr.v.HistogramSet();
+ function range(start, end) {
+ const result = [];
+ for (let i = start; i < end; ++i) result.push(i);
+ return result;
+ }
- const aHist = new tr.v.Histogram('foo', tr.b.Unit.byName.count,
- tr.v.HistogramBinBoundaries.SINGULAR);
- new tr.v.d.TelemetryInfo({label: 'A'}).addToHistogram(aHist);
- histograms.addHistogram(aHist);
+ function newHistogram(name, opt_options) {
+ const options = opt_options || {};
+ const hist = new tr.v.Histogram(name,
+ options.unit || tr.b.Unit.byName.count_smallerIsBetter,
+ options.boundaries || TEST_BOUNDARIES);
- const bHist = new tr.v.Histogram('foo', tr.b.Unit.byName.count,
- tr.v.HistogramBinBoundaries.SINGULAR);
- new tr.v.d.TelemetryInfo({label: 'B'}).addToHistogram(bHist);
- histograms.addHistogram(bHist);
+ if (options.description) hist.description = options.description;
+ if (options.shortName) hist.shortName = options.shortName;
- for (let i = 0; i < 100; ++i) {
- aHist.addSample(i);
- bHist.addSample(i + 50);
+ for (const sample of (options.samples || [])) {
+ if (sample instanceof Array) {
+ hist.addSample(sample[0], sample[1]);
+ } else {
+ hist.addSample(sample);
+ }
}
- const table = buildTable(this, histograms);
+ if (options.telemetry) {
+ new tr.v.d.TelemetryInfo(options.telemetry).addToHistogram(hist);
+ }
+ return hist;
+ }
- const histogramSpans = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL');
- assert.lengthOf(histogramSpans, 2);
- assert.lengthOf(histogramSpans[0].histogram.allBins,
- 2 + tr.v.DEFAULT_REBINNED_COUNT);
- assert.lengthOf(histogramSpans[1].histogram.allBins,
- 2 + tr.v.DEFAULT_REBINNED_COUNT);
- assert.strictEqual(histogramSpans[0].histogram.allBins[0].range.max, 0);
- assert.strictEqual(histogramSpans[1].histogram.allBins[0].range.max, 0);
- assert.strictEqual(histogramSpans[0].histogram.allBins[41].range.min, 200);
- assert.strictEqual(histogramSpans[1].histogram.allBins[41].range.min, 200);
+ function getBaseTable(table) {
+ return tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.tagName === 'TR-UI-B-TABLE');
+ }
+
+ function getNameCells(table) {
+ return tr.b.findDeepElementsMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ }
+
+ function getTableCells(table) {
+ return tr.b.findDeepElementsMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL');
+ }
+
+ test('viewSearchQuery', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b', {samples: [2]}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ await table.viewState.update({searchQuery: 'a'});
+ let cells = getTableCells(table);
+ assert.lengthOf(cells, 1);
+
+ await table.viewState.update({searchQuery: '[z-'});
+ cells = getTableCells(table);
+ assert.lengthOf(cells, 2);
+
+ await table.viewState.update({searchQuery: 'x'});
+ cells = getTableCells(table);
+ assert.lengthOf(cells, 0);
+
+ await table.viewState.update({searchQuery: ''});
+ cells = getTableCells(table);
+ assert.lengthOf(cells, 2);
});
- test('nameCellOverflow', function() {
- const histograms = new tr.v.HistogramSet();
+ test('controlSearchQuery', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b'),
+ ]);
+ histograms.getHistogramNamed('a').diagnostics.set(
+ 'r', new tr.v.d.RelatedHistogramSet([
+ histograms.getHistogramNamed('b')]));
+ const table = await buildTable(this, histograms);
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: true});
+ const link = tr.b.findDeepElementMatchingPredicate(
+ table, e => e.tagName === 'TR-UI-A-ANALYSIS-LINK');
+ link.click();
+ assert.strictEqual('^(b)$', table.viewState.searchQuery);
+ });
- for (let i = 0; i < 2; ++i) {
- const hist = new tr.v.Histogram(
- 'a'.repeat(50) + i, tr.b.Unit.byName.count);
- hist.addSample(i * 100);
- histograms.addHistogram(hist);
- }
+ test('viewReferenceDisplayLabel', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {label: 'A'}}),
+ newHistogram('a', {samples: [2], telemetry: {label: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ const baseTable = getBaseTable(table);
+ assert.isUndefined(baseTable.selectedTableColumnIndex);
+ // TODO assert cell.referenceHistogram
+
+ await table.viewState.update({referenceDisplayLabel: 'A'});
+ assert.strictEqual(1, baseTable.selectedTableColumnIndex);
+ // TODO assert cell.referenceHistogram
+
+ await table.viewState.update({referenceDisplayLabel: 'B'});
+ assert.strictEqual(2, baseTable.selectedTableColumnIndex);
+ // TODO assert delta statistics
+ // TODO assert cell.referenceHistogram
+ });
+
+ test('viewDisplayStatisticName', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: range(0, 10), telemetry: {label: 'A'}}),
+ newHistogram('a', {samples: range(10, 20), telemetry: {label: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ let scalarSpans = tr.b.findDeepElementsMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-SCALAR-SPAN');
+ assert.lengthOf(scalarSpans, 2);
+ assert.strictEqual('5', scalarSpans[0].unit.format(scalarSpans[0].value));
+ assert.strictEqual('15', scalarSpans[1].unit.format(scalarSpans[1].value));
+
+ await table.viewState.update({displayStatisticName: 'std'});
+ scalarSpans = tr.b.findDeepElementsMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-SCALAR-SPAN');
+ assert.lengthOf(scalarSpans, 2);
+ assert.strictEqual('3', scalarSpans[0].unit.format(scalarSpans[0].value));
+ assert.strictEqual('3', scalarSpans[1].unit.format(scalarSpans[1].value));
+ });
+
+ test('viewShowAll', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b'),
+ ]);
+ histograms.getHistogramNamed('a').diagnostics.set(
+ 'r', new tr.v.d.RelatedHistogramSet([
+ histograms.getHistogramNamed('b')]));
+ const table = await buildTable(this, histograms);
+
+ let cells = getNameCells(table);
+ assert.lengthOf(cells, 1);
+ assert.strictEqual('a', cells[0].row.name);
+
+ await table.viewState.update({showAll: true});
+ cells = getNameCells(table);
+ assert.lengthOf(cells, 2);
+ assert.strictEqual('a', cells[0].row.name);
+ assert.strictEqual('b', cells[1].row.name);
+ });
+
+ test('viewSortColumnIndex', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b', {samples: [2]}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ // TODO assert sorting
+
+ await table.viewState.update({sortColumnIndex: 0});
+ // TODO assert sorting
+
+ await table.viewState.update({sortColumnIndex: 1});
+ // TODO assert sorting
+ });
+
+ test('controlSortColumnIndex', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b', {samples: [2]}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ assert.strictEqual(0, table.viewState.sortColumnIndex);
+
+ tr.b.findDeepElementsMatchingPredicate(
+ table, e => e.tagName === 'TR-UI-B-TABLE-HEADER-CELL')[0].click();
+ assert.strictEqual(0, table.viewState.sortColumnIndex);
+
+ tr.b.findDeepElementsMatchingPredicate(
+ table, e => e.tagName === 'TR-UI-B-TABLE-HEADER-CELL')[1].click();
+ assert.strictEqual(1, table.viewState.sortColumnIndex);
+ });
+
+ test('viewSortDescending', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b', {samples: [2]}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ await table.viewState.update({sortColumnIndex: 0});
+ // TODO assert sorting
+
+ await table.viewState.update({sortDescending: true});
+ // TODO assert sorting
+
+ await table.viewState.update({sortDescending: false});
+ // TODO assert sorting
+ });
+
+ test('controlSortDescending', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ newHistogram('b', {samples: [2]}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({sortColumnIndex: 0});
+
+ assert.isFalse(table.viewState.sortDescending);
+
+ tr.b.findDeepElementsMatchingPredicate(
+ table, e => e.tagName === 'TR-UI-B-TABLE-HEADER-CELL')[0].click();
+ assert.isTrue(table.viewState.sortDescending);
+
+ tr.b.findDeepElementsMatchingPredicate(
+ table, e => e.tagName === 'TR-UI-B-TABLE-HEADER-CELL')[0].click();
+ assert.isFalse(table.viewState.sortDescending);
+ });
+
+ test('viewConstrainNameColumn', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a'.repeat(100)),
+ ]);
+ const table = await buildTable(this, histograms);
+ const nameCell = tr.b.getOnlyElement(getNameCells(table));
+ assert.isTrue(nameCell.isOverflowing);
+ assert.isAbove(350, nameCell.getBoundingClientRect().width);
+ assert.isTrue(table.viewState.constrainNameColumn);
+ const dots = tr.b.findDeepElementMatchingPredicate(
+ table, e => e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS);
+ assert.strictEqual('block', dots.style.display);
- const table = buildTable(this, histograms);
+ await table.viewState.update({constrainNameColumn: false});
+ assert.isFalse(nameCell.isOverflowing);
+ assert.isBelow(350, nameCell.getBoundingClientRect().width);
- const nameCell = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ await table.viewState.update({constrainNameColumn: true});
assert.isTrue(nameCell.isOverflowing);
assert.isAbove(350, nameCell.getBoundingClientRect().width);
+ });
+ test('controlConstrainNameColumn', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a'.repeat(100)),
+ ]);
+ const table = await buildTable(this, histograms);
+ const nameCell = tr.b.getOnlyElement(getNameCells(table));
+ assert.isTrue(nameCell.isOverflowing);
+ assert.isAbove(350, nameCell.getBoundingClientRect().width);
+ assert.isTrue(table.viewState.constrainNameColumn);
const dots = tr.b.findDeepElementMatchingPredicate(
table, e => e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS);
assert.strictEqual('block', dots.style.display);
- dots.click();
+ tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS).click();
+ assert.isFalse(table.viewState.constrainNameColumn);
+ await tr.b.animationFrame();
assert.isFalse(nameCell.isOverflowing);
assert.isBelow(350, nameCell.getBoundingClientRect().width);
+
+ tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS).click();
+ assert.isTrue(table.viewState.constrainNameColumn);
+ await tr.b.animationFrame();
+ assert.isTrue(nameCell.isOverflowing);
+ assert.isAbove(350, nameCell.getBoundingClientRect().width);
});
- test('nameCellOverflowOnExpand', function() {
- const histograms = new tr.v.HistogramSet();
+ test('viewRowExpanded', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {storyDisplayName: 'A'}}),
+ newHistogram('a', {samples: [2], telemetry: {storyDisplayName: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
+ assert.lengthOf(getTableCells(table), 1);
+
+ await table.viewState.tableRowStates.get('a').update({isExpanded: true});
+ assert.lengthOf(getTableCells(table), 3);
+
+ await table.viewState.tableRowStates.get('a').update({isExpanded: false});
+ assert.lengthOf(getTableCells(table), 1);
+ });
- for (let i = 0; i < 2; ++i) {
- for (let j = 0; j < 2; ++j) {
- const hist = new tr.v.Histogram('foo' + j, tr.b.Unit.byName.count);
- new tr.v.d.TelemetryInfo({
- storyDisplayName: 'story' + i + ' story'.repeat(10),
- }).addToHistogram(hist);
- hist.addSample(i * 100);
- histograms.addHistogram(hist);
- }
- }
+ test('controlRowExpanded', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {storyDisplayName: 'A'}}),
+ newHistogram('a', {samples: [2], telemetry: {storyDisplayName: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
+ assert.isFalse(table.viewState.tableRowStates.get('a').isExpanded);
+
+ const nameCell = tr.b.getOnlyElement(getNameCells(table));
+ nameCell.click();
+ assert.isTrue(table.viewState.tableRowStates.get('a').isExpanded);
+
+ nameCell.click();
+ assert.isFalse(table.viewState.tableRowStates.get('a').isExpanded);
+ });
- const table = buildTable(this, histograms);
+ test('viewIsOverviewed', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {
+ storyDisplayName: 'A', label: 'A'}}),
+ newHistogram('a', {samples: [2], telemetry: {
+ storyDisplayName: 'B', label: 'A'}}),
+ newHistogram('a', {samples: [1], telemetry: {
+ storyDisplayName: 'A', label: 'B'}}),
+ newHistogram('a', {samples: [2], telemetry: {
+ storyDisplayName: 'B', label: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
+
+ const nameCells = getNameCells(table);
+ const cells = getTableCells(table);
+ assert.isFalse(nameCells[0].isOverviewed);
+
+ await table.viewState.tableRowStates.get('a').update({isOverviewed: true});
+ assert.isTrue(nameCells[0].isOverviewed);
+
+ await table.viewState.tableRowStates.get('a').update({isOverviewed: false});
+ assert.isFalse(nameCells[0].isOverviewed);
+ });
- const dots = tr.b.findDeepElementMatchingPredicate(
- table, e => e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS);
- assert.strictEqual('none', dots.style.display);
+ test('controlIsOverviewed', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {
+ storyDisplayName: 'A', label: 'A'}}),
+ newHistogram('a', {samples: [2], telemetry: {
+ storyDisplayName: 'B', label: 'A'}}),
+ newHistogram('a', {samples: [1], telemetry: {
+ storyDisplayName: 'A', label: 'B'}}),
+ newHistogram('a', {samples: [2], telemetry: {
+ storyDisplayName: 'B', label: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
+
+ assert.isFalse(table.viewState.tableRowStates.get('a').isOverviewed);
+
+ const nameCells = getNameCells(table);
+ tr.b.findDeepElementMatchingPredicate(nameCells[0], e =>
+ e.id === 'show_overview').click();
+ assert.isTrue(table.viewState.tableRowStates.get('a').isOverviewed);
+
+ tr.b.findDeepElementMatchingPredicate(nameCells[0], e =>
+ e.id === 'hide_overview').click();
+ assert.isFalse(table.viewState.tableRowStates.get('a').isOverviewed);
+ });
+
+ // TODO(benjhayden): Move this to a unit test for table-cell.
+ test('viewCellOpen', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1]}),
+ ]);
+ const table = await buildTable(this, histograms);
+ let cell = tr.b.getOnlyElement(getTableCells(table));
+ assert.isFalse(cell.isHistogramOpen);
+
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: true});
+ assert.isTrue(cell.isHistogramOpen);
+
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: false});
+ assert.isFalse(cell.isHistogramOpen);
+ });
- const baseTable = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-UI-B-TABLE');
- let nameCell = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
- baseTable.setExpandedForTableRow(nameCell.row, true);
+ // TODO(benjhayden): Move this to a unit test for table-cell.
+ test('controlCellOpen', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: [1], telemetry: {label: 'A'}}),
+ newHistogram('a', {samples: [1], telemetry: {label: 'B'}}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ assert.isFalse(table.viewState.tableRowStates.get('a').cells.get('A')
+ .isOpen);
+ const cells = getTableCells(table);
+
+ tr.b.findDeepElementMatchingPredicate(cells[0], e =>
+ e.tagName === 'TR-V-UI-SCALAR-SPAN').click();
+ assert.isTrue(table.viewState.tableRowStates.get('a').cells.get('A')
+ .isOpen);
+
+ tr.b.findDeepElementMatchingPredicate(cells[0], e =>
+ e.id === 'close_histogram').click();
+ assert.isFalse(table.viewState.tableRowStates.get('a').cells.get('A')
+ .isOpen);
+
+ tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.id === 'open_histograms').click();
+ assert.isTrue(table.viewState.tableRowStates.get('a').cells.get('A')
+ .isOpen);
+ assert.isTrue(table.viewState.tableRowStates.get('a').cells.get('B')
+ .isOpen);
+
+ tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.id === 'close_histograms').click();
+ assert.isFalse(table.viewState.tableRowStates.get('a').cells.get('A')
+ .isOpen);
+ assert.isFalse(table.viewState.tableRowStates.get('a').cells.get('B')
+ .isOpen);
+ });
- nameCell = tr.b.findDeepElementMatchingPredicate(table, e =>
- e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL' &&
- e.row.name === 'story0' + ' story'.repeat(10));
+ // TODO(benjhayden): Move this to histogram_span_test.
+ test('viewBrushedBinRange', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: range(0, 1000)}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: true});
+ const histSpan = tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-HISTOGRAM-SPAN');
+ assert.isTrue(histSpan.brushedBinRange.isEmpty);
+
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {brushedBinRange: tr.b.math.Range.fromExplicitRange(5, 10)});
+ assert.strictEqual(5, histSpan.brushedBinRange.min);
+ assert.strictEqual(10, histSpan.brushedBinRange.max);
+ });
+
+ // TODO(benjhayden): Move this to histogram_span_test.
+ test('controlBrushedBinRange', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: range(0, 1000)}),
+ ]);
+ const table = await buildTable(this, histograms);
+ tr.b.assertRangeEquals(new tr.b.math.Range(),
+ table.viewState.tableRowStates.get('a').cells.get('Value')
+ .brushedBinRange);
+
+ // TODO brush bins
+ // TODO assert brushedBinRange
+ });
+
+ // TODO(benjhayden): Move this to a unit test for table-cell.
+ test('viewMergeSampleDiagnostics', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: range(0, 5).map(i =>
+ [i, {bd: tr.v.d.Breakdown.fromDict({values: {
+ a: 5 - i, b: i + 5, c: i}})}])}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: true});
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {brushedBinRange: tr.b.math.Range.fromExplicitRange(0, 10)});
+ let histSpan = tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-HISTOGRAM-SPAN');
+ assert.isTrue(histSpan.mergeSampleDiagnostics);
+
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {mergeSampleDiagnostics: false});
+ assert.isFalse(histSpan.mergeSampleDiagnostics);
+
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {mergeSampleDiagnostics: true});
+ assert.isTrue(histSpan.mergeSampleDiagnostics);
+ });
+
+ // TODO(benjhayden): Move this to a unit test for table-cell.
+ test('controlMergeSampleDiagnostics', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {samples: range(0, 5).map(i =>
+ [i, {bd: tr.v.d.Breakdown.fromDict({values: {
+ a: 5 - i, b: i + 5, c: i}})}])}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {isOpen: true});
+ await table.viewState.tableRowStates.get('a').cells.get('Value').update(
+ {brushedBinRange: tr.b.math.Range.fromExplicitRange(0, 10)});
+ assert.isTrue(table.viewState.tableRowStates.get('a').cells.get(
+ 'Value').mergeSampleDiagnostics);
+ const merge = tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.id === 'merge_sample_diagnostics');
+
+ merge.click();
+ assert.isFalse(table.viewState.tableRowStates.get('a').cells.get(
+ 'Value').mergeSampleDiagnostics);
+
+ merge.click();
+ assert.isTrue(table.viewState.tableRowStates.get('a').cells.get(
+ 'Value').mergeSampleDiagnostics);
+ });
+
+ test('rebin', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('foo', {
+ samples: range(0, 100),
+ telemetry: {label: 'A'},
+ boundaries: tr.v.HistogramBinBoundaries.SINGULAR}),
+ newHistogram('foo', {
+ samples: range(50, 150),
+ telemetry: {label: 'B'},
+ boundaries: tr.v.HistogramBinBoundaries.SINGULAR}),
+ ]);
+ const table = await buildTable(this, histograms);
+
+ const cells = getTableCells(table);
+ assert.lengthOf(cells, 2);
+ assert.lengthOf(cells[0].histogram.allBins,
+ 2 + tr.v.DEFAULT_REBINNED_COUNT);
+ assert.lengthOf(cells[1].histogram.allBins,
+ 2 + tr.v.DEFAULT_REBINNED_COUNT);
+ assert.strictEqual(cells[0].histogram.allBins[0].range.max, 0);
+ assert.strictEqual(cells[1].histogram.allBins[0].range.max, 0);
+ assert.strictEqual(cells[0].histogram.allBins[41].range.min, 200);
+ assert.strictEqual(cells[1].histogram.allBins[41].range.min, 200);
+ });
+
+ test('nameCellOverflow', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a'.repeat(100)),
+ ]);
+ const table = await buildTable(this, histograms);
+ const nameCell = tr.b.getOnlyElement(getNameCells(table));
assert.isTrue(nameCell.isOverflowing);
assert.isAbove(350, nameCell.getBoundingClientRect().width);
+ const dots = tr.b.findDeepElementMatchingPredicate(
+ table, e => e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS);
assert.strictEqual('block', dots.style.display);
dots.click();
+ await tr.b.animationFrame();
assert.isFalse(nameCell.isOverflowing);
assert.isBelow(350, nameCell.getBoundingClientRect().width);
});
- test('nameCellOverflowPersisted', function() {
- const histograms = new tr.v.HistogramSet();
-
- for (let i = 0; i < 2; ++i) {
- for (let j = 0; j < 2; ++j) {
- const hist = new tr.v.Histogram(
- 'foo' + j + ' foo'.repeat(20), tr.b.Unit.byName.count);
- hist.addSample(i * 100);
- histograms.addHistogram(hist);
- }
- }
-
- tr.b.Settings.set(tr.v.ui.CONSTRAIN_NAME_COLUMN_WIDTH_KEY, false);
- const table = buildTable(this, histograms);
+ test('nameCellOverflowOnExpand', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('a', {telemetry: {storyDisplayName: '0'.repeat(100)}}),
+ newHistogram('a', {telemetry: {storyDisplayName: '1'.repeat(100)}}),
+ ]);
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
const dots = tr.b.findDeepElementMatchingPredicate(
table, e => e.textContent === tr.v.ui.MIDLINE_HORIZONTAL_ELLIPSIS);
- assert.strictEqual('block', dots.style.display);
+ assert.strictEqual('none', dots.style.display);
- const nameCells = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
- for (const nameCell of nameCells) {
- assert.isFalse(nameCell.isOverflowing);
- }
- });
+ const baseTable = getBaseTable(table);
+ await table.viewState.tableRowStates.get('a').update({isExpanded: true});
- test('overviewCharts', function() {
- let histograms = new tr.v.HistogramSet();
- let now = new Date().getTime();
- let boundaries = tr.v.HistogramBinBoundaries.createLinear(0, 150, 10);
+ const nameCell = tr.b.findDeepElementMatchingPredicate(table, e =>
+ e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL' &&
+ e.row.name === '0'.repeat(100));
+ await tr.b.animationFrame();
+ assert.isTrue(nameCell.isOverflowing);
+ assert.isAbove(350, nameCell.getBoundingClientRect().width);
- for (let i = 0; i < 2; ++i) {
- for (let j = 0; j < 2; ++j) {
- let telemetry = new tr.v.d.TelemetryInfo({
- storyDisplayName: 'story' + i,
- label: '' + j,
- benchmarkStartMs: now,
- });
+ assert.strictEqual('block', dots.style.display);
+ dots.click();
- let sample = (i * 100) + (j * 10);
+ await tr.b.animationFrame();
+ assert.isFalse(nameCell.isOverflowing);
+ assert.isBelow(350, nameCell.getBoundingClientRect().width);
+ });
- let fooHist = new tr.v.Histogram(
- 'foo', tr.b.Unit.byName.count, boundaries);
- telemetry.addToHistogram(fooHist);
- fooHist.addSample(sample);
- histograms.addHistogram(fooHist);
-
- let barHist = new tr.v.Histogram(
- 'bar', tr.b.Unit.byName.count, boundaries);
- telemetry.addToHistogram(barHist);
- barHist.addSample(sample * 9 / 10);
- histograms.addHistogram(barHist);
- }
+ test('overviewCharts', async function() {
+ const boundaries = tr.v.HistogramBinBoundaries.createLinear(0, 150, 10);
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('foo', {boundaries: boundaries, samples: [0], telemetry: {
+ storyDisplayName: 'story0', label: '0'}}),
+ newHistogram('foo', {boundaries: boundaries, samples: [10], telemetry: {
+ storyDisplayName: 'story0', label: '1'}}),
+
+ newHistogram('foo', {boundaries: boundaries, samples: [100], telemetry: {
+ storyDisplayName: 'story1', label: '0'}}),
+ newHistogram('foo', {boundaries: boundaries, samples: [110], telemetry: {
+ storyDisplayName: 'story1', label: '1'}}),
+
+ newHistogram('bar', {boundaries: boundaries, samples: [0], telemetry: {
+ storyDisplayName: 'story0', label: '0'}}),
+ newHistogram('bar', {boundaries: boundaries, samples: [9], telemetry: {
+ storyDisplayName: 'story0', label: '1'}}),
+
+ newHistogram('bar', {boundaries: boundaries, samples: [90], telemetry: {
+ storyDisplayName: 'story1', label: '0'}}),
+ newHistogram('bar', {boundaries: boundaries, samples: [99], telemetry: {
+ storyDisplayName: 'story1', label: '1'}}),
+ ]);
+ const now = new Date().getTime();
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ ]});
+
+ for (const row of tr.v.ui.HistogramSetTableRowState.walkAll(
+ table.viewState.tableRowStates.values())) {
+ await row.update({isOverviewed: true});
}
- const table = buildTable(this, histograms);
-
- let showOverview = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.id === 'show_overview');
- // SVG doesn't have click().
- table.fire('click', {}, {node: showOverview});
-
let charts = tr.b.findDeepElementsMatchingPredicate(
table, e => ((e.id === 'overview_container') &&
(e.style.display !== 'none')));
charts = charts.map(div => div.children[0]);
assert.lengthOf(charts, 6);
- assert.deepEqual(charts[0].data, [{x: '0', y: 45}, {x: '1', y: 54}]);
+ assert.deepEqual(JSON.stringify(charts[0].data),
+ JSON.stringify([{x: '0', y: 45}, {x: '1', y: 54}]));
tr.b.assertRangeEquals(
charts[0].dataRange, tr.b.math.Range.fromExplicitRange(0, 99));
@@ -224,10 +695,10 @@ tr.b.unittest.testSuite(function() {
tr.b.assertRangeEquals(
charts[5].dataRange, tr.b.math.Range.fromExplicitRange(0, 110));
- let hideOverview = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.id === 'hide_overview');
- // SVG doesn't have click().
- table.fire('click', {}, {node: hideOverview});
+ for (const row of tr.v.ui.HistogramSetTableRowState.walkAll(
+ table.viewState.tableRowStates.values())) {
+ await row.update({isOverviewed: false});
+ }
charts = tr.b.findDeepElementsMatchingPredicate(
table, e => ((e.id === 'overview_container') &&
@@ -235,17 +706,17 @@ tr.b.unittest.testSuite(function() {
assert.lengthOf(charts, 0);
});
- test('mergeRelationships', function() {
- let histograms = new tr.v.HistogramSet();
- let now = new Date().getTime();
- let boundaries = tr.v.HistogramBinBoundaries.createLinear(0, 150, 10);
+ test('mergeRelationships', async function() {
+ const benchmarkStartMs = new Date().getTime();
+ const boundaries = tr.v.HistogramBinBoundaries.createLinear(0, 150, 10);
+ const histograms = new tr.v.HistogramSet();
for (let i = 0; i < 2; ++i) {
for (let j = 0; j < 2; ++j) {
let telemetry = new tr.v.d.TelemetryInfo({
storyDisplayName: 'story' + i,
benchmarkName: 'bench' + j,
- benchmarkStartMs: now,
+ benchmarkStartMs,
label: 'Value',
});
@@ -274,13 +745,14 @@ tr.b.unittest.testSuite(function() {
}
}
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
// TODO test
+ // TODO move to histogram_set_table_row_test.html
});
- test('regression3281', function() {
+ test('regression3281', async function() {
// https://github.com/catapult-project/catapult/issues/3281
- let histograms = new tr.v.HistogramSet();
+ const histograms = new tr.v.HistogramSet();
let telemetryA = new tr.v.d.TelemetryInfo({label: 'A'});
let telemetryB = new tr.v.d.TelemetryInfo({label: 'B'});
@@ -320,12 +792,12 @@ tr.b.unittest.testSuite(function() {
histograms.addHistogram(hist1b);
telemetryB.addToHistogram(hist1b);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
// TODO test
});
- test('sortByDisplayStatistic', function() {
- let histograms = new tr.v.HistogramSet();
+ test('sortByDisplayStatistic', async function() {
+ const histograms = new tr.v.HistogramSet();
let now = new Date().getTime();
let barHist = new tr.v.Histogram('bar',
@@ -340,46 +812,39 @@ tr.b.unittest.testSuite(function() {
histograms.addHistogram(fooHist);
histograms.addHistogram(barHist);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
- table.sortColumnIndex = 1;
- table.sortDescending = false;
+ await table.viewState.update({
+ sortColumnIndex: 1,
+ sortDescending: false,
+ displayStatisticName: 'min',
+ });
- table.displayStatistic = 'min';
-
- let nameCells = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ let nameCells = getNameCells(table);
assert.strictEqual(nameCells[0].row.name, 'bar');
assert.strictEqual(nameCells[1].row.name, 'foo');
- table.sortDescending = true;
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
- baseTable.rebuild();
+ await table.viewState.update({sortDescending: true});
- nameCells = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ nameCells = getNameCells(table);
assert.strictEqual(nameCells[0].row.name, 'foo');
assert.strictEqual(nameCells[1].row.name, 'bar');
- table.displayStatistic = 'max';
+ await table.viewState.update({displayStatisticName: 'max'});
- nameCells = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ nameCells = getNameCells(table);
assert.strictEqual(nameCells[0].row.name, 'bar');
assert.strictEqual(nameCells[1].row.name, 'foo');
- table.sortDescending = false;
- baseTable.rebuild();
+ await table.viewState.update({sortDescending: false});
- nameCells = tr.b.findDeepElementsMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ nameCells = getNameCells(table);
assert.strictEqual(nameCells[0].row.name, 'foo');
assert.strictEqual(nameCells[1].row.name, 'bar');
});
- test('displayStatistic', function() {
- let histograms = new tr.v.HistogramSet();
+ test('displayStatistic', async function() {
+ const histograms = new tr.v.HistogramSet();
let now = new Date().getTime();
let barHist = new tr.v.Histogram('a',
@@ -414,7 +879,7 @@ tr.b.unittest.testSuite(function() {
histograms.addHistogram(barHist);
histograms.addHistogram(quxHist);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
function histogramsEqual(a, b) {
// This is not an exhaustive equality check. This only tests the fields
@@ -448,15 +913,11 @@ tr.b.unittest.testSuite(function() {
barCell, elem => elem.id === 'content');
assert.isDefined(barContent);
- assert.strictEqual(table.displayStatistic, 'avg');
+ assert.strictEqual(table.viewState.displayStatisticName, 'avg');
assert.strictEqual('20.000 ms', fooContent.textContent);
assert.strictEqual('2.000 ms', barContent.textContent);
- table.referenceDisplayLabel = 'foo';
-
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
- baseTable.rebuild();
+ await table.viewState.update({referenceDisplayLabel: 'foo'});
fooCell = tr.b.findDeepElementMatchingPredicate(table, elem => (
(elem.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL') &&
@@ -478,11 +939,13 @@ tr.b.unittest.testSuite(function() {
barCell, elem => elem.id === 'content');
assert.isDefined(barContent);
- assert.strictEqual(table.displayStatistic, `${tr.v.DELTA}avg`);
+ // TODO(benjhayden): Test that histogram-set-controls automatically prepend
+ // DELTA when a reference columns is selected.
+ await table.viewState.update({displayStatisticName: `${tr.v.DELTA}avg`});
assert.strictEqual('20.000 ms', fooContent.textContent);
assert.strictEqual('-18.000 ms', barContent.textContent);
- table.displayStatistic = `%${tr.v.DELTA}avg`;
+ await table.viewState.update({displayStatisticName: `%${tr.v.DELTA}avg`});
fooCell = tr.b.findDeepElementMatchingPredicate(table, elem => (
(elem.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL') &&
@@ -504,13 +967,14 @@ tr.b.unittest.testSuite(function() {
barCell, elem => elem.id === 'content');
assert.isDefined(barContent);
- assert.strictEqual(table.displayStatistic, `%${tr.v.DELTA}avg`);
+ assert.strictEqual(table.viewState.displayStatisticName,
+ `%${tr.v.DELTA}avg`);
assert.strictEqual('20.000 ms', fooContent.textContent);
assert.strictEqual('-90.000%', barContent.textContent);
});
- test('requestSelectionChange', function() {
- let histograms = new tr.v.HistogramSet();
+ test('requestSelectionChange', async function() {
+ const histograms = new tr.v.HistogramSet();
let barHist = new tr.v.Histogram('bar',
tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
@@ -522,13 +986,16 @@ tr.b.unittest.testSuite(function() {
let breakdown = new tr.v.d.RelatedHistogramBreakdown();
breakdown.set('bar', barHist);
+ let quxHist = new tr.v.Histogram('qux',
+ tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
+ histograms.addHistogram(quxHist);
+ breakdown.set('qux', quxHist);
+
fooHist.diagnostics.set('breakdown', breakdown);
histograms.addHistogram(fooHist);
histograms.addHistogram(barHist);
- const table = buildTable(this, histograms);
-
- table.histograms = histograms;
+ const table = await buildTable(this, histograms);
let fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -549,22 +1016,14 @@ tr.b.unittest.testSuite(function() {
assert.isDefined(barLink);
barLink.click();
+ await tr.b.animationFrame();
barCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
(elem.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL') &&
(elem.histogram.name === 'bar')));
assert.isDefined(barCell);
- let quxHist = new tr.v.Histogram('qux',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- histograms.addHistogram(quxHist);
- breakdown.set('qux', quxHist);
-
- let search = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.id === 'search');
- search.value = '';
-
- table.histograms = histograms;
+ await table.viewState.update({searchQuery: ''});
fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -581,8 +1040,9 @@ tr.b.unittest.testSuite(function() {
assert.isDefined(selectAllLink);
selectAllLink.click();
- assert.strictEqual(search.value, '^(bar|qux)$');
+ assert.strictEqual(table.viewState.searchQuery, '^(bar|qux)$');
+ await tr.b.animationFrame();
fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
(elem.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-CELL') &&
@@ -602,8 +1062,8 @@ tr.b.unittest.testSuite(function() {
assert.isDefined(quxCell);
});
- test('search', function() {
- let histograms = new tr.v.HistogramSet();
+ test('search', async function() {
+ const histograms = new tr.v.HistogramSet();
let barHist = new tr.v.Histogram('bar',
tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
@@ -616,11 +1076,7 @@ tr.b.unittest.testSuite(function() {
histograms.addHistogram(fooHist);
histograms.addHistogram(barHist);
- const table = buildTable(this, histograms);
-
- let search = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.id === 'search');
- search.value = 'bar';
+ const table = await buildTable(this, histograms);
let fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -634,11 +1090,7 @@ tr.b.unittest.testSuite(function() {
(elem.histogram.name === 'bar')));
assert.isDefined(barCell);
- search = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.id === 'search');
-
- search.value = 'bar';
- table.onSearch_();
+ await table.viewState.update({searchQuery: 'bar'});
fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -652,8 +1104,7 @@ tr.b.unittest.testSuite(function() {
(elem.histogram.name === 'bar')));
assert.isDefined(barCell);
- search.value = 'foo';
- table.onSearch_();
+ await table.viewState.update({searchQuery: 'foo'});
fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -669,8 +1120,7 @@ tr.b.unittest.testSuite(function() {
// As users type in regexes, some intermediate forms may be invalid regexes.
// When the search is an invalid regex, just ignore it.
- search.value = '[a-';
- table.onSearch_();
+ await table.viewState.update({searchQuery: '[a-'});
fooCell = tr.b.findDeepElementMatchingPredicate(
table, elem => (
@@ -685,46 +1135,14 @@ tr.b.unittest.testSuite(function() {
assert.isDefined(barCell);
});
- test('implicitUndefinedHistogramSet', function() {
- let table = document.createElement('tr-v-ui-histogram-set-table');
- this.addHTMLOutput(table);
- table.displayed();
- assert.strictEqual('block', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.textContent === 'zero Histograms')).display);
- assert.strictEqual('none', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.id === 'container')).display);
- });
-
- test('explicitUndefinedHistogramSet', function() {
- const table = buildTable(this, undefined);
- assert.strictEqual('block', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.textContent === 'zero Histograms')).display);
- assert.strictEqual('none', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.id === 'container')).display);
- });
-
- test('emptyHistogramSet', function() {
- const table = buildTable(this, new tr.v.HistogramSet());
- assert.strictEqual('block', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.textContent === 'zero Histograms')).display);
- assert.strictEqual('none', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.id === 'container')).display);
- });
-
- test('shortName', function() {
+ test('shortName', async function() {
// One value has |name|='long name' and |shortName|='short name',
// another value has |name|='short name' to demonstrate the fundamental
// ambiguity that arises when Histograms can have multiple different
// "names".
let now = new Date().getTime();
- let histograms = new tr.v.HistogramSet();
+ const histograms = new tr.v.HistogramSet();
let histA = new tr.v.Histogram('long name',
tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
@@ -749,23 +1167,21 @@ tr.b.unittest.testSuite(function() {
}).addToHistogram(histB);
histograms.addHistogram(histB);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
- assert.strictEqual('none', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.textContent === 'zero Histograms')).display);
- assert.strictEqual('flex', getComputedStyle(
- tr.b.findDeepElementMatchingPredicate(
- table, e => e.id === 'container')).display);
+ // TODO(benjhayden): The shortName version of GROUPINGS.HISTOGRAM_NAME moved
+ // to histogram_set_view. Move this test to histogram_set_view_test.
+ /*
assert.isDefined(tr.b.findDeepElementMatchingPredicate(
table, e => e.textContent === 'short name'));
assert.isUndefined(tr.b.findDeepElementMatchingPredicate(
table, e => e.textContent === 'long name'));
+ */
});
- test('emptyAndMissing', function() {
+ test('emptyAndMissing', async function() {
let now = new Date().getTime();
- let histograms = new tr.v.HistogramSet();
+ const histograms = new tr.v.HistogramSet();
let histA = new tr.v.Histogram('histogram A',
tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
@@ -797,7 +1213,7 @@ tr.b.unittest.testSuite(function() {
}).addToHistogram(histC);
histograms.addHistogram(histC);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
assert.isDefined(tr.b.findDeepElementMatchingPredicate(
table, e => e.textContent === '(empty)'));
@@ -805,8 +1221,8 @@ tr.b.unittest.testSuite(function() {
table, e => e.textContent === '(missing)'));
});
- test('instantiate_1x1', function() {
- let histograms = new tr.v.HistogramSet();
+ test('instantiate_1x1', async function() {
+ const histograms = new tr.v.HistogramSet();
let hist = new tr.v.Histogram('foo',
tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
@@ -815,10 +1231,9 @@ tr.b.unittest.testSuite(function() {
}
histograms.addHistogram(hist);
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
+ const baseTable = getBaseTable(table);
assert.strictEqual(baseTable.tableRows.length, 1);
let cell = tr.b.findDeepElementMatchingPredicate(table, elem =>
@@ -830,60 +1245,22 @@ tr.b.unittest.testSuite(function() {
assert.isBelow(0, yAxisText.getBBox().width);
});
- test('merge_unmergeable', function() {
- let now = new Date().getTime();
- let histograms = new tr.v.HistogramSet();
-
- let histA = new tr.v.Histogram('histogram A',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- histA.addSample(Math.random() * 1e3);
- }
- new tr.v.d.TelemetryInfo({
- label: 'Value',
- benchmarkStartMs: now,
- storyDisplayName: 'story A'
- }).addToHistogram(histA);
- histograms.addHistogram(histA);
-
- let histB = new tr.v.Histogram('histogram B',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter,
- tr.v.HistogramBinBoundaries.createExponential(1e-3, 1e3, 20));
- for (let i = 0; i < 100; ++i) {
- histB.addSample(Math.random() * Math.random() * 1e3);
- }
- new tr.v.d.TelemetryInfo({
- label: 'Value',
- benchmarkStartMs: now,
- storyDisplayName: 'story A'
- }).addToHistogram(histB);
- histograms.addHistogram(histB);
-
- let histC = new tr.v.Histogram('histogram C',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter,
- tr.v.HistogramBinBoundaries.createExponential(1e-3, 1e3, 30));
- for (let i = 0; i < 100; ++i) {
- histC.addSample(Math.random() * Math.random() * 1e3);
- }
- new tr.v.d.TelemetryInfo({
- label: 'Value',
- benchmarkStartMs: now,
- storyDisplayName: 'story B'
- }).addToHistogram(histC);
- histograms.addHistogram(histC);
-
- const table = buildTable(this, histograms);
- table.groupingKeys = [
- tr.v.HistogramSet.GROUPINGS.STORY_NAME.key,
- tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME.key,
- ];
-
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
- assert.strictEqual(baseTable.tableRows.length, 2);
+ test('merge_unmergeable', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('foo', {telemetry: {storyDisplayName: 'A', label: 'Value'}}),
+ newHistogram('foo', {
+ boundaries: tr.v.HistogramBinBoundaries.createLinear(0, 1e3, 21),
+ telemetry: {storyDisplayName: 'B', label: 'Value'},
+ }),
+ ]);
+ const table = await buildTable(this, histograms);
+ assert.strictEqual(table.viewState.tableRowStates.size, 1);
+ assert.instanceOf(tr.b.getOnlyElement(getTableCells(table)).histogram,
+ tr.v.HistogramSet);
});
- test('instantiate_1x5', function() {
+ // TODO(benjhayden): Merge this with the pure instantiation 'merged' test.
+ test('instantiate_1x5', async function() {
const histograms = new tr.v.HistogramSet();
for (let i = 0; i < 5; ++i) {
@@ -899,181 +1276,119 @@ tr.b.unittest.testSuite(function() {
}).addToHistogram(hist);
}
- const table = buildTable(this, histograms);
+ const table = await buildTable(this, histograms);
});
- test('instantiate_2x2', function() {
- let histograms = new tr.v.HistogramSet();
-
- let hist0a = new tr.v.Histogram('foo',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist0a.addSample(Math.random() * 1e3);
- }
- histograms.addHistogram(hist0a);
- new tr.v.d.TelemetryInfo({
- label: 'iteration A',
- benchmarkStartMs: new Date().getTime(),
- }).addToHistogram(hist0a);
-
- let hist1a = new tr.v.Histogram('bar',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist1a.addSample(Math.random() * 1e3);
- }
- histograms.addHistogram(hist1a);
- new tr.v.d.TelemetryInfo({
- label: 'iteration A',
- benchmarkStartMs: new Date().getTime(),
- }).addToHistogram(hist1a);
-
- let hist0b = new tr.v.Histogram('foo',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist0b.addSample(Math.random() * 1e3);
- }
- histograms.addHistogram(hist0b);
- new tr.v.d.TelemetryInfo({
- label: 'iteration B',
- benchmarkStartMs: new Date().getTime(),
- }).addToHistogram(hist0b);
-
- let hist1b = new tr.v.Histogram('bar',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter, TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist1b.addSample(Math.random() * 1e3);
- }
- histograms.addHistogram(hist1b);
- new tr.v.d.TelemetryInfo({
- label: 'iteration B',
- benchmarkStartMs: new Date().getTime(),
- }).addToHistogram(hist1b);
-
- const table = buildTable(this, histograms);
-
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
+ // TODO(benjhayden): Merge this with the pure instantiation 'merged' test.
+ test('instantiate_2x2', async function() {
+ const histograms = new tr.v.HistogramSet([
+ newHistogram('foo', {
+ samples: range(0, 100).map(i => Math.random() * 1e3),
+ telemetry: {
+ label: 'iteration A',
+ benchmarkStartMs: new Date().getTime(),
+ },
+ }),
+ newHistogram('bar', {
+ samples: range(0, 100).map(i => Math.random() * 1e3),
+ telemetry: {
+ label: 'iteration A',
+ benchmarkStartMs: new Date().getTime(),
+ },
+ }),
+ newHistogram('foo', {
+ samples: range(0, 100).map(i => Math.random() * 1e3),
+ telemetry: {
+ label: 'iteration B',
+ benchmarkStartMs: new Date().getTime(),
+ },
+ }),
+ newHistogram('bar', {
+ samples: range(0, 100).map(i => Math.random() * 1e3),
+ telemetry: {
+ label: 'iteration B',
+ benchmarkStartMs: new Date().getTime(),
+ },
+ }),
+ ]);
+ const table = await buildTable(this, histograms);
+ const baseTable = getBaseTable(table);
assert.lengthOf(baseTable.tableColumns, 3);
assert.strictEqual('Name',
baseTable.tableColumns[0].title.children[0].textContent);
assert.strictEqual('iteration A',
- baseTable.tableColumns[1].title);
+ baseTable.tableColumns[1].title.textContent);
assert.strictEqual('iteration B',
- baseTable.tableColumns[2].title);
+ baseTable.tableColumns[2].title.textContent);
- table.referenceDisplayLabel = 'iteration A';
+ await table.viewState.update({referenceDisplayLabel: 'iteration A'});
baseTable.rebuild();
assert.strictEqual(1, baseTable.selectedTableColumnIndex);
- assert.strictEqual(
- table.rows_[0].cells.get('iteration B').referenceHistogram,
- table.rows_[0].cells.get('iteration A').histogram);
- assert.strictEqual(
- table.rows_[1].cells.get('iteration B').referenceHistogram,
- table.rows_[1].cells.get('iteration A').histogram);
-
- table.referenceDisplayLabel = 'iteration B';
- baseTable.rebuild();
+ let cells = getTableCells(table);
+ assert.strictEqual(cells[1].referenceHistogram, cells[0].histogram);
+ assert.strictEqual(cells[3].referenceHistogram, cells[2].histogram);
+
+ await table.viewState.update({referenceDisplayLabel: 'iteration B'});
+ cells = getTableCells(table);
assert.strictEqual(2, baseTable.selectedTableColumnIndex);
- assert.strictEqual(
- table.rows_[0].cells.get('iteration A').referenceHistogram,
- table.rows_[0].cells.get('iteration B').histogram);
- assert.strictEqual(
- table.rows_[1].cells.get('iteration A').referenceHistogram,
- table.rows_[1].cells.get('iteration B').histogram);
+ assert.strictEqual(cells[0].referenceHistogram, cells[1].histogram);
+ assert.strictEqual(cells[2].referenceHistogram, cells[3].histogram);
// Test sorting by the reference column when the displayStatistic is a delta
// statistic.
- table.sortColumnIndex = 2;
- baseTable.rebuild();
- let nameCell = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ await table.viewState.update({sortColumnIndex: 2});
+ let nameCell = getNameCells(table)[0];
let originalFirstRow = nameCell.row.name;
// This is either 'foo' or 'bar' depending on Math.random() above.
- table.sortDescending = !table.sortDescending;
+ await table.viewState.update({
+ sortDescending: !table.viewState.sortDescending,
+ });
baseTable.rebuild();
- nameCell = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
+ nameCell = getNameCells(table)[0];
assert.notEqual(originalFirstRow, nameCell.row.name);
});
- test('defaultDisplayLabel', function() {
- let histograms = new tr.v.HistogramSet();
-
- let hist = new tr.v.Histogram('foo',
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter,
- TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist.addSample(Math.random() * 1e3, {
- sample_diagnostic: new tr.v.d.Generic(i),
- });
- }
-
- histograms.addHistogram(hist);
-
- new tr.v.d.TelemetryInfo({
- benchmarkName: 'benchmarkName',
- benchmarkStartMs: 1439708400000,
- }).addToHistogram(hist);
-
- const table = buildTable(this, histograms);
-
- // When TelemetryInfo.label is undefined, displayLabel defaults to
- // benchmarkName + '\n' + benchmarkStartString, which
- // histogram-set-table.buildColumn_ should render as a div containing 2
- // divs.
- let headerCell = tr.b.findDeepElementsMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE-HEADER-CELL')[1];
- let titleSpan = tr.b.findDeepElementMatching(headerCell, 'span#title');
- assert.strictEqual(titleSpan.children[0].tagName, 'DIV');
- assert.lengthOf(titleSpan.children[0].children, 2);
- assert.strictEqual(titleSpan.children[0].children[0].tagName, 'DIV');
- assert.strictEqual(titleSpan.children[0].children[1].tagName, 'DIV');
- });
-
- test('merged', function() {
- let histograms = new tr.v.HistogramSet();
+ // TODO(benjhayden): Move this to a pure instantiation test in
+ // histogram_set_view_test.html
+ test('merged', async function() {
+ const histograms = new tr.v.HistogramSet();
// Add 2^8=256 Histograms, all with the same name, with different
// TelemetryInfos.
- let benchmarkNames = ['bm A', 'bm B'];
- let storyGroupingKeys0 = ['A', 'B'];
- let storyGroupingKeys1 = ['C', 'D'];
- let storyNames = ['story A', 'story B'];
- let starts = [1439708400000, 1439794800000];
- let labels = ['label A', 'label B'];
- let name = 'name '.repeat(20);
-
- for (let benchmarkName of benchmarkNames) {
- for (let storyGroupingKey0 of storyGroupingKeys0) {
- for (let storyGroupingKey1 of storyGroupingKeys1) {
- for (let storyName of storyNames) {
- for (let startMs of starts) {
+ const benchmarkNames = ['bm A', 'bm B'];
+ const storyGroupingKeys0 = ['A', 'B'];
+ const storyGroupingKeys1 = ['C', 'D'];
+ const storyNames = ['story A', 'story B'];
+ const starts = [1439708400000, 1439794800000];
+ const labels = ['label A', 'label B'];
+ const name = 'name '.repeat(20);
+
+ for (const benchmarkName of benchmarkNames) {
+ for (const storyGroupingKey0 of storyGroupingKeys0) {
+ for (const storyGroupingKey1 of storyGroupingKeys1) {
+ for (const storyName of storyNames) {
+ for (const startMs of starts) {
for (let storysetCounter = 0; storysetCounter < 2;
++storysetCounter) {
- for (let label of labels) {
- let hist = new tr.v.Histogram(name,
- tr.b.Unit.byName.timeDurationInMs_smallerIsBetter,
- TEST_BOUNDARIES);
- for (let i = 0; i < 100; ++i) {
- hist.addSample(Math.random() * 1e3, {
- sample_diagnostic: new tr.v.d.Generic(i)});
- }
- hist.description = 'The best description.';
-
- histograms.addHistogram(hist);
-
- new tr.v.d.TelemetryInfo({
- storyGroupingKeys: {
- storyGroupingKey0: storyGroupingKey0,
- storyGroupingKey1: storyGroupingKey1
+ for (const label of labels) {
+ histograms.addHistogram(newHistogram(name, {
+ unit: tr.b.Unit.byName.timeDurationInMs_smallerIsBetter,
+ description: 'The best description.',
+ samples: range(0, 100).map(i => [
+ Math.random() * 1e3, {x: new tr.v.d.Generic(i)}]),
+ telemetry: {
+ storyGroupingKeys: {
+ storyGroupingKey0: storyGroupingKey0,
+ storyGroupingKey1: storyGroupingKey1,
+ },
+ benchmarkName: benchmarkName,
+ storyDisplayName: storyName,
+ benchmarkStartMs: startMs,
+ storysetRepeatCounter: storysetCounter,
+ label: label,
},
- benchmarkName: benchmarkName,
- storyDisplayName: storyName,
- benchmarkStartMs: startMs,
- storysetRepeatCounter: storysetCounter,
- label: label,
- }).addToHistogram(hist);
+ }));
}
}
}
@@ -1082,33 +1397,39 @@ tr.b.unittest.testSuite(function() {
}
}
- const table = buildTable(this, histograms);
- table.groupingKeys = [
- tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME.key,
- tr.v.HistogramSet.GROUPINGS.BENCHMARK_NAME.key,
- 'storyGroupingKey_storyGroupingKey0',
- 'storyGroupingKey_storyGroupingKey1',
- tr.v.HistogramSet.GROUPINGS.STORY_NAME.key,
- tr.v.HistogramSet.GROUPINGS.BENCHMARK_START.key,
- tr.v.HistogramSet.GROUPINGS.STORYSET_REPEAT.key,
- ];
-
- let baseTable = tr.b.findDeepElementMatchingPredicate(
- table, elem => elem.tagName === 'TR-UI-B-TABLE');
+ const table = await buildTable(this, histograms);
+ await table.viewState.update({groupings: [
+ tr.v.HistogramSet.GROUPINGS.HISTOGRAM_NAME,
+ tr.v.HistogramSet.GROUPINGS.BENCHMARK_NAME,
+ new tr.v.HistogramGrouping('storyGroupingKey_storyGroupingKey0',
+ tr.v.d.TelemetryInfo.makeStoryGroupingKeyLabelGetter(
+ 'storyGroupingKey0')),
+ new tr.v.HistogramGrouping('storyGroupingKey_storyGroupingKey1',
+ tr.v.d.TelemetryInfo.makeStoryGroupingKeyLabelGetter(
+ 'storyGroupingKey1')),
+ tr.v.HistogramSet.GROUPINGS.STORY_NAME,
+ tr.v.HistogramSet.GROUPINGS.BENCHMARK_START,
+ tr.v.HistogramSet.GROUPINGS.STORYSET_REPEAT,
+ ]});
+ const baseTable = getBaseTable(table);
assert.lengthOf(baseTable.tableColumns, 3);
- let nameHeaderCell = baseTable.tableColumns[0].title;
+ const nameHeaderCell = baseTable.tableColumns[0].title;
assert.strictEqual('Name', nameHeaderCell.children[0].textContent);
- assert.strictEqual('label A', baseTable.tableColumns[1].title);
- assert.strictEqual('label B', baseTable.tableColumns[2].title);
+ assert.strictEqual('label A', baseTable.tableColumns[1].title.textContent);
+ assert.strictEqual('label B', baseTable.tableColumns[2].title.textContent);
+
+ let nameCell = tr.b.getOnlyElement(getNameCells(table));
+ assert.closeTo(346, nameCell.getBoundingClientRect().width, 1);
- let nameCell = tr.b.findDeepElementMatchingPredicate(
- table, e => e.tagName === 'TR-V-UI-HISTOGRAM-SET-TABLE-NAME-CELL');
- assert.closeTo(321, nameCell.getBoundingClientRect().width, 1);
nameHeaderCell.children[1].click();
+ // toggleNameColumnWidth_ does not await viewState.update()
+ await tr.b.animationFrame();
assert.isBelow(322, nameCell.getBoundingClientRect().width);
+
nameHeaderCell.children[1].click();
- assert.strictEqual(321, nameCell.getBoundingClientRect().width);
+ await tr.b.animationFrame();
+ assert.closeTo(346, nameCell.getBoundingClientRect().width, 1);
assert.lengthOf(baseTable.tableRows, 1);
assert.strictEqual(name, baseTable.tableRows[0].name);
« no previous file with comments | « tracing/tracing/value/ui/histogram_set_table_row.html ('k') | tracing/tracing/value/ui/histogram_set_view.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698