[ui-qe] Adding data-testid attribute to the Hue page HTML elements (#3652)

ananya-agarwal · web-flow · commit d32163fd8e2b · 2024-05-17T11:33:29.000Z
* Adding data-testid attribute to the Hue page HTML elements

* Changing names of the data-testIds based on reviews

* Run js lint

* Removed the first data-testId

* Changing to some meaningful dataTestIds names

* Changes based on Johan's review-2

* 4th query

* Snapshot testing-1st query

* snapshot testing for 12th query

* passing dataTestId as a prperty in knockout js file

* changing names for query number 14

* Fix tests

* Fixing based on the PR reviews by Johan

* Reverting the change for the job-browswer.mako file

* Save as button

* Snapshot testing npm run dev-test

* ko.dropDown.js adding as an attribute again based on review

* Continuing the above commit

* Fixing the issues after the PR Review

* Fixes after review

* Query number 15 adding at one more place

* Changing names for better consistency

* Naming consistency-2

* Naming Consistency-3

* Correction for the SaveAs button in the editor

* Fixing the editorExecuteButton earlier QueryRunButton-4th

* Adding the 5th to 4 new places

* adding more files for refreshButton-10th query

* Corrections based on Johan's PR review

* rename save as to save

* Fixing for query number 11 as per Johan PR review

* Fixing the query 7th based on Johan PR review
diff --git a/desktop/core/src/desktop/js/components/sidebar/AccordionItem.vue b/desktop/core/src/desktop/js/components/sidebar/AccordionItem.vue
@@ -29,6 +29,7 @@
   >
     <button
       class="sidebar-base-btn sidebar-sidebar-item"
+      :data-testid="`sidebar--${item.displayName.replace(/\s/g, '-').toLowerCase()}--button`"
       :aria-label="item.displayName"
       :class="{ 'sidebar-active': isActive, 'sidebar-accordion-item-btn-open': tooltip }"
       @click="toggleOpen"
diff --git a/desktop/core/src/desktop/js/ko/components/__snapshots__/ko.dropDown.test.js.snap b/desktop/core/src/desktop/js/ko/components/__snapshots__/ko.dropDown.test.js.snap
@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.dropDown.js should render component 1`] = `
-"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;hue-drop-down&quot;, params: params }\\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"toggle: dropDownVisible, css: { 'blue': dropDownVisible }\\">
+"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;hue-drop-down&quot;, params: params }\\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"
+    attr: {
+      'data-testid': dataTestId
+    },
+    toggle: dropDownVisible,
+    css: { 'blue': dropDownVisible }\\">
     <!-- ko if: icon --><!-- /ko -->
     <!-- ko if: !noLabel && value --><!-- /ko -->
     <i class=\\"fa fa-caret-down\\"></i>
diff --git a/desktop/core/src/desktop/js/ko/components/__snapshots__/ko.fieldSamples.test.js.snap b/desktop/core/src/desktop/js/ko/components/__snapshots__/ko.fieldSamples.test.js.snap
@@ -32,7 +32,12 @@ exports[`ko.fieldSamples.js should render component 1`] = `
     </div>
     <!-- ko if: showOperations -->
     <div class=\\"context-popover-sample-controls\\">
-      <div class=\\"margin-left-10 inline-block\\" data-bind=\\"component: { name: 'hue-drop-down', params: { value: operation, entries: operations } }\\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"toggle: dropDownVisible, css: { 'blue': dropDownVisible }\\">
+      <div class=\\"margin-left-10 inline-block\\" data-bind=\\"component: { name: 'hue-drop-down', params: { value: operation, entries: operations } }\\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"
+    attr: {
+      'data-testid': dataTestId
+    },
+    toggle: dropDownVisible,
+    css: { 'blue': dropDownVisible }\\">
     <!-- ko if: icon --><!-- /ko -->
     <!-- ko if: !noLabel && value -->
     <span class=\\"hue-drop-down-selected\\" data-bind=\\"text: value() &amp;&amp; typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': titleTooltip }\\" title=\\"default\\">default</span>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistDbPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistDbPanel.js
@@ -292,22 +292,22 @@ const TEMPLATE =
       <!-- ko if: selectedSource().selectedNamespace() -->
       <!-- ko if: selectedSource().selectedNamespace().selectedDatabase() -->
       <a data-bind="click: back, appAwareTemplateContextMenu: { template: 'sql-context-items', viewModel: selectedSource().selectedNamespace().selectedDatabase() }">
-        <i class="fa fa-chevron-left assist-breadcrumb-back" ></i>
+        <i class="fa fa-chevron-left assist-breadcrumb-back" data-testid="assist-sql--tables-breadcrumb-back--button"></i>
         <i class="fa assist-breadcrumb-text" data-bind="css: { 'fa-server': nonSqlType, 'fa-database': !nonSqlType }"></i>
         <span class="assist-breadcrumb-text" data-bind="text: breadcrumb, attr: {'title': breadcrumbTitle }"></span>
       </a>
       <!-- /ko -->
       <!-- ko ifnot: selectedSource().selectedNamespace().selectedDatabase() -->
       <!-- ko if: window.HAS_MULTI_CLUSTER-->
       <a data-bind="click: back">
-        <i class="fa fa-chevron-left assist-breadcrumb-back"></i>
+        <i class="fa fa-chevron-left assist-breadcrumb-back" data-testid="assist-sql--databases-breadcrumb-back--button"></i>
         <i class="fa fa-snowflake-o assist-breadcrumb-text"></i>
         <span class="assist-breadcrumb-text" data-bind="text: breadcrumb, attr: {'title': breadcrumbTitle }"></span>
       </a>
       <!-- /ko -->
       <!-- ko ifnot: window.HAS_MULTI_CLUSTER -->
       <a data-bind="click: back">
-        <i class="fa fa-chevron-left assist-breadcrumb-back"></i>
+        <i class="fa fa-chevron-left assist-breadcrumb-back" data-testid="assist-sql--databases-breadcrumb-back--button"></i>
         <i class="fa fa-server assist-breadcrumb-text"></i>
         <span class="assist-breadcrumb-text" data-bind="text: breadcrumb"></span>
       </a>
@@ -316,7 +316,7 @@ const TEMPLATE =
       <!-- /ko -->
       <!-- ko ifnot: selectedSource().selectedNamespace() -->
       <a data-bind="click: back">
-        <i class="fa fa-chevron-left assist-breadcrumb-back"></i>
+        <i class="fa fa-chevron-left assist-breadcrumb-back" data-testid="assist-sql--namespaces-breadcrumb-back--button"></i>
         <i class="fa fa-server assist-breadcrumb-text"></i>
         <span class="assist-breadcrumb-text" data-bind="text: breadcrumb"></span>
       </a>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistDocumentsPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistDocumentsPanel.js
@@ -163,7 +163,7 @@ const TEMPLATE = `
             </li>
           </ul>
       </span>
-      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('${ REFRESH_DOC_ASSIST_EVENT }'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('${ REFRESH_DOC_ASSIST_EVENT }'); }"><i class="pointer fa fa-refresh" data-testid="assist-sql--refresh--button" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
         'Manual refresh'
       )}"></i></a>
     </div>
