src/third_party/trace-viewer/trace_viewer/tracing/analysis/tab_view_test.html

   1 <!DOCTYPE html>
   2 <!--
   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
   5 found in the LICENSE file.
   6 -->
   7
   8 <link rel="import" href="/tracing/analysis/tab_view.html">
   9
  10 <template id="tab-view-test-template">
  11   <tracing-analysis-tab-view>
  12     <p tab-label="Existing Label"> Tab with label already set </p>
  13     <p> Tab Content with no label </p>
  14     <p selected="selected" tab-label="Should be selected">
  15       Already selected tab
  16     </p>
  17     <p selected="selected" tab-label="Should not be selected">
  18       Second already selected tab
  19     </p>
  20   </tracing-analysis-tab-view>
  21 </template>
  22 <script>
  23 'use strict';
  24
  25 tvcm.unittest.testSuite(function() {
  26   var THIS_DOC = document._currentScript.ownerDocument;
  27
  28   test('instantiate', function() {
  29
  30     var TAB_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
  31         ' Cras eleifend elit nec erat tristique pellentesque. Cras placerat ' +
  32         'lectus, sed semper tortor ornare quis. Maecenas vitae hendrerit. ' +
  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     firstTab.setAttribute('tab-label', 'First Tab Label');
  53     firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>';
  54
  55     var secondTab = document.createElement('div');
  56     secondTab.setAttribute('tab-label', 'Second Tab Label');
  57     secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>';
  58
  59     var thirdTab = document.createElement('div');
  60     thirdTab.setAttribute('tab-label', 'Third Tab Label');
  61     thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>';
  62
  63     tabView.appendChild(firstTab);
  64     tabView.appendChild(secondTab);
  65     tabView.appendChild(thirdTab);
  66     tabViewContainer.appendChild(tabView);
  67
  68     this.addHTMLOutput(tabViewContainer);
  69
  70     thirdTab.setAttribute('tab-label', 'Something Different');
  71
  72     var button = document.createElement('button');
  73     button.textContent = 'Change label';
  74
  75     button.addEventListener('click', function() {
  76       thirdTab.setAttribute('tab-label', 'Label Changed');
  77     });
  78
  79     tabView.selectedTab = secondTab;
  80     this.addHTMLOutput(button);
  81   });
  82
  83   test('instantiateChildrenAlreadyInside', function() {
  84     var tabViewTemplate = THIS_DOC.querySelector('#tab-view-test-template');
  85     var tabView = tabViewTemplate.createInstance();
  86
  87     var tabViewContainer = document.createElement('div');
  88     tabViewContainer.style.width = '400px';
  89     tabViewContainer.style.height = '200px';
  90
  91     tabViewContainer.appendChild(tabView);
  92
  93     this.addHTMLOutput(tabViewContainer);
  94
  95   });
  96
  97   test('programaticallySetSelectedTab', function() {
  98     var tabViewContainer = document.createElement('div');
  99     tabViewContainer.style.width = '500px';
 100     tabViewContainer.style.height = '200px';
 101
 102     var tabView = new TracingAnalysisTabView();
 103
 104     var t1 = document.createElement('div');
 105     var t2 = document.createElement('div');
 106     var t3 = document.createElement('div');
 107
 108     tabView.appendChild(t1);
 109     tabView.appendChild(t2);
 110     tabView.appendChild(t3);
 111
 112     assertEquals(tabView.selectedTab, undefined);
 113     tabView.selectedTab = t1;
 114
 115     assertTrue(t1.hasAttribute('selected'));
 116     assertFalse(t2.hasAttribute('selected'));
 117     assertFalse(t3.hasAttribute('selected'));
 118     assertTrue(Object.is(t1, tabView.selectedTab));
 119
 120     tabView.selectedTab = t2;
 121     assertFalse(t1.hasAttribute('selected'));
 122     assertTrue(t2.hasAttribute('selected'));
 123     assertFalse(t3.hasAttribute('selected'));
 124     assertTrue(Object.is(t2, tabView.selectedTab));
 125
 126     tabView.selectedTab = t3;
 127     assertFalse(t1.hasAttribute('selected'));
 128     assertFalse(t2.hasAttribute('selected'));
 129     assertTrue(t3.hasAttribute('selected'));
 130     assertTrue(Object.is(t3, tabView.selectedTab));
 131
 132     t1.selected = true;
 133     assertTrue(t1.hasAttribute('selected'));
 134     assertFalse(t2.hasAttribute('selected'));
 135     assertFalse(t3.hasAttribute('selected'));
 136     assertTrue(Object.is(t1, tabView.selectedTab));
 137
 138     // Make sure just randomly setting a tab as not selected does not
 139     // break the existing selection.
 140     t2.selected = false;
 141     t3.selected = false;
 142     assertTrue(t1.hasAttribute('selected'));
 143     assertFalse(t2.hasAttribute('selected'));
 144     assertFalse(t3.hasAttribute('selected'));
 145     assertTrue(Object.is(t1, tabView.selectedTab));
 146
 147     t3.selected = true;
 148     assertFalse(t1.hasAttribute('selected'));
 149     assertFalse(t2.hasAttribute('selected'));
 150     assertTrue(t3.hasAttribute('selected'));
 151     assertTrue(Object.is(t3, tabView.selectedTab));
 152
 153     tabViewContainer.appendChild(tabView);
 154
 155     this.addHTMLOutput(tabViewContainer);
 156   });
 157
 158   /**
 159    * This test checks that if an element has a selected property already set,
 160    * before being attached to the tabView, it still gets selected if the
 161    * property is true, after it gets attached.
 162    */
 163   test('instantiateSetSelectedTabAlreadySet', function() {
 164     var tabViewContainer = document.createElement('div');
 165     tabViewContainer.style.width = '500px';
 166     tabViewContainer.style.height = '200px';
 167
 168     var tabView = new TracingAnalysisTabView();
 169
 170     var t1 = document.createElement('div');
 171     t1.textContent = 'This text should BE visible.';
 172     var t2 = document.createElement('div');
 173     t2.textContent = 'This text should NOT be visible.';
 174     var t3 = document.createElement('div');
 175     t3.textContent = 'This text should NOT be visible, also.';
 176
 177     t1.selected = true;
 178     t2.selected = false;
 179     t3.selected = false;
 180
 181     tabView.appendChild(t1);
 182     tabView.appendChild(t2);
 183     tabView.appendChild(t3);
 184
 185     t1.setAttribute('tab-label', 'This should be selected');
 186     t2.setAttribute('tab-label', 'Not selected');
 187     t3.setAttribute('tab-label', 'Not selected');
 188
 189     tabViewContainer.appendChild(tabView);
 190
 191     this.addHTMLOutput(tabViewContainer);
 192   });
 193
 194   test('selectingInvalidTabWorks', function() {
 195     var tabView = new TracingAnalysisTabView();
 196     var t1 = document.createElement('div');
 197     var t2 = document.createElement('div');
 198     var t3 = document.createElement('div');
 199     var invalidChild = document.createElement('div');
 200
 201     tabView.appendChild(t1);
 202     tabView.appendChild(t2);
 203     tabView.appendChild(t3);
 204
 205     tabView.selectedTab = t1;
 206
 207     assertEquals(tabView.selectedTab, t1);
 208
 209     // Make sure that selecting an invalid tab does not break the current
 210     // selection.
 211     tabView.selectedTab = invalidChild;
 212     assertEquals(t1, tabView.selectedTab);
 213
 214     // Also make sure the invalidChild does not influence the tab view when
 215     // it has a selected property set.
 216     invalidChild.selected = true;
 217     tabView.selectedTab = invalidChild;
 218     assertEquals(t1, tabView.selectedTab);
 219   });
 220
 221   /**
 222    * This test makes sure that removing the selected tab does not select
 223    * any other tab.
 224    */
 225   test('instantiateRemovingSelectedTab', function() {
 226     var tabViewContainer = document.createElement('div');
 227     tabViewContainer.style.width = '500px';
 228     tabViewContainer.style.height = '200px';
 229
 230     var tabView = new TracingAnalysisTabView();
 231
 232     var t1 = document.createElement('div');
 233     t1.textContent = 'This text should BE visible.';
 234     var t2 = document.createElement('div');
 235     t2.textContent = 'This text should NOT be visible.';
 236     var t3 = document.createElement('div');
 237     t3.textContent = 'This text should NOT be visible, also.';
 238
 239     tabView.appendChild(t1);
 240     tabView.appendChild(t2);
 241     tabView.appendChild(t3);
 242
 243     t1.setAttribute('tab-label', 'This should not exist');
 244     t2.setAttribute('tab-label', 'Not selected');
 245     t3.setAttribute('tab-label', 'Not selected');
 246
 247     tabView.selectedTab = t1;
 248     tabView.removeChild(t1);
 249
 250     tabViewContainer.appendChild(tabView);
 251
 252     this.addHTMLOutput(tabViewContainer);
 253   });
 254 });
 255 </script>