[Cypress Test] Add and Refactor TESTID-140 sidebar spec and clean up

changelogs/fragments/9154.yml

@@ -0,0 +1,2 @@
+test:
+- [Cypress Test] Add and Refactor TESTID-140 sidebar spec and clean up ([#9154](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9154))

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/field_display_filtering.spec.js

@@ -12,7 +12,7 @@ import {
   END_TIME,
   DATASET_CONFIGS,
 } from '../../../../../utils/apps/constants';
-import * as dataExplorer from '../../../../../integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/utils/field_display_filtering.js';
+import * as fieldFiltering from './helpers/field_display_filtering';
 import { SECONDARY_ENGINE, BASE_PATH } from '../../../../../utils/constants';
 import { NEW_SEARCH_BUTTON } from '../../../../../utils/dashboards/data_explorer/elements.js';
 
@@ -22,10 +22,10 @@ const workspace = `${WORKSPACE_NAME}-${randomString}`;
 const selectDataset = (datasetType, language) => {
   switch (datasetType) {
     case 'index':
-      dataExplorer.selectIndexDataset(DATASOURCE_NAME, INDEX_NAME, language);
+      fieldFiltering.selectIndexDataset(DATASOURCE_NAME, INDEX_NAME, language);
       break;
     case 'index_pattern':
-      dataExplorer.selectIndexPatternDataset(INDEX_PATTERN_NAME, language);
+      fieldFiltering.selectIndexPatternDataset(INDEX_PATTERN_NAME, language);
       break;
   }
 };
@@ -43,21 +43,21 @@ const verifyTableFieldFilterActions = (datasetType, language, shouldExist) => {
   cy.getElementByTestId('docTable').get('tbody tr').should('have.length.above', 3); // To ensure it waits until a full table is loaded into the DOM, instead of a bug where table only has 1 hit.
 
   const shouldText = shouldExist ? 'exist' : 'not.exist';
-  dataExplorer.getDocTableField(0, 0).within(() => {
+  fieldFiltering.getDocTableField(0, 0).within(() => {
     cy.getElementByTestId('filterForValue').should(shouldText);
     cy.getElementByTestId('filterOutValue').should(shouldText);
   });
 
   if (shouldExist) {
-    dataExplorer.verifyDocTableFilterAction(0, 'filterForValue', '10,000', '1', true);
-    dataExplorer.verifyDocTableFilterAction(0, 'filterOutValue', '10,000', '9,999', false);
+    fieldFiltering.verifyDocTableFilterAction(0, 'filterForValue', '10,000', '1', true);
+    fieldFiltering.verifyDocTableFilterAction(0, 'filterOutValue', '10,000', '9,999', false);
   }
 };
 const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtonsEnabled) => {
   // Check if the first expanded Doc Table Field's first row's Filter For, Filter Out and Exists Filter buttons are disabled.
   const verifyFirstExpandedFieldFilterForFilterOutFilterExistsButtons = () => {
     const shouldText = isFilterButtonsEnabled ? 'be.enabled' : 'be.disabled';
-    dataExplorer.getExpandedDocTableRow(0, 0).within(() => {
+    fieldFiltering.getExpandedDocTableRow(0, 0).within(() => {
       cy.getElementByTestId('addInclusiveFilterButton').should(shouldText);
       cy.getElementByTestId('removeInclusiveFilterButton').should(shouldText);
       cy.getElementByTestId('addExistsFilterButton').should(shouldText);
@@ -89,11 +89,11 @@ const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtons
       filterButton === 'for' ? 'addInclusiveFilterButton' : 'removeInclusiveFilterButton';
     const shouldText = filterButton === 'for' ? 'have.text' : 'not.have.text';
 
-    dataExplorer
+    fieldFiltering
       .getExpandedDocTableRowValue(docTableRowNumber, expandedDocumentRowNumber)
       .then(($expandedDocumentRowValue) => {
         const filterFieldText = $expandedDocumentRowValue.text();
-        dataExplorer
+        fieldFiltering
           .getExpandedDocTableRow(docTableRowNumber, expandedDocumentRowNumber)
           .within(() => {
             cy.getElementByTestId(filterButtonElement).click();
@@ -104,7 +104,7 @@ const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtons
           'have.text',
           expectedQueryHitsAfterFilterApplied
         ); // checkQueryHitText must be in front of checking first line text to give time for DocTable to update.
-        dataExplorer
+        fieldFiltering
           .getExpandedDocTableRowValue(docTableRowNumber, expandedDocumentRowNumber)
           .should(shouldText, filterFieldText);
       });
@@ -125,11 +125,11 @@ const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtons
     expectedQueryHitsWithoutFilter,
     expectedQueryHitsAfterFilterApplied
   ) => {
-    dataExplorer
+    fieldFiltering
       .getExpandedDocTableRowFieldName(docTableRowNumber, expandedDocumentRowNumber)
       .then(($expandedDocumentRowField) => {
         const filterFieldText = $expandedDocumentRowField.text();
-        dataExplorer
+        fieldFiltering
           .getExpandedDocTableRow(docTableRowNumber, expandedDocumentRowNumber)
           .within(() => {
             cy.getElementByTestId('addExistsFilterButton').click();
@@ -154,9 +154,9 @@ const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtons
   setDateRange(datasetType, language);
 
   cy.getElementByTestId('docTable').get('tbody tr').should('have.length.above', 3); // To ensure it waits until a full table is loaded into the DOM, instead of a bug where table only has 1 hit.
-  dataExplorer.toggleDocTableRow(0);
+  fieldFiltering.toggleDocTableRow(0);
   verifyFirstExpandedFieldFilterForFilterOutFilterExistsButtons();
-  dataExplorer.verifyDocTableFirstExpandedFieldFirstRowToggleColumnButtonHasIntendedBehavior();
+  fieldFiltering.verifyDocTableFirstExpandedFieldFirstRowToggleColumnButtonHasIntendedBehavior();
 
   if (isFilterButtonsEnabled) {
     verifyDocTableFirstExpandedFieldFirstRowFilterForOutButtonFiltersCorrectField(
@@ -181,6 +181,7 @@ const verifyExpandedTableFilterActions = (datasetType, language, isFilterButtons
     );
   }
 };
+
 describe('filter for value spec', () => {
   before(() => {
     // Load test data

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/helpers/commons.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  DatasetTypes,
+  DATASOURCE_NAME,
+  END_TIME,
+  INDEX_PATTERN_WITH_TIME,
+  INDEX_WITH_TIME_1,
+  QueryLanguages,
+  START_TIME,
+  WORKSPACE_NAME,
+} from '../../../../../../utils/apps/query_enhancements/constants';
+// TODO: Make generateTestConfiguration more general and move it out from saved_search
+import { generateTestConfiguration } from './saved_search';
+
+const randomString = Math.random().toString(36);
+
+/**
+ * randomized workspace name
+ * @constant
+ * @type {string}
+ * @default
+ */
+export const workspaceName = `${WORKSPACE_NAME}-${randomString.substring(7)}`;
+
+/**
+ * randomized datasource name
+ * @constant
+ * @type {string}
+ * @default
+ */
+export const datasourceName = `${DATASOURCE_NAME}-${randomString.substring(0, 18)}`;
+
+/**
+ * Returns an array of test configurations for every query language + dataset permutation
+ * @returns {SavedSearchTestConfig[]}
+ */
+export const generateAllTestConfigurations = (
+  indexPatternName = INDEX_PATTERN_WITH_TIME,
+  indexName = INDEX_WITH_TIME_1
+) => {
+  return Object.values(DatasetTypes).flatMap((dataset) =>
+    dataset.supportedLanguages.map((language) => {
+      let datasetToUse;
+      switch (dataset.name) {
+        case DatasetTypes.INDEX_PATTERN.name:
+          datasetToUse = indexPatternName;
+          break;
+        case DatasetTypes.INDEXES.name:
+          datasetToUse = indexName;
+          break;
+        default:
+          throw new Error(
+            `generateAllTestConfigurations encountered unsupported dataset: ${dataset.name}`
+          );
+      }
+      return generateTestConfiguration(datasetToUse, dataset.name, language);
+    })
+  );
+};
+
+/**
+ * Sets the top nav date if it is relevant for the passed language
+ * @param {QueryEnhancementLanguage} language - query language
+ */
+export const setDatePickerDatesAndSearchIfRelevant = (language) => {
+  if (language === QueryLanguages.SQL.name) {
+    return;
+  }
+
+  cy.setTopNavDate(START_TIME, END_TIME);
+};

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/utils/saved_search.js → cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/helpers/saved_search.js

@@ -5,33 +5,9 @@
 
 import {
   DatasetTypes,
-  DATASOURCE_NAME,
-  END_TIME,
-  INDEX_PATTERN_WITH_TIME,
-  INDEX_WITH_TIME_1,
   QueryLanguages,
-  START_TIME,
-  WORKSPACE_NAME,
 } from '../../../../../../utils/apps/query_enhancements/constants';
 
-const randomString = Math.random().toString(36);
-
-/**
- * randomized workspace name
- * @constant
- * @type {string}
- * @default
- */
-export const workspaceName = `${WORKSPACE_NAME}-${randomString.substring(7)}`;
-
-/**
- * randomized datasource name
- * @constant
- * @type {string}
- * @default
- */
-export const datasourceName = `${DATASOURCE_NAME}-${randomString.substring(0, 18)}`;
-
 /**
  * The fields to select for saved search. Also takes shape of the API for saved search
  * @constant
@@ -200,7 +176,7 @@ const getSampleTableData = (datasetType, language) => {
  * @param {QueryEnhancementLanguageData} language - the relevant data for the query language to use
  * @returns {SavedSearchTestConfig}
  */
-const generateTestConfiguration = (dataset, datasetType, language) => {
+export const generateTestConfiguration = (dataset, datasetType, language) => {
   const baseConfig = {
     dataset,
     datasetType,
@@ -219,43 +195,6 @@ const generateTestConfiguration = (dataset, datasetType, language) => {
   };
 };
 
-/**
- * Returns an array of test configurations for every query language + dataset permutation
- * @returns {SavedSearchTestConfig[]}
- */
-export const generateAllTestConfigurations = () => {
-  return Object.values(DatasetTypes).flatMap((dataset) =>
-    dataset.supportedLanguages.map((language) => {
-      let datasetToUse;
-      switch (dataset.name) {
-        case DatasetTypes.INDEX_PATTERN.name:
-          datasetToUse = INDEX_PATTERN_WITH_TIME;
-          break;
-        case DatasetTypes.INDEXES.name:
-          datasetToUse = INDEX_WITH_TIME_1;
-          break;
-        default:
-          throw new Error(
-            `generateAllTestConfigurations encountered unsupported dataset: ${dataset.name}`
-          );
-      }
-      return generateTestConfiguration(datasetToUse, dataset.name, language);
-    })
-  );
-};
-
-/**
- * Sets the top nav date if it is relevant for the passed language
- * @param {QueryEnhancementLanguage} language - query language
- */
-export const setDatePickerDatesAndSearchIfRelevant = (language) => {
-  if (language === QueryLanguages.SQL.name) {
-    return;
-  }
-
-  cy.setTopNavDate(START_TIME, END_TIME);
-};
-
 /**
  * Set the search configurations for the saved search
  * @param {SavedSearchTestConfig} testConfig - the relevant config for the test case

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/helpers/sidebar_filtering.js

@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Sends a new query via the query multiline editor.
+ * @param {string} query Query string
+ * @see https://docs.cypress.io/api/commands/type#Arguments
+ */
+export const sendQueryOnMultilineEditor = (query) => {
+  // remove syntax helper
+  cy.getElementByTestId('headerGlobalNav').click();
+  // Clear default text on the editor by an alternative method, since
+  // cy.clear() won't work for some reason
+  cy.get('.view-line')
+    .invoke('text')
+    .then(($content) => {
+      const contentLen = $content.length + 1;
+      cy.get('.view-line').type('a'); // make sure we're at the end of the string
+      cy.get('.view-line').type('{backspace}'.repeat(contentLen));
+    });
+  // Type query
+  cy.get('.view-line').type(query);
+  // Send query
+  cy.getElementByTestId('querySubmitButton').click();
+};
+
+/**
+ * Click on the sidebar collapse button.
+ * @param {boolean} collapse true for collapsing, false for expanding
+ */
+export const clickSidebarCollapseBtn = (collapse = true) => {
+  if (collapse) {
+    cy.getElementByTestId('euiResizableButton').trigger('mouseover').click();
+  }
+  cy.get('.euiResizableToggleButton').click({ force: true });
+};
+
+/**
+ * Check the results of the sidebar filter bar search.
+ * @param {string} search text to look up
+ * @param {string} assertion the type of assertion that is going to be performed. Example: 'eq', 'include'. If an assertion is not passed, a negative test is performend.
+ */
+export const checkSidebarFilterBarResults = (search, assertion) => {
+  cy.getElementByTestId('fieldFilterSearchInput').type(search, { force: true });
+  if (assertion) {
+    // Get all sidebar fields and iterate over all of them
+    cy.get('[data-test-subj^="field-"]:not([data-test-subj$="showDetails"])').each(($field) => {
+      cy.wrap($field)
+        .should('be.visible')
+        .invoke('text')
+        .then(($fieldTxt) => {
+          cy.wrap($fieldTxt).should(assertion, search);
+        });
+    });
+  } else {
+    // No match should be found
+    cy.get('[data-test-subj^="field-"]:not([data-test-subj$="showDetails"])').should('not.exist');
+  }
+  cy.get('button[aria-label="Clear input"]').click();
+};
+
+/**
+ * Removes all currently selected fields from the sidebar
+ */
+export const removeAllSelectedFields = () => {
+  cy.get('[data-test-subj="fieldList-selected"]').then(($list) => {
+    if ($list.find('[data-test-subj^="field-"]').length > 0) {
+      // Remove all selected fields
+      $list.find('[data-test-subj^="fieldToggle-"]').each((_, el) => {
+        cy.wrap(el).click();
+      });
+    }
+  });
+};

cypress/integration/core-opensearch-dashboards/opensearch-dashboards/apps/query_enhancements/saved_search.spec.js

@@ -15,11 +15,13 @@ import {
   datasourceName,
   generateAllTestConfigurations,
   setDatePickerDatesAndSearchIfRelevant,
+} from './helpers/commons';
+import {
   setSearchConfigurations,
   verifyDiscoverPageState,
   verifySavedSearchInAssetsPage,
   postRequestSaveSearch,
-} from './utils/saved_search';
+} from './helpers/saved_search';
 
 export const runSavedSearchTests = () => {
   describe('saved search', () => {