Revert "Remove percy based visual regression tests (#136359)" (#136437)

* Revert "Remove percy based visual regression tests (#136359)"

This reverts commit a91aeb4.

* update codeowners

.buildkite/ftr_configs.yml

@@ -44,6 +44,8 @@ disabled:
   - x-pack/plugins/observability/e2e/synthetics_run.ts
 
   # Configs that exist but weren't running in CI when this file was introduced
+  - test/visual_regression/config.ts
+  - x-pack/test/visual_regression/config.ts
   - x-pack/test/alerting_api_integration/security_and_spaces/group2/tests/actions/config.ts
   - x-pack/test/alerting_api_integration/security_and_spaces/group2/tests/telemetry/config.ts
   - x-pack/test/alerting_api_integration/spaces_only_legacy/config.ts

.eslintrc.js

@@ -702,6 +702,7 @@ module.exports = {
         'test/*/config_open.ts',
         'test/*/*.config.ts',
         'test/*/{tests,test_suites,apis,apps}/**/*',
+        'test/visual_regression/tests/**/*',
         'x-pack/test/*/{tests,test_suites,apis,apps}/**/*',
         'x-pack/test/*/*config.*ts',
         'x-pack/test/saved_object_api_integration/*/apis/**/*',

.github/CODEOWNERS

@@ -210,6 +210,7 @@
 /x-pack/test/api_integration/apis/maps/ @elastic/kibana-gis
 /x-pack/test/functional/apps/maps/ @elastic/kibana-gis
 /x-pack/test/functional/es_archives/maps/ @elastic/kibana-gis
+/x-pack/test/visual_regression/tests/maps/index.js @elastic/kibana-gis
 /x-pack/plugins/stack_alerts/server/alert_types/geo_containment @elastic/kibana-gis
 /x-pack/plugins/stack_alerts/public/alert_types/geo_containment @elastic/kibana-gis
 #CC# /x-pack/plugins/file_upload @elastic/kibana-gis
@@ -265,6 +266,8 @@
 /test/functional/services/common @elastic/kibana-qa
 /test/functional/services/lib @elastic/kibana-qa
 /test/functional/services/remote @elastic/kibana-qa
+/test/visual_regression @elastic/kibana-qa
+/x-pack/test/visual_regression @elastic/kibana-qa
 
 # Core
 /examples/hello_world/ @elastic/kibana-core

package.json

@@ -616,6 +616,7 @@
     "@mapbox/vector-tile": "1.3.1",
     "@octokit/rest": "^16.35.0",
     "@openpgp/web-stream-tools": "^0.0.10",
+    "@percy/agent": "^0.28.6",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-controls": "^6.4.22",

packages/kbn-pm/dist/index.js

@@ -23844,7 +23844,7 @@ module.exports.sync = (patterns, {force, dryRun, cwd = process.cwd(), ...options
 
 "use strict";
 
-const indentString = __webpack_require__("../../node_modules/indent-string/index.js");
+const indentString = __webpack_require__("../../node_modules/del/node_modules/indent-string/index.js");
 const cleanStack = __webpack_require__("../../node_modules/clean-stack/index.js");
 
 const cleanInternalStack = stack => stack.replace(/\s+at .*aggregate-error\/index.js:\d+:\d+\)?/g, '');
@@ -24257,6 +24257,49 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ "../../node_modules/del/node_modules/indent-string/index.js":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+module.exports = (string, count = 1, options) => {
+	options = {
+		indent: ' ',
+		includeEmptyLines: false,
+		...options
+	};
+
+	if (typeof string !== 'string') {
+		throw new TypeError(
+			`Expected \`input\` to be a \`string\`, got \`${typeof string}\``
+		);
+	}
+
+	if (typeof count !== 'number') {
+		throw new TypeError(
+			`Expected \`count\` to be a \`number\`, got \`${typeof count}\``
+		);
+	}
+
+	if (typeof options.indent !== 'string') {
+		throw new TypeError(
+			`Expected \`options.indent\` to be a \`string\`, got \`${typeof options.indent}\``
+		);
+	}
+
+	if (count === 0) {
+		return string;
+	}
+
+	const regex = options.includeEmptyLines ? /^/gm : /^(?!\s*$)/gm;
+
+	return string.replace(regex, options.indent.repeat(count));
+};
+
+
 /***/ }),
 
 /***/ "../../node_modules/del/node_modules/p-map/index.js":
@@ -34306,49 +34349,6 @@ if (
 }());
 
 