@@ -189,7 +189,7 @@ const TEMPLATE = `
   <div class="assist-flex-search">
     <div class="assist-filter">
       <form autocomplete="off">
-        <input class="clearable" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="${I18n(
+        <input class="clearable" data-testid="assist-documents--filter--input" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="${I18n(
           'Filter...'
         )}" data-bind="clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/>
       </form>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistFunctionsPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistFunctionsPanel.js
@@ -67,7 +67,7 @@ const TEMPLATE = `
           <div class="assist-flex-search">
             <div class="assist-filter">
               <form autocomplete="off">
-                <input class="clearable" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
+                <input class="clearable" data-testid="assist-udfs--filter--input" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
               </form>
             </div>
           </div>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistGitPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistGitPanel.js
@@ -29,7 +29,7 @@ const TEMPLATE = `
 
   <script type="text/html" id="assist-git-header-actions">
     <div class="assist-db-header-actions">
-      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.git.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.git.refresh'); }"><i class="pointer fa fa-refresh" data-testid="assist-sql--refresh--button" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
         'Manual refresh'
       )}"></i></a>
     </div>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistHBasePanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistHBasePanel.js
@@ -38,7 +38,7 @@ const TEMPLATE = `
   
   <script type="text/html" id="assist-hbase-header-actions">
     <div class="assist-db-header-actions">
