From d54898dba68a39b3ab014aaeaa432cfc9961fb3d Mon Sep 17 00:00:00 2001 From: Drew Tate Date: Wed, 10 Jan 2024 08:24:08 -0700 Subject: [PATCH] Move EuiSuperDatePicker harness to test-eui-helpers (#174543) ## Summary Contributes a new helper to our shared EUI RTL helpers package. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../kbn-test-eui-helpers/src/rtl_helpers.tsx | 74 ++++++++++++++++++- .../group_preview.test.tsx | 51 ++----------- .../event_annotation_listing/tsconfig.json | 3 +- 3 files changed, 81 insertions(+), 47 deletions(-) diff --git a/packages/kbn-test-eui-helpers/src/rtl_helpers.tsx b/packages/kbn-test-eui-helpers/src/rtl_helpers.tsx index e5a44615e980d..fc469d9cb234f 100644 --- 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/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx index 386976ac571b6..935aad45570ac 100644 --- a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx +++ b/src/plugins/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 index 8c9efd4559400..e3c77073de168 100644 --- 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/**/*",