Add tests for AD; refactoring;

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

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

@@ -11,7 +11,8 @@ import {
 import {
   deleteVisAugmenterData,
   bootstrapDashboard,
-  validateSnapshot,
+  validateVisSnapshot,
+  setDateRangeTo7Days,
 } from '../../../../../utils/dashboards/vis-augmenter/helpers';
 
 describe('Vis augmenter - existing dashboards work as expected', () => {
@@ -108,14 +109,19 @@ describe('Vis augmenter - existing dashboards work as expected', () => {
     });
 
     it('View events option does not exist for any visualization', () => {
-      // Change date range to 7 days so when we do chart snapshot comparisons
-      // the data is aggregated consistently to prevent flakiness
-      cy.getElementByTestId('superDatePickerToggleQuickMenuButton').click();
-      cy.getElementByTestId('superDatePickerCommonlyUsed_Last_7 days').click();
-      cy.getElementByTestId('querySubmitButton').click();
-      cy.wait(5000);
+      // Change date range to 7 days so there is less variability in charts
+      // which can cause flakiness (e.g., chart snapshot comparisons).
+      setDateRangeTo7Days();
+
       visualizationNames.forEach((visualizationName) => {
-        validateSnapshot(visualizationName);
+        // Validating after making each vis full-screen. This is because if there
+        // is a lot of visualizations on the screen, not all may be visible at the
+        // same time on the dashboard - some may require scrolling to be in view.
+        validateVisSnapshot(
+          visualizationName,
+          `${visualizationName}-last-7-days`,
+          true
+        );
         cy.getVisPanelByTitle(visualizationName)
           .openVisContextMenu()
           .getMenuItems()
@@ -125,7 +131,7 @@ describe('Vis augmenter - existing dashboards work as expected', () => {
       });
     });
 
-    it.skip('Validate non-vega visualizations are not rendered with vega under the hood', () => {
+    it('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/integration/plugins/anomaly-detection-dashboards-plugin/vis_augmenter/associate_detector_spec.js

@@ -14,6 +14,8 @@ import {
   ensureDetectorIsLinked,
   ensureDetectorDetails,
   openDetectorDetailsPageFromFlyout,
+  validateVisSnapshot,
+  setDateRangeTo7Days,
 } from '../../../../utils/helpers';
 import {
   INDEX_PATTERN_FILEPATH_SIMPLE,
@@ -51,6 +53,8 @@ describe('Anomaly detection integration with vis augmenter', () => {
       dashboardName,
       [visualizationSpec]
     );
+    // Setting viewport so the snapshots in the tests are consistent
+    cy.viewport(1280, 720);
   });
 
   after(() => {
@@ -82,6 +86,13 @@ describe('Anomaly detection integration with vis augmenter', () => {
     // the number of features will equal the number of metrics we have specified.
     ensureDetectorDetails(detectorName, visualizationSpec.metrics.length);
 
+    cy.visitDashboard(dashboardName);
+    setDateRangeTo7Days();
+    validateVisSnapshot(
+      visualizationName,
+      `${visualizationName}-with-created-detector`
+    );
+
     unlinkDetectorFromVis(dashboardName, visualizationName, detectorName);
   });
 
@@ -96,6 +107,14 @@ describe('Anomaly detection integration with vis augmenter', () => {
     associateDetectorFromVis(detectorName);
 
     ensureDetectorIsLinked(dashboardName, visualizationName, detectorName);
+
+    cy.visitDashboard(dashboardName);
+    setDateRangeTo7Days();
+    validateVisSnapshot(
+      visualizationName,
+      `${visualizationName}-with-associated-detector`
+    );
+
     unlinkDetectorFromVis(dashboardName, visualizationName, detectorName);
   });
 
@@ -105,6 +124,14 @@ describe('Anomaly detection integration with vis augmenter', () => {
     associateDetectorFromVis(detectorName);
 
     ensureDetectorIsLinked(dashboardName, visualizationName, detectorName);
+
+    cy.visitDashboard(dashboardName);
+    setDateRangeTo7Days();
+    validateVisSnapshot(
+      visualizationName,
+      `${visualizationName}-with-associated-detector-2`
+    );
+
     unlinkDetectorFromVis(dashboardName, visualizationName, detectorName);
   });
 

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

@@ -321,15 +321,34 @@ export const filterByObjectType = (type) => {
   cy.wait(3000);
 };
 
-export const validateSnapshot = (visualizationName) => {
-  cy.getVisPanelByTitle(visualizationName)
-    .openVisContextMenu()
-    .clickVisPanelMenuItem('Maximize panel');
-  cy.wait(1000);
-  cy.get(`[data-title="${visualizationName}"]`).matchImageSnapshot(
-    visualizationName
-  );
-  cy.getVisPanelByTitle(visualizationName)
-    .openVisContextMenu()
-    .clickVisPanelMenuItem('Minimize');
+// Assumes runner is on dashboard
+export const validateVisSnapshot = (
+  visualizationName,
+  snapshotName,
+  maximizePanel = false
+) => {
+  if (maximizePanel) {
+    cy.getVisPanelByTitle(visualizationName)
+      .openVisContextMenu()
+      .clickVisPanelMenuItem('Maximize panel');
+    cy.wait(1000);
+    cy.get(`[data-title="${visualizationName}"]`).matchImageSnapshot(
+      snapshotName
+    );
+    cy.getVisPanelByTitle(visualizationName)
+      .openVisContextMenu()
+      .clickVisPanelMenuItem('Minimize');
+  } else {
+    cy.get(`[data-title="${visualizationName}"]`).matchImageSnapshot(
+      snapshotName
+    );
+  }
+};
+
+// Assumes runner is on dashboard
+export const setDateRangeTo7Days = () => {
+  cy.getElementByTestId('superDatePickerToggleQuickMenuButton').click();
+  cy.getElementByTestId('superDatePickerCommonlyUsed_Last_7 days').click();
+  cy.getElementByTestId('querySubmitButton').click();
+  cy.wait(2000);
 };