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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tracing/tracing/ui/base/tab_view_test.html

Issue 2023283002: [polymer] Rewrite the analysis tab view (Closed) Base URL: git@github.com:zeptonaut/catapult.git@polymer10_rewrite_tab_view2
Patch Set: Created 4 years, 7 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
« tracing/tracing/ui/base/tab_view.html ('K') | « tracing/tracing/ui/base/tab_view.html ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tracing/tracing/ui/base/tab_view_test.html
diff --git a/tracing/tracing/ui/base/tab_view_test.html b/tracing/tracing/ui/base/tab_view_test.html
index cb79ba7b38c72516e9f866bcee54df034ddd6bbb..4548dae694f1cb0d54df61812393d23e4a2afcc6 100644
--- a/tracing/tracing/ui/base/tab_view_test.html
+++ b/tracing/tracing/ui/base/tab_view_test.html
@@ -1,325 +1,127 @@
<!DOCTYPE html>
<!--
-Copyright (c) 2014 The Chromium Authors. All rights reserved.
+Copyright 2016 The Chromium Authors. All rights reserved.
petrcermak 2016/06/01 16:47:10 ditto: I don't think you should change this.
charliea (OOO until 10-5) 2016/06/01 17:33:03 Done.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
+<link rel="import" href="/tracing/core/test_utils.html">
+<link rel="import" href="/tracing/model/event_set.html">
+<link rel="import" href="/tracing/model/model.html">
+<link rel="import" href="/tracing/model/power_series.html">
+<link rel="import" href="/tracing/ui/analysis/alert_sub_view.html">
+<link rel="import" href="/tracing/ui/analysis/multi_power_sample_sub_view.html">
<link rel="import" href="/tracing/ui/base/tab_view.html">
-<template id="tab-view-test-template">
- <tr-ui-a-tab-view>
- <p tab-label="Existing Label"> Tab with label already set </p>
- <p> Tab Content with no label </p>
- <p selected="selected" tab-label="Should be selected">
- Already selected tab
- </p>
- <p selected="selected" tab-label="Should not be selected">
- Second already selected tab
- </p>
- </tr-ui-a-tab-view>
-</template>
+<dom-module id='tr-ui-b-tab-view-test-non-sub-view'>
+ <template>
+ <div></div>
+ </template>
+</dom-module>
<script>
'use strict';
-tr.b.unittest.testSuite(function() {
- var THIS_DOC = document._currentScript.ownerDocument;
-
- test('instantiate', function() {
-
- var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
- ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' +
- 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' +
- 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
- 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
- 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
- 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
- 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
- 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
- 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
- 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
- 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
- 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
- 'a ipsum. Suspendisse potenti.';
-
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '500px';
- tabViewContainer.style.height = '200px';
-
- var tabView = new TracingAnalysisTabView();
-
- var firstTab = document.createElement('div');
- Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
- Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
-
- var secondTab = document.createElement('div');
- Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
- Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
+var tr_ui_b_tab_view_test_non_sub_view_behavior = {};
- var thirdTab = document.createElement('div');
- Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
- Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
-
- Polymer.dom(tabView).appendChild(firstTab);
- Polymer.dom(tabView).appendChild(secondTab);
- Polymer.dom(tabView).appendChild(thirdTab);
- Polymer.dom(tabViewContainer).appendChild(tabView);
-
- this.addHTMLOutput(tabViewContainer);
-
- Polymer.dom(thirdTab).setAttribute('tab-label', 'Something Different');
-
- var button = document.createElement('button');
- Polymer.dom(button).textContent = 'Change label';
-
- button.addEventListener('click', function() {
- Polymer.dom(thirdTab).setAttribute('tab-label', 'Label Changed');
- });
+Polymer({
+ is: 'tr-ui-b-tab-view-test-non-sub-view',
+ behaviors: [tr_ui_b_tab_view_test_non_sub_view_behavior]
+});
- tabView.selectedTab = secondTab;
- this.addHTMLOutput(button);
+tr.b.unittest.testSuite(function() {
+ function createPowerSampleSubView() {
+ var model = new tr.Model();
petrcermak 2016/06/01 16:47:10 I suggest you create a model via tr.c.TestUtils.ne
charliea (OOO until 10-5) 2016/06/01 17:33:03 Done.
+ var series = new tr.model.PowerSeries(model.device);
+
+ model.device.vSyncTimestamps = [0];
+ series.addPowerSample(1, 1);
+ series.addPowerSample(2, 2);
+ series.addPowerSample(3, 3);
+ series.addPowerSample(4, 2);
+
+ var subView = document.createElement('tr-ui-a-multi-power-sample-sub-view');
+ subView.selection = new tr.model.EventSet(series.samples);
+ subView.tabLabel = 'Power samples';
+ return subView;
+ }
+
+ function createAlertSubView() {
+ var slice = tr.c.TestUtils.newSliceEx(
+ {title: 'b', start: 0, duration: 0.002});
+ var alertInfo = new tr.model.EventInfo(
+ 'Alert 1', 'Critical alert',
+ [{
+ label: 'Example',
+ textContent: 'Example page',
+ href: 'http://www.example.com'
+ }]);
+
+ var alert = new tr.model.Alert(alertInfo, 5, [slice]);
+ var subView = document.createElement('tr-ui-a-alert-sub-view');
+ subView.selection = new tr.model.EventSet(alert);
+ subView.tabLabel = 'Alerts';
+
+ return subView;
+ }
+
+ test('instantiate_noTabs', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
+ tabView.label = 'No items selected.';
+ this.addHTMLOutput(tabView);
});
-
- test('instantiateWithTabHeading', function() {
- var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
- ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' +
- 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' +
- 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
- 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
- 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
- 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
- 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
- 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
- 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
- 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
- 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
- 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
- 'a ipsum. Suspendisse potenti.';
-
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '500px';
- tabViewContainer.style.height = '200px';
-
- var tabView = new TracingAnalysisTabView();
- tabView.tabStripHeadingText = 'Hello world:';
-
- var firstTab = document.createElement('div');
- Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
- Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
-
- var secondTab = document.createElement('div');
- Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
- Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
-
- var thirdTab = document.createElement('div');
- Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
- Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
-
- Polymer.dom(tabView).appendChild(firstTab);
- Polymer.dom(tabView).appendChild(secondTab);
- Polymer.dom(tabView).appendChild(thirdTab);
- Polymer.dom(tabViewContainer).appendChild(tabView);
-
- this.addHTMLOutput(tabViewContainer);
- tabView.selectedTab = secondTab;
+ test('instantiate_oneTab', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
+ tabView.label = '1 item selected.';
+ tabView.addSubView(createPowerSampleSubView());
+ this.addHTMLOutput(tabView);
});
- test('instantiateChildrenAlreadyInside', function() {
- var tabViewTemplate = Polymer.dom(THIS_DOC)
- .querySelector('#tab-view-test-template');
- // var tabView = tabViewTemplate.createInstance();
- var tabView = THIS_DOC.importNode(tabViewTemplate.content, true);
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '400px';
- tabViewContainer.style.height = '200px';
-
- Polymer.dom(tabViewContainer).appendChild(tabView);
-
- this.addHTMLOutput(tabViewContainer);
-
+ test('instantiate_twoTabs', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
+ tabView.label = '3 items selected.';
+ tabView.addSubView(createPowerSampleSubView());
+ tabView.addSubView(createAlertSubView());
+ this.addHTMLOutput(tabView);
});
- test('programaticallySetSelectedTab', function() {
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '500px';
- tabViewContainer.style.height = '200px';
-
- var tabView = new TracingAnalysisTabView();
-
- var t1 = document.createElement('div');
- var t2 = document.createElement('div');
- var t3 = document.createElement('div');
-
- Polymer.dom(tabView).appendChild(t1);
- Polymer.dom(tabView).appendChild(t2);
- Polymer.dom(tabView).appendChild(t3);
+ test('addSubView_throwsWithNonHtmlElement', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
- assert.isUndefined(tabView.selectedTab);
- tabView.selectedTab = t1;
-
- assert.isTrue(t1.hasAttribute('selected'));
- assert.isFalse(t2.hasAttribute('selected'));
- assert.isFalse(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t1, tabView.selectedTab));
-
- tabView.selectedTab = t2;
- assert.isFalse(t1.hasAttribute('selected'));
- assert.isTrue(t2.hasAttribute('selected'));
- assert.isFalse(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t2, tabView.selectedTab));
-
- tabView.selectedTab = t3;
- assert.isFalse(t1.hasAttribute('selected'));
- assert.isFalse(t2.hasAttribute('selected'));
- assert.isTrue(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t3, tabView.selectedTab));
-
- t1.selected = true;
- assert.isTrue(t1.hasAttribute('selected'));
- assert.isFalse(t2.hasAttribute('selected'));
- assert.isFalse(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t1, tabView.selectedTab));
-
- // Make sure just randomly setting a tab as not selected does not
- // break the existing selection.
- t2.selected = false;
- t3.selected = false;
- assert.isTrue(t1.hasAttribute('selected'));
- assert.isFalse(t2.hasAttribute('selected'));
- assert.isFalse(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t1, tabView.selectedTab));
-
- t3.selected = true;
- assert.isFalse(t1.hasAttribute('selected'));
- assert.isFalse(t2.hasAttribute('selected'));
- assert.isTrue(t3.hasAttribute('selected'));
- assert.isTrue(Object.is(t3, tabView.selectedTab));
-
- Polymer.dom(tabViewContainer).appendChild(tabView);
-
- this.addHTMLOutput(tabViewContainer);
+ assert.throws(function() {
+ tabView.addSubView(1);
+ }, 'Sub view being added must be a registered Polymer element with the ' +
+ 'sub view behavior');
});
- /**
- * This test checks that if an element has a selected property already set,
- * before being attached to the tabView, it still gets selected if the
- * property is true, after it gets attached.
- */
- test('instantiateSetSelectedTabAlreadySet', function() {
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '500px';
- tabViewContainer.style.height = '200px';
-
- var tabView = new TracingAnalysisTabView();
-
- var t1 = document.createElement('div');
- Polymer.dom(t1).textContent = 'This text should BE visible.';
- var t2 = document.createElement('div');
- Polymer.dom(t2).textContent = 'This text should NOT be visible.';
- var t3 = document.createElement('div');
- Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
-
- t1.selected = true;
- t2.selected = false;
- t3.selected = false;
-
- Polymer.dom(tabView).appendChild(t1);
- Polymer.dom(tabView).appendChild(t2);
- Polymer.dom(tabView).appendChild(t3);
-
- Polymer.dom(t1).setAttribute('tab-label', 'This should be selected');
- Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
- Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
-
- Polymer.dom(tabViewContainer).appendChild(tabView);
+ test('addSubView_throwsWithNonPolymerHtmlElement', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
- this.addHTMLOutput(tabViewContainer);
+ assert.throws(function() {
+ tabView.addSubView(document.createElement('p'));
+ }, 'Sub view being added must be a registered Polymer element with the ' +
+ 'sub view behavior');
});
- test('selectingInvalidTabWorks', function() {
- var tabView = new TracingAnalysisTabView();
- var t1 = document.createElement('div');
- var t2 = document.createElement('div');
- var t3 = document.createElement('div');
- var invalidChild = document.createElement('div');
+ test('addSubView_throwsWithNonAnalysisViewPolymerElement', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
- Polymer.dom(tabView).appendChild(t1);
- Polymer.dom(tabView).appendChild(t2);
- Polymer.dom(tabView).appendChild(t3);
-
- tabView.selectedTab = t1;
-
- assert.equal(tabView.selectedTab, t1);
-
- // Make sure that selecting an invalid tab does not break the current
- // selection.
- tabView.selectedTab = invalidChild;
- assert.equal(t1, tabView.selectedTab);
-
- // Also make sure the invalidChild does not influence the tab view when
- // it has a selected property set.
- invalidChild.selected = true;
- tabView.selectedTab = invalidChild;
- assert.equal(t1, tabView.selectedTab);
+ assert.throws(function() {
+ tabView.addSubView(
+ document.createElement('tr-ui-b-tab-view-test-non-sub-view'));
+ }, 'Sub view being added must be a registered Polymer element with the ' +
+ 'sub view behavior');
});
- test('changeTabCausesEvent', function() {
- var tabView = new TracingAnalysisTabView();
- var t1 = document.createElement('div');
- var t2 = document.createElement('div');
- var invalidChild = document.createElement('div');
-
- Polymer.dom(tabView).appendChild(t1);
- Polymer.dom(tabView).appendChild(t2);
-
- var numChangeEvents = 0;
- tabView.addEventListener('selected-tab-change', function() {
- numChangeEvents++;
- });
- tabView.selectedTab = t1;
- assert.equal(numChangeEvents, 1);
- tabView.selectedTab = t1;
- assert.equal(numChangeEvents, 1);
- tabView.selectedTab = t2;
- assert.equal(numChangeEvents, 2);
- tabView.selectedTab = undefined;
- assert.equal(numChangeEvents, 3);
- Polymer.dom.flush();
- });
-
- /**
- * This test makes sure that removing the selected tab does not select
- * any other tab.
- */
- test('instantiateRemovingSelectedTab', function() {
- var tabViewContainer = document.createElement('div');
- tabViewContainer.style.width = '500px';
- tabViewContainer.style.height = '200px';
-
- var tabView = new TracingAnalysisTabView();
-
- var t1 = document.createElement('div');
- Polymer.dom(t1).textContent = 'This text should BE visible.';
- var t2 = document.createElement('div');
- Polymer.dom(t2).textContent = 'This text should NOT be visible.';
- var t3 = document.createElement('div');
- Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
-
- Polymer.dom(tabView).appendChild(t1);
- Polymer.dom(tabView).appendChild(t2);
- Polymer.dom(tabView).appendChild(t3);
-
- Polymer.dom(t1).setAttribute('tab-label', 'This should not exist');
- Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
- Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
-
- tabView.selectedTab = t1;
- Polymer.dom(tabView).removeChild(t1);
+ test('clearSubViews_selectedSubViewNullAfter', function() {
+ var tabView = document.createElement('tr-ui-a-tab-view');
+ tabView.label = '3 items selected.';
+ tabView.addSubView(createPowerSampleSubView());
+ tabView.addSubView(createAlertSubView());
- Polymer.dom(tabViewContainer).appendChild(tabView);
+ tabView.clearSubViews();
- this.addHTMLOutput(tabViewContainer);
+ assert.isUndefined(tabView.selectedSubView);
});
});
</script>
« tracing/tracing/ui/base/tab_view.html ('K') | « tracing/tracing/ui/base/tab_view.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698