[ftr] migrate "embedding" and "renderable" services to FtrService class (#100596) (#100846)

Co-authored-by: spalger <spalger@users.noreply.github.com>

Co-authored-by: Spencer <email@spalger.com>
Co-authored-by: spalger <spalger@users.noreply.github.com>

Author: 3 people

test/functional/services/embedding.ts

@@ -6,24 +6,20 @@
  * Side Public License, v 1.
  */
 
-import { FtrProviderContext } from '../ftr_provider_context';
+import { FtrService } from '../ftr_provider_context';
 
-export function EmbeddingProvider({ getService, getPageObjects }: FtrProviderContext) {
-  const browser = getService('browser');
-  const log = getService('log');
-  const PageObjects = getPageObjects(['header']);
+export class EmbeddingService extends FtrService {
+  private readonly browser = this.ctx.getService('browser');
+  private readonly log = this.ctx.getService('log');
+  private readonly PageObjects = this.ctx.getPageObjects(['header']);
 
-  class Embedding {
-    /**
-     * Opens current page in embeded mode
-     */
-    public async openInEmbeddedMode(): Promise<void> {
-      const currentUrl = await browser.getCurrentUrl();
-      log.debug(`Opening in embedded mode: ${currentUrl}`);
-      await browser.get(`${currentUrl}&embed=true`);
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    }
+  /**
+   * Opens current page in embeded mode
+   */
+  public async openInEmbeddedMode(): Promise<void> {
+    const currentUrl = await this.browser.getCurrentUrl();
+    this.log.debug(`Opening in embedded mode: ${currentUrl}`);
+    await this.browser.get(`${currentUrl}&embed=true`);
+    await this.PageObjects.header.waitUntilLoadingHasFinished();
   }
-
-  return new Embedding();
 }

test/functional/services/index.ts

@@ -26,7 +26,7 @@ import {
   DashboardVisualizationsService,
 } from './dashboard';
 import { DocTableService } from './doc_table';
-import { EmbeddingProvider } from './embedding';
+import { EmbeddingService } from './embedding';
 import { FilterBarService } from './filter_bar';
 import { FlyoutService } from './flyout';
 import { GlobalNavService } from './global_nav';
@@ -35,7 +35,7 @@ import { FieldEditorService } from './field_editor';
 import { ManagementMenuService } from './management';
 import { QueryBarProvider } from './query_bar';
 import { RemoteProvider } from './remote';
-import { RenderableProvider } from './renderable';
+import { RenderableService } from './renderable';
 import { ToastsService } from './toasts';
 import { DataGridService } from './data_grid';
 import {
@@ -70,8 +70,8 @@ export const services = {
   flyout: FlyoutService,
   comboBox: ComboBoxService,
   dataGrid: DataGridService,
-  embedding: EmbeddingProvider,
-  renderable: RenderableProvider,
+  embedding: EmbeddingService,
+  renderable: RenderableService,
   browser: BrowserProvider,
   pieChart: PieChartService,
   inspector: InspectorService,

test/functional/services/renderable.ts

@@ -6,49 +6,45 @@
  * Side Public License, v 1.
  */
 
-import { FtrProviderContext } from '../ftr_provider_context';
+import { FtrService } from '../ftr_provider_context';
 
 const RENDER_COMPLETE_SELECTOR = '[data-render-complete="true"]';
 const RENDER_COMPLETE_PENDING_SELECTOR = '[data-render-complete="false"]';
 const DATA_LOADING_SELECTOR = '[data-loading]';
 
-export function RenderableProvider({ getService }: FtrProviderContext) {
-  const log = getService('log');
-  const retry = getService('retry');
-  const find = getService('find');
+export class RenderableService extends FtrService {
+  private readonly log = this.ctx.getService('log');
+  private readonly retry = this.ctx.getService('retry');
+  private readonly find = this.ctx.getService('find');
 
-  class Renderable {
-    /**
-     * This method waits for a certain number of objects to finish rendering and loading, which is indicated
-     * by a couple tags. The RENDER_COMPLETE_SELECTOR indicates that it's done initially loading up. Some
-     * visualizations also add a DATA_LOADING_SELECTOR when the internal data is loading. This test will not
-     * return if any of those tags are found.
-     * @param count {Number} Number of RENDER_COMPLETE_SELECTORs to wait for.
-     */
-    public async waitForRender(count: number = 1): Promise<void> {
-      log.debug(`Renderable.waitForRender for ${count} elements`);
-      await retry.try(async () => {
-        const completedElements = await find.allByCssSelector(RENDER_COMPLETE_SELECTOR);
-        if (completedElements.length < count) {
-          const pendingElements = await find.allByCssSelector(RENDER_COMPLETE_PENDING_SELECTOR);
-          const pendingElementNames = [];
-          for (const pendingElement of pendingElements) {
-            const title = await pendingElement.getAttribute('data-title');
-            pendingElementNames.push(title);
-          }
-          throw new Error(`${
-            completedElements.length
-          } elements completed rendering, still waiting on a total of ${count}
-                specifically:\n${pendingElementNames.join('\n')}`);
+  /**
+   * This method waits for a certain number of objects to finish rendering and loading, which is indicated
+   * by a couple tags. The RENDER_COMPLETE_SELECTOR indicates that it's done initially loading up. Some
+   * visualizations also add a DATA_LOADING_SELECTOR when the internal data is loading. This test will not
+   * return if any of those tags are found.
+   * @param count {Number} Number of RENDER_COMPLETE_SELECTORs to wait for.
+   */
+  public async waitForRender(count: number = 1): Promise<void> {
+    this.log.debug(`Renderable.waitForRender for ${count} elements`);
+    await this.retry.try(async () => {
+      const completedElements = await this.find.allByCssSelector(RENDER_COMPLETE_SELECTOR);
+      if (completedElements.length < count) {
+        const pendingElements = await this.find.allByCssSelector(RENDER_COMPLETE_PENDING_SELECTOR);
+        const pendingElementNames = [];
+        for (const pendingElement of pendingElements) {
+          const title = await pendingElement.getAttribute('data-title');
+          pendingElementNames.push(title);
         }
+        throw new Error(`${
+          completedElements.length
+        } elements completed rendering, still waiting on a total of ${count}
+                specifically:\n${pendingElementNames.join('\n')}`);
+      }
 
-        const stillLoadingElements = await find.allByCssSelector(DATA_LOADING_SELECTOR, 1000);
-        if (stillLoadingElements.length > 0) {
-          throw new Error(`${stillLoadingElements.length} elements still loading contents`);
-        }
-      });
-    }
+      const stillLoadingElements = await this.find.allByCssSelector(DATA_LOADING_SELECTOR, 1000);
+      if (stillLoadingElements.length > 0) {
+        throw new Error(`${stillLoadingElements.length} elements still loading contents`);
+      }
+    });
   }
-
-  return new Renderable();
 }