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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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: Code review Created 4 years, 6 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/core/test_utils.html">
9 <link rel="import" href="/tracing/model/event_set.html">
10 <link rel="import" href="/tracing/model/model.html">
11 <link rel="import" href="/tracing/model/power_series.html">
12 <link rel="import" href="/tracing/ui/analysis/alert_sub_view.html">
13 <link rel="import" href="/tracing/ui/analysis/multi_power_sample_sub_view.html">
8 <link rel="import" href="/tracing/ui/base/tab_view.html"> 14 <link rel="import" href="/tracing/ui/base/tab_view.html">
9 15
10 <template id="tab-view-test-template"> 16 <dom-module id='tr-ui-b-tab-view-test-non-sub-view'>
11 <tr-ui-a-tab-view> 17 <template>
12 <p tab-label="Existing Label"> Tab with label already set </p> 18 <div></div>
13 <p> Tab Content with no label </p> 19 </template>
14 <p selected="selected" tab-label="Should be selected"> 20 </dom-module>
15 Already selected tab
16 </p>
17 <p selected="selected" tab-label="Should not be selected">
18 Second already selected tab
19 </p>
20 </tr-ui-a-tab-view>
21 </template>
22 <script> 21 <script>
23 'use strict'; 22 'use strict';
24 23
24 var tr_ui_b_tab_view_test_non_sub_view_behavior = {};
25
26 Polymer({
27 is: 'tr-ui-b-tab-view-test-non-sub-view',
28 behaviors: [tr_ui_b_tab_view_test_non_sub_view_behavior]
29 });
30
25 tr.b.unittest.testSuite(function() { 31 tr.b.unittest.testSuite(function() {
26 var THIS_DOC = document._currentScript.ownerDocument; 32 function createPowerSampleSubView() {
33 var model = tr.c.TestUtils.newModel(function(m) {
34 m.device.powerSeries = new tr.model.PowerSeries(m.device);
27 35
28 test('instantiate', function() { 36 m.device.vSyncTimestamps = [0];
29 37 m.device.powerSeries.addPowerSample(1, 1);
30 var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + 38 m.device.powerSeries.addPowerSample(2, 2);
31 ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + 39 m.device.powerSeries.addPowerSample(3, 3);
32 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + 40 m.device.powerSeries.addPowerSample(4, 2);
33 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
34 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
35 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
36 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
37 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
38 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
39 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
40 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
41 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
42 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
43 'a ipsum. Suspendisse potenti.';
44
45 var tabViewContainer = document.createElement('div');
46 tabViewContainer.style.width = '500px';
47 tabViewContainer.style.height = '200px';
48
49 var tabView = new TracingAnalysisTabView();
50
51 var firstTab = document.createElement('div');
52 Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
53 Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
54
55 var secondTab = document.createElement('div');
56 Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
57 Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
58
59 var thirdTab = document.createElement('div');
60 Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
61 Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
62
63 Polymer.dom(tabView).appendChild(firstTab);
64 Polymer.dom(tabView).appendChild(secondTab);
65 Polymer.dom(tabView).appendChild(thirdTab);
66 Polymer.dom(tabViewContainer).appendChild(tabView);
67
68 this.addHTMLOutput(tabViewContainer);
69
70 Polymer.dom(thirdTab).setAttribute('tab-label', 'Something Different');
71
72 var button = document.createElement('button');
73 Polymer.dom(button).textContent = 'Change label';
74
75 button.addEventListener('click', function() {
76 Polymer.dom(thirdTab).setAttribute('tab-label', 'Label Changed');
77 }); 41 });
78 42
79 tabView.selectedTab = secondTab; 43 var subView = document.createElement('tr-ui-a-multi-power-sample-sub-view');
80 this.addHTMLOutput(button); 44 subView.selection = new tr.model.EventSet(model.device.powerSeries.samples);
45 subView.tabLabel = 'Power samples';
46 return subView;
47 }
48
49 function createAlertSubView() {
50 var slice = tr.c.TestUtils.newSliceEx(
51 {title: 'b', start: 0, duration: 0.002});
52 var alertInfo = new tr.model.EventInfo(
53 'Alert 1', 'Critical alert',
54 [{
55 label: 'Example',
56 textContent: 'Example page',
57 href: 'http://www.example.com'
58 }]);
59
60 var alert = new tr.model.Alert(alertInfo, 5, [slice]);
61 var subView = document.createElement('tr-ui-a-alert-sub-view');
62 subView.selection = new tr.model.EventSet(alert);
63 subView.tabLabel = 'Alerts';
64
65 return subView;
66 }
67
68 test('instantiate_noTabs', function() {
69 var tabView = document.createElement('tr-ui-a-tab-view');
70 tabView.label = 'No items selected.';
71 this.addHTMLOutput(tabView);
81 }); 72 });
82 73
83 74 test('instantiate_oneTab', function() {
84 test('instantiateWithTabHeading', function() { 75 var tabView = document.createElement('tr-ui-a-tab-view');
85 var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + 76 tabView.label = '1 item selected.';
86 ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + 77 tabView.addSubView(createPowerSampleSubView());
87 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + 78 this.addHTMLOutput(tabView);
88 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' +
89 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' +
90 'on porttitor tincidunt. Pellentesque habitant morbi tristique senec' +
91 'tus netus et malesuada fames ac turpis egestas. Suspendisse sed vel' +
92 'it mollis ornare sit amet vel augue. Nullam rhoncus in tellus id. ' +
93 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ' +
94 'cubilia Curae; Nunc at velit consectetur ipsum tempus tempus. Nunc ' +
95 'mattis sapien, a placerat erat. Vivamus ac enim ultricies, gravida ' +
96 'nulla ut, scelerisque magna. Sed a volutpat enim. Morbi vulputate, ' +
97 'sed egestas mollis, urna nisl varius sem, sed venenatis turpis null' +
98 'a ipsum. Suspendisse potenti.';
99
100 var tabViewContainer = document.createElement('div');
101 tabViewContainer.style.width = '500px';
102 tabViewContainer.style.height = '200px';
103
104 var tabView = new TracingAnalysisTabView();
105 tabView.tabStripHeadingText = 'Hello world:';
106
107 var firstTab = document.createElement('div');
108 Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label');
109 Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
110
111 var secondTab = document.createElement('div');
112 Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label');
113 Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>';
114
115 var thirdTab = document.createElement('div');
116 Polymer.dom(thirdTab).setAttribute('tab-label', 'Third Tab Label');
117 Polymer.dom(thirdTab).innerHTML = '<b>' + 'Third Tab Text' + '</b>';
118
119 Polymer.dom(tabView).appendChild(firstTab);
120 Polymer.dom(tabView).appendChild(secondTab);
121 Polymer.dom(tabView).appendChild(thirdTab);
122 Polymer.dom(tabViewContainer).appendChild(tabView);
123
124 this.addHTMLOutput(tabViewContainer);
125 tabView.selectedTab = secondTab;
126 }); 79 });
127 80
128 test('instantiateChildrenAlreadyInside', function() { 81 test('instantiate_twoTabs', function() {
129 var tabViewTemplate = Polymer.dom(THIS_DOC) 82 var tabView = document.createElement('tr-ui-a-tab-view');
130 .querySelector('#tab-view-test-template'); 83 tabView.label = '3 items selected.';
131 // var tabView = tabViewTemplate.createInstance(); 84 tabView.addSubView(createPowerSampleSubView());
132 var tabView = THIS_DOC.importNode(tabViewTemplate.content, true); 85 tabView.addSubView(createAlertSubView());
133 var tabViewContainer = document.createElement('div'); 86 this.addHTMLOutput(tabView);
134 tabViewContainer.style.width = '400px';
135 tabViewContainer.style.height = '200px';
136
137 Polymer.dom(tabViewContainer).appendChild(tabView);
138
139 this.addHTMLOutput(tabViewContainer);
140
141 }); 87 });
142 88
143 test('programaticallySetSelectedTab', function() { 89 test('addSubView_throwsWithNonHtmlElement', function() {
144 var tabViewContainer = document.createElement('div'); 90 var tabView = document.createElement('tr-ui-a-tab-view');
145 tabViewContainer.style.width = '500px';
146 tabViewContainer.style.height = '200px';
147 91
148 var tabView = new TracingAnalysisTabView(); 92 assert.throws(function() {
149 93 tabView.addSubView(1);
150 var t1 = document.createElement('div'); 94 }, 'Sub-view being added must be a registered Polymer element with the ' +
151 var t2 = document.createElement('div'); 95 'sub-view behavior');
152 var t3 = document.createElement('div');
153
154 Polymer.dom(tabView).appendChild(t1);
155 Polymer.dom(tabView).appendChild(t2);
156 Polymer.dom(tabView).appendChild(t3);
157
158 assert.isUndefined(tabView.selectedTab);
159 tabView.selectedTab = t1;
160
161 assert.isTrue(t1.hasAttribute('selected'));
162 assert.isFalse(t2.hasAttribute('selected'));
163 assert.isFalse(t3.hasAttribute('selected'));
164 assert.isTrue(Object.is(t1, tabView.selectedTab));
165
166 tabView.selectedTab = t2;
167 assert.isFalse(t1.hasAttribute('selected'));
168 assert.isTrue(t2.hasAttribute('selected'));
169 assert.isFalse(t3.hasAttribute('selected'));
170 assert.isTrue(Object.is(t2, tabView.selectedTab));
171
172 tabView.selectedTab = t3;
173 assert.isFalse(t1.hasAttribute('selected'));
174 assert.isFalse(t2.hasAttribute('selected'));
175 assert.isTrue(t3.hasAttribute('selected'));
176 assert.isTrue(Object.is(t3, tabView.selectedTab));
177
178 t1.selected = true;
179 assert.isTrue(t1.hasAttribute('selected'));
180 assert.isFalse(t2.hasAttribute('selected'));
181 assert.isFalse(t3.hasAttribute('selected'));
182 assert.isTrue(Object.is(t1, tabView.selectedTab));
183
184 // Make sure just randomly setting a tab as not selected does not
185 // break the existing selection.
186 t2.selected = false;
187 t3.selected = false;
188 assert.isTrue(t1.hasAttribute('selected'));
189 assert.isFalse(t2.hasAttribute('selected'));
190 assert.isFalse(t3.hasAttribute('selected'));
191 assert.isTrue(Object.is(t1, tabView.selectedTab));
192
193 t3.selected = true;
194 assert.isFalse(t1.hasAttribute('selected'));
195 assert.isFalse(t2.hasAttribute('selected'));
196 assert.isTrue(t3.hasAttribute('selected'));
197 assert.isTrue(Object.is(t3, tabView.selectedTab));
198
199 Polymer.dom(tabViewContainer).appendChild(tabView);
200
201 this.addHTMLOutput(tabViewContainer);
202 }); 96 });
203 97
204 /** 98 test('addSubView_throwsWithNonPolymerHtmlElement', function() {
205 * This test checks that if an element has a selected property already set, 99 var tabView = document.createElement('tr-ui-a-tab-view');
206 * before being attached to the tabView, it still gets selected if the
207 * property is true, after it gets attached.
208 */
209 test('instantiateSetSelectedTabAlreadySet', function() {
210 var tabViewContainer = document.createElement('div');
211 tabViewContainer.style.width = '500px';
212 tabViewContainer.style.height = '200px';
213 100
214 var tabView = new TracingAnalysisTabView(); 101 assert.throws(function() {
215 102 tabView.addSubView(document.createElement('p'));
216 var t1 = document.createElement('div'); 103 }, 'Sub-view being added must be a registered Polymer element with the ' +
217 Polymer.dom(t1).textContent = 'This text should BE visible.'; 104 'sub-view behavior');
218 var t2 = document.createElement('div');
219 Polymer.dom(t2).textContent = 'This text should NOT be visible.';
220 var t3 = document.createElement('div');
221 Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
222
223 t1.selected = true;
224 t2.selected = false;
225 t3.selected = false;
226
227 Polymer.dom(tabView).appendChild(t1);
228 Polymer.dom(tabView).appendChild(t2);
229 Polymer.dom(tabView).appendChild(t3);
230
231 Polymer.dom(t1).setAttribute('tab-label', 'This should be selected');
232 Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
233 Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
234
235 Polymer.dom(tabViewContainer).appendChild(tabView);
236
237 this.addHTMLOutput(tabViewContainer);
238 }); 105 });
239 106
240 test('selectingInvalidTabWorks', function() { 107 test('addSubView_throwsWithNonAnalysisViewPolymerElement', function() {
241 var tabView = new TracingAnalysisTabView(); 108 var tabView = document.createElement('tr-ui-a-tab-view');
242 var t1 = document.createElement('div');
243 var t2 = document.createElement('div');
244 var t3 = document.createElement('div');
245 var invalidChild = document.createElement('div');
246 109
247 Polymer.dom(tabView).appendChild(t1); 110 assert.throws(function() {
248 Polymer.dom(tabView).appendChild(t2); 111 tabView.addSubView(
249 Polymer.dom(tabView).appendChild(t3); 112 document.createElement('tr-ui-b-tab-view-test-non-sub-view'));
250 113 }, 'Sub-view being added must be a registered Polymer element with the ' +
251 tabView.selectedTab = t1; 114 'sub-view behavior');
252
253 assert.equal(tabView.selectedTab, t1);
254
255 // Make sure that selecting an invalid tab does not break the current
256 // selection.
257 tabView.selectedTab = invalidChild;
258 assert.equal(t1, tabView.selectedTab);
259
260 // Also make sure the invalidChild does not influence the tab view when
261 // it has a selected property set.
262 invalidChild.selected = true;
263 tabView.selectedTab = invalidChild;
264 assert.equal(t1, tabView.selectedTab);
265 }); 115 });
266 116
267 test('changeTabCausesEvent', function() { 117 test('clearSubViews_selectedSubViewNullAfter', function() {
268 var tabView = new TracingAnalysisTabView(); 118 var tabView = document.createElement('tr-ui-a-tab-view');
269 var t1 = document.createElement('div'); 119 tabView.label = '3 items selected.';
270 var t2 = document.createElement('div'); 120 tabView.addSubView(createPowerSampleSubView());
271 var invalidChild = document.createElement('div'); 121 tabView.addSubView(createAlertSubView());
272 122
273 Polymer.dom(tabView).appendChild(t1); 123 tabView.clearSubViews();
274 Polymer.dom(tabView).appendChild(t2);
275 124
276 var numChangeEvents = 0; 125 assert.isUndefined(tabView.selectedSubView);
277 tabView.addEventListener('selected-tab-change', function() {
278 numChangeEvents++;
279 });
280 tabView.selectedTab = t1;
281 assert.equal(numChangeEvents, 1);
282 tabView.selectedTab = t1;
283 assert.equal(numChangeEvents, 1);
284 tabView.selectedTab = t2;
285 assert.equal(numChangeEvents, 2);
286 tabView.selectedTab = undefined;
287 assert.equal(numChangeEvents, 3);
288 Polymer.dom.flush();
289 });
290
291 /**
292 * This test makes sure that removing the selected tab does not select
293 * any other tab.
294 */
295 test('instantiateRemovingSelectedTab', function() {
296 var tabViewContainer = document.createElement('div');
297 tabViewContainer.style.width = '500px';
298 tabViewContainer.style.height = '200px';
299
300 var tabView = new TracingAnalysisTabView();
301
302 var t1 = document.createElement('div');
303 Polymer.dom(t1).textContent = 'This text should BE visible.';
304 var t2 = document.createElement('div');
305 Polymer.dom(t2).textContent = 'This text should NOT be visible.';
306 var t3 = document.createElement('div');
307 Polymer.dom(t3).textContent = 'This text should NOT be visible, also.';
308
309 Polymer.dom(tabView).appendChild(t1);
310 Polymer.dom(tabView).appendChild(t2);
311 Polymer.dom(tabView).appendChild(t3);
312
313 Polymer.dom(t1).setAttribute('tab-label', 'This should not exist');
314 Polymer.dom(t2).setAttribute('tab-label', 'Not selected');
315 Polymer.dom(t3).setAttribute('tab-label', 'Not selected');
316
317 tabView.selectedTab = t1;
318 Polymer.dom(tabView).removeChild(t1);
319
320 Polymer.dom(tabViewContainer).appendChild(tabView);
321
322 this.addHTMLOutput(tabViewContainer);
323 }); 126 });
324 }); 127 });
325 </script> 128 </script>
OLDNEW
« 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