-      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.hbase.refresh'); }"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
+      <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.hbase.refresh'); }"><i class="pointer fa fa-refresh" data-testid="assist-sql--refresh--button" data-bind="css: { 'fa-spin blue' : loading }" title="${I18n(
         'Manual refresh'
       )}"></i></a>
     </div>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistLangRefPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistLangRefPanel.js
@@ -57,7 +57,7 @@ const TEMPLATE = `
       <div class="assist-flex-search">
         <div class="assist-filter">
           <form autocomplete="off">
-            <input class="clearable" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
+            <input class="clearable" data-testid="assist-langref--filter--input" type="text" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS } placeholder="Filter..." data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
           </form>
         </div>
       </div>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistPanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistPanel.js
@@ -45,7 +45,7 @@ const TEMPLATE = `
     <!-- ko if: availablePanels().length > 1 -->
     <div class="assist-panel-switches">
       <!-- ko foreach: availablePanels -->
-      <div class="inactive-action assist-type-switch" data-bind="click: function () { $parent.visiblePanel($data); }, css: { 'blue': $parent.visiblePanel() === $data }, style: { 'float': rightAlignIcon ? 'right' : 'left' },  attr: { 'title': name }">
+      <div class="inactive-action assist-type-switch" data-bind="click: function () { $parent.visiblePanel($data); }, css: { 'blue': $parent.visiblePanel() === $data }, style: { 'float': rightAlignIcon ? 'right' : 'left' },  attr: { 'title': name, 'data-testid': 'assist--' + type + '--button' }">
         <!-- ko if: iconSvg --><span style="font-size:22px;"><svg class="hi"><use data-bind="attr: {'href': iconSvg }" href=''></use></svg></span><!-- /ko -->
         <!-- ko if: !iconSvg --><i class="fa fa-fw valign-middle" data-bind="css: icon"></i><!-- /ko -->
       </div>
diff --git a/desktop/core/src/desktop/js/ko/components/assist/ko.assistStoragePanel.js b/desktop/core/src/desktop/js/ko/components/assist/ko.assistStoragePanel.js
@@ -85,7 +85,7 @@ const TEMPLATE = `
       <!-- /ko -->
       <a class="inactive-action" href="javascript:void(0)" data-bind="click: function () { huePubSub.publish('assist.storage.refresh'); }" title="${I18n(
         'Manual refresh'
-      )}"><i class="pointer fa fa-refresh" data-bind="css: { 'fa-spin blue' : loading }"></i></a>
+      )}"><i class="pointer fa fa-refresh" data-testid="assist-sql--refresh--button" data-bind="css: { 'fa-spin blue' : loading }"></i></a>
     </div>
   </script>
 
@@ -133,7 +133,7 @@ const TEMPLATE = `
   <div class="assist-flex-search">
     <div class="assist-filter">
       <form autocomplete="off">
-        <input class="clearable" type="text" placeholder="${I18n(
+        <input class="clearable" data-testid="assist-files--filter--input" type="text" placeholder="${I18n(
           'Filter...'
         )}" ${ window.PREVENT_AUTOFILL_INPUT_ATTRS }
         data-bind="clearable: filter, value: filter, valueUpdate: 'afterkeydown'"/>
