[7.x] [Reporting/Test] Convert functional test code to Typescript (#64601) (#64828)

* [Reporting/Test] Convert functional test code to Typescript (#64601)

* Convert the tests to typescript

* remove outdated comment

* fix typescript

* fix "as any"

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

* fix ts

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: tsullivan

x-pack/test/functional/apps/dashboard/reporting/index.js renamed to x-pack/test/functional/apps/dashboard/reporting/index.ts

@@ -5,17 +5,18 @@
  */
 
 import expect from '@kbn/expect';
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
 import { promisify } from 'util';
+import { FtrProviderContext } from '../../../ftr_provider_context';
 import { checkIfPngsMatch } from './lib/compare_pngs';
 
 const writeFileAsync = promisify(fs.writeFile);
 const mkdirAsync = promisify(fs.mkdir);
 
 const REPORTS_FOLDER = path.resolve(__dirname, 'reports');
 
-export default function({ getService, getPageObjects }) {
+export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
   const log = getService('log');
@@ -85,14 +86,14 @@ export default function({ getService, getPageObjects }) {
 
     describe('Preserve Layout', () => {
       it('matches baseline report', async function() {
-        const writeSessionReport = async (name, rawPdf, reportExt) => {
+        const writeSessionReport = async (name: string, rawPdf: Buffer, reportExt: string) => {
           const sessionDirectory = path.resolve(REPORTS_FOLDER, 'session');
           await mkdirAsync(sessionDirectory, { recursive: true });
           const sessionReportPath = path.resolve(sessionDirectory, `${name}.${reportExt}`);
           await writeFileAsync(sessionReportPath, rawPdf);
           return sessionReportPath;
         };
-        const getBaselineReportPath = (fileName, reportExt) => {
+        const getBaselineReportPath = (fileName: string, reportExt: string) => {
           const baselineFolder = path.resolve(REPORTS_FOLDER, 'baseline');
           const fullPath = path.resolve(baselineFolder, `${fileName}.${reportExt}`);
           log.debug(`getBaselineReportPath (${fullPath})`);

x-pack/test/functional/apps/dashboard/reporting/lib/compare_pngs.js renamed to x-pack/test/functional/apps/dashboard/reporting/lib/compare_pngs.ts

@@ -4,14 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import path from 'path';
-import fs from 'fs';
 import { promisify } from 'bluebird';
+import fs from 'fs';
+import path from 'path';
 import { comparePngs } from '../../../../../../../test/functional/services/lib/compare_pngs';
 
-const mkdirAsync = promisify(fs.mkdir);
+const mkdirAsync = promisify<void, fs.PathLike, { recursive: boolean }>(fs.mkdir);
 
-export async function checkIfPngsMatch(actualpngPath, baselinepngPath, screenshotsDirectory, log) {
+export async function checkIfPngsMatch(
+  actualpngPath: string,
+  baselinepngPath: string,
+  screenshotsDirectory: string,
+  log: any
+) {
   log.debug(`checkIfpngsMatch: ${actualpngPath} vs ${baselinepngPath}`);
   // Copy the pngs into the screenshot session directory, as that's where the generated pngs will automatically be
   // stored.

x-pack/test/functional/apps/discover/reporting.js renamed to x-pack/test/functional/apps/discover/reporting.ts

@@ -5,8 +5,9 @@
  */
 
 import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function({ getService, getPageObjects }) {
+export default function({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');

x-pack/test/functional/apps/visualize/reporting.js renamed to x-pack/test/functional/apps/visualize/reporting.ts

@@ -5,8 +5,9 @@
  */
 
 import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
-export default function({ getService, getPageObjects }) {
+export default function({ getService, getPageObjects }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
   const browser = getService('browser');
   const log = getService('log');

x-pack/test/functional/page_objects/index.ts

@@ -19,7 +19,6 @@ import { GraphPageProvider } from './graph_page';
 import { GrokDebuggerPageProvider } from './grok_debugger_page';
 // @ts-ignore not ts yet
 import { WatcherPageProvider } from './watcher_page';
-// @ts-ignore not ts yet
 import { ReportingPageProvider } from './reporting_page';
 // @ts-ignore not ts yet
 import { AccountSettingProvider } from './accountsetting_page';

x-pack/test/functional/page_objects/reporting_page.js renamed to x-pack/test/functional/page_objects/reporting_page.ts

@@ -4,36 +4,30 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import http, { IncomingMessage } from 'http';
+import { FtrProviderContext } from 'test/functional/ftr_provider_context';
 import { parse } from 'url';
-import http from 'http';
 
-/*
- * NOTE: Reporting is a service, not an app. The page objects that are
- * important for generating reports belong to the apps that integrate with the
- * Reporting service. Eventually, this file should be dissolved across the
- * apps that need it for testing their integration.
- * Issue: https://github.com/elastic/kibana/issues/52927
- */
-export function ReportingPageProvider({ getService, getPageObjects }) {
+export function ReportingPageProvider({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
-  const PageObjects = getPageObjects(['common', 'security', 'share', 'timePicker']);
+  const PageObjects = getPageObjects(['common', 'security' as any, 'share', 'timePicker']); // FIXME: Security PageObject is not Typescript
 
   class ReportingPage {
-    async forceSharedItemsContainerSize({ width }) {
+    async forceSharedItemsContainerSize({ width }: { width: number }) {
       await browser.execute(`
         var el = document.querySelector('[data-shared-items-container]');
         el.style.flex="none";
         el.style.width="${width}px";
       `);
     }
 
-    async getReportURL(timeout) {
+    async getReportURL(timeout: number) {
       log.debug('getReportURL');
 
-      const url = await testSubjects.getAttribute('downloadCompletedReportButton', 'href', timeout);
+      const url = await testSubjects.getAttribute('downloadCompletedReportButton', 'href');
 
       log.debug(`getReportURL got url: ${url}`);
 
@@ -48,7 +42,7 @@ export function ReportingPageProvider({ getService, getPageObjects }) {
       `);
     }
 
-    getResponse(url) {
+    getResponse(url: string): Promise<IncomingMessage> {
       log.debug(`getResponse for ${url}`);
       const auth = 'test_user:changeme'; // FIXME not sure why there is no config that can be read for this
       const headers = {
@@ -62,29 +56,30 @@ export function ReportingPageProvider({ getService, getPageObjects }) {
               hostname: parsedUrl.hostname,
               path: parsedUrl.path,
               port: parsedUrl.port,
-              responseType: 'arraybuffer',
               headers,
             },
-            res => {
+            (res: IncomingMessage) => {
               resolve(res);
             }
           )
-          .on('error', e => {
+          .on('error', (e: Error) => {
             log.error(e);
             reject(e);
           });
       });
     }
 
-    async getRawPdfReportData(url) {
-      const data = []; // List of Buffer objects
+    async getRawPdfReportData(url: string): Promise<Buffer> {
+      const data: Buffer[] = []; // List of Buffer objects
       log.debug(`getRawPdfReportData for ${url}`);
 
       return new Promise(async (resolve, reject) => {
         const response = await this.getResponse(url).catch(reject);
 
-        response.on('data', chunk => data.push(chunk));
-        response.on('end', () => resolve(Buffer.concat(data)));
+        if (response) {
+          response.on('data', (chunk: Buffer) => data.push(chunk));
+          response.on('end', () => resolve(Buffer.concat(data)));
+        }
       });
     }