TESTID-51 Add test for language-specific display (#9215)

* TESTID-51 Add test for language-specific display

* Changeset file for PR #9215 created/updated
* update code due to recent merges to main

Signed-off-by: Justin Kim <jungkm@amazon.com>

---------

Signed-off-by: Justin Kim <jungkm@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Anan Zhuang <ananzh@amazon.com>

changelogs/fragments/9215.yml

@@ -0,0 +1,2 @@
+test:
+- Add tests for language-specific display ([#9215](/~https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9215))

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/query_enhancements/language_specific_display.spec.js

@@ -0,0 +1,166 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  INDEX_PATTERN_WITH_TIME,
+  INDEX_WITH_TIME_1,
+  INDEX_WITH_TIME_2,
+  QueryLanguages,
+  SECONDARY_ENGINE,
+} from '../../../../../utils/constants';
+import {
+  generateAllTestConfigurations,
+  getRandomizedWorkspaceName,
+  getRandomizedDatasourceName,
+  setDatePickerDatesAndSearchIfRelevant,
+} from '../../../../../utils/apps/query_enhancements/shared';
+import {
+  generateDisplayTestConfiguration,
+  getLanguageReferenceTestText,
+} from '../../../../../utils/apps/query_enhancements/language_specific_display';
+
+const workspaceName = getRandomizedWorkspaceName();
+const datasourceName = getRandomizedDatasourceName();
+
+export const runDisplayTests = () => {
+  describe('Language-Specific Display', () => {
+    beforeEach(() => {
+      // Load test data
+      cy.setupTestData(
+        SECONDARY_ENGINE.url,
+        [
+          `cypress/fixtures/query_enhancements/data_logs_1/${INDEX_WITH_TIME_1}.mapping.json`,
+          `cypress/fixtures/query_enhancements/data_logs_2/${INDEX_WITH_TIME_2}.mapping.json`,
+        ],
+        [
+          `cypress/fixtures/query_enhancements/data_logs_1/${INDEX_WITH_TIME_1}.data.ndjson`,
+          `cypress/fixtures/query_enhancements/data_logs_2/${INDEX_WITH_TIME_2}.data.ndjson`,
+        ]
+      );
+      // Add data source
+      cy.addDataSource({
+        name: datasourceName,
+        url: SECONDARY_ENGINE.url,
+        authType: 'no_auth',
+      });
+
+      // Create workspace
+      cy.deleteWorkspaceByName(workspaceName);
+      cy.visit('/app/home');
+      cy.osd.createInitialWorkspaceWithDataSource(datasourceName, workspaceName);
+      cy.createWorkspaceIndexPatterns({
+        workspaceName: workspaceName,
+        indexPattern: INDEX_PATTERN_WITH_TIME.replace('*', ''),
+        timefieldName: 'timestamp',
+        dataSource: datasourceName,
+        isEnhancement: true,
+      });
+    });
+
+    afterEach(() => {
+      cy.deleteWorkspaceByName(workspaceName);
+      // // TODO: Modify deleteIndex to handle an array of index and remove hard code
+      cy.deleteDataSourceByName(datasourceName);
+      cy.deleteIndex(INDEX_WITH_TIME_1);
+      cy.deleteIndex(INDEX_WITH_TIME_2);
+    });
+
+    generateAllTestConfigurations(generateDisplayTestConfiguration).forEach((config) => {
+      it(`should correctly display all UI components for ${config.testName}`, () => {
+        cy.navigateToWorkSpaceSpecificPage({
+          workspaceName,
+          page: 'discover',
+          isEnhancement: true,
+        });
+
+        cy.setDataset(config.dataset, datasourceName, config.datasetType);
+
+        cy.setQueryLanguage(config.language);
+        setDatePickerDatesAndSearchIfRelevant(config.language);
+
+        // testing the query editor
+        if (config.multilineQuery) {
+          cy.getElementByTestId('osdQueryEditor__multiLine').should('be.visible');
+          cy.getElementByTestId('queryEditorFooterLineCount').contains('1 line');
+          cy.getElementByTestId('queryEditorFooterTimestamp').contains('timestamp');
+          cy.getElementByTestId('queryResultCompleteMsg').contains(/Completed in [0-9]+/);
+          cy.getElementByTestId('queryEditorFooterToggleRecentQueriesButton').click();
+          cy.getElementByTestId('recentQueryTable').should('be.visible');
+          cy.getElementByTestId('queryEditorFooterToggleRecentQueriesButton').click();
+
+          if (config.language === QueryLanguages.SQL.name) {
+            cy.getElementByTestId('osdQueryEditor__multiLine').contains('SELECT');
+            cy.getElementByTestId('osdQueryEditor__multiLine').contains('FROM');
+            cy.getElementByTestId('osdQueryEditor__multiLine').contains('LIMIT');
+          } else if (config.language === QueryLanguages.PPL.name) {
+            cy.getElementByTestId('osdQueryEditor__multiLine').contains('source');
+          }
+
+          cy.getElementByTestId('osdQueryEditorLanguageToggle').click();
+          cy.getElementByTestId('osdQueryEditor__singleLine').should('be.visible');
+          cy.getElementByTestId('osdQueryEditor__multiLine').should('not.exist');
+          cy.getElementByTestId('osdQueryEditorLanguageToggle').click();
+          cy.getElementByTestId('osdQueryEditor__multiLine').should('be.visible');
+          cy.getElementByTestId('osdQueryEditor__singleLine').should('not.exist');
+        } else {
+          cy.getElementByTestId('osdQueryEditor__singleLine').should('be.visible');
+        }
+
+        // testing the datepicker
+        if (config.datepicker) {
+          cy.getElementByTestId('superDatePickerstartDatePopoverButton').should('be.visible');
+        }
+
+        // testing the hit count and histogram
+        if (config.histogram) {
+          cy.getElementByTestId('discoverQueryHits').should('be.visible');
+          cy.getElementByTestId('dscTimechart').should('be.visible');
+        }
+
+        // testing the language information popup button
+        cy.getElementByTestId('languageReferenceButton').click();
+        cy.get('.euiPopoverTitle').contains('Syntax options').should('be.visible');
+        cy.get('.euiPanel').contains(getLanguageReferenceTestText(config.language));
+        cy.getElementByTestId('languageReferenceButton').click();
+
+        // testing the saved queries management button
+        cy.getElementByTestId('saved-query-management-popover-button').click();
+        cy.getElementByTestId('saved-query-management-popover').should('be.visible');
+        cy.getElementByTestId('saved-query-management-popover-button').click();
+
+        // testing the filter
+        if (config.filters) {
+          cy.getElementByTestId('showFilterActions').should('be.visible');
+          cy.submitFilterFromDropDown('category', 'is', 'Application', true);
+          cy.getElementByTestId(
+            'filter filter-enabled filter-key-category filter-value-Application filter-unpinned '
+          ).should('be.visible');
+          cy.getElementByTestId('showFilterActions').click();
+          cy.getElementByTestId('pinAllFilters').click();
+          cy.getElementByTestId(
+            'filter filter-enabled filter-key-category filter-value-Application filter-pinned '
+          ).should('be.visible');
+          cy.getElementByTestId('globalFilterBar').within(() => {
+            cy.get('button[title="Delete"]').click();
+          });
+          cy.getElementByTestId('globalFilterGroupFilterPrefix').should('not.exist');
+        }
+
+        // testing single/surrounding doc
+        if (config.expandedDocument) {
+          cy.getElementByTestId('docTableExpandToggleColumn')
+            .first()
+            .within(() => {
+              cy.getElementByTestId('docTableExpandToggleColumn').click();
+            });
+          cy.get('a').contains('View surrounding documents').should('be.visible');
+          cy.get('a').contains('View single document').should('be.visible');
+        }
+      });
+    });
+  });
+};
+
+runDisplayTests();

cypress/utils/apps/query_enhancements/constants.js

@@ -42,6 +42,9 @@ export const INDEX_PATTERN_WITH_TIME = 'data_logs_small_time_*';
  * @property {boolean} histogram - whether the histogram appears
  * @property {boolean} selectFields - whether you can select by specific fields to see the data
  * @property {boolean} sort - whether you can sort the data by specific fields
+ * @property {boolean} datepicker - whether you can filter results via date/time
+ * @property {boolean} multilineQuery - whether the language supports multi-line query
+ * @property {boolean} expandedDocument - whether the language expanding a document
  */
 
 /**
@@ -68,6 +71,9 @@ export const QueryLanguages = {
       histogram: true,
       selectFields: true,
       sort: true,
+      datepicker: true,
+      multilineQuery: false,
+      expandedDocument: true,
     },
   },
   Lucene: {
@@ -78,6 +84,9 @@ export const QueryLanguages = {
       histogram: true,
       selectFields: true,
       sort: true,
+      datepicker: true,
+      multilineQuery: false,
+      expandedDocument: true,
     },
   },
   SQL: {
@@ -88,6 +97,9 @@ export const QueryLanguages = {
       histogram: false,
       selectFields: true,
       sort: false,
+      datepicker: false,
+      multilineQuery: true,
+      expandedDocument: false,
     },
   },
   PPL: {
@@ -99,6 +111,9 @@ export const QueryLanguages = {
       histogram: true,
       selectFields: true,
       sort: false,
+      datepicker: true,
+      multilineQuery: true,
+      expandedDocument: false,
     },
   },
 };

cypress/utils/apps/query_enhancements/language_specific_display.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { QueryLanguages } from './constants';
+
+/**
+ * The configurations needed for saved search/queries tests
+ * @typedef {Object} DisplayTestConfig
+ * @property {string} dataset - the dataset name to use
+ * @property {QueryEnhancementDataset} datasetType - the type of dataset
+ * @property {QueryEnhancementLanguage} language - the name of query language as it appears in the dashboard app
+ * @property {string} testName - the phrase to add to the test case's title
+ * @property {boolean} filters - whether the language supports filtering
+ * @property {boolean} histogram - whether the language supports histogram
+ * @property {boolean} selectFields - whether the language supports selecting fields to view data
+ * @property {boolean} sort - whether the language supports sorting by fields
+ * @property {datepicker} datepicker - whether you can filter results via date/time
+ */
+
+/**
+ * Returns the DisplayTestConfig for the provided dataset, datasetType, and language
+ * @param {string} dataset - the dataset name
+ * @param {QueryEnhancementDataset} datasetType - the type of the dataset
+ * @param {QueryEnhancementLanguageData} language - the relevant data for the query language to use
+ * @returns {DisplayTestConfig}
+ */
+export const generateDisplayTestConfiguration = (dataset, datasetType, language) => {
+  return {
+    dataset,
+    datasetType,
+    language: language.name,
+    apiLanguage: language.apiName,
+    testName: `${language.name}-${datasetType}`,
+    ...language.supports,
+  };
+};
+
+/**
+ * Returns a string to test for to test the Language Reference Popup
+ * @param {QueryEnhancementLanguage} language - the query language
+ * @returns {string}
+ */
+export const getLanguageReferenceTestText = (language) => {
+  switch (language) {
+    case QueryLanguages.DQL.name:
+      return 'OpenSearch Dashboards Query Language';
+    case QueryLanguages.Lucene.name:
+      return 'Lucene';
+    case QueryLanguages.SQL.name:
+      return 'OpenSearch SQL';
+    case QueryLanguages.PPL.name:
+      return 'Piped Processing Language';
+    default:
+      throw new Error(
+        `getLanguageReferenceTestText encountered an unhandled language: ${language}`
+      );
+  }
+};