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

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: 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 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.
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 = 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.
34 var series = new tr.model.PowerSeries(model.device);
27 35
28 test('instantiate', function() { 36 model.device.vSyncTimestamps = [0];
37 series.addPowerSample(1, 1);
38 series.addPowerSample(2, 2);
39 series.addPowerSample(3, 3);
40 series.addPowerSample(4, 2);
29 41
30 var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + 42 var subView = document.createElement('tr-ui-a-multi-power-sample-sub-view');
31 ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + 43 subView.selection = new tr.model.EventSet(series.samples);
32 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + 44 subView.tabLabel = 'Power samples';
33 'Cras mattis interdum nisi, eget egestas dui iaculis ultricies. Proi' + 45 return subView;
34 'n magna at nibh fringilla tincidunt id vitae ante. Fusce nec urna n' + 46 }
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 47
45 var tabViewContainer = document.createElement('div'); 48 function createAlertSubView() {
46 tabViewContainer.style.width = '500px'; 49 var slice = tr.c.TestUtils.newSliceEx(
47 tabViewContainer.style.height = '200px'; 50 {title: 'b', start: 0, duration: 0.002});
51 var alertInfo = new tr.model.EventInfo(
52 'Alert 1', 'Critical alert',
53 [{
54 label: 'Example',
55 textContent: 'Example page',
56 href: 'http://www.example.com'
57 }]);
48 58
49 var tabView = new TracingAnalysisTabView(); 59 var alert = new tr.model.Alert(alertInfo, 5, [slice]);
60 var subView = document.createElement('tr-ui-a-alert-sub-view');
61 subView.selection = new tr.model.EventSet(alert);
62 subView.tabLabel = 'Alerts';
50 63
51 var firstTab = document.createElement('div'); 64 return subView;
52 Polymer.dom(firstTab).setAttribute('tab-label', 'First Tab Label'); 65 }
53 Polymer.dom(firstTab).innerHTML = '<p>' + TAB_TEXT + '<p>';
54 66
55 var secondTab = document.createElement('div'); 67 test('instantiate_noTabs', function() {
56 Polymer.dom(secondTab).setAttribute('tab-label', 'Second Tab Label'); 68 var tabView = document.createElement('tr-ui-a-tab-view');
57 Polymer.dom(secondTab).innerHTML = '<b>' + 'Second Tab Text' + '</b>'; 69 tabView.label = 'No items selected.';
58 70 this.addHTMLOutput(tabView);
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 });
78
79 tabView.selectedTab = secondTab;
80 this.addHTMLOutput(button);
81 }); 71 });
82 72
83 73 test('instantiate_oneTab', function() {
84 test('instantiateWithTabHeading', function() { 74 var tabView = document.createElement('tr-ui-a-tab-view');
85 var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + 75 tabView.label = '1 item selected.';
86 ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' + 76 tabView.addSubView(createPowerSampleSubView());
87 'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' + 77 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 }); 78 });
127 79
128 test('instantiateChildrenAlreadyInside', function() { 80 test('instantiate_twoTabs', function() {
129 var tabViewTemplate = Polymer.dom(THIS_DOC) 81 var tabView = document.createElement('tr-ui-a-tab-view');
130 .querySelector('#tab-view-test-template'); 82 tabView.label = '3 items selected.';
131 // var tabView = tabViewTemplate.createInstance(); 83 tabView.addSubView(createPowerSampleSubView());
132 var tabView = THIS_DOC.importNode(tabViewTemplate.content, true); 84 tabView.addSubView(createAlertSubView());
133 var tabViewContainer = document.createElement('div'); 85 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 }); 86 });
142 87
143 test('programaticallySetSelectedTab', function() { 88 test('addSubView_throwsWithNonHtmlElement', function() {
144 var tabViewContainer = document.createElement('div'); 89 var tabView = document.createElement('tr-ui-a-tab-view');
145 tabViewContainer.style.width = '500px';
146 tabViewContainer.style.height = '200px';
147 90
148 var tabView = new TracingAnalysisTabView(); 91 assert.throws(function() {
149 92 tabView.addSubView(1);
150 var t1 = document.createElement('div'); 93 }, 'Sub view being added must be a registered Polymer element with the ' +
151 var t2 = document.createElement('div'); 94 '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 }); 95 });
203 96
204 /** 97 test('addSubView_throwsWithNonPolymerHtmlElement', function() {
205 * This test checks that if an element has a selected property already set, 98 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 99
214 var tabView = new TracingAnalysisTabView(); 100 assert.throws(function() {
215 101 tabView.addSubView(document.createElement('p'));
216 var t1 = document.createElement('div'); 102 }, 'Sub view being added must be a registered Polymer element with the ' +
217 Polymer.dom(t1).textContent = 'This text should BE visible.'; 103 '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 }); 104 });
239 105
240 test('selectingInvalidTabWorks', function() { 106 test('addSubView_throwsWithNonAnalysisViewPolymerElement', function() {
241 var tabView = new TracingAnalysisTabView(); 107 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 108
247 Polymer.dom(tabView).appendChild(t1); 109 assert.throws(function() {
248 Polymer.dom(tabView).appendChild(t2); 110 tabView.addSubView(
249 Polymer.dom(tabView).appendChild(t3); 111 document.createElement('tr-ui-b-tab-view-test-non-sub-view'));
250 112 }, 'Sub view being added must be a registered Polymer element with the ' +
251 tabView.selectedTab = t1; 113 '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 }); 114 });
266 115
267 test('changeTabCausesEvent', function() { 116 test('clearSubViews_selectedSubViewNullAfter', function() {
268 var tabView = new TracingAnalysisTabView(); 117 var tabView = document.createElement('tr-ui-a-tab-view');
269 var t1 = document.createElement('div'); 118 tabView.label = '3 items selected.';
270 var t2 = document.createElement('div'); 119 tabView.addSubView(createPowerSampleSubView());
271 var invalidChild = document.createElement('div'); 120 tabView.addSubView(createAlertSubView());
272 121
273 Polymer.dom(tabView).appendChild(t1); 122 tabView.clearSubViews();
274 Polymer.dom(tabView).appendChild(t2);
275 123
276 var numChangeEvents = 0; 124 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 }); 125 });
324 }); 126 });
325 </script> 127 </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