[ui-core] Upgrade all jest related libraries

This upgrades all the jest testing libraries to the latest possible versions. The primary reason was to provide a fix for CVE-2023-48631, a vulnerability with @adobe/css-tools which is a transient dependency of jest-jsdom.

- Updated snapshots due to improved format
- Moved console.log of editor v2 up to the app.js as it appears in the tests
- jest config updated for deprecated configs

Manual testing and unit test runs.

desktop/core/src/desktop/js/apps/editor/EditorViewModel.js

@@ -37,9 +37,6 @@ import getParameter from 'utils/url/getParameter';
 
 export default class EditorViewModel {
   constructor(options, CoordinatorEditorViewModel, RunningCoordinatorModel) {
-    // eslint-disable-next-line no-restricted-syntax
-    console.log('Editor v2 enabled.');
-
     this.snippetViewSettings = options.snippetViewSettings;
 
     this.URLS = {

desktop/core/src/desktop/js/apps/editor/app.js

@@ -49,6 +49,8 @@ huePubSub.subscribe('app.dom.loaded', app => {
   if (app === 'editor') {
     window.MAIN_SCROLLABLE = '.page-content';
 
+    console.info('Editor v2 enabled.');
+
     let isLeftNavOpen = false;
     huePubSub.subscribe(
       'left.nav.open.toggle',

desktop/core/src/desktop/js/apps/editor/components/__snapshots__/ko.paginator.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.paginator.js should render component 1`] = `
-"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;paginator&quot;, params: params }\\"><div class=\\"pagination\\" data-bind=\\"visible: totalPages() > 1\\" style=\\"\\">
+"<div data-bind="descendantsComplete: descendantsComplete, component: { name: &quot;paginator&quot;, params: params }"><div class="pagination" data-bind="visible: totalPages() > 1" style="">
   <ul>
-    <li data-bind=\\"css: { 'disabled' : currentPage() === 1 }\\" class=\\"disabled\\">
-      <a href=\\"javascript: void(0);\\" data-bind=\\"click: previousPage.bind($data)\\">Prev</a>
+    <li data-bind="css: { 'disabled' : currentPage() === 1 }" class="disabled">
+      <a href="javascript: void(0);" data-bind="click: previousPage.bind($data)">Prev</a>
     </li>
-    <li class=\\"active\\"><span data-bind=\\"text: currentPage() + '/' + totalPages()\\">1/5</span></li>
-    <li data-bind=\\"css: { 'disabled' : currentPage() === totalPages() }\\">
-      <a href=\\"javascript: void(0);\\" data-bind=\\"click: nextPage.bind($data)\\">Next</a>
+    <li class="active"><span data-bind="text: currentPage() + '/' + totalPages()">1/5</span></li>
+    <li data-bind="css: { 'disabled' : currentPage() === totalPages() }">
+      <a href="javascript: void(0);" data-bind="click: nextPage.bind($data)">Next</a>
     </li>
   </ul>
 </div></div>"

desktop/core/src/desktop/js/apps/editor/components/__snapshots__/ko.savedQueries.test.js.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.savedQueries.js should render component 1`] = `
-"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;saved-queries&quot;, params: params }\\"><div class=\\"snippet-tab-actions\\">
-  <form autocomplete=\\"off\\" class=\\"inline-block\\">
-    <input class=\\"input-small search-input\\" type=\\"text\\" autocorrect=\\"off\\" autocomplete=\\"do-not-autocomplete\\" autocapitalize=\\"off\\" spellcheck=\\"false\\" placeholder=\\"Search...\\" data-bind=\\"
+"<div data-bind="descendantsComplete: descendantsComplete, component: { name: &quot;saved-queries&quot;, params: params }"><div class="snippet-tab-actions">
+  <form autocomplete="off" class="inline-block">
+    <input class="input-small search-input" type="text" autocorrect="off" autocomplete="do-not-autocomplete" autocapitalize="off" spellcheck="false" placeholder="Search..." data-bind="
         textInput: filter,
         clearable: filter
-      \\">
+      ">
   </form>
-</div><div class=\\"snippet-tab-body\\">
+</div><div class="snippet-tab-body">
   <!-- ko if: loading -->
     <div>
-      <h1 class=\\"empty\\"><i class=\\"fa fa-spinner fa-spin\\"></i> Loading...</h1>
+      <h1 class="empty"><i class="fa fa-spinner fa-spin"></i> Loading...</h1>
     </div>
   <!-- /ko -->
 

desktop/core/src/desktop/js/apps/editor/components/__snapshots__/ko.syntaxDropdown.test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.syntaxDropdown.js should match snapshot 1`] = `
-"<html><head></head><body><div id=\\"sqlSyntaxDropdown\\" data-bind=\\"component: { name: 'sql-syntax-dropdown', params: $data }\\">
-<div class=\\"hue-syntax-drop-down\\" data-bind=\\"
+"<html><head></head><body><div id="sqlSyntaxDropdown" data-bind="component: { name: 'sql-syntax-dropdown', params: $data }">
+<div class="hue-syntax-drop-down" data-bind="
   style: {
     'left': left() + 'px',
     'top': top() + 'px'
@@ -18,27 +18,27 @@ exports[`ko.syntaxDropdown.js should match snapshot 1`] = `
       menuOnly: true
     }
   }
-\\" style=\\"left: 10px; top: 20px;\\">
+" style="left: 10px; top: 20px;">
   <!-- ko if: !menuOnly && (!dropDownVisible() || !searchable) --><!-- /ko -->
   <!-- ko if: !menuOnly && (dropDownVisible() && searchable) --><!-- /ko -->
-  <div class=\\"hue-drop-down-container open\\" data-bind=\\"css: { 'open' : dropDownVisible, 'hue-drop-down-fixed': fixedPosition, 'hue-drop-down-container-searchable': searchable }, dropDownKeyUp: { onEsc: onEsc, onEnter: onEnter, dropDownVisible: dropDownVisible }\\">
-    <div style=\\"overflow-y: auto;\\" class=\\"dropdown-menu\\" data-bind=\\"visible: filteredEntries().length > 0\\">
+  <div class="hue-drop-down-container open" data-bind="css: { 'open' : dropDownVisible, 'hue-drop-down-fixed': fixedPosition, 'hue-drop-down-container-searchable': searchable }, dropDownKeyUp: { onEsc: onEsc, onEnter: onEnter, dropDownVisible: dropDownVisible }">
+    <div style="overflow-y: auto;" class="dropdown-menu" data-bind="visible: filteredEntries().length > 0">
       <!-- ko if: foreachVisible --><!-- /ko -->
       <!-- ko ifnot: foreachVisible -->
-      <ul class=\\"hue-inner-drop-down\\" data-bind=\\"foreach: filteredEntries\\">
+      <ul class="hue-inner-drop-down" data-bind="foreach: filteredEntries">
         <!-- ko if: typeof $data.divider !== 'undefined' && $data.divider --><!-- /ko -->
         <!-- ko if: typeof $data.divider === 'undefined' || !$data.divider -->
-        <li><a href=\\"javascript:void(0)\\" data-bind=\\"text: $data &amp;&amp; typeof $data[$parent.labelAttribute] !== 'undefined' ? $data[$parent.labelAttribute] : $data, click: function () { let previous = $parent.value(); $parent.value($data); $parent.onSelect($data, previous); }\\">foo</a></li>
+        <li><a href="javascript:void(0)" data-bind="text: $data &amp;&amp; typeof $data[$parent.labelAttribute] !== 'undefined' ? $data[$parent.labelAttribute] : $data, click: function () { let previous = $parent.value(); $parent.value($data); $parent.onSelect($data, previous); }">foo</a></li>
         <!-- /ko -->
       
         <!-- ko if: typeof $data.divider !== 'undefined' && $data.divider -->
-        <li class=\\"divider\\"></li>
+        <li class="divider"></li>
         <!-- /ko -->
         <!-- ko if: typeof $data.divider === 'undefined' || !$data.divider --><!-- /ko -->
       
         <!-- ko if: typeof $data.divider !== 'undefined' && $data.divider --><!-- /ko -->
         <!-- ko if: typeof $data.divider === 'undefined' || !$data.divider -->
-        <li><a href=\\"javascript:void(0)\\" data-bind=\\"text: $data &amp;&amp; typeof $data[$parent.labelAttribute] !== 'undefined' ? $data[$parent.labelAttribute] : $data, click: function () { let previous = $parent.value(); $parent.value($data); $parent.onSelect($data, previous); }\\">Ignore this type of error</a></li>
+        <li><a href="javascript:void(0)" data-bind="text: $data &amp;&amp; typeof $data[$parent.labelAttribute] !== 'undefined' ? $data[$parent.labelAttribute] : $data, click: function () { let previous = $parent.value(); $parent.value($data); $parent.onSelect($data, previous); }">Ignore this type of error</a></li>
         <!-- /ko -->
       </ul>
       <!-- /ko -->
@@ -48,4 +48,4 @@ exports[`ko.syntaxDropdown.js should match snapshot 1`] = `
 </div></body></html>"
 `;
 
-exports[`ko.syntaxDropdown.js should render component on show event 1`] = `"<html><head></head><body><div id=\\"sqlSyntaxDropdown\\" data-bind=\\"component: { name: 'sql-syntax-dropdown', params: $data }\\"></div></body></html>"`;
+exports[`ko.syntaxDropdown.js should render component on show event 1`] = `"<html><head></head><body><div id="sqlSyntaxDropdown" data-bind="component: { name: 'sql-syntax-dropdown', params: $data }"></div></body></html>"`;

desktop/core/src/desktop/js/apps/jobBrowser/components/impalaQueries/query-details/__snapshots__/LabeledInfo.test.ts.snap

@@ -11,12 +11,10 @@ exports[`LabeledInfo.vue should render 1`] = `
     class="labled-info-value"
   >
     
-    
     <div>
       Some item
     </div>
     
-    
   </div>
 </div>
 `;

desktop/core/src/desktop/js/components/__snapshots__/Modal.test.ts.snap

@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal.vue should render a modal 1`] = `
-<transition-stub>
+<transition-stub
+  appear="false"
+  css="true"
+  name="hue-modal"
+  persisted="false"
+>
   <div
     class="hue-modal-mask"
   >

desktop/core/src/desktop/js/components/__snapshots__/Tab.test.ts.snap

@@ -5,7 +5,9 @@ exports[`Tab.vue should render 1`] = `
   style="display: none;"
 >
   
-  <stub />
+  <div>
+    Some tab content
+  </div>
   
 </div>
 `;

desktop/core/src/desktop/js/components/__snapshots__/Tabs.test.ts.snap

@@ -39,8 +39,9 @@ exports[`Tabs.vue should render tabs 1`] = `
     class="hue-tab-container"
   >
     
-    
-    <div>
+    <div
+      style=""
+    >
       
       foo
       
@@ -53,7 +54,6 @@ exports[`Tabs.vue should render tabs 1`] = `
       
     </div>
     
-    
   </div>
 </div>
 `;

desktop/core/src/desktop/js/components/dropdown/__snapshots__/DropdownDrawer.test.ts.snap

@@ -10,7 +10,9 @@ exports[`DropdownDrawer.vue should render dropdown drawer with slots 1`] = `
     style="top: 100%; left: 0px;"
   >
     
-    <stub />
+    <div>
+      Some item
+    </div>
     
   </div>
 </div>

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.stickVertical.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.stickVertical.js should render binding 1`] = `
-"<div class=\\"scroll-container\\">
-              <div data-bind=\\"scrollVertical: { scrollContainer: '.scroll-container' }\\"></div>
+"<div class="scroll-container">
+              <div data-bind="scrollVertical: { scrollContainer: '.scroll-container' }"></div>
             </div>"
 `;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.templateContextMenu.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.templateContextMenu.js should render binding 1`] = `"<div data-bind=\\"templateContextMenu: { }\\"></div>"`;
+exports[`ko.templateContextMenu.js should render binding 1`] = `"<div data-bind="templateContextMenu: { }"></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.templatePopover.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.templatePopover.js should render binding 1`] = `"<div id=\\"popoverTest\\" data-bind=\\"templatePopover: { trigger: 'click' }\\"></div>"`;
+exports[`ko.templatePopover.js should render binding 1`] = `"<div id="popoverTest" data-bind="templatePopover: { trigger: 'click' }"></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.toggleOverflow.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.toggleOverflow.js should render binding 1`] = `"<div data-bind=\\"toggleOverflow\\"><div class=\\"toggle-overflow\\">Some text</div><div class=\\"toggle-overflow-toggle\\"><i class=\\"fa fa-caret-down muted\\"></i></div></div>"`;
+exports[`ko.toggleOverflow.js should render binding 1`] = `"<div data-bind="toggleOverflow"><div class="toggle-overflow">Some text</div><div class="toggle-overflow-toggle"><i class="fa fa-caret-down muted"></i></div></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.toogle.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.toggle.js should render binding 1`] = `"<div class=\\"toggle-test\\" data-bind=\\"toggle: testObservable\\"></div>"`;
+exports[`ko.toggle.js should render binding 1`] = `"<div class="toggle-test" data-bind="toggle: testObservable"></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.tooltip.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.tooltip.js should render binding 1`] = `"<div data-bind=\\"tooltip\\" data-original-title=\\"some title\\"></div>"`;
+exports[`ko.tooltip.js should render binding 1`] = `"<div data-bind="tooltip" data-original-title="some title"></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.truncatedText.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.truncatedText.js should render binding 1`] = `"<div data-bind=\\"truncatedText: text\\">More than 20 charact...</div>"`;
+exports[`ko.truncatedText.js should render binding 1`] = `"<div data-bind="truncatedText: text">More than 20 charact...</div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.verticalSlide.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.verticalSlide.js should render binding 1`] = `"<div data-bind=\\"verticalSlide: slide\\" style=\\"display: none;\\"></div>"`;
+exports[`ko.verticalSlide.js should render binding 1`] = `"<div data-bind="verticalSlide: slide" style="display: none;"></div>"`;

desktop/core/src/desktop/js/ko/bindings/__snapshots__/ko.visibleOnHover.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ko.visibleOnHover.js should render binding 1`] = `"<div id=\\"foo\\" data-bind=\\"visibleOnHover: { selector: '#foo' }\\"></div>"`;
+exports[`ko.visibleOnHover.js should render binding 1`] = `"<div id="foo" data-bind="visibleOnHover: { selector: '#foo' }"></div>"`;

desktop/core/src/desktop/js/ko/components/__snapshots__/ko.contextSelector.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.contextSelector.js should render component 1`] = `
-"<div data-bind=\\"descendantsComplete: descendantsComplete, component: { name: &quot;hue-context-selector&quot;, params: params }\\"><i class=\\"fa fa-spinner fa-spin muted\\"></i><div class=\\"inline-block\\" style=\\"\\" data-bind=\\"visible: !loadingContext()\\">
+"<div data-bind="descendantsComplete: descendantsComplete, component: { name: &quot;hue-context-selector&quot;, params: params }"><i class="fa fa-spinner fa-spin muted"></i><div class="inline-block" style="" data-bind="visible: !loadingContext()">
     <!-- ko if: window.HAS_MULTI_CLUSTER --><!-- /ko -->
 
     <!-- ko if: availableDatabases().length > 0 && !hideDatabases--><!-- /ko -->

desktop/core/src/desktop/js/ko/components/__snapshots__/ko.createDirectoryModal.test.js.snap

@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.createDirectoryModal.js should render component 1`] = `
-"<html><head></head><body class=\\"modal-open\\"><div id=\\"createDirectoryModal\\" data-bind=\\"descendantsComplete: descendantsComplete, component: { name: 'create-directory', params: params }\\" data-keyboard=\\"true\\" class=\\"modal hide fade in\\" tabindex=\\"-1\\" aria-hidden=\\"false\\">
+"<html><head></head><body class="modal-open"><div id="createDirectoryModal" data-bind="descendantsComplete: descendantsComplete, component: { name: 'create-directory', params: params }" data-keyboard="true" class="modal hide fade in" tabindex="-1" aria-hidden="false">
   <!-- ko with: activeEntry -->
-  <form class=\\"form-horizontal\\">
-    <div class=\\"modal-header\\">
-      <button type=\\"button\\" class=\\"close\\" data-dismiss=\\"modal\\" aria-label=\\"Close\\"><span aria-hidden=\\"true\\">×</span></button>
-      <h2 class=\\"modal-title\\">Create Directory</h2>
+  <form class="form-horizontal">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+      <h2 class="modal-title">Create Directory</h2>
     </div>
-    <div class=\\"modal-body \\">
-      <input id=\\"newDirectoryName\\" class=\\"input large-as-modal\\" type=\\"text\\" placeholder=\\"Directory name\\">
+    <div class="modal-body ">
+      <input id="newDirectoryName" class="input large-as-modal" type="text" placeholder="Directory name">
     </div>
-    <div class=\\"modal-footer\\">
-      <input type=\\"button\\" class=\\"btn\\" data-dismiss=\\"modal\\" data-bind=\\"click: function () { $('#newDirectoryName').val(null) }\\" value=\\"Cancel\\">
-      <input type=\\"submit\\" class=\\"btn btn-primary disable-feedback\\" value=\\"Create\\" data-bind=\\"click: function () { if ($('#newDirectoryName').val()) { $data.createDirectory($('#newDirectoryName').val()); $('#createDirectoryModal').modal('hide'); } }\\">
+    <div class="modal-footer">
+      <input type="button" class="btn" data-dismiss="modal" data-bind="click: function () { $('#newDirectoryName').val(null) }" value="Cancel">
+      <input type="submit" class="btn btn-primary disable-feedback" value="Create" data-bind="click: function () { if ($('#newDirectoryName').val()) { $data.createDirectory($('#newDirectoryName').val()); $('#createDirectoryModal').modal('hide'); } }">
     </div>
   </form>
   <!-- /ko -->
-</div><div class=\\"modal-backdrop fade in\\"></div></body></html>"
+</div><div class="modal-backdrop fade in"></div></body></html>"
 `;