-/***/ }),
-
-/***/ "../../node_modules/indent-string/index.js":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = (string, count = 1, options) => {
-	options = {
-		indent: ' ',
-		includeEmptyLines: false,
-		...options
-	};
-
-	if (typeof string !== 'string') {
-		throw new TypeError(
-			`Expected \`input\` to be a \`string\`, got \`${typeof string}\``
-		);
-	}
-
-	if (typeof count !== 'number') {
-		throw new TypeError(
-			`Expected \`count\` to be a \`number\`, got \`${typeof count}\``
-		);
-	}
-
-	if (typeof options.indent !== 'string') {
-		throw new TypeError(
-			`Expected \`options.indent\` to be a \`string\`, got \`${typeof options.indent}\``
-		);
-	}
-
-	if (count === 0) {
-		return string;
-	}
-
-	const regex = options.includeEmptyLines ? /^/gm : /^(?!\s*$)/gm;
-
-	return string.replace(regex, options.indent.repeat(count));
-};
-
-
 /***/ }),
 
 /***/ "../../node_modules/inflight/inflight.js":

test/visual_regression/config.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrConfigProviderContext } from '@kbn/test';
+import { services } from './services';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const functionalConfig = await readConfigFile(require.resolve('../functional/config.base.js'));
+
+  return {
+    ...functionalConfig.getAll(),
+
+    testFiles: [
+      require.resolve('./tests/console_app'),
+      require.resolve('./tests/discover'),
+      require.resolve('./tests/vega'),
+    ],
+
+    services,
+
+    junit: {
+      reportName: 'Kibana Visual Regression Tests',
+    },
+  };
+}

test/visual_regression/ftr_provider_context.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { GenericFtrProviderContext, GenericFtrService } from '@kbn/test';
+
+import { pageObjects } from '../functional/page_objects';
+import { services } from './services';
+
+export type FtrProviderContext = GenericFtrProviderContext<typeof services, typeof pageObjects>;
+export class FtrService extends GenericFtrService<FtrProviderContext> {}

test/visual_regression/services/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { services as functionalServices } from '../../functional/services';
+import { VisualTestingService } from './visual_testing';
+
+export const services = {
+  ...functionalServices,
+  visualTesting: VisualTestingService,
+};

test/visual_regression/services/visual_testing/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './visual_testing';

test/visual_regression/services/visual_testing/take_percy_snapshot.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { readFileSync } from 'fs';
+import { agentJsFilename } from '@percy/agent/dist/utils/sdk-utils';
+
+export function takePercySnapshot(show, hide) {
+  if (!window.PercyAgent) {
+    return false;
+  }
+
+  // add percy styles to hide/show specific elements
+  const styleElement = document.createElement('style');
+  styleElement.appendChild(
+    document.createTextNode(`
+    .hideInPercy {
+      visibility: hidden;
+
+      .showInPercy {
+        visibility: visible;
+      }
+    }
+
+    .showInPercy {
+      visibility: visible;
+
+      .hideInPercy {
+        visibility: hidden;
+      }
+    }
+  `)
+  );
+  document.head.appendChild(styleElement);
+
+  const add = (selectors, className) => {
+    for (const selector of selectors) {
+      for (const element of document.querySelectorAll(selector)) {
+        element.classList.add(className);
+      }
+    }
+  };
+
+  const remove = (selectors, className) => {
+    for (const selector of selectors) {
+      for (const element of document.querySelectorAll(selector)) {
+        element.classList.remove(className);
+      }
+    }
+  };
+
+  // set Percy visibility on elements
+  add(hide, 'hideInPercy');
+  if (show.length > 0) {
+    // hide the body by default
+    add(['body'], 'hideInPercy');
+    add(show, 'showInPercy');
+  }
+
+  // convert canvas elements into static images
+  const replacements = [];
+  for (const canvas of document.querySelectorAll('canvas')) {
+    const image = document.createElement('img');
+    image.classList.value = canvas.classList.value;
+    image.src = canvas.toDataURL();
+    image.style.cssText = window.getComputedStyle(canvas).cssText;
+    canvas.parentElement.replaceChild(image, canvas);
+    replacements.push({ canvas, image });
+  }
+
+  try {
+    const agent = new window.PercyAgent({
+      handleAgentCommunication: false,
+    });
+
+    // cache the dom snapshot containing the images
+    return agent.snapshot(document, {
+      widths: [document.documentElement.clientWidth],
+    });
+  } finally {
+    // restore replaced canvases
+    for (const { image, canvas } of replacements) {
+      image.parentElement.replaceChild(canvas, image);
+    }
+
+    // restore element visibility
+    document.head.removeChild(styleElement);
+    remove(['body'], 'hideInPercy');
+    remove(show, 'showInPercy');
+    remove(hide, 'hideInPercy');
+  }
+}
+
+export const takePercySnapshotWithAgent = `
+  ${readFileSync(agentJsFilename(), 'utf8')}
+
+  return (${takePercySnapshot.toString()}).apply(null, arguments);
+`;