Move EuiSuperDatePicker harness to test-eui-helpers (#174543)

## Summary Contributes a new helper to our shared EUI RTL helpers package. --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Jan 10, 2024 · d54898d · d54898d
1 parent bc85d80
commit d54898d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 47 deletions.
diff --git a/packages/kbn-test-eui-helpers/src/rtl_helpers.tsx b/packages/kbn-test-eui-helpers/src/rtl_helpers.tsx
@@ -5,10 +5,80 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-import { screen, within } from '@testing-library/react';
+import moment from 'moment';
+import userEvent from '@testing-library/user-event';
+import { screen, within, fireEvent } from '@testing-library/react';
 
 export const getButtonGroupInputValue = (testId: string) => () => {
   const buttonGroup = screen.getByTestId(testId);
   return within(buttonGroup).getByRole('button', { pressed: true });
 };
+
+export class EuiSuperDatePickerTestHarness {
+  // From https://github.com/elastic/eui/blob/6a30eba7c2a154691c96a1d17c8b2f3506d351a3/src/components/date_picker/super_date_picker/super_date_picker.tsx#L222
+  private static readonly dateFormat = 'MMM D, YYYY @ HH:mm:ss.SSS';
+
+  /**
+   * This method returns the currently selected commonly-used range as a string
+   *
+   * The empty string is returned if a commonly-used range is not currently selected
+   */
+  public static get currentCommonlyUsedRange() {
+    return screen.queryByTestId('superDatePickerShowDatesButton')?.textContent ?? '';
+  }
+
+  /**
+   * This method returns the currently selected range as a pair of strings
+   */
+  public static get currentRange() {
+    if (screen.queryByTestId('superDatePickerShowDatesButton')) {
+      // showing a commonly-used range
+      return { from: '', to: '' };
+    }
+
+    return {
+      from: screen.getByTestId('superDatePickerstartDatePopoverButton').textContent,
+      to: screen.getByTestId('superDatePickerendDatePopoverButton').textContent,
+    };
+  }
+
+  /**
+   * This method runs an assertion against the currently selected range using
+   * UNIX timestamps.
+   *
+   * NOTE: it does not (yet) support commonly-used (textual) ranges like "Last 15 minutes"
+   */
+  public static assertCurrentRange(range: { from: number; to: number }, expect: jest.Expect) {
+    expect(EuiSuperDatePickerTestHarness.currentRange).toEqual({
+      from: moment(range.from).format(EuiSuperDatePickerTestHarness.dateFormat),
+      to: moment(range.to).format(EuiSuperDatePickerTestHarness.dateFormat),
+    });
+  }
+
+  /**
+   * Opens the popover for the date picker
+   */
+  static togglePopover() {
+    userEvent.click(screen.getByRole('button', { name: 'Date quick select' }));
+  }
+
+  /**
+   * Selects a commonly-used range from the date picker (opens the popover if it's not already open)
+   */
+  static async selectCommonlyUsedRange(label: string) {
+    if (!screen.queryByText('Commonly used')) this.togglePopover();
+
+    // Using fireEvent here because userEvent erroneously claims that
+    // pointer-events is set to 'none'.
+    //
+    // I have verified that this fixed on the latest version of the @testing-library/user-event package
+    fireEvent.click(await screen.findByText(label));
+  }
+
+  /**
+   * Activates the refresh button
+   */
+  static refresh() {
+    userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
+  }
+}
diff --git a/...ins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx b/...ins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx
@@ -21,51 +21,14 @@ import {
   TypedLensByValueInput,
 } from '@kbn/lens-plugin/public';
 import { Datatable } from '@kbn/expressions-plugin/common';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { I18nProvider } from '@kbn/i18n-react';
 import { GroupPreview } from './group_preview';
 import { LensByValueInput } from '@kbn/lens-plugin/public/embeddable';
 import { DATA_LAYER_ID, DATE_HISTOGRAM_COLUMN_ID, getCurrentTimeField } from './lens_attributes';
-import moment from 'moment';
-
-class EuiSuperDatePickerTestHarness {
-  public static get currentCommonlyUsedRange() {
-    return screen.queryByTestId('superDatePickerShowDatesButton')?.textContent ?? '';
-  }
-
-  // TODO - add assertion with date formatting
-  public static get currentRange() {
-    if (screen.queryByTestId('superDatePickerShowDatesButton')) {
-      // showing a commonly-used range
-      return { from: '', to: '' };
-    }
-
-    return {
-      from: screen.getByTestId('superDatePickerstartDatePopoverButton').textContent,
-      to: screen.getByTestId('superDatePickerendDatePopoverButton').textContent,
-    };
-  }
-
-  static togglePopover() {
-    userEvent.click(screen.getByRole('button', { name: 'Date quick select' }));
-  }
-
-  static async selectCommonlyUsedRange(label: string) {
-    if (!screen.queryByText('Commonly used')) this.togglePopover();
-
-    // Using fireEvent here because userEvent erroneously claims that
-    // pointer-events is set to 'none'.
-    //
-    // I have verified that this fixed on the latest version of the @testing-library/user-event package
-    fireEvent.click(await screen.findByText(label));
-  }
-
-  static refresh() {
-    userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
-  }
-}
+import { EuiSuperDatePickerTestHarness } from '@kbn/test-eui-helpers';
 
 describe('group editor preview', () => {
   const annotation = getDefaultManualAnnotation('my-id', 'some-timestamp');
@@ -186,11 +149,11 @@ describe('group editor preview', () => {
     // from chart brush
     userEvent.click(screen.getByTestId('brushEnd'));
 
-    const format = 'MMM D, YYYY @ HH:mm:ss.SSS'; // from https://github.com/elastic/eui/blob/6a30eba7c2a154691c96a1d17c8b2f3506d351a3/src/components/date_picker/super_date_picker/super_date_picker.tsx#L222;
-    expect(EuiSuperDatePickerTestHarness.currentRange).toEqual({
-      from: moment(BRUSH_RANGE[0]).format(format),
-      to: moment(BRUSH_RANGE[1]).format(format),
-    });
+    EuiSuperDatePickerTestHarness.assertCurrentRange(
+      { from: BRUSH_RANGE[0], to: BRUSH_RANGE[1] },
+      expect
+    );
+
     expect(getEmbeddableTimeRange()).toEqual({
       from: new Date(BRUSH_RANGE[0]).toISOString(),
       to: new Date(BRUSH_RANGE[1]).toISOString(),

diff --git a/src/plugins/event_annotation_listing/tsconfig.json b/src/plugins/event_annotation_listing/tsconfig.json
@@ -41,7 +41,8 @@
     "@kbn/core-notifications-browser-mocks",
     "@kbn/core-notifications-browser",
     "@kbn/core-saved-objects-api-browser",
-    "@kbn/content-management-table-list-view-common"
+    "@kbn/content-management-table-list-view-common",
+    "@kbn/test-eui-helpers"
   ],
   "exclude": [
     "target/**/*",