diff --git a/desktop/core/src/desktop/js/ko/components/doc/__snapshots__/ko.linkSharing.test.js.snap b/desktop/core/src/desktop/js/ko/components/doc/__snapshots__/ko.linkSharing.test.js.snap
@@ -21,7 +21,12 @@ exports[`ko.linkSharing.js should render component activated 1`] = `
             onSelect: changePerm.bind($data)
           }
         }
-      \\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"toggle: dropDownVisible, css: { 'blue': dropDownVisible }\\">
+      \\"><a class=\\"inactive-action hue-drop-down-active\\" href=\\"javascript:void(0)\\" data-bind=\\"
+    attr: {
+      'data-testid': dataTestId
+    },
+    toggle: dropDownVisible,
+    css: { 'blue': dropDownVisible }\\">
     <!-- ko if: icon --><!-- /ko -->
     <!-- ko if: !noLabel && value -->
     <span class=\\"hue-drop-down-selected\\" data-bind=\\"text: value() &amp;&amp; typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': titleTooltip }\\" title=\\"read\\">read</span>
diff --git a/desktop/core/src/desktop/js/ko/components/ko.contextSelector.js b/desktop/core/src/desktop/js/ko/components/ko.contextSelector.js
@@ -82,7 +82,7 @@ const TEMPLATE = `
     <!-- ko if: window.getLastKnownConfig().has_computes && !hideLabels --><span class="editor-header-title">${I18n(
       'Active database'
     )}</span><!-- /ko -->
-    <div data-bind="component: { name: 'hue-drop-down', params: { titleName: 'Database', value: database, entries: availableDatabases, foreachVisible: true, searchable: true, linkTitle: '${I18n(
+    <div data-bind="component: { name: 'hue-drop-down', params: { dataTestId: 'editor--database-selection--dropdown', titleName: 'Database', value: database, entries: availableDatabases, foreachVisible: true, searchable: true, linkTitle: '${I18n(
       'Active database'
     )}' } }" style="display: inline-block"></div>
     <!-- /ko -->
