From fb409bdf34e6ce6a01f5d227eb8a6f72bee055bc Mon Sep 17 00:00:00 2001 From: Wafaa Nasr Date: Mon, 15 Aug 2022 15:45:14 +0200 Subject: [PATCH] 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 <42973632+kibanamachine@users.noreply.github.com> --- .../__snapshots__/index.test.tsx.snap | 263 ++++++++++++++---- .../import_data_modal/index.test.tsx | 100 ++++++- .../components/import_data_modal/index.tsx | 12 +- 3 files changed, 307 insertions(+), 68 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap index 1e93394660808..1278b8b22eb63 100644 --- a/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/import_data_modal/__snapshots__/index.test.tsx.snap @@ -1,65 +1,210 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ImportDataModal renders correctly against snapshot 1`] = ` - - - - - title - - - - +
+
-

- description -

- - - - - - - - - Cancel - - - submitBtnText - - - - +
+ +
+
+
+

+ title +

+
+
+
+
+
+

+ description +

+
+
+
+
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+
+ , + "container":
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} `; 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 index 642f5b6dcabaa..9864941ebcbe7 100644 --- 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( { ); expect(wrapper).toMatchSnapshot(); }); + test('should import file, cleanup the states and close Modal', async () => { + const { queryByTestId } = render( + '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( + '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(); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx b/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx index bccf6604dc5f6..f3223709a0ce4 100644 --- a/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/import_data_modal/index.tsx @@ -74,7 +74,9 @@ export const ImportDataModalComponent = ({ setIsImporting(false); setSelectedFiles(null); closeModal(); - }, [setIsImporting, setSelectedFiles, closeModal]); + setOverwrite(false); + setOverwriteExceptions(false); + }, [setIsImporting, setSelectedFiles, closeModal, setOverwrite, setOverwriteExceptions]); const importDataCallback = useCallback(async () => { if (selectedFiles != null) { @@ -122,9 +124,8 @@ export const ImportDataModalComponent = ({ ]); const handleCloseModal = useCallback(() => { - setSelectedFiles(null); - closeModal(); - }, [closeModal]); + cleanupAndCloseModal(); + }, [cleanupAndCloseModal]); const handleCheckboxClick = useCallback(() => { setOverwrite((shouldOverwrite) => !shouldOverwrite); @@ -149,6 +150,7 @@ export const ImportDataModalComponent = ({ {showExceptionsCheckBox && (