Event cypress tests

dashboards-observability/.cypress/utils/constants.js

@@ -93,25 +93,6 @@ export const PPL_QUERY_TEXT = `%ppl
 source=opensearch_dashboards_sample_data_flights
 `
 
-// event analytics
-export const TEST_QUERIES = [
-  {
-    query: 'source = opensearch_dashboards_sample_data_flights'
-  },
-  {
-    query: 'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier'
-  },
-  {
-    query: 'source = opensearch_dashboards_sample_data_logs'
-  },
-];
-
-export const TESTING_PANEL = 'Mock Testing Panels';
-export const SAVE_QUERY1 = 'Mock Flight Events Overview';
-export const SAVE_QUERY2 = 'Mock Flight count by destination';
-export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel';
-export const SAVE_QUERY4 = 'Mock Flight peek';
-
 export const supressResizeObserverIssue = () => {
   // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
   cy.on('uncaught:exception', (err, runnable) => {

dashboards-observability/.cypress/utils/event_constants.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { supressResizeObserverIssue } from './constants'
+
+export const delay = 1000;
+export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]'
+
+export const TEST_QUERIES = [
+  {
+    query: 'source = opensearch_dashboards_sample_data_flights',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
+  {
+    query: 'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier'
+  },
+  {
+    query: 'source = opensearch_dashboards_sample_data_logs'
+  },
+  {
+    query: 'source = opensearch_dashboards_sample_data_logs | stats count() by host',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
+  {
+    query: 'source = opensearch_dashboards_sample_data_logs | stats count(), avg(bytes) by host, tags',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
+];
+
+export const TESTING_PANEL = 'Mock Testing Panels';
+export const SAVE_QUERY1 = 'Mock Flight Events Overview';
+export const SAVE_QUERY2 = 'Mock Flight count by destination';
+export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel';
+export const SAVE_QUERY4 = 'Mock Flight peek';
+
+export const querySearch = (query, rangeSelected) => {
+  cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query);
+  cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
+  cy.get(rangeSelected).click();
+  cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
+};
+
+export const landOnEventHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
+  cy.wait(delay);
+};
+
+export const landOnEventExplorer = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
+  );
+  cy.wait(delay);
+};
+
+export const landOnEventVisualizations = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
+  );
+  cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
+  supressResizeObserverIssue();
+  cy.wait(delay);
+};
+
+export const landOnPanels = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels`
+  );
+  cy.wait(delay);
+};

dashboards-observability/public/components/app.tsx

@@ -26,6 +26,11 @@ interface ObservabilityAppDeps {
   timestampUtils: any;
 }
 
+// for cypress to test redux store
+if (window.Cypress) {
+  window.store = store;
+}
+
 export const App = ({
   CoreStartProp,
   DepsStart,

dashboards-observability/public/components/explorer/sidebar/field_insights.tsx

@@ -127,7 +127,7 @@ export const FieldInsights = ({ field, query }: any) => {
   }, [curReport, reportContent, field.name]);
 
   return (
-    <EuiFlexGroup direction="column">
+    <EuiFlexGroup direction="column" data-test-subj="sidebarField__fieldInsights">
       <EuiFlexItem grow={false}>
         <EuiFlexGroup wrap>
           {generalReports.map((report) => {

dashboards-observability/public/components/explorer/timechart_header/timechart_header.tsx

@@ -66,7 +66,7 @@ export function TimechartHeader({
             })}
             compressed
             id="dscResultsIntervalSelector"
-            data-test-subj="discoverIntervalSelect"
+            data-test-subj="eventAnalytics__EventIntervalSelect"
             options={options}
             value={interval}
             onChange={handleIntervalChange}

dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/config_controls/config_value_options.tsx

@@ -13,6 +13,7 @@ export const ConfigValueOptions = ({
   vizState,
   handleConfigChange,
   sectionName,
+  sectionId = 'valueOptions'
 }: any) => {
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
@@ -55,7 +56,7 @@ export const ConfigValueOptions = ({
   return (
     <EuiAccordion
       initialIsOpen
-      id={`configPanel__${sectionName}`}
+      id={`configPanel__${sectionId}`}
       buttonContent={sectionName}
       paddingSize="s"
     >

dashboards-observability/public/components/explorer/visualizations/config_panel/config_editor/default_vis_editor.tsx

@@ -27,6 +27,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
           handleConfigChange={handleConfigEditing(section.mapTo)}
           vizState={vizState[section.mapTo] || section.defaultState || {}}
           sectionName={section.name}
+          sectionId={section.id}
         />
       </EuiFormRow>
     );

dashboards-observability/public/components/explorer/visualizations/config_panel/config_panel.tsx

@@ -186,7 +186,9 @@ export const ConfigPanel = ({ visualizations, setCurVisId }: any) => {
         gutterSize="none"
         responsive={false}
       >
-        <EuiFlexItem>
+        <EuiFlexItem
+          data-test-subj="configPane__vizTypeSelector"
+        >
           <EuiSpacer size="s" />
           <EuiComboBox
             aria-label="config chart selector"

dashboards-observability/public/components/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap

@@ -169,4 +169,185 @@ exports[`Count distribution component Renders count distribution component with
 </CountDistribution>
 `;
 
+exports[`Count distribution component Renders count distribution component with data 2`] = `
+<CountDistribution
+  countDistribution={
+    Object {
+      "data": Object {
+        "count()": Array [
+          2549,
+          9337,
+          1173,
+        ],
+        "span(timestamp,1M)": Array [
+          "2021-05-01 00:00:00",
+          "2021-06-01 00:00:00",
+          "2021-07-01 00:00:00",
+        ],
+      },
+      "jsonData": Array [
+        Object {
+          "count()": 2549,
+          "span(timestamp,1M)": "2021-05-01 00:00:00",
+        },
+        Object {
+          "count()": 9337,
+          "span(timestamp,1M)": "2021-06-01 00:00:00",
+        },
+        Object {
+          "count()": 2549,
+          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        },
+      ],
+      "metadata": Object {
+        "fields": Array [
+          Object {
+            "name": "count()",
+            "type": "integer",
+          },
+          Object {
+            "name": "span(timestamp,1M)",
+            "type": "timestamp",
+          },
+        ],
+      },
+    }
+  }
+>
+  <Plt
+    data={
+      Array [
+        Object {
+          "name": Object {
+            "name": "count()",
+            "type": "integer",
+          },
+          "orientation": "v",
+          "type": "bar",
+          "x": Array [
+            "2021-05-01 00:00:00",
+            "2021-06-01 00:00:00",
+            "2021-07-01 00:00:00",
+          ],
+          "y": Array [
+            2549,
+            9337,
+            1173,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "name": Object {
+              "name": "count()",
+              "type": "integer",
+            },
+            "orientation": "v",
+            "type": "bar",
+            "x": Array [
+              "2021-05-01 00:00:00",
+              "2021-06-01 00:00:00",
+              "2021-07-01 00:00:00",
+            ],
+            "y": Array [
+              2549,
+              9337,
+              1173,
+            ],
+          },
+        ]
+      }
+      debug={false}
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 15,
+            "l": 60,
+            "pad": 0,
+            "r": 10,
+            "t": 30,
+          },
+          "showlegend": true,
+          "xaxis": Object {
+            "automargin": true,
+            "autorange": true,
+            "range": Array [
+              "2021-04-16",
+              "2021-07-16",
+            ],
+            "rangemode": "normal",
+            "showgrid": true,
+            "type": "date",
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "autorange": true,
+            "range": Array [
+              0,
+              9828.421052631578,
+            ],
+            "rangemode": "normal",
+            "showgrid": true,
+            "type": "linear",
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</CountDistribution>
+`;
+
 exports[`Count distribution component Renders empty count distribution component 1`] = `<CountDistribution />`;

dashboards-observability/public/components/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap

@@ -7,11 +7,13 @@ exports[`Shared components Renders empty placeholder component 1`] = `
   <EuiText
     className="lnsChart__empty"
     color="subdued"
+    data-test-subj="vizWorkspace__noData"
     size="xs"
     textAlign="center"
   >
     <div
       className="euiText euiText--extraSmall lnsChart__empty"
+      data-test-subj="vizWorkspace__noData"
     >
       <EuiTextAlign
         textAlign="center"
@@ -71,7 +73,7 @@ exports[`Shared components Renders empty placeholder component 1`] = `
               <p>
                 <FormattedMessage
                   defaultMessage="No results found"
-                  id="xpack.lens.xyVisualization.noDataLabel"
+                  id="visualization_noData"
                   values={Object {}}
                 >
                   <span>

dashboards-observability/public/components/explorer/visualizations/shared_components/empty_placeholder.tsx

@@ -9,12 +9,12 @@ import { FormattedMessage } from '@osd/i18n/react';
 
 export const EmptyPlaceholder = (props: {icon: string}) => (
   <>
-    <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
+    <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs" data-test-subj="vizWorkspace__noData">
       <EuiIcon type={props.icon} color="subdued" size="l" />
       <EuiSpacer size="s" />
       <p>
         <FormattedMessage
-          id="xpack.lens.xyVisualization.noDataLabel"
+          id="visualization_noData"
           defaultMessage="No results found"
         />
       </p>