diff --git a/desktop/core/src/desktop/js/ko/components/ko.dropDown.js b/desktop/core/src/desktop/js/ko/components/ko.dropDown.js
@@ -24,7 +24,12 @@ export const HUE_DROP_DOWN_COMPONENT = 'hue-drop-down';
 
 const TEMPLATE = `
   <!-- ko if: !menuOnly && (!dropDownVisible() || !searchable) -->
-  <a class="inactive-action hue-drop-down-active" href="javascript:void(0)" data-bind="toggle: dropDownVisible, css: { 'blue': dropDownVisible }">
+  <a class="inactive-action hue-drop-down-active" href="javascript:void(0)" data-bind="
+    attr: {
+      'data-testid': dataTestId
+    },
+    toggle: dropDownVisible,
+    css: { 'blue': dropDownVisible }">
     <!-- ko if: icon --><i class="fa" data-bind="css: icon"></i><!-- /ko -->
     <!-- ko if: !noLabel && value -->
     <span class="hue-drop-down-selected" data-bind="text: value() && typeof value()[labelAttribute] !== 'undefined' ? value()[labelAttribute] : value(), visible: ! dropDownVisible() || !searchable, attr: { 'title': titleTooltip }" ></span>
@@ -157,6 +162,7 @@ class HueDropDown {
     self.dropDownVisible = ko.observable(!!params.showOnInit);
     self.menuOnly = !!params.menuOnly;
     self.noLabel = !!params.noLabel;
+    self.dataTestId = params.dataTestId;
     self.labelAttribute = params.labelAttribute || 'label';
     self.icon = params.icon;
     self.value = params.value;
diff --git a/desktop/libs/notebook/src/notebook/templates/editor2.mako b/desktop/libs/notebook/src/notebook/templates/editor2.mako
@@ -94,7 +94,7 @@ There is no bridge to KO for components using this integration. Example using in
 % endif
 
     <div class="btn-group">
-      <a data-hue-analytics="editor:save-query-as-click" class="btn" rel="tooltip" data-placement="bottom" data-loading-text="${ _("Saving...") }" data-bind="click: function() { if ($root.canSave() ) { saveNotebook() } else { $('#editorSaveAsModal').modal('show');} }, attr: { title: $root.canSave() ? '${ _ko('Save') }' : '${ _ko('Save As') }' }">
+      <a data-hue-analytics="editor:save-query-as-click" class="btn" data-testid="editor--save--button" rel="tooltip" data-placement="bottom" data-loading-text="${ _("Saving...") }" data-bind="click: function() { if ($root.canSave() ) { saveNotebook() } else { $('#editorSaveAsModal').modal('show');} }, attr: { title: $root.canSave() ? '${ _ko('Save') }' : '${ _ko('Save As') }' }">
         <i class="fa fa-save"></i>
       </a>
 
@@ -113,14 +113,14 @@ There is no bridge to KO for components using this integration. Example using in
     <!-- ko template: { ifnot: editorMode() || isPresentationMode(), name: 'editor-execution-actions' }--><!-- /ko -->
 
     <!-- ko ifnot: isPresentationMode() -->
-    <div class="dropdown pull-right margin-left-10">
+    <div class="dropdown pull-right margin-left-10" data-testid="editor--actions--dropdown">
       <a class="btn" data-toggle="dropdown" href="javascript: void(0)">
         <i class="fa fa-fw fa-ellipsis-v"></i>
       </a>
       <ul class="dropdown-menu pull-right">
         <li>
           <!-- ko if: editorMode -->
-          <a data-hue-analytics="editor:new-query-button-click" href="javascript:void(0)" data-bind="click: function() { hueUtils.removeURLParameter('editor'); newNotebook($root.editorType(), null, selectedNotebook() ? $root.selectedNotebook().snippets()[0].currentQueryTab() : null, 'blank'); }, attr: { 'title': '${ _('New ') }' +  editorTitle() + '${ _(' Query') }' }">
+          <a data-hue-analytics="editor:new-query-button-click" data-testid="editor--new-document--button" href="javascript:void(0)" data-bind="click: function() { hueUtils.removeURLParameter('editor'); newNotebook($root.editorType(), null, selectedNotebook() ? $root.selectedNotebook().snippets()[0].currentQueryTab() : null, 'blank'); }, attr: { 'title': '${ _('New ') }' +  editorTitle() + '${ _(' Query') }' }">
             <i class="fa fa-fw fa-file-o"></i> ${ _('New') }
           </a>
           <!-- /ko -->
@@ -930,10 +930,10 @@ There is no bridge to KO for components using this integration. Example using in
       <div class="editor-bottom">
         <ul class="editor-bottom-tabs nav nav-tabs">
           <li data-bind="click: function() { currentQueryTab('queryHistory'); }, css: { 'active': currentQueryTab() == 'queryHistory' }">
-            <a data-hue-analytics="editor:bottom-tab-click/query-history" class="inactive-action" style="display:inline-block" href="#queryHistory" data-toggle="tab">${_('Query History')}</a>
+            <a data-hue-analytics="editor:bottom-tab-click/query-history" class="inactive-action" data-testid="editor--query-history--tab" style="display:inline-block" href="#queryHistory" data-toggle="tab">${_('Query History')}</a>
           </li>
           <li data-bind="click: function(){ currentQueryTab('savedQueries'); }, css: { 'active': currentQueryTab() == 'savedQueries' }">
-            <a data-hue-analytics="editor:bottom-tab-click/saved-queries" class="inactive-action" style="display:inline-block" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}</a>
+            <a data-hue-analytics="editor:bottom-tab-click/saved-queries" class="inactive-action" data-testid="editor--saved-queries--tab" style="display:inline-block" href="#savedQueries" data-toggle="tab">${_('Saved Queries')}</a>
           </li>
           <li data-bind="click: function() { currentQueryTab('queryResults'); }, css: {'active': currentQueryTab() == 'queryResults'}">
             <a data-hue-analytics="editor:bottom-tab-click/query-result" class="inactive-action" style="display:inline-block" href="#queryResults" data-toggle="tab">${_('Results')}
diff --git a/desktop/libs/notebook/src/notebook/templates/editor_components.mako b/desktop/libs/notebook/src/notebook/templates/editor_components.mako

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`	`>`
`30`	`30`	`<button`
`31`	`31`	`class="sidebar-base-btn sidebar-sidebar-item"`
	`32`	+ :data-testid="`sidebar--${item.displayName.replace(/\s/g, '-').toLowerCase()}--button`"
`32`	`33`	`:aria-label="item.displayName"`
`33`	`34`	`:class="{ 'sidebar-active': isActive, 'sidebar-accordion-item-btn-open': tooltip }"`
`34`	`35`	`@click="toggleOpen"`