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/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>

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

@@ -21,7 +21,7 @@ interface IWorkSpacePanel {
 export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
   const [isTableViewOn, setIsTableViewOn] = useState(false);
   const VisualizationPanel = useMemo(() => {
-    return <Visualization visualizations={visualizations} />;
+    return <Visualization visualizations={visualizations} data-test-subj="workspace__visualizations"  />;
   }, [visualizations]);
 
   return (
@@ -55,6 +55,7 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
                     setIsTableViewOn((staleState) => !staleState);
                   }}
                   aria-describedby="table view switcher"
+                  data-test-subj="workspace__dataTableViewSwitch"
                   compressed
                 />
               </EuiPanel>
@@ -64,7 +65,10 @@ export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiPanel paddingSize="s">
-            {isTableViewOn ? <DataTable visualizations={visualizations} /> : VisualizationPanel}
+            {isTableViewOn ? 
+            <DataTable 
+              visualizations={visualizations}
+            /> : VisualizationPanel}
           </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>

dashboards-observability/public/components/visualizations/charts/data_table/data_table.tsx

@@ -87,6 +87,7 @@ export const DataTable = ({ visualizations }: any) => {
   return (
     <EuiDataGrid
       aria-label="viz data table"
+      data-test-subj="workspace__dataTable"
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={raw_data.length}

dashboards-observability/public/components/visualizations/charts/text/text.tsx

@@ -16,8 +16,10 @@ export const Text = ({ visualizations }: any) => {
   const { dataConfig = {} } = visualizations?.data?.userConfigs;
 
   return (
-    <EuiMarkdownFormat>
-      {dataConfig.text?.markdown ? dataConfig.text?.markdown : DEFAULT_MARKDOWN}
-    </EuiMarkdownFormat>
+    <div data-test-subj="workspace__viz_markdown">
+      <EuiMarkdownFormat>
+        {dataConfig.text?.markdown ? dataConfig.text?.markdown : DEFAULT_MARKDOWN}
+      </EuiMarkdownFormat>
+    </div>
   );
 };