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 (elastic#186189) (elastic#186296)

## Summary

Related tickets elastic#186189 and
elastic#186187, and
elastic#186188

Attempt to fix failing manual rule run tests added in this PR
elastic#184500

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/security_solution/public/detection_engine/rule_gaps/components/manual_rule_run/index.test.tsx

@@ -6,73 +6,77 @@
  */
 
 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(() => {
+    // This is an attempt to fix the "TypeError: scrollIntoView is not a function" error
+    // According to https://stackoverflow.com/a/53294906 the `scrollIntoView` is not implemented in jsdom,
+    // and proposed solution is coming from https://github.com/jsdom/jsdom/issues/1695
+    window.HTMLElement.prototype.scrollIntoView = () => {};
 
-    expect(wrapper.getByTestId('manual-rule-run-modal-form')).toBeInTheDocument();
-    expect(wrapper.getByTestId('confirmModalCancelButton')).toBeEnabled();
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    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');
   });
 
-  it('should render confirmation button disabled if invalid time range has been selected', () => {
-    const wrapper = render(
-      <ManualRuleRunModal onCancel={onCancelMock} onConfirm={onConfirmMock} />
-    );
+  it('should render modal', () => {
+    expect(timeRangeForm).toBeInTheDocument();
+    expect(cancelModalConfirmButton).toBeEnabled();
+    expect(confirmModalConfirmButton).toBeEnabled();
+  });
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+  it('should render confirmation button disabled if invalid time range has been selected', () => {
+    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} />
-    );
+    expect(confirmModalConfirmButton).toBeEnabled();
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    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)!);
 
-    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();
-
-    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} />
-    );
+    expect(confirmModalConfirmButton).toBeEnabled();
 
-    expect(wrapper.getByTestId('confirmModalConfirmButton')).toBeEnabled();
+    fireEvent.click(endDatePicker.querySelector(DATE_PICKER_NEXT_BTN_CLASS)!);
 
-    within(wrapper.getByTestId('end-date-picker')).getByText('Next month').click();
-
-    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');
   });
 });