[6.x] Add functional tests for visualize loader API (#22595)

src/ui/public/visualize/loader/visualize_loader.ts

@@ -62,6 +62,11 @@ class VisualizeLoader {
    * In most of the cases you will need this method, since it allows you to specify
    * filters, handlers, queries, etc. on the savedObject before rendering.
    *
+   * We do not encourage you to use this method, since it will most likely be changed
+   * or removed in a future version of Kibana. Rather embed a visualization by its id
+   * via the {@link #embedVisualizationWithId} method.
+   *
+   * @deprecated You should rather embed by id, since this method will be removed in the future.
    * @param element The DOM element to render the visualization into.
    *    You can alternatively pass a jQuery element instead.
    * @param savedObj The savedObject as it could be retrieved by the
@@ -106,6 +111,8 @@ class VisualizeLoader {
     element.className = 'visualize';
     element.setAttribute('data-test-subj', 'visualizationLoader');
     container.appendChild(element);
+    // We need the container to have display: flex so visualization will render correctly
+    container.style.display = 'flex';
 
     // If params specified cssClass, we will set this to the element.
     if (params.cssClass) {

test/functional/config.js

@@ -53,6 +53,7 @@ import {
   ComboBoxProvider,
   EmbeddingProvider,
   RenderableProvider,
+  TableProvider,
 } from './services';
 
 export default async function ({ readConfigFile }) {
@@ -111,6 +112,7 @@ export default async function ({ readConfigFile }) {
       comboBox: ComboBoxProvider,
       embedding: EmbeddingProvider,
       renderable: RenderableProvider,
+      table: TableProvider,
     },
     servers: commonConfig.get('servers'),
 

test/functional/fixtures/es_archiver/visualize_embedding/mappings.json

@@ -0,0 +1,246 @@
+{
+  "type": "index",
+  "value": {
+    "index": ".kibana",
+    "settings": {
+      "index": {
+        "number_of_shards": "1",
+        "number_of_replicas": "1"
+      }
+    },
+    "mappings": {
+      "doc": {
+        "properties": {
+          "type": {
+            "type": "keyword"
+          },
+          "server": {
+            "dynamic": "strict",
+            "properties": {
+              "uuid": {
+                "type": "keyword"
+              }
+            }
+          },
+          "url": {
+            "dynamic": "strict",
+            "properties": {
+              "accessCount": {
+                "type": "long"
+              },
+              "accessDate": {
+                "type": "date"
+              },
+              "createDate": {
+                "type": "date"
+              },
+              "url": {
+                "type": "text",
+                "fields": {
+                  "keyword": {
+                    "type": "keyword",
+                    "ignore_above": 2048
+                  }
+                }
+              }
+            }
+          },
+          "search": {
+            "dynamic": "strict",
+            "properties": {
+              "columns": {
+                "type": "keyword"
+              },
+              "description": {
+                "type": "text"
+              },
+              "hits": {
+                "type": "integer"
+              },
+              "kibanaSavedObjectMeta": {
+                "properties": {
+                  "searchSourceJSON": {
+                    "type": "text"
+                  }
+                }
+              },
+              "sort": {
+                "type": "keyword"
+              },
+              "title": {
+                "type": "text"
+              },
+              "version": {
+                "type": "integer"
+              }
+            }
+          },
+          "visualization": {
+            "dynamic": "strict",
+            "properties": {
+              "description": {
+                "type": "text"
+              },
+              "kibanaSavedObjectMeta": {
+                "properties": {
+                  "searchSourceJSON": {
+                    "type": "text"
+                  }
+                }
+              },
+              "savedSearchId": {
+                "type": "keyword"
+              },
+              "title": {
+                "type": "text"
+              },
+              "uiStateJSON": {
+                "type": "text"
+              },
+              "version": {
+                "type": "integer"
+              },
+              "visState": {
+                "type": "text"
+              }
+            }
+          },
+          "index-pattern": {
+            "dynamic": "strict",
+            "properties": {
+              "fieldFormatMap": {
+                "type": "text"
+              },
+              "fields": {
+                "type": "text"
+              },
+              "intervalName": {
+                "type": "keyword"
+              },
+              "notExpandable": {
+                "type": "boolean"
+              },
+              "sourceFilters": {
+                "type": "text"
+              },
+              "timeFieldName": {
+                "type": "keyword"
+              },
+              "title": {
+                "type": "text"
+              }
+            }
+          },
+          "config": {
+            "dynamic": "true",
+            "properties": {
+              "buildNum": {
+                "type": "keyword"
+              }
+            }
+          },
+          "dashboard": {
+            "dynamic": "strict",
+            "properties": {
+              "description": {
+                "type": "text"
+              },
+              "hits": {
+                "type": "integer"
+              },
+              "kibanaSavedObjectMeta": {
+                "properties": {
+                  "searchSourceJSON": {
+                    "type": "text"
+                  }
+                }
+              },
+              "optionsJSON": {
+                "type": "text"
+              },
+              "panelsJSON": {
+                "type": "text"
+              },
+              "refreshInterval": {
+                "properties": {
+                  "display": {
+                    "type": "keyword"
+                  },
+                  "pause": {
+                    "type": "boolean"
+                  },
+                  "section": {
+                    "type": "integer"
+                  },
+                  "value": {
+                    "type": "integer"
+                  }
+                }
+              },
+              "timeFrom": {
+                "type": "keyword"
+              },
+              "timeRestore": {
+                "type": "boolean"
+              },
+              "timeTo": {
+                "type": "keyword"
+              },
+              "title": {
+                "type": "text"
+              },
+              "uiStateJSON": {
+                "type": "text"
+              },
+              "version": {
+                "type": "integer"
+              }
+            }
+          },
+          "timelion-sheet": {
+            "dynamic": "strict",
+            "properties": {
+              "description": {
+                "type": "text"
+              },
+              "hits": {
+                "type": "integer"
+              },
+              "kibanaSavedObjectMeta": {
+                "properties": {
+                  "searchSourceJSON": {
+                    "type": "text"
+                  }
+                }
+              },
+              "timelion_chart_height": {
+                "type": "integer"
+              },
+              "timelion_columns": {
+                "type": "integer"
+              },
+              "timelion_interval": {
+                "type": "keyword"
+              },
+              "timelion_other_interval": {
+                "type": "keyword"
+              },
+              "timelion_rows": {
+                "type": "integer"
+              },
+              "timelion_sheet": {
+                "type": "text"
+              },
+              "title": {
+                "type": "text"
+              },
+              "version": {
+                "type": "integer"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

test/functional/services/index.js

@@ -30,5 +30,6 @@ export { FlyoutProvider } from './flyout';
 export { EmbeddingProvider } from './embedding';
 export { ComboBoxProvider } from './combo_box';
 export { RenderableProvider } from './renderable';
+export { TableProvider } from './table';
 
 export * from './dashboard';

test/functional/services/table.js

@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function TableProvider({ getService }) {
+  const testSubjects = getService('testSubjects');
+  // const retry = getService('retry');
+
+  class Table {
+
+    async getDataFromTestSubj(testSubj) {
+      const table = await testSubjects.find(testSubj);
+      // Convert the data into a nested array format:
+      // [ [cell1_in_row1, cell2_in_row1], [cell1_in_row2, cell2_in_row2] ]
+      const rows = await table.findAllByTagName('tr');
+      return await Promise.all(rows.map(async row => {
+        const cells = await row.findAllByTagName('td');
+        return await Promise.all(cells.map(async cell => cell.getVisibleText()));
+      }));
+    }
+  }
+
+  return new Table();
+}

test/plugin_functional/README.md

@@ -21,3 +21,12 @@ node scripts/functional_tests_server.js --config test/plugin_functional/config.j
 # Start a test run
 node scripts/functional_test_runner.js --config test/plugin_functional/config.js
 ```
+
+## Run Kibana with a test plugin
+
+In case you want to start Kibana with one of the test plugins (e.g. for developing the
+test plugin), you can just run:
+
+```
+yarn start --plugin-path=test/plugin_functional/plugins/<plugin_folder>
+```

test/plugin_functional/config.js

@@ -30,6 +30,7 @@ export default async function ({ readConfigFile }) {
   return {
     testFiles: [
       require.resolve('./test_suites/app_plugins'),
+      require.resolve('./test_suites/embedding_visualizations'),
       require.resolve('./test_suites/panel_actions'),
     ],
     services: functionalConfig.get('services'),

test/plugin_functional/plugins/visualize_embedding/index.js

@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default function (kibana) {
+  return new kibana.Plugin({
+    uiExports: {
+      app: {
+        title: 'Embedding Vis',
+        description: 'This is a sample plugin to test embedding of visualizations',
+        main: 'plugins/visualize_embedding/app',
+      }
+    },
+
+    init(server) {
+      // The following lines copy over some configuration variables from Kibana
+      // to this plugin. This will be needed when embedding visualizations, so that e.g.
+      // region map is able to get its configuration.
+      server.injectUiAppVars('visualize_embedding', async () => {
+        return await server.getInjectedUiAppVars('kibana');
+      });
+    }
+  });
+}

test/plugin_functional/plugins/visualize_embedding/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "visualize_embedding",
+  "version": "kibana"
+}