Update tests

client/app/services/resizeObserver.js

@@ -1,31 +1,50 @@
+/* global ResizeObserver */
+
+function observeNative(node, callback) {
+  if ((typeof ResizeObserver === 'function') && node) {
+    const observer = new ResizeObserver(() => callback()); // eslint-disable-line compat/compat
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
+  return null;
+}
+
 const items = new Map();
 
 function checkItems() {
-  items.forEach((item, node) => {
-    const bounds = node.getBoundingClientRect();
-    // convert to int (because these numbers needed for comparisons), but preserve 1 decimal point
-    const width = Math.round(bounds.width * 10);
-    const height = Math.round(bounds.height * 10);
+  if (items.size > 0) {
+    items.forEach((item, node) => {
+      const bounds = node.getBoundingClientRect();
+      // convert to int (because these numbers needed for comparisons), but preserve 1 decimal point
+      const width = Math.round(bounds.width * 10);
+      const height = Math.round(bounds.height * 10);
 
-    if (
-      (item.width !== width) ||
-      (item.height !== height)
-    ) {
-      item.width = width;
-      item.height = height;
-      item.callback(node);
-    }
-  });
+      if (
+        (item.width !== width) ||
+        (item.height !== height)
+      ) {
+        item.width = width;
+        item.height = height;
+        item.callback(node);
+      }
+    });
 
-  setTimeout(checkItems, 100);
+    setTimeout(checkItems, 100);
+  }
 }
 
-checkItems(); // ensure it was called only once!
-
-export default function observe(node, callback) {
-  if (!items.has(node)) {
+function observeFallback(node, callback) {
+  if (node && !items.has(node)) {
+    const shouldTrigger = items.size === 0;
     items.set(node, { callback });
+    if (shouldTrigger) {
+      checkItems();
+    }
     return () => items.delete(node);
   }
-  return () => {};
+  return null;
+}
+
+export default function observe(node, callback) {
+  return observeNative(node, callback) || observeFallback(node, callback) || (() => {});
 }

client/app/visualizations/EditVisualizationDialog.jsx

@@ -1,4 +1,4 @@
-import { extend, map, findIndex, isEqual } from 'lodash';
+import { extend, map, sortBy, findIndex, isEqual } from 'lodash';
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'antd/lib/modal';
@@ -158,7 +158,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
               onChange={onTypeChanged}
             >
               {map(
-                registeredVisualizations,
+                sortBy(registeredVisualizations, ['type']),
                 vis => <Select.Option key={vis.type} data-test={'VisualizationType.' + vis.type}>{vis.name}</Select.Option>,
               )}
             </Select>

client/cypress/integration/visualizations/word_cloud_spec.js

@@ -29,9 +29,12 @@ describe('Word Cloud', () => {
       WordCloud.WordsColumn.a
     `);
 
+    // Wait for proper initialization of visualization
+    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
+
     cy.getByTestId('VisualizationPreview').find('svg text').should('have.length', 11);
 
-    cy.percySnapshot('Visualizations - Word Cloud (Automatic word frequencies)');
+    cy.percySnapshot('Visualizations - Word Cloud (Automatic word frequencies)', { widths: [1280] });
   });
 
   it('creates visualization with word frequencies from another column', () => {
@@ -47,6 +50,9 @@ describe('Word Cloud', () => {
       WordCloud.FrequenciesColumn.c
     `);
 
+    // Wait for proper initialization of visualization
+    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
+
     cy.getByTestId('VisualizationPreview').find('svg text').should('have.length', 5);
 
     cy.percySnapshot('Visualizations - Word Cloud (Frequencies from another column)');
@@ -72,6 +78,9 @@ describe('Word Cloud', () => {
       'WordCloud.WordCountLimit.Max': '3',
     });
 
+    // Wait for proper initialization of visualization
+    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
+
     cy.getByTestId('VisualizationPreview').find('svg text').should('have.length', 2);
 
     cy.percySnapshot('Visualizations - Word Cloud (With filters)');