Improve date selection across versions of OUI (opensearch-project#778)

Signed-off-by: Miki <[email protected]>
Signed-off-by: [email protected] <[email protected]>

cypress/utils/commands.js

@@ -208,6 +208,25 @@ Cypress.Commands.add('getElementByTestId', (testId, options = {}) => {
   return cy.get(`[data-test-subj="${testId}"]`, options);
 });
 
+Cypress.Commands.add('getElementsByTestIds', (testIds, options = {}) => {
+  const selectors = [testIds]
+    .flat(Infinity)
+    .map((testId) => `[data-test-subj="${testId}"]`);
+  return cy.get(selectors.join(','), options);
+});
+
+Cypress.Commands.add(
+  'whenTestIdNotFound',
+  (testIds, callbackFn, options = {}) => {
+    const selectors = [testIds]
+      .flat(Infinity)
+      .map((testId) => `[data-test-subj="${testId}"]`);
+    cy.get('body', options).then(($body) => {
+      if ($body.find(selectors.join(',')).length === 0) callbackFn();
+    });
+  }
+);
+
 Cypress.Commands.add('createIndex', (index, policyID = null, settings = {}) => {
   cy.request('PUT', `${Cypress.env('openSearchUrl')}/${index}`, settings);
   if (policyID != null) {

cypress/utils/dashboards/commands.js

@@ -47,13 +47,29 @@ Cypress.Commands.add('setTopNavDate', (start, end, submit = true) => {
     message: `Start: ${start} :: End: ${end}`,
   });
 
-  // Click date picker
-  cy.getElementByTestId('superDatePickerShowDatesButton', opts).click(opts);
-
-  // Click start date
-  cy.getElementByTestId('superDatePickerstartDatePopoverButton', opts).click(
+  /* Find any one of the two buttons that change/open the date picker:
+   *   * if `superDatePickerShowDatesButton` is found, it will switch the mode to dates
+   *      * in some versions of OUI, the switch will open the date selection dialog as well
+   *   * if `superDatePickerstartDatePopoverButton` is found, it will open the date selection dialog
+   */
+  cy.getElementsByTestIds(
+    ['superDatePickerstartDatePopoverButton', 'superDatePickerShowDatesButton'],
     opts
-  );
+  )
+    .should('be.visible')
+    .invoke('attr', 'data-test-subj')
+    .then((testId) => {
+      cy.getElementByTestId(testId, opts).should('be.visible').click(opts);
+    });
+
+  /* While we surely are in the date selection mode, we don't know if the date selection dialog
+   * is open or not. Looking for a tab and if it is missing, click on the dialog opener.
+   */
+  cy.whenTestIdNotFound('superDatePickerAbsoluteTab', () => {
+    cy.getElementByTestId('superDatePickerstartDatePopoverButton', opts)
+      .should('be.visible')
+      .click(opts);
+  });
 
   // Click absolute tab
   cy.getElementByTestId('superDatePickerAbsoluteTab', opts).click(opts);

cypress/utils/index.d.ts

@@ -2,7 +2,25 @@
 /// <reference types="cypress" />
 
 declare namespace Cypress {
-  interface Chainable<Subject> {
+  interface Chainable<Subject> { /**
+     * Call a function when an element with a test id cannot be found
+     * @example
+     * cy.whenTestIdNotFound(['query', 'puery'], () => {...})
+     */
+    whenTestIdNotFound<S = any>(
+      testIds: string | string[],
+      callbackFn: void,
+      options?: Partial<Loggable & Timeoutable & Withinable & Shadow>
+    ): Chainable<S>;
+    /**
+     * Get elements by their test ids
+     * @example
+     * cy.getElementsByTestIds(['query', 'puery'])
+     */
+    getElementsByTestIds<S = any>(
+      testIds: string | string[],
+      options?: Partial<Loggable & Timeoutable & Withinable & Shadow>
+    ): Chainable<S>;
     /**
      * Get an element by its test id
      * @example