Add visual regression testing

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/vis-augmenter/dashboard_spec.js

@@ -105,16 +105,28 @@ describe('Vis augmenter - existing dashboards work as expected', () => {
     });
 
     it('View events option does not exist for any visualization', () => {
+      // This is working and is fetching snapshots as expected.
+      // The problem is the viewport size is too small such that not all charts
+      // are fully visible where the snapshots are cut off. Need to either expand
+      // the viewport (make sure it still passes if headless?), or find a way to focus
+      // on the divs better somehow.
+      cy.viewport(1280, 720);
       visualizationNames.forEach((visualizationName) => {
+        cy.wait(2000);
+        cy.get(`[data-title="${visualizationName}"]`).matchImageSnapshot(
+          visualizationName
+        );
+        cy.wait(2000);
         cy.getVisPanelByTitle(visualizationName)
           .openVisContextMenu()
           .getMenuItems()
           .contains('View Events')
           .should('not.exist');
+        cy.getVisPanelByTitle(visualizationName).closeVisContextMenu();
       });
     });
 
-    it('Validate non-vega visualizations are not rendered with vega under the hood', () => {
+    it.skip('Validate non-vega visualizations are not rendered with vega under the hood', () => {
       visualizationSpecs.forEach((visualizationSpec) => {
         cy.getVisPanelByTitle(visualizationSpec.name).within(() => {
           if (visualizationSpec.type === 'vega') {

cypress/plugins/index.js

@@ -3,6 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+const {
+  addMatchImageSnapshotPlugin,
+} = require('cypress-image-snapshot/plugin');
+
 /// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
@@ -24,4 +28,5 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  addMatchImageSnapshotPlugin(on, config);
 };

cypress/support/commands.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.05, // threshold for entire image
+  failureThresholdType: 'percent', // percent of image or number of pixels
+  capture: 'viewport', // capture viewport in screenshot
+});

cypress/support/index.js

@@ -19,6 +19,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import './commands';
 import '../utils/commands';
 import '../utils/dashboards/commands';
 import '../utils/dashboards/datasource-management-dashboards-plugin/commands';

cypress/utils/dashboards/vis-augmenter/commands.js

@@ -17,6 +17,13 @@ Cypress.Commands.add('openVisContextMenu', { prevSubject: true }, (panel) =>
     .then(() => cy.get('.euiContextMenu'))
 );
 
+Cypress.Commands.add('closeVisContextMenu', { prevSubject: true }, (panel) =>
+  cy
+    .wrap(panel)
+    .find(`[data-test-subj="embeddablePanelContextMenuOpen"]`)
+    .click()
+);
+
 Cypress.Commands.add(
   'clickVisPanelMenuItem',
   { prevSubject: 'optional' },