desktop/core/src/desktop/js/ko/components/__snapshots__/ko.deleteDocModal.test.js.snap

@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ko.deleteDocModal.js should render component 1`] = `
-"<html><head></head><body class=\\"modal-open\\"><div id=\\"deleteEntriesModal\\" data-bind=\\"descendantsComplete: descendantsComplete, component: { name: 'delete-entry', params: params }\\" data-keyboard=\\"true\\" class=\\"modal hide fade in\\" tabindex=\\"-1\\" aria-hidden=\\"false\\">
-  <div class=\\"modal-header\\">
-    <button type=\\"button\\" class=\\"close\\" data-dismiss=\\"modal\\" aria-label=\\"Close\\"><span aria-hidden=\\"true\\">×</span></button>
+"<html><head></head><body class="modal-open"><div id="deleteEntriesModal" data-bind="descendantsComplete: descendantsComplete, component: { name: 'delete-entry', params: params }" data-keyboard="true" class="modal hide fade in" tabindex="-1" aria-hidden="false">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
     <!-- ko if: entriesToDelete().length === 0 --><!-- /ko -->
     <!-- ko if: entriesToDelete().length > 0 -->
-    <h2 class=\\"modal-title\\"> Do you really want to delete the following document(s)? </h2>
+    <h2 class="modal-title"> Do you really want to delete the following document(s)? </h2>
     <!-- /ko -->
   </div>
-  <div class=\\"modal-body\\">
-    <div class=\\"doc-browser-empty animated\\" style=\\"\\" data-bind=\\"visible: entriesToDelete().length > 0 &amp;&amp; selectedDocsWithDependents().length === 0\\">
-      <i class=\\"fa fa-spinner fa-spin fa-2x\\"></i>
+  <div class="modal-body">
+    <div class="doc-browser-empty animated" style="" data-bind="visible: entriesToDelete().length > 0 &amp;&amp; selectedDocsWithDependents().length === 0">
+      <i class="fa fa-spinner fa-spin fa-2x"></i>
     </div>
-    <ul data-bind=\\"foreach: selectedDocsWithDependents()\\"></ul>
+    <ul data-bind="foreach: selectedDocsWithDependents()"></ul>
   </div>
-  <div class=\\"modal-footer\\">
+  <div class="modal-footer">
     <!-- ko if: entriesToDelete().length === 0 --><!-- /ko -->
     <!-- ko if: entriesToDelete().length > 0 -->
-    <input type=\\"button\\" class=\\"btn\\" data-dismiss=\\"modal\\" value=\\"Cancel\\">
-    <input type=\\"submit\\" data-bind=\\"click: function() { if (isTrash() || isTrashed()) { removeDocuments(true) } else { moveToTrash() } }, disable: deletingEntries\\" class=\\"btn btn-danger disable-feedback\\" value=\\"Yes\\">
+    <input type="button" class="btn" data-dismiss="modal" value="Cancel">
+    <input type="submit" data-bind="click: function() { if (isTrash() || isTrashed()) { removeDocuments(true) } else { moveToTrash() } }, disable: deletingEntries" class="btn btn-danger disable-feedback" value="Yes">
     <!-- /ko -->
   </div>
-</div><div class=\\"modal-backdrop fade in\\"></div></body></html>"
+</div><div class="modal-backdrop fade in"></div></body></html>"
 `;