[7.x] Tsfy screenshot service and comparepng internal lib (#37177) (#37195)

* Tsfy screenshot service and comparepng internal lib (#37177)

* fix issue with jimp library

* Revert "fix issue with jimp library"

This reverts commit 7f3cead5fb.

test/functional/services/index.ts

@@ -47,7 +47,6 @@ import { QueryBarProvider } from './query_bar';
 import { RemoteProvider } from './remote';
 // @ts-ignore not TS yet
 import { RenderableProvider } from './renderable';
-// @ts-ignore not TS yet
 import { ScreenshotsProvider } from './screenshots';
 // @ts-ignore not TS yet
 import { SnapshotsProvider } from './snapshots';

test/functional/services/lib/compare_pngs.ts

@@ -17,22 +17,46 @@
  * under the License.
  */
 
-import path from 'path';
+import { parse, join } from 'path';
 import Jimp from 'jimp';
+import { ToolingLog } from '@kbn/dev-utils';
 
-export async function comparePngs(sessionPath, baselinePath, diffPath, sessionDirectory, log) {
+/**
+ * Comparing pngs and writing result to provided directory
+ *
+ * @param sessionPath
+ * @param baselinePath
+ * @param diffPath
+ * @param sessionDirectory
+ * @param log
+ * @returns Percent
+ */
+export async function comparePngs(
+  sessionPath: string,
+  baselinePath: string,
+  diffPath: string,
+  sessionDirectory: string,
+  log: ToolingLog
+) {
   log.debug(`comparePngs: ${sessionPath} vs ${baselinePath}`);
   const session = (await Jimp.read(sessionPath)).clone();
   const baseline = (await Jimp.read(baselinePath)).clone();
 
-  if (session.bitmap.width !== baseline.bitmap.width || session.bitmap.height !== baseline.bitmap.height) {
-    console.log('expected height ' + baseline.bitmap.height + ' and width ' + baseline.bitmap.width);
+  if (
+    session.bitmap.width !== baseline.bitmap.width ||
+    session.bitmap.height !== baseline.bitmap.height
+  ) {
+    // eslint-disable-next-line no-console
+    console.log(
+      'expected height ' + baseline.bitmap.height + ' and width ' + baseline.bitmap.width
+    );
+    // eslint-disable-next-line no-console
     console.log('actual height ' + session.bitmap.height + ' and width ' + session.bitmap.width);
 
     const width = Math.min(session.bitmap.width, baseline.bitmap.width);
     const height = Math.min(session.bitmap.height, baseline.bitmap.height);
-    session.resize(width, height);//, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP);
-    baseline.resize(width, height);//, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP);
+    session.resize(width, height); // , Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP);
+    baseline.resize(width, height); // , Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP);
   }
 
   session.quality(60);
@@ -43,15 +67,15 @@ export async function comparePngs(sessionPath, baselinePath, diffPath, sessionDi
   // any affect when comparing neighboring pixels - so slight shifts, font variations, or "blurry-ness"
   // will still show up as diffs, but upping this will not help that.  Instead we keep the threshold low, and expect
   // some the diffCount to be lower than our own threshold value.
-  const THRESHOLD = .1;
+  const THRESHOLD = 0.1;
   const { image, percent } = Jimp.diff(session, baseline, THRESHOLD);
   log.debug(`percent different: ${percent}`);
   if (percent > 0) {
     image.write(diffPath);
 
     // For debugging purposes it'll help to see the resized images and how they compare.
-    session.write(path.join(sessionDirectory, `${path.parse(sessionPath).name}-session-resized.png`));
-    baseline.write(path.join(sessionDirectory, `${path.parse(baselinePath).name}-baseline-resized.png`));
+    session.write(join(sessionDirectory, `${parse(sessionPath).name}-session-resized.png`));
+    baseline.write(join(sessionDirectory, `${parse(baselinePath).name}-baseline-resized.png`));
   }
   return percent;
 }

test/functional/services/screenshots.ts

@@ -19,15 +19,21 @@
 
 import { resolve, dirname } from 'path';
 import { writeFile, readFileSync } from 'fs';
-import { fromNode as fcb, promisify } from 'bluebird';
+import Bluebird, { fromNode as fcb, promisify } from 'bluebird';
+// @ts-ignore
 import mkdirp from 'mkdirp';
 import del from 'del';
 import { comparePngs } from './lib/compare_pngs';
+import { FtrProviderContext } from '../ftr_provider_context';
+import { WebElementWrapper } from './lib/web_element_wrapper';
 
-const mkdirAsync = promisify(mkdirp);
-const writeFileAsync = promisify(writeFile);
+type WriteFileAsync = (path: string | number | Buffer | URL, data: any) => Bluebird<void>;
+type MkDirAsync = (dirName: string) => Bluebird<void>;
 
-export async function ScreenshotsProvider({ getService }) {
+const mkdirAsync = promisify(mkdirp) as MkDirAsync;
+const writeFileAsync = promisify(writeFile) as WriteFileAsync;
+
+export async function ScreenshotsProvider({ getService }: FtrProviderContext) {
   const log = getService('log');
   const config = getService('config');
   const browser = getService('browser');
@@ -38,14 +44,13 @@ export async function ScreenshotsProvider({ getService }) {
   await del([SESSION_DIRECTORY, FAILURE_DIRECTORY]);
 
   class Screenshots {
-
     /**
      *
      * @param name {string} name of the file to use for comparison
      * @param updateBaselines {boolean} optional, pass true to update the baseline snapshot.
      * @return {Promise.<number>} Percentage difference between the baseline and the current snapshot.
      */
-    async compareAgainstBaseline(name, updateBaselines, el) {
+    async compareAgainstBaseline(name: string, updateBaselines: boolean, el: WebElementWrapper) {
       log.debug('compareAgainstBaseline');
       const sessionPath = resolve(SESSION_DIRECTORY, `${name}.png`);
       await this._take(sessionPath, el);
@@ -63,15 +68,15 @@ export async function ScreenshotsProvider({ getService }) {
       }
     }
 
-    async take(name, el) {
+    async take(name: string, el: WebElementWrapper) {
       return await this._take(resolve(SESSION_DIRECTORY, `${name}.png`), el);
     }
 
-    async takeForFailure(name, el) {
+    async takeForFailure(name: string, el: WebElementWrapper) {
       await this._take(resolve(FAILURE_DIRECTORY, `${name}.png`), el);
     }
 
-    async _take(path, el) {
+    async _take(path: string, el: WebElementWrapper) {
       try {
         log.info(`Taking screenshot "${path}"`);
         const screenshot = await (el ? el.takeScreenshot() : browser.takeScreenshot());