Failing test: Jest Tests.x-pack/plugins/security_solution/public/dete…

…ction_engine/rule_gaps/components/manual_rule_run - ManualRuleRunModal should render confirmation button disabled if selected end date is in future (#186189)
elastic · Jun 17, 2024 · a251e9e · a251e9e
1 parent 34b052c
commit a251e9e
Showing 1 changed file with 41 additions and 36 deletions.
diff --git a/...rity_solution/public/detection_engine/rule_gaps/components/manual_rule_run/index.test.tsx b/...rity_solution/public/detection_engine/rule_gaps/components/manual_rule_run/index.test.tsx
@@ -6,73 +6,78 @@
  */
 
 import React from 'react';
-import { render, within } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { ManualRuleRunModal } from '.';
 
+const DATE_PICKER_PREVIOUS_BTN_CLASS = '.react-datepicker__navigation--previous';
+const DATE_PICKER_NEXT_BTN_CLASS = '.react-datepicker__navigation--next';
+
 describe('ManualRuleRunModal', () => {
   const onCancelMock = jest.fn();
   const onConfirmMock = jest.fn();
 
+  let startDatePicker: HTMLElement;
+  let endDatePicker: HTMLElement;
+  let confirmModalConfirmButton: HTMLElement;
+  let cancelModalConfirmButton: HTMLElement;
+  let timeRangeForm: HTMLElement;
+
   afterEach(() => {
     onCancelMock.mockReset();
     onConfirmMock.mockReset();
   });
 
-  it('should render modal', () => {
-    const wrapper = render(
-      <ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />
-    );
+  beforeEach(() => {
+    render(<ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />);
+
+    startDatePicker = screen.getByTestId('start-date-picker');
+    endDatePicker = screen.getByTestId('end-date-picker');
+    confirmModalConfirmButton = screen.getByTestId('confirmModalConfirmButton');
+    cancelModalConfirmButton = screen.getByTestId('confirmModalCancelButton');
+    timeRangeForm = screen.getByTestId('manual-rule-run-time-range-form');
+  });
 
-    expect(wrapper.getByTestId('manual-rule-run-modal-form')).toBeInTheDocument();
-    expect(wrapper.getByTestId('confirmModalCancelButton')).toBeEnabled();
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+  it('should render modal', () => {
+    expect(timeRangeForm).toBeInTheDocument();
+    expect(cancelModalConfirmButton).toBeEnabled();
+    expect(confirmModalConfirmButton).toBeEnabled();
   });
 
   it('should render confirmation button disabled if invalid time range has been selected', () => {
-    const wrapper = render(
-      <ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />
-    );
+    render(<ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    expect(confirmModalConfirmButton).toBeEnabled();
 
-    within(wrapper.getByTestId('end-date-picker')).getByText('Previous Month').click();
+    fireEvent.click(endDatePicker.querySelector(DATE_PICKER_PREVIOUS_BTN_CLASS)!);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeDisabled();
-    expect(wrapper.getByTestId('manual-rule-run-time-range-form')).toHaveTextContent(
-      'Selected time range is invalid'
-    );
+    expect(confirmModalConfirmButton).toBeDisabled();
+    expect(timeRangeForm).toHaveTextContent('Selected time range is invalid');
   });
 
   it('should render confirmation button disabled if selected start date is more than 90 days in the past', () => {
-    const wrapper = render(
-      <ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />
-    );
+    render(<ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    expect(confirmModalConfirmButton).toBeEnabled();
 
-    within(wrapper.getByTestId('start-date-picker')).getByText('Previous Month').click();
-    within(wrapper.getByTestId('start-date-picker')).getByText('Previous Month').click();
-    within(wrapper.getByTestId('start-date-picker')).getByText('Previous Month').click();
-    within(wrapper.getByTestId('start-date-picker')).getByText('Previous Month').click();
+    fireEvent.click(startDatePicker.querySelector(DATE_PICKER_PREVIOUS_BTN_CLASS)!);
+    fireEvent.click(startDatePicker.querySelector(DATE_PICKER_PREVIOUS_BTN_CLASS)!);
+    fireEvent.click(startDatePicker.querySelector(DATE_PICKER_PREVIOUS_BTN_CLASS)!);
+    fireEvent.click(startDatePicker.querySelector(DATE_PICKER_PREVIOUS_BTN_CLASS)!);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeDisabled();
-    expect(wrapper.getByTestId('manual-rule-run-time-range-form')).toHaveTextContent(
+    expect(confirmModalConfirmButton).toBeDisabled();
+    expect(timeRangeForm).toHaveTextContent(
       'Manual rule run cannot be scheduled earlier than 90 days ago'
     );
   });
 
   it('should render confirmation button disabled if selected end date is in future', () => {
-    const wrapper = render(
-      <ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />
-    );
+    render(<ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    expect(confirmModalConfirmButton).toBeEnabled();
 
-    within(wrapper.getByTestId('end-date-picker')).getByText('Next month').click();
+    fireEvent.click(endDatePicker.querySelector(DATE_PICKER_NEXT_BTN_CLASS)!);
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeDisabled();
-    expect(wrapper.getByTestId('manual-rule-run-time-range-form')).toHaveTextContent(
-      'Manual rule run cannot be scheduled for the future'
-    );
+    expect(confirmModalConfirmButton).toBeDisabled();
+    expect(timeRangeForm).toHaveTextContent('Manual rule run cannot be scheduled for the future');
   });
 });