Fix overwrite existing rules checkbox of Import rules remain selected…

… till user disabled it (#138758) * clean user state when the user closes the modal + tests * add missing reacthooks deps Co-authored-by: Kibana Machine <[email protected]>
elastic · Aug 15, 2022 · fb409bd · fb409bd
1 parent edbf8f1
commit fb409bd
Show file tree

Hide file tree

Showing 3 changed files with 307 additions and 68 deletions.
diff --git a/...ity_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap b/...ity_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.test.tsx
@@ -5,23 +5,37 @@
  * 2.0.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
 import { ImportDataModalComponent } from '.';
+
 jest.mock('../../lib/kibana');
 
+jest.mock('../../hooks/use_app_toasts', () => ({
+  useAppToasts: jest.fn().mockReturnValue({
+    addError: jest.fn(),
+    addSuccess: jest.fn(),
+  }),
+}));
+
+const closeModal = jest.fn();
+const importComplete = jest.fn();
+const importData = jest.fn().mockReturnValue({ success: true, errors: [] });
+const file = new File(['file'], 'image1.png', { type: 'image/png' });
+
 describe('ImportDataModal', () => {
   test('renders correctly against snapshot', () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <ImportDataModalComponent
         showModal={true}
-        closeModal={jest.fn()}
-        importComplete={jest.fn()}
+        closeModal={closeModal}
+        importComplete={importComplete}
         checkBoxLabel="checkBoxLabel"
         description="description"
         errorMessage={jest.fn()}
         failedDetailed={jest.fn()}
-        importData={jest.fn()}
+        importData={importData}
         showCheckBox={true}
         submitBtnText="submitBtnText"
         subtitle="subtitle"
@@ -31,4 +45,80 @@ describe('ImportDataModal', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+  test('should import file, cleanup the states and close Modal', async () => {
+    const { queryByTestId } = render(
+      <ImportDataModalComponent
+        showModal={true}
+        closeModal={closeModal}
+        importComplete={importComplete}
+        checkBoxLabel="checkBoxLabel"
+        description="description"
+        errorMessage={jest.fn()}
+        failedDetailed={jest.fn()}
+        importData={importData}
+        showCheckBox={true}
+        submitBtnText="submitBtnText"
+        subtitle="subtitle"
+        successMessage={jest.fn((totalCount) => 'successMessage')}
+        title="title"
+      />
+    );
+    await waitFor(() => {
+      fireEvent.change(queryByTestId('rule-file-picker') as HTMLInputElement, {
+        target: { files: [file] },
+      });
+    });
+    await waitFor(() => {
+      fireEvent.click(queryByTestId('import-data-modal-button') as HTMLButtonElement);
+    });
+    expect(importData).toHaveBeenCalled();
+    expect(closeModal).toHaveBeenCalled();
+    expect(importComplete).toHaveBeenCalled();
+  });
+  test('should uncheck the selected checkboxes after importing new file', async () => {
+    const { queryByTestId } = render(
+      <ImportDataModalComponent
+        showModal={true}
+        closeModal={closeModal}
+        importComplete={importComplete}
+        checkBoxLabel="checkBoxLabel"
+        description="description"
+        errorMessage={jest.fn()}
+        failedDetailed={jest.fn()}
+        importData={importData}
+        showCheckBox={true}
+        submitBtnText="submitBtnText"
+        subtitle="subtitle"
+        successMessage={jest.fn((totalCount) => 'successMessage')}
+        title="title"
+        showExceptionsCheckBox={true}
+      />
+    );
+    const overwriteCheckbox: HTMLInputElement = queryByTestId(
+      'import-data-modal-checkbox-label'
+    ) as HTMLInputElement;
+    const exceptionCheckbox: HTMLInputElement = queryByTestId(
+      'import-data-modal-exceptions-checkbox-label'
+    ) as HTMLInputElement;
+
+    await waitFor(() => fireEvent.click(overwriteCheckbox));
+    await waitFor(() => fireEvent.click(exceptionCheckbox));
+
+    await waitFor(() =>
+      fireEvent.change(queryByTestId('rule-file-picker') as HTMLInputElement, {
+        target: { files: [file] },
+      })
+    );
+    expect(overwriteCheckbox.checked).toBeTruthy();
+    expect(exceptionCheckbox.checked).toBeTruthy();
+
+    await waitFor(() => {
+      fireEvent.click(queryByTestId('import-data-modal-button') as HTMLButtonElement);
+    });
+    expect(importData).toHaveBeenCalled();
+    expect(closeModal).toHaveBeenCalled();
+
+    expect(overwriteCheckbox.checked).toBeFalsy();
+    expect(exceptionCheckbox.checked).toBeFalsy();
+  });
 });