From f80cb338c24d354050206532d9644a8404b0dda8 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 24 Mar 2020 16:00:17 +0200 Subject: [PATCH 01/18] Test ClosureOptionsRadio component --- .../closure_options_radio.test.tsx.snap | 23 ++++ .../closure_options_radio.test.tsx | 105 ++++++++++++++++++ .../configure_cases/closure_options_radio.tsx | 1 + .../components/configure_cases/index.test.tsx | 23 ++++ 4 files changed, 152 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap new file mode 100644 index 0000000000000..90a36cb369c1f --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClosureOptionsRadio it renders 1`] = ` + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx new file mode 100644 index 0000000000000..863004e8d09bc --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx @@ -0,0 +1,105 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { ClosureOptionsRadio } from './closure_options_radio'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; + +describe('ClosureOptionsRadio ', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it shows the correct number of radio buttons', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('input[name="closure_options"]')).toHaveLength(2); + }); + + test('it renders the correct radio buttons', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('input[id="close-by-user"]')).toBeDefined(); + expect(wrapper.find('input[id="close-by-pushing"]')).toBeDefined(); + }); + + test('it disables correctly', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('input[id="close-by-user"]').prop('disabled')).toEqual(true); + expect(wrapper.find('input[id="close-by-pushing"]').prop('disabled')).toEqual(true); + }); + + test('it selects the correct radio button', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('input[id="close-by-pushing"]').prop('checked')).toEqual(true); + }); + + test('it calls the onChangeClosureType function', () => { + const onChangeClosureType = jest.fn(); + + const wrapper = mount( + + + + ); + + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + expect(onChangeClosureType).toHaveBeenCalled(); + expect(onChangeClosureType).toHaveBeenCalledWith('close-by-pushing'); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx index f32f867b2471d..2ea2049e82562 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx @@ -51,6 +51,7 @@ const ClosureOptionsRadioComponent: React.FC idSelected={closureTypeSelected} onChange={onChangeLocal} name="closure_options" + data-test-subj="closure-options-radio-group" /> ); }; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx new file mode 100644 index 0000000000000..47e271f8d1cce --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -0,0 +1,23 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow, mount } from 'enzyme'; + +import { ConfigureCases } from './'; +import { TestProviders } from '../../../../mock'; + +describe('CaseView ', () => { + test('it renders', () => { + const wrapper = mount( + + + + ); + + expect(wrapper).toMatchSnapshot(); + }); +}); From 9e39560fd57ecc2f360ec698807d9ffa8f84c98a Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 24 Mar 2020 18:02:47 +0200 Subject: [PATCH 02/18] Test ClosureOptions component --- .../closure_options.test.tsx.snap | 31 +++++++ .../configure_cases/closure_options.test.tsx | 83 +++++++++++++++++++ .../configure_cases/closure_options.tsx | 7 +- .../closure_options_radio.test.tsx | 2 +- 4 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap new file mode 100644 index 0000000000000..4d8a7921967fd --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ClosureOptions it renders 1`] = ` + + Cases Closures + + } +> + + + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx new file mode 100644 index 0000000000000..b69a2633ad6f9 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx @@ -0,0 +1,83 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { ClosureOptions } from './closure_options'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; +import { ClosureOptionsRadio } from './closure_options_radio'; + +describe('ClosureOptions', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it shows the left side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-closure-options-form-group"]') + .first() + .exists() + ).toBe(true); + }); + test('it shows the right side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-closure-options-form-row"]') + .first() + .exists() + ).toBe(true); + }); + + test('it pass the correct props to child', () => { + const onChangeClosureType = jest.fn(); + + const wrapper = shallow( + + ); + + const closureOptionsRadioComponent = wrapper.find(ClosureOptionsRadio); + expect(closureOptionsRadioComponent.props().disabled).toEqual(false); + expect(closureOptionsRadioComponent.props().closureTypeSelected).toEqual('close-by-user'); + expect(closureOptionsRadioComponent.props().onChangeClosureType).toEqual(onChangeClosureType); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx index 9879b9149059a..6fb02bef4477c 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx @@ -27,8 +27,13 @@ const ClosureOptionsComponent: React.FC = ({ fullWidth title={

{i18n.CASE_CLOSURE_OPTIONS_TITLE}

} description={i18n.CASE_CLOSURE_OPTIONS_DESC} + data-test-subj="case-closure-options-form-group" > - + { +describe('ClosureOptionsRadio', () => { const mount = useMountAppended(); test('it renders', () => { From a58b8b3eaaa25be1ea574821306b695e1463643a Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Tue, 24 Mar 2020 20:40:50 +0200 Subject: [PATCH 03/18] Test ConnectorsDropdown component --- .../configure_cases/__mock__/index.tsx | 64 +++++++++++++ .../connectors_dropdown.test.tsx.snap | 32 +++++++ .../connectors_dropdown.test.tsx | 94 +++++++++++++++++++ .../configure_cases/connectors_dropdown.tsx | 3 +- 4 files changed, 192 insertions(+), 1 deletion(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx new file mode 100644 index 0000000000000..6d61b3e4c4c0f --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { Connector } from '../../../../../containers/case/configure/types'; + +export const connectors: Connector[] = [ + { + id: '123', + actionTypeId: '.servicenow', + name: 'My Connector', + config: { + apiUrl: 'https://instance1.service-now.com', + casesConfiguration: { + mapping: [ + { + source: 'title', + target: 'short_description', + actionType: 'overwrite', + }, + { + source: 'description', + target: 'description', + actionType: 'append', + }, + { + source: 'comments', + target: 'comments', + actionType: 'append', + }, + ], + }, + }, + }, + { + id: '456', + actionTypeId: '.servicenow', + name: 'My Connector 2', + config: { + apiUrl: 'https://instance2.service-now.com', + casesConfiguration: { + mapping: [ + { + source: 'title', + target: 'short_description', + actionType: 'overwrite', + }, + { + source: 'description', + target: 'description', + actionType: 'overwrite', + }, + { + source: 'comments', + target: 'comments', + actionType: 'append', + }, + ], + }, + }, + }, +]; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap new file mode 100644 index 0000000000000..8ac8cc0dbb850 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConnectorsDropdown it renders 1`] = ` + + + + No connector selected + + , + "value": "none", + }, + ] + } + valueOfSelected="none" +/> +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx new file mode 100644 index 0000000000000..aa870fb507c92 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx @@ -0,0 +1,94 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { EuiSuperSelect } from '@elastic/eui'; + +import { ConnectorsDropdown } from './connectors_dropdown'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; +import { connectors } from './__mock__'; + +describe('ConnectorsDropdown', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it formats the connectors correctly', () => { + const wrapper = mount( + + + + ); + + const props = wrapper.find(EuiSuperSelect).props(); + + // The dropdown is render outside the render tree of wrapper + // so we have to check for the connectors' existence this way + expect(props.options).toEqual( + expect.arrayContaining([ + expect.objectContaining({ value: '123', 'data-test-subj': 'dropdown-connector-123' }), + expect.objectContaining({ value: '456', 'data-test-subj': 'dropdown-connector-456' }), + ]) + ); + }); + + test('it disables the dropdown', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="dropdown-connectors"]') + .first() + .prop('disabled') + ).toEqual(true); + }); + + test('it selects the correct connector', () => { + const wrapper = mount( + + + + ); + + expect(wrapper.find('button span').text()).toEqual('My Connector'); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx index a0a0ad6cd3e7f..14f0a6f91f8d3 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx @@ -60,7 +60,7 @@ const ConnectorsDropdownComponent: React.FC = ({ {connector.name} ), - 'data-test-subj': connector.id, + 'data-test-subj': `dropdown-connector-${connector.id}`, }, ], [noConnectorOption] @@ -76,6 +76,7 @@ const ConnectorsDropdownComponent: React.FC = ({ valueOfSelected={selectedConnector} fullWidth onChange={onChange} + data-test-subj="dropdown-connectors" /> ); }; From 27546ddb4126f4b387c981c4c7a7cda1bf0f34b7 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 26 Mar 2020 18:53:15 +0200 Subject: [PATCH 04/18] Test Connectors --- .../__snapshots__/connectors.test.tsx.snap | 49 ++++++++++ .../configure_cases/connectors.test.tsx | 98 +++++++++++++++++++ .../components/configure_cases/connectors.tsx | 7 +- 3 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap new file mode 100644 index 0000000000000..769bfe4f4ea02 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Connectors it renders 1`] = ` + + + Connect to third-party incident management system + + } + > + + + Incident management system + + + + Add new connector option + + + + } + > + + + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx new file mode 100644 index 0000000000000..fdfae17000a15 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -0,0 +1,98 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { Connectors } from './connectors'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; +import { ConnectorsDropdown } from './connectors_dropdown'; +import { connectors } from './__mock__'; + +describe('Connectors', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it shows the left side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-connectors-form-group"]') + .first() + .exists() + ).toBe(true); + }); + test('it shows the right side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-connectors-form-row"]') + .first() + .exists() + ).toBe(true); + }); + + test('it pass the correct props to child', () => { + const onChange = jest.fn(); + + const wrapper = shallow( + + ); + + const connectorsDropdownComponent = wrapper.find(ConnectorsDropdown); + expect(connectorsDropdownComponent.props().disabled).toEqual(false); + expect(connectorsDropdownComponent.props().isLoading).toEqual(false); + expect(connectorsDropdownComponent.props().connectors).toEqual(connectors); + expect(connectorsDropdownComponent.props().selectedConnector).toEqual('none'); + expect(connectorsDropdownComponent.props().onChange).toEqual(onChange); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx index 8fb1cfb1aa6cc..f237c9029b5e2 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -61,8 +61,13 @@ const ConnectorsComponent: React.FC = ({ fullWidth title={

{i18n.INCIDENT_MANAGEMENT_SYSTEM_TITLE}

} description={i18n.INCIDENT_MANAGEMENT_SYSTEM_DESC} + data-test-subj="case-connectors-form-group" > - + Date: Thu, 26 Mar 2020 20:12:25 +0200 Subject: [PATCH 05/18] Test FieldMappingRow --- .../field_mapping_row.test.tsx.snap | 96 ++++++++++++++ .../connectors_dropdown.test.tsx | 2 - .../field_mapping_row.test.tsx | 119 ++++++++++++++++++ 3 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap new file mode 100644 index 0000000000000..0c9b2e36ccb2a --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap @@ -0,0 +1,96 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FieldMappingRow it renders 1`] = ` + + + + + Title + + + + + + + + + Short Description + , + "value": "short_description", + }, + Object { + "data-test-subj": "third-party-desc", + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + valueOfSelected="short_description" + /> + + + + Nothing + , + "value": "nothing", + }, + Object { + "data-test-subj": "edit-update-option-overwrite", + "inputDisplay": + Overwrite + , + "value": "overwrite", + }, + Object { + "data-test-subj": "edit-update-option-append", + "inputDisplay": + Append + , + "value": "append", + }, + ] + } + valueOfSelected="nothing" + /> + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx index aa870fb507c92..0744d579155c2 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx @@ -45,8 +45,6 @@ describe('ConnectorsDropdown', () => { const props = wrapper.find(EuiSuperSelect).props(); - // The dropdown is render outside the render tree of wrapper - // so we have to check for the connectors' existence this way expect(props.options).toEqual( expect.arrayContaining([ expect.objectContaining({ value: '123', 'data-test-subj': 'dropdown-connector-123' }), diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx new file mode 100644 index 0000000000000..3680bf676e445 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx @@ -0,0 +1,119 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { EuiSuperSelectOption, EuiSuperSelect } from '@elastic/eui'; + +import { FieldMappingRow } from './field_mapping_row'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; +import { ThirdPartyField } from '../../../../containers/case/configure/types'; + +const thirdPartyOptions: Array> = [ + { + value: 'short_description', + inputDisplay: {'Short Description'}, + 'data-test-subj': 'third-party-short-desc', + }, + { + value: 'description', + inputDisplay: {'Description'}, + 'data-test-subj': 'third-party-desc', + }, +]; + +describe('FieldMappingRow', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it passes thirdPartyOptions correctly', () => { + const wrapper = mount( + + + + ); + + const props = wrapper + .find(EuiSuperSelect) + .first() + .props(); + + expect(props.options).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + value: 'short_description', + 'data-test-subj': 'third-party-short-desc', + }), + expect.objectContaining({ + value: 'description', + 'data-test-subj': 'third-party-desc', + }), + ]) + ); + }); + + test('it passes the correct actionTypeOptions', () => { + const wrapper = mount( + + + + ); + + const props = wrapper + .find(EuiSuperSelect) + .at(1) + .props(); + + expect(props.options).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + value: 'nothing', + 'data-test-subj': 'edit-update-option-nothing', + }), + expect.objectContaining({ + value: 'overwrite', + 'data-test-subj': 'edit-update-option-overwrite', + }), + expect.objectContaining({ + value: 'append', + 'data-test-subj': 'edit-update-option-append', + }), + ]) + ); + }); +}); From ffe51fbf49fbe5cb3e5b9ca9dc39e61460cf6630 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 28 Mar 2020 18:09:20 +0200 Subject: [PATCH 06/18] Test FieldMapping --- .../__snapshots__/field_mapping.test.tsx.snap | 301 ++++++++++++++++++ .../configure_cases/field_mapping.test.tsx | 67 ++++ 2 files changed, 368 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap new file mode 100644 index 0000000000000..74bbb2394f179 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap @@ -0,0 +1,301 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FieldMappingRow it renders 1`] = ` + + + + + + SIEM case field + + + + + External incident field + + + + + On edit and update + + + + + + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + +`; + +exports[`FieldMappingRow it renders with default mapping 1`] = ` + + + + + + SIEM case field + + + + + External incident field + + + + + On edit and update + + + + + + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + Not mapped + , + "value": "not_mapped", + }, + Object { + "inputDisplay": + Short Description + , + "value": "short_description", + }, + Object { + "inputDisplay": + Comments + , + "value": "comments", + }, + Object { + "inputDisplay": + Description + , + "value": "description", + }, + ] + } + /> + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx new file mode 100644 index 0000000000000..30f392ff7e8df --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx @@ -0,0 +1,67 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { FieldMapping } from './field_mapping'; +import { mapping } from './__mock__'; +import { FieldMappingRow } from './field_mapping_row'; + +describe('FieldMappingRow', () => { + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it renders with default mapping', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it shows the correct number of FieldMappingRow', () => { + const wrapper = shallow( + + ); + + expect(wrapper.find(FieldMappingRow).length).toEqual(3); + }); + + test('it shows the correct number of FieldMappingRow with default mapping', () => { + const wrapper = shallow( + + ); + + expect(wrapper.find(FieldMappingRow).length).toEqual(3); + }); + + test('it pass the corrects props to mapping row', () => { + const wrapper = shallow( + + ); + + const rows = wrapper.find(FieldMappingRow); + rows.forEach((row, index) => { + expect(row.prop('siemField')).toEqual(mapping[index].source); + expect(row.prop('selectedActionType')).toEqual(mapping[index].actionType); + expect(row.prop('selectedThirdParty')).toEqual(mapping[index].target); + }); + }); + + test('it should show zero rows on empty array', () => { + const wrapper = shallow( + + ); + + expect(wrapper.find(FieldMappingRow).length).toEqual(0); + }); +}); From c1cb025ff1a08a4f44786d1644cf27dcfa07a325 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 28 Mar 2020 18:09:51 +0200 Subject: [PATCH 07/18] Create utils functions and refactor to be able to test --- .../configure_cases/__mock__/index.tsx | 23 ++++++- .../configure_cases/field_mapping.tsx | 21 +------ .../components/configure_cases/utils.test.tsx | 63 +++++++++++++++++++ .../case/components/configure_cases/utils.ts | 44 +++++++++++++ 4 files changed, 132 insertions(+), 19 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.ts diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx index 6d61b3e4c4c0f..6b568ce85ba08 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx @@ -4,7 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import { Connector } from '../../../../../containers/case/configure/types'; +import { + Connector, + CasesConfigurationMapping, +} from '../../../../../containers/case/configure/types'; export const connectors: Connector[] = [ { @@ -62,3 +65,21 @@ export const connectors: Connector[] = [ }, }, ]; + +export const mapping: CasesConfigurationMapping[] = [ + { + source: 'title', + target: 'short_description', + actionType: 'overwrite', + }, + { + source: 'description', + target: 'description', + actionType: 'append', + }, + { + source: 'comments', + target: 'comments', + actionType: 'append', + }, +]; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx index 0c0dc14f1c218..3d8588f16ebd0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx @@ -18,6 +18,7 @@ import { FieldMappingRow } from './field_mapping_row'; import * as i18n from './translations'; import { defaultMapping } from '../../../../lib/connectors/config'; +import { setActionTypeToMapping, setThirdPartyToMapping } from './utils'; const FieldRowWrapper = styled.div` margin-top: 8px; @@ -57,14 +58,7 @@ const FieldMappingComponent: React.FC = ({ const onChangeActionType = useCallback( (caseField: CaseField, newActionType: ActionType) => { const myMapping = mapping ?? defaultMapping; - const findItemIndex = myMapping.findIndex(item => item.source === caseField); - if (findItemIndex >= 0) { - onChangeMapping([ - ...myMapping.slice(0, findItemIndex), - { ...myMapping[findItemIndex], actionType: newActionType }, - ...myMapping.slice(findItemIndex + 1), - ]); - } + onChangeMapping(setActionTypeToMapping(caseField, newActionType, myMapping)); }, [mapping] ); @@ -72,16 +66,7 @@ const FieldMappingComponent: React.FC = ({ const onChangeThirdParty = useCallback( (caseField: CaseField, newThirdPartyField: ThirdPartyField) => { const myMapping = mapping ?? defaultMapping; - onChangeMapping( - myMapping.map(item => { - if (item.source !== caseField && item.target === newThirdPartyField) { - return { ...item, target: 'not_mapped' }; - } else if (item.source === caseField) { - return { ...item, target: newThirdPartyField }; - } - return item; - }) - ); + onChangeMapping(setThirdPartyToMapping(caseField, newThirdPartyField, myMapping)); }, [mapping] ); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx new file mode 100644 index 0000000000000..1c6fc9b2d405f --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.test.tsx @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { mapping } from './__mock__'; +import { setActionTypeToMapping, setThirdPartyToMapping } from './utils'; +import { CasesConfigurationMapping } from '../../../../containers/case/configure/types'; + +describe('FieldMappingRow', () => { + test('it should change the action type', () => { + const newMapping = setActionTypeToMapping('title', 'nothing', mapping); + expect(newMapping[0].actionType).toBe('nothing'); + }); + + test('it should not change other fields', () => { + const [newTitle, description, comments] = setActionTypeToMapping('title', 'nothing', mapping); + expect(newTitle).not.toEqual(mapping[0]); + expect(description).toEqual(mapping[1]); + expect(comments).toEqual(mapping[2]); + }); + + test('it should return a new array when changing action type', () => { + const newMapping = setActionTypeToMapping('title', 'nothing', mapping); + expect(newMapping).not.toBe(mapping); + }); + + test('it should change the third party', () => { + const newMapping = setThirdPartyToMapping('title', 'description', mapping); + expect(newMapping[0].target).toBe('description'); + }); + + test('it should not change other fields when there is not a conflict', () => { + const tempMapping: CasesConfigurationMapping[] = [ + { + source: 'title', + target: 'short_description', + actionType: 'overwrite', + }, + { + source: 'comments', + target: 'comments', + actionType: 'append', + }, + ]; + + const [newTitle, comments] = setThirdPartyToMapping('title', 'description', tempMapping); + + expect(newTitle).not.toEqual(mapping[0]); + expect(comments).toEqual(tempMapping[1]); + }); + + test('it should return a new array when changing third party', () => { + const newMapping = setThirdPartyToMapping('title', 'description', mapping); + expect(newMapping).not.toBe(mapping); + }); + + test('it should change the target of the conflicting third party field to not_mapped', () => { + const newMapping = setThirdPartyToMapping('title', 'description', mapping); + expect(newMapping[1].target).toBe('not_mapped'); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.ts new file mode 100644 index 0000000000000..2ac6cc1a38587 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/utils.ts @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { + CaseField, + ActionType, + CasesConfigurationMapping, + ThirdPartyField, +} from '../../../../containers/case/configure/types'; + +export const setActionTypeToMapping = ( + caseField: CaseField, + newActionType: ActionType, + mapping: CasesConfigurationMapping[] +): CasesConfigurationMapping[] => { + const findItemIndex = mapping.findIndex(item => item.source === caseField); + + if (findItemIndex >= 0) { + return [ + ...mapping.slice(0, findItemIndex), + { ...mapping[findItemIndex], actionType: newActionType }, + ...mapping.slice(findItemIndex + 1), + ]; + } + + return [...mapping]; +}; + +export const setThirdPartyToMapping = ( + caseField: CaseField, + newThirdPartyField: ThirdPartyField, + mapping: CasesConfigurationMapping[] +): CasesConfigurationMapping[] => + mapping.map(item => { + if (item.source !== caseField && item.target === newThirdPartyField) { + return { ...item, target: 'not_mapped' }; + } else if (item.source === caseField) { + return { ...item, target: newThirdPartyField }; + } + return item; + }); From 74685c13d88e1ab84d4663243bb33788df3e52b2 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 28 Mar 2020 18:58:54 +0200 Subject: [PATCH 08/18] Test Mapping --- .../__snapshots__/mapping.test.tsx.snap | 65 ++++++++++ .../configure_cases/mapping.test.tsx | 115 ++++++++++++++++++ .../components/configure_cases/mapping.tsx | 11 +- 3 files changed, 189 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap new file mode 100644 index 0000000000000..624f330953e6a --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap @@ -0,0 +1,65 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Mapping it renders 1`] = ` + + Field mappings + + } +> + + + + + Update connector + + + + + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx new file mode 100644 index 0000000000000..402c2a1edf425 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx @@ -0,0 +1,115 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; + +import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { TestProviders } from '../../../../mock'; +import { Mapping } from './mapping'; +import { mapping } from './__mock__'; + +describe('Mapping', () => { + const mount = useMountAppended(); + + test('it renders', () => { + const wrapper = shallow( + + ); + + expect(wrapper).toMatchSnapshot(); + }); + + test('it shows the left side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-mapping-form-group"]') + .first() + .exists() + ).toBe(true); + }); + + test('it shows the right side', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-mapping-form-row"]') + .first() + .exists() + ).toBe(true); + }); + + test('it shows the update button', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-mapping-update-connector-button"]') + .first() + .exists() + ).toBe(true); + }); + + test('it shows the field mapping', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-mapping-field"]') + .first() + .exists() + ).toBe(true); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx index 8cba73d1249df..4a229dfa6303a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx @@ -45,20 +45,27 @@ const MappingComponent: React.FC = ({ fullWidth title={

{i18n.FIELD_MAPPING_TITLE}

} description={i18n.FIELD_MAPPING_DESC} + data-test-subj="case-mapping-form-group" > - + {i18n.UPDATE_CONNECTOR} - + ); }; From 7c08a184968729de49abb6feb1ba45335146a2a3 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Sat, 28 Mar 2020 19:00:12 +0200 Subject: [PATCH 09/18] Improve tests --- .../closure_options.test.tsx.snap | 1 + .../closure_options_radio.test.tsx.snap | 2 +- .../__snapshots__/connectors.test.tsx.snap | 1 + .../configure_cases/closure_options.test.tsx | 20 ++++++++++++++++ .../configure_cases/closure_options.tsx | 1 + .../configure_cases/connectors.test.tsx | 23 +++++++++++++++++++ .../components/configure_cases/connectors.tsx | 1 + 7 files changed, 48 insertions(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap index 4d8a7921967fd..2f5d1e8198716 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap @@ -23,6 +23,7 @@ exports[`ClosureOptions it renders 1`] = ` > diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap index 90a36cb369c1f..8a9dd84654dcc 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ClosureOptionsRadio it renders 1`] = ` +exports[`ClosureOptionsRadio it renders 1`] = ` { .exists() ).toBe(true); }); + test('it shows the right side', () => { const wrapper = mount( @@ -64,6 +65,25 @@ describe('ClosureOptions', () => { ).toBe(true); }); + test('it shows closure options', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-closure-options-radio"]') + .first() + .exists() + ).toBe(true); + }); + test('it pass the correct props to child', () => { const onChangeClosureType = jest.fn(); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx index 6fb02bef4477c..161ef56001232 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx @@ -38,6 +38,7 @@ const ClosureOptionsComponent: React.FC = ({ closureTypeSelected={closureTypeSelected} disabled={disabled} onChangeClosureType={onChangeClosureType} + data-test-subj="case-closure-options-radio" /> diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index fdfae17000a15..ea551006156e2 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -52,6 +52,7 @@ describe('Connectors', () => { .exists() ).toBe(true); }); + test('it shows the right side', () => { const wrapper = mount( @@ -74,6 +75,28 @@ describe('Connectors', () => { ).toBe(true); }); + test('it shows the connectors dropdown', () => { + const wrapper = mount( + + + + ); + + expect( + wrapper + .find('[data-test-subj="case-connectors-dropdown"]') + .first() + .exists() + ).toBe(true); + }); + test('it pass the correct props to child', () => { const onChange = jest.fn(); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx index f237c9029b5e2..e4825b7c472d1 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -74,6 +74,7 @@ const ConnectorsComponent: React.FC = ({ selectedConnector={selectedConnector} isLoading={isLoading} onChange={onChangeConnector} + data-test-subj="case-connectors-dropdown" /> From 92a54e27d1a2ee72fcadf21ec49401f04e8b263e Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 2 Apr 2020 17:25:25 +0300 Subject: [PATCH 10/18] Test ConfigureCases --- .../configure_cases/__mock__/index.tsx | 3 + .../__snapshots__/index.test.tsx.snap | 158 +++ .../components/configure_cases/connectors.tsx | 6 +- .../configure_cases/field_mapping.tsx | 4 + .../configure_cases/field_mapping_row.tsx | 2 + .../components/configure_cases/index.test.tsx | 945 +++++++++++++++++- .../case/components/configure_cases/index.tsx | 15 +- 7 files changed, 1121 insertions(+), 12 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx index 6b568ce85ba08..a6589f9cbf34a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx @@ -83,3 +83,6 @@ export const mapping: CasesConfigurationMapping[] = [ actionType: 'append', }, ]; + +export const searchURL = + '?timerange=(global:(linkTo:!(),timerange:(from:1585487656371,fromStr:now-24h,kind:relative,to:1585574056371,toStr:now)),timeline:(linkTo:!(),timerange:(from:1585227005527,kind:absolute,to:1585313405527)))'; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..f79590d9ea801 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap @@ -0,0 +1,158 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigureCases it renders 1`] = ` + + + + + + + + + + + + + + +`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx index e4825b7c472d1..92ffcc5f1ef14 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -48,7 +48,11 @@ const ConnectorsComponent: React.FC = ({ {i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL} - + {i18n.ADD_NEW_CONNECTOR} diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx index 3d8588f16ebd0..0cf43a16b810a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx @@ -29,18 +29,22 @@ const supportedThirdPartyFields: Array> = { value: 'not_mapped', inputDisplay: {i18n.FIELD_MAPPING_FIELD_NOT_MAPPED}, + 'data-test-subj': 'third-party-field-not-mapped', }, { value: 'short_description', inputDisplay: {i18n.FIELD_MAPPING_FIELD_SHORT_DESC}, + 'data-test-subj': 'third-party-field-short-description', }, { value: 'comments', inputDisplay: {i18n.FIELD_MAPPING_FIELD_COMMENTS}, + 'data-test-subj': 'third-party-field-comments', }, { value: 'description', inputDisplay: {i18n.FIELD_MAPPING_FIELD_DESC}, + 'data-test-subj': 'third-party-field-description', }, ]; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx index 62e43c86af8d9..9f48b7c590fcc 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx @@ -77,6 +77,7 @@ const FieldMappingRowComponent: React.FC = ({ options={thirdPartyOptions} valueOfSelected={selectedThirdParty} onChange={onChangeThirdParty.bind(null, siemField)} + data-test-subj={'case-configure-third-party-select'} /> @@ -85,6 +86,7 @@ const FieldMappingRowComponent: React.FC = ({ options={actionTypeOptions} valueOfSelected={selectedActionType} onChange={onChangeActionType.bind(null, siemField)} + data-test-subj={'case-configure-action-type-select'} /> diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index 47e271f8d1cce..0f3e6afcf5963 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -4,20 +4,949 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; -import { shallow, mount } from 'enzyme'; +import React, { useEffect } from 'react'; +import { shallow } from 'enzyme'; + +import { useKibana } from '../../../../lib/kibana'; +import { + useConnectors, + ReturnConnectors, +} from '../../../../containers/case/configure/use_connectors'; +import { + useCaseConfigure, + ReturnUseCaseConfigure, +} from '../../../../containers/case/configure/use_configure'; +import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search'; + +import { connectors, searchURL } from './__mock__'; + +jest.mock('../../../../lib/kibana'); +jest.mock('../../../../containers/case/configure/use_connectors'); +jest.mock('../../../../containers/case/configure/use_configure'); +jest.mock('../../../../components/navigation/use_get_url_search'); + +const useKibanaMock = useKibana as jest.Mock; +const useConnectorsMock = useConnectors as jest.Mock; +const useCaseConfigureMock = useCaseConfigure as jest.Mock; +const useGetUrlSearchMock = useGetUrlSearch as jest.Mock; import { ConfigureCases } from './'; import { TestProviders } from '../../../../mock'; +import { createUseKibanaMock } from '../../../../mock/kibana_react'; +import { actionTypeRegistryMock } from '../../../../../../../../plugins/triggers_actions_ui/public/application/action_type_registry.mock'; +import { Connectors } from './connectors'; +import { ClosureOptions } from './closure_options'; +import { Mapping } from './mapping'; +import { + ActionsConnectorsContextProvider, + ConnectorAddFlyout, + ConnectorEditFlyout, +} from '../../../../../../../../plugins/triggers_actions_ui/public'; +import { EuiBottomBar } from '@elastic/eui'; +import { useMountAppended } from '../../../../utils/use_mount_appended'; + +const useCaseConfigureResponse: ReturnUseCaseConfigure = { + loading: false, + persistLoading: false, + refetchCaseConfigure: jest.fn(), + persistCaseConfigure: jest.fn(), +}; + +const useConnectorsResponse: ReturnConnectors = { + loading: false, + connectors, + refetchConnectors: jest.fn(), +}; + +const kibanaMockImplementationArgs = { + services: { + ...createUseKibanaMock()().services, + triggers_actions_ui: { actionTypeRegistry: actionTypeRegistryMock.create() }, + }, +}; + +describe('ConfigureCases', () => { + const mount = useMountAppended(); + + beforeEach(() => { + jest.resetAllMocks(); + useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse); + useConnectorsMock.mockImplementation(() => useConnectorsResponse); + useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs); + useGetUrlSearchMock.mockImplementation(() => searchURL); + }); -describe('CaseView ', () => { test('it renders', () => { - const wrapper = mount( - - - - ); + const wrapper = shallow(, { wrappingComponent: TestProviders }); expect(wrapper).toMatchSnapshot(); }); + + test('it renders correctly', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).exists()).toBeTruthy(); + expect(wrapper.find(ClosureOptions).exists()).toBeTruthy(); + expect(wrapper.find(Mapping).exists()).toBeTruthy(); + expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy(); + expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy(); + expect(wrapper.find(ConnectorEditFlyout).exists()).toBeTruthy(); + expect(wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()).toBeFalsy(); + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + }); + + test('it renders with correct props', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + // Connector + expect(wrapper.find(Connectors).prop('connectors')).toEqual(connectors); + expect(wrapper.find(Connectors).prop('disabled')).toBe(false); + expect(wrapper.find(Connectors).prop('isLoading')).toBe(false); + expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('123'); + + // ClosureOptions + expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(false); + expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-user'); + + // Mapping + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(wrapper.find(Mapping).prop('updateConnectorDisabled')).toBe(false); + expect(wrapper.find(Mapping).prop('mapping')).toEqual( + connectors[0].config.casesConfiguration.mapping + ); + + // Flyouts + expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false); + expect(wrapper.find(ConnectorAddFlyout).prop('actionTypes')).toEqual([ + { + id: '.servicenow', + name: 'ServiceNow', + enabled: true, + enabledInConfig: true, + enabledInLicense: true, + minimumLicenseRequired: 'platinum', + }, + ]); + + expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false); + expect(wrapper.find(ConnectorEditFlyout).prop('initialConnector')).toEqual(connectors[0]); + }); + + test('it disables correctly when the user cannot crud', () => { + const wrapper = mount(, { + wrappingComponent: TestProviders, + }); + + expect(wrapper.find(Connectors).prop('disabled')).toBe(true); + expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(wrapper.find(Mapping).prop('updateConnectorDisabled')).toBe(true); + }); + + test('it shows the warning callout when configuration is invalid', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('not-id'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists() + ).toBeTruthy(); + }); + + test('it pass an empty array when connectors is null', () => { + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + connectors: null, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).prop('connectors').length).toBe(0); + }); + + test('it disables correctly Connector when loading connectors', () => { + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).prop('disabled')).toBe(true); + }); + + test('it disables correctly Connector when saving configuration', () => { + useCaseConfigureMock.mockImplementation(() => ({ + ...useCaseConfigureResponse, + persistLoading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).prop('disabled')).toBe(true); + }); + + test('it pass the correct value to isLoading attribute on Connector', () => { + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).prop('isLoading')).toBe(true); + }); + + test('it set correctly the selected connector', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('456'); + }); + + test('the connector is changed successfully', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); + wrapper.update(); + + expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('456'); + }); + + test('it show the add flyout when pressing the add connector button', () => { + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); + wrapper.update(); + + expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true); + expect(wrapper.find(EuiBottomBar).exists()).toBeFalsy(); + }); + + test('it disables correctly ClosureOptions when loading connectors', () => { + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + }); + + test('it disables correctly ClosureOptions when saving configuration', () => { + useCaseConfigureMock.mockImplementation(() => ({ + ...useCaseConfigureResponse, + persistLoading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + }); + + test('it disables correctly ClosureOptions when the connector is set to none', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('none'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + }); + + test('it set correctly the selected closure type', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setClosureType('close-by-pushing'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); + }); + + test('the closure type is changed successfully', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setClosureType('close-by-user'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); + }); + + test('it disables the mapping permanently', () => { + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it disables the update connector button when loading the connectors', () => { + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it disables the update connector button when loading the configuration', () => { + useCaseConfigureMock.mockImplementation(() => ({ + ...useCaseConfigureResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it disables the update connector button when saving the configuration', () => { + useCaseConfigureMock.mockImplementation(() => ({ + ...useCaseConfigureResponse, + persistLoading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it disables the update connector button when the connectorId is invalid', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('not-id'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it disables the update connector button when the connectorId is set to none', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('none'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + }); + + test('it show the edit flyout when pressing the update connector button', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="case-mapping-update-connector-button"]').simulate('click'); + wrapper.update(); + + expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true); + expect(wrapper.find(EuiBottomBar).exists()).toBeFalsy(); + }); + + test('it sets the mapping of a connector correctly', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect(wrapper.find(Mapping).prop('mapping')).toEqual( + connectors[0].config.casesConfiguration.mapping + ); + }); + + // TODO: When mapping is enabled the test.todo should be implemented. + test.todo('the mapping is changed successfully when changing the third party'); + test.todo('the mapping is changed successfully when changing the action type'); + + test('it not shows the action bar when there is no change', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + }); + + test('it shows the action bar when the connector is changed', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeTruthy(); + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]') + .first() + .text() + ).toBe('1 unsaved changes'); + }); + + test('it shows the action bar when the closure type is changed', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeTruthy(); + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]') + .first() + .text() + ).toBe('1 unsaved changes'); + }); + + test('it tracks the changes successfully', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); + wrapper.update(); + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeTruthy(); + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]') + .first() + .text() + ).toBe('2 unsaved changes'); + }); + + test('it tracks and reverts the changes successfully ', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + // change settings + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); + wrapper.update(); + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + // revert back to initial settings + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-123"]').simulate('click'); + wrapper.update(); + wrapper.find('input[id="close-by-user"]').simulate('change'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + }); + + test('it close and restores the action bar when the add connector button is pressed', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + // Change closure type + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + // Press add connector button + wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + + expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(true); + + // Close the add flyout + wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeTruthy(); + + expect(wrapper.find(ConnectorAddFlyout).prop('addFlyoutVisible')).toBe(false); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]') + .first() + .text() + ).toBe('1 unsaved changes'); + }); + + test('it close and restores the action bar when the update connector button is pressed', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + // Change closure type + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + wrapper.update(); + + // Press update connector button + wrapper.find('button[data-test-subj="case-mapping-update-connector-button"]').simulate('click'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + + expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(true); + + // Close the edit flyout + wrapper.find('button[data-test-subj="euiFlyoutCloseButton"]').simulate('click'); + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeTruthy(); + + expect(wrapper.find(ConnectorEditFlyout).prop('editFlyoutVisible')).toBe(false); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-total-changes"]') + .first() + .text() + ).toBe('1 unsaved changes'); + }); + + test('it disables the buttons of action bar when loading connectors', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + useConnectorsMock.mockImplementation(() => ({ + ...useConnectorsResponse, + loading: true, + })); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + }); + + test('it disables the buttons of action bar when loading configuration', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return { ...useCaseConfigureResponse, loading: true }; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + }); + + test('it disables the buttons of action bar when saving configuration', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return { ...useCaseConfigureResponse, persistLoading: true }; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .prop('isDisabled') + ).toBe(true); + }); + + test('it shows the loading spinner when saving configuration', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return { ...useCaseConfigureResponse, persistLoading: true }; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') + .first() + .prop('isLoading') + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .prop('isLoading') + ).toBe(true); + }); + + test('it closes the action bar when pressing save', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .simulate('click'); + + wrapper.update(); + + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + }); + + test('it submits the configuration correctly', () => { + const persistCaseConfigure = jest.fn(); + + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-pushing', + }), + [] + ); + return { ...useCaseConfigureResponse, persistCaseConfigure }; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') + .first() + .simulate('click'); + + wrapper.update(); + + expect(persistCaseConfigure).toHaveBeenCalled(); + expect(persistCaseConfigure).toHaveBeenCalledWith({ + connectorId: '456', + connectorName: 'My Connector 2', + closureType: 'close-by-user', + }); + }); + + test('it has the correct url on cancel button', () => { + const persistCaseConfigure = jest.fn(); + + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('456'), []); + useEffect(() => setClosureType('close-by-user'), []); + useEffect( + () => + setCurrentConfiguration({ + connectorId: '123', + closureType: 'close-by-user', + }), + [] + ); + return { ...useCaseConfigureResponse, persistCaseConfigure }; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') + .first() + .prop('href') + ).toBe(`#/link-to/case${searchURL}`); + }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx index b8cf5a3880801..ddf12d56a37ac 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx @@ -251,7 +251,12 @@ const ConfigureCasesComponent: React.FC = ({ userC {!connectorIsValid && ( - + {i18n.WARNING_NO_CONNECTOR_MESSAGE} @@ -283,11 +288,13 @@ const ConfigureCasesComponent: React.FC = ({ userC /> {actionBarVisible && ( - + - {i18n.UNSAVED_CHANGES(totalConfigurationChanges)} + + {i18n.UNSAVED_CHANGES(totalConfigurationChanges)} + @@ -300,6 +307,7 @@ const ConfigureCasesComponent: React.FC = ({ userC isLoading={persistLoading} aria-label={i18n.CANCEL} href={getCaseUrl(search)} + data-test-subj="case-configure-action-bottom-bar-cancel-button" > {i18n.CANCEL} @@ -313,6 +321,7 @@ const ConfigureCasesComponent: React.FC = ({ userC isDisabled={isLoadingAny} isLoading={persistLoading} onClick={handleSubmit} + data-test-subj="case-configure-action-bottom-bar-save-button" > {i18n.SAVE_CHANGES} From fcf0836baef1f4fef2586adf867c468c0cf65010 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 2 Apr 2020 17:24:00 +0300 Subject: [PATCH 11/18] Refactor tests --- .../__snapshots__/connectors.test.tsx.snap | 2 + .../connectors_dropdown.test.tsx.snap | 2 +- .../__snapshots__/field_mapping.test.tsx.snap | 24 +++++ .../field_mapping_row.test.tsx.snap | 2 + .../configure_cases/closure_options.test.tsx | 44 +++++---- .../closure_options_radio.test.tsx | 65 +++++++------- .../configure_cases/connectors.test.tsx | 80 ++++++++++------- .../connectors_dropdown.test.tsx | 55 ++++++------ .../configure_cases/connectors_dropdown.tsx | 2 +- .../field_mapping_row.test.tsx | 42 +++++---- .../components/configure_cases/index.test.tsx | 18 ++++ .../configure_cases/mapping.test.tsx | 90 +++++++++++-------- 12 files changed, 251 insertions(+), 175 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap index be463bb3c71aa..8bbe85cb7d197 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap @@ -28,6 +28,8 @@ exports[`Connectors it renders 1`] = ` grow={false} > Add new connector option diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap index 8ac8cc0dbb850..414ea785ee207 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap @@ -13,7 +13,7 @@ exports[`ConnectorsDropdown it renders 1`] = ` options={ Array [ Object { - "data-test-subj": "no-connector", + "data-test-subj": "dropdown-connector-no-connector", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , @@ -83,24 +87,28 @@ exports[`FieldMappingRow it renders 1`] = ` thirdPartyOptions={ Array [ Object { + "data-test-subj": "third-party-field-not-mapped", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , @@ -120,24 +128,28 @@ exports[`FieldMappingRow it renders 1`] = ` thirdPartyOptions={ Array [ Object { + "data-test-subj": "third-party-field-not-mapped", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , @@ -196,24 +208,28 @@ exports[`FieldMappingRow it renders with default mapping 1`] = ` thirdPartyOptions={ Array [ Object { + "data-test-subj": "third-party-field-not-mapped", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , @@ -233,24 +249,28 @@ exports[`FieldMappingRow it renders with default mapping 1`] = ` thirdPartyOptions={ Array [ Object { + "data-test-subj": "third-party-field-not-mapped", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , @@ -270,24 +290,28 @@ exports[`FieldMappingRow it renders with default mapping 1`] = ` thirdPartyOptions={ Array [ Object { + "data-test-subj": "third-party-field-not-mapped", "inputDisplay": Not mapped , "value": "not_mapped", }, Object { + "data-test-subj": "third-party-field-short-description", "inputDisplay": Short Description , "value": "short_description", }, Object { + "data-test-subj": "third-party-field-comments", "inputDisplay": Comments , "value": "comments", }, Object { + "data-test-subj": "third-party-field-description", "inputDisplay": Description , diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap index 0c9b2e36ccb2a..aeda3bc2228d2 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap @@ -28,6 +28,7 @@ exports[`FieldMappingRow it renders 1`] = ` { test('it shows the left side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -48,13 +47,12 @@ describe('ClosureOptions', () => { test('it shows the right side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -67,13 +65,12 @@ describe('ClosureOptions', () => { test('it shows closure options', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -87,12 +84,13 @@ describe('ClosureOptions', () => { test('it pass the correct props to child', () => { const onChangeClosureType = jest.fn(); - const wrapper = shallow( + const wrapper = mount( + />, + { wrappingComponent: TestProviders } ); const closureOptionsRadioComponent = wrapper.find(ClosureOptionsRadio); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx index b3d596d9ec602..85352ec6b3682 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx @@ -28,13 +28,12 @@ describe('ClosureOptionsRadio', () => { test('it shows the correct number of radio buttons', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect(wrapper.find('input[name="closure_options"]')).toHaveLength(2); @@ -42,13 +41,12 @@ describe('ClosureOptionsRadio', () => { test('it renders the correct radio buttons', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect(wrapper.find('input[id="close-by-user"]')).toBeDefined(); @@ -57,13 +55,12 @@ describe('ClosureOptionsRadio', () => { test('it disables correctly', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect(wrapper.find('input[id="close-by-user"]').prop('disabled')).toEqual(true); @@ -72,13 +69,12 @@ describe('ClosureOptionsRadio', () => { test('it selects the correct radio button', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect(wrapper.find('input[id="close-by-pushing"]').prop('checked')).toEqual(true); @@ -88,13 +84,12 @@ describe('ClosureOptionsRadio', () => { const onChangeClosureType = jest.fn(); const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); wrapper.find('input[id="close-by-pushing"]').simulate('change'); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index ea551006156e2..40291633299f9 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -33,16 +33,15 @@ describe('Connectors', () => { test('it shows the left side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -55,16 +54,15 @@ describe('Connectors', () => { test('it shows the right side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -77,16 +75,15 @@ describe('Connectors', () => { test('it shows the connectors dropdown', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -118,4 +115,27 @@ describe('Connectors', () => { expect(connectorsDropdownComponent.props().selectedConnector).toEqual('none'); expect(connectorsDropdownComponent.props().onChange).toEqual(onChange); }); + + test('it call the callback when pressing add button', () => { + const handleShowAddFlyout = jest.fn(); + + const wrapper = mount( + , + { wrappingComponent: TestProviders } + ); + + wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); + + wrapper.update(); + + expect(handleShowAddFlyout).toHaveBeenCalled(); + expect(handleShowAddFlyout).toHaveBeenCalledWith({}); + }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx index 0744d579155c2..6cc7ff0aec41f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx @@ -32,21 +32,24 @@ describe('ConnectorsDropdown', () => { test('it formats the connectors correctly', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); const props = wrapper.find(EuiSuperSelect).props(); expect(props.options).toEqual( expect.arrayContaining([ + expect.objectContaining({ + value: 'none', + 'data-test-subj': 'dropdown-connector-no-connector', + }), expect.objectContaining({ value: '123', 'data-test-subj': 'dropdown-connector-123' }), expect.objectContaining({ value: '456', 'data-test-subj': 'dropdown-connector-456' }), ]) @@ -55,15 +58,14 @@ describe('ConnectorsDropdown', () => { test('it disables the dropdown', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -76,15 +78,14 @@ describe('ConnectorsDropdown', () => { test('it selects the correct connector', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect(wrapper.find('button span').text()).toEqual('My Connector'); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx index 14f0a6f91f8d3..7255652ce4507 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx @@ -34,7 +34,7 @@ const noConnectorOption = { {i18n.NO_CONNECTOR} ), - 'data-test-subj': 'no-connector', + 'data-test-subj': 'dropdown-connector-no-connector', }; const ConnectorsDropdownComponent: React.FC = ({ diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx index 3680bf676e445..dd9d322b7b38a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx @@ -47,17 +47,16 @@ describe('FieldMappingRow', () => { test('it passes thirdPartyOptions correctly', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); const props = wrapper @@ -81,17 +80,16 @@ describe('FieldMappingRow', () => { test('it passes the correct actionTypeOptions', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); const props = wrapper diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index 0f3e6afcf5963..d50665886616f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -267,6 +267,24 @@ describe('ConfigureCases', () => { expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('456'); }); + test('the connector is changed successfully to none', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('123'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); + + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.update(); + wrapper.find('button[data-test-subj="dropdown-connector-no-connector"]').simulate('click'); + wrapper.update(); + + expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('none'); + }); + test('it show the add flyout when pressing the add connector button', () => { const wrapper = mount(, { wrappingComponent: TestProviders }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx index 402c2a1edf425..4111abb17f00e 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx @@ -31,15 +31,14 @@ describe('Mapping', () => { test('it shows the left side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -52,15 +51,14 @@ describe('Mapping', () => { test('it shows the right side', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -73,15 +71,14 @@ describe('Mapping', () => { test('it shows the update button', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -94,15 +91,14 @@ describe('Mapping', () => { test('it shows the field mapping', () => { const wrapper = mount( - - - + , + { wrappingComponent: TestProviders } ); expect( @@ -112,4 +108,26 @@ describe('Mapping', () => { .exists() ).toBe(true); }); + + test('it call the callback when pressing the update button', () => { + const setEditFlyoutVisibility = jest.fn(); + + const wrapper = mount( + , + { wrappingComponent: TestProviders } + ); + + wrapper.find('button[data-test-subj="case-mapping-update-connector-button"]').simulate('click'); + + wrapper.update(); + + expect(setEditFlyoutVisibility).toHaveBeenCalled(); + expect(setEditFlyoutVisibility).toHaveBeenCalledWith({}); + }); }); From 6f70dc1c8f9ac18a07213d79012122de43dd957f Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Thu, 2 Apr 2020 20:07:30 +0300 Subject: [PATCH 12/18] Fix flacky tests --- .../configure_cases/connectors.test.tsx | 23 ------------------- .../configure_cases/mapping.test.tsx | 22 ------------------ 2 files changed, 45 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index 40291633299f9..c60722929343c 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -115,27 +115,4 @@ describe('Connectors', () => { expect(connectorsDropdownComponent.props().selectedConnector).toEqual('none'); expect(connectorsDropdownComponent.props().onChange).toEqual(onChange); }); - - test('it call the callback when pressing add button', () => { - const handleShowAddFlyout = jest.fn(); - - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - - wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); - - wrapper.update(); - - expect(handleShowAddFlyout).toHaveBeenCalled(); - expect(handleShowAddFlyout).toHaveBeenCalledWith({}); - }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx index 4111abb17f00e..b4e2f0ba9d8bb 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx @@ -108,26 +108,4 @@ describe('Mapping', () => { .exists() ).toBe(true); }); - - test('it call the callback when pressing the update button', () => { - const setEditFlyoutVisibility = jest.fn(); - - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - - wrapper.find('button[data-test-subj="case-mapping-update-connector-button"]').simulate('click'); - - wrapper.update(); - - expect(setEditFlyoutVisibility).toHaveBeenCalled(); - expect(setEditFlyoutVisibility).toHaveBeenCalledWith({}); - }); }); From f1a10369acbea90264392b9a2f9e03cf3f7f753c Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 3 Apr 2020 13:33:16 +0300 Subject: [PATCH 13/18] Remove snapshots --- .../closure_options.test.tsx.snap | 32 -- .../closure_options_radio.test.tsx.snap | 23 -- .../__snapshots__/connectors.test.tsx.snap | 52 --- .../connectors_dropdown.test.tsx.snap | 32 -- .../__snapshots__/field_mapping.test.tsx.snap | 325 ------------------ .../field_mapping_row.test.tsx.snap | 98 ------ .../__snapshots__/index.test.tsx.snap | 158 --------- .../__snapshots__/mapping.test.tsx.snap | 65 ---- .../configure_cases/closure_options.test.tsx | 15 +- .../closure_options_radio.test.tsx | 7 +- .../configure_cases/connectors.test.tsx | 18 +- .../connectors_dropdown.test.tsx | 7 +- .../configure_cases/field_mapping.test.tsx | 40 ++- .../configure_cases/field_mapping.tsx | 4 +- .../field_mapping_row.test.tsx | 14 +- .../components/configure_cases/index.test.tsx | 7 - .../configure_cases/mapping.test.tsx | 17 +- 17 files changed, 56 insertions(+), 858 deletions(-) delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap delete mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap deleted file mode 100644 index 2f5d1e8198716..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options.test.tsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ClosureOptions it renders 1`] = ` - - Cases Closures - - } -> - - - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap deleted file mode 100644 index 8a9dd84654dcc..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/closure_options_radio.test.tsx.snap +++ /dev/null @@ -1,23 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ClosureOptionsRadio it renders 1`] = ` - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap deleted file mode 100644 index 8bbe85cb7d197..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors.test.tsx.snap +++ /dev/null @@ -1,52 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Connectors it renders 1`] = ` - - - Connect to third-party incident management system - - } - > - - - Incident management system - - - - Add new connector option - - - - } - > - - - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap deleted file mode 100644 index 414ea785ee207..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/connectors_dropdown.test.tsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ConnectorsDropdown it renders 1`] = ` - - - - No connector selected - - , - "value": "none", - }, - ] - } - valueOfSelected="none" -/> -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap deleted file mode 100644 index 118433d4e39d4..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping.test.tsx.snap +++ /dev/null @@ -1,325 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FieldMappingRow it renders 1`] = ` - - - - - - SIEM case field - - - - - External incident field - - - - - On edit and update - - - - - - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - -`; - -exports[`FieldMappingRow it renders with default mapping 1`] = ` - - - - - - SIEM case field - - - - - External incident field - - - - - On edit and update - - - - - - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - Not mapped - , - "value": "not_mapped", - }, - Object { - "data-test-subj": "third-party-field-short-description", - "inputDisplay": - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-field-comments", - "inputDisplay": - Comments - , - "value": "comments", - }, - Object { - "data-test-subj": "third-party-field-description", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - /> - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap deleted file mode 100644 index aeda3bc2228d2..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/field_mapping_row.test.tsx.snap +++ /dev/null @@ -1,98 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FieldMappingRow it renders 1`] = ` - - - - - Title - - - - - - - - - Short Description - , - "value": "short_description", - }, - Object { - "data-test-subj": "third-party-desc", - "inputDisplay": - Description - , - "value": "description", - }, - ] - } - valueOfSelected="short_description" - /> - - - - Nothing - , - "value": "nothing", - }, - Object { - "data-test-subj": "edit-update-option-overwrite", - "inputDisplay": - Overwrite - , - "value": "overwrite", - }, - Object { - "data-test-subj": "edit-update-option-append", - "inputDisplay": - Append - , - "value": "append", - }, - ] - } - valueOfSelected="nothing" - /> - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap deleted file mode 100644 index f79590d9ea801..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,158 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ConfigureCases it renders 1`] = ` - - - - - - - - - - - - - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap deleted file mode 100644 index 624f330953e6a..0000000000000 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__snapshots__/mapping.test.tsx.snap +++ /dev/null @@ -1,65 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Mapping it renders 1`] = ` - - Field mappings - - } -> - - - - - Update connector - - - - - - -`; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx index 46cd3dea7f2e7..4088c5016a5d8 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx @@ -15,7 +15,7 @@ import { ClosureOptionsRadio } from './closure_options_radio'; describe('ClosureOptions', () => { const mount = useMountAppended(); - test('it renders', () => { + test('it shows the left side', () => { const wrapper = shallow( { /> ); - expect(wrapper).toMatchSnapshot(); - }); - - test('it shows the left side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-closure-options-form-group"]') diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx index 85352ec6b3682..6d654d242542f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx @@ -23,7 +23,12 @@ describe('ClosureOptionsRadio', () => { /> ); - expect(wrapper).toMatchSnapshot(); + expect( + wrapper + .find('[data-test-subj="closure-options-radio-group"]') + .first() + .exists() + ).toBe(true); }); test('it shows the correct number of radio buttons', () => { diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index c60722929343c..371c7cb172e70 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -16,7 +16,7 @@ import { connectors } from './__mock__'; describe('Connectors', () => { const mount = useMountAppended(); - test('it renders', () => { + test('it shows the left side', () => { const wrapper = shallow( { /> ); - expect(wrapper).toMatchSnapshot(); - }); - - test('it shows the left side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-connectors-form-group"]') diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx index 6cc7ff0aec41f..59a8d80b040ea 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx @@ -27,7 +27,12 @@ describe('ConnectorsDropdown', () => { /> ); - expect(wrapper).toMatchSnapshot(); + expect( + wrapper + .find('[data-test-subj="dropdown-connectors"]') + .first() + .exists() + ).toBe(true); }); test('it formats the connectors correctly', () => { diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx index 30f392ff7e8df..64bd6a57f17e1 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx @@ -10,6 +10,7 @@ import { shallow } from 'enzyme'; import { FieldMapping } from './field_mapping'; import { mapping } from './__mock__'; import { FieldMappingRow } from './field_mapping_row'; +import { defaultMapping } from '../../../../lib/connectors/config'; describe('FieldMappingRow', () => { test('it renders', () => { @@ -17,21 +18,19 @@ describe('FieldMappingRow', () => { ); - expect(wrapper).toMatchSnapshot(); - }); - - test('it renders with default mapping', () => { - const wrapper = shallow( - - ); + expect( + wrapper + .find('[data-test-subj="case-configure-field-mapping-cols"]') + .first() + .exists() + ).toBe(true); - expect(wrapper).toMatchSnapshot(); - }); - - test('it shows the correct number of FieldMappingRow', () => { - const wrapper = shallow( - - ); + expect( + wrapper + .find('[data-test-subj="case-configure-field-mapping-row-wrapper"]') + .first() + .exists() + ).toBe(true); expect(wrapper.find(FieldMappingRow).length).toEqual(3); }); @@ -57,6 +56,19 @@ describe('FieldMappingRow', () => { }); }); + test('it pass the default mapping when mapping is null', () => { + const wrapper = shallow( + + ); + + const rows = wrapper.find(FieldMappingRow); + rows.forEach((row, index) => { + expect(row.prop('siemField')).toEqual(defaultMapping[index].source); + expect(row.prop('selectedActionType')).toEqual(defaultMapping[index].actionType); + expect(row.prop('selectedThirdParty')).toEqual(defaultMapping[index].target); + }); + }); + test('it should show zero rows on empty array', () => { const wrapper = shallow( diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx index 0cf43a16b810a..e22c31943afc0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx @@ -76,7 +76,7 @@ const FieldMappingComponent: React.FC = ({ ); return ( <> - + {i18n.FIELD_MAPPING_FIRST_COL} @@ -89,7 +89,7 @@ const FieldMappingComponent: React.FC = ({ - + {(mapping ?? defaultMapping).map(item => ( { /> ); - expect(wrapper).toMatchSnapshot(); + expect( + wrapper + .find('[data-test-subj="case-configure-third-party-select"]') + .first() + .exists() + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="case-configure-action-type-select"]') + .first() + .exists() + ).toBe(true); }); test('it passes thirdPartyOptions correctly', () => { diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index d50665886616f..139833b961ff3 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -5,7 +5,6 @@ */ import React, { useEffect } from 'react'; -import { shallow } from 'enzyme'; import { useKibana } from '../../../../lib/kibana'; import { @@ -76,12 +75,6 @@ describe('ConfigureCases', () => { useGetUrlSearchMock.mockImplementation(() => searchURL); }); - test('it renders', () => { - const wrapper = shallow(, { wrappingComponent: TestProviders }); - - expect(wrapper).toMatchSnapshot(); - }); - test('it renders correctly', () => { useCaseConfigureMock.mockImplementation( ({ setConnector, setClosureType, setCurrentConfiguration }) => { diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx index b4e2f0ba9d8bb..f9b8941f52ad0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx @@ -15,7 +15,7 @@ import { mapping } from './__mock__'; describe('Mapping', () => { const mount = useMountAppended(); - test('it renders', () => { + test('it shows the left side', () => { const wrapper = shallow( { /> ); - expect(wrapper).toMatchSnapshot(); - }); - - test('it shows the left side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-mapping-form-group"]') From 7c32a8cb28e55129dc4a74fe8da972822d5d7ae5 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 3 Apr 2020 15:52:01 +0300 Subject: [PATCH 14/18] Refactor tests --- .../configure_cases/closure_options.test.tsx | 58 +-- .../configure_cases/closure_options.tsx | 2 +- .../closure_options_radio.test.tsx | 100 ++---- .../configure_cases/closure_options_radio.tsx | 2 +- .../configure_cases/connectors.test.tsx | 85 ++--- .../components/configure_cases/connectors.tsx | 2 +- .../connectors_dropdown.test.tsx | 86 ++--- .../configure_cases/connectors_dropdown.tsx | 2 +- .../configure_cases/field_mapping.test.tsx | 49 +-- .../configure_cases/field_mapping.tsx | 2 +- .../field_mapping_row.test.tsx | 69 ++-- .../configure_cases/field_mapping_row.tsx | 2 +- .../components/configure_cases/index.test.tsx | 329 ++++-------------- .../configure_cases/mapping.test.tsx | 65 +--- .../components/configure_cases/mapping.tsx | 2 +- 15 files changed, 250 insertions(+), 605 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx index 4088c5016a5d8..437e98d9f9ead 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx @@ -5,25 +5,26 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; -import { ClosureOptions } from './closure_options'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { ClosureOptions, ClosureOptionsProps } from './closure_options'; import { TestProviders } from '../../../../mock'; import { ClosureOptionsRadio } from './closure_options_radio'; describe('ClosureOptions', () => { - const mount = useMountAppended(); - - test('it shows the left side', () => { - const wrapper = shallow( - - ); + let wrapper: ReactWrapper; + const onChangeClosureType = jest.fn(); + const props: ClosureOptionsProps = { + disabled: false, + closureTypeSelected: 'close-by-user', + onChangeClosureType, + }; + + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it shows the closure options form group', () => { expect( wrapper .find('[data-test-subj="case-closure-options-form-group"]') @@ -32,16 +33,7 @@ describe('ClosureOptions', () => { ).toBe(true); }); - test('it shows the right side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - + test('it shows the closure options form row', () => { expect( wrapper .find('[data-test-subj="case-closure-options-form-row"]') @@ -51,15 +43,6 @@ describe('ClosureOptions', () => { }); test('it shows closure options', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-closure-options-radio"]') @@ -69,17 +52,6 @@ describe('ClosureOptions', () => { }); test('it pass the correct props to child', () => { - const onChangeClosureType = jest.fn(); - - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - const closureOptionsRadioComponent = wrapper.find(ClosureOptionsRadio); expect(closureOptionsRadioComponent.props().disabled).toEqual(false); expect(closureOptionsRadioComponent.props().closureTypeSelected).toEqual('close-by-user'); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx index 161ef56001232..6fa97818dd0ce 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.tsx @@ -11,7 +11,7 @@ import { ClosureType } from '../../../../containers/case/configure/types'; import { ClosureOptionsRadio } from './closure_options_radio'; import * as i18n from './translations'; -interface ClosureOptionsProps { +export interface ClosureOptionsProps { closureTypeSelected: ClosureType; disabled: boolean; onChangeClosureType: (newClosureType: ClosureType) => void; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx index 6d654d242542f..f2ef2c2d55c28 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.test.tsx @@ -5,24 +5,25 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { ReactWrapper, mount } from 'enzyme'; -import { ClosureOptionsRadio } from './closure_options_radio'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { ClosureOptionsRadio, ClosureOptionsRadioComponentProps } from './closure_options_radio'; import { TestProviders } from '../../../../mock'; describe('ClosureOptionsRadio', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; + const onChangeClosureType = jest.fn(); + const props: ClosureOptionsRadioComponentProps = { + disabled: false, + closureTypeSelected: 'close-by-user', + onChangeClosureType, + }; + + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); test('it renders', () => { - const wrapper = shallow( - - ); - expect( wrapper .find('[data-test-subj="closure-options-radio-group"]') @@ -32,71 +33,44 @@ describe('ClosureOptionsRadio', () => { }); test('it shows the correct number of radio buttons', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect(wrapper.find('input[name="closure_options"]')).toHaveLength(2); }); - test('it renders the correct radio buttons', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); + test('it renders close by user radio button', () => { + expect(wrapper.find('input[id="close-by-user"]').exists()).toBeTruthy(); + }); - expect(wrapper.find('input[id="close-by-user"]')).toBeDefined(); - expect(wrapper.find('input[id="close-by-pushing"]')).toBeDefined(); + test('it renders close by pushing radio button', () => { + expect(wrapper.find('input[id="close-by-pushing"]').exists()).toBeTruthy(); }); - test('it disables correctly', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); + test('it disables the close by user radio button', () => { + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - expect(wrapper.find('input[id="close-by-user"]').prop('disabled')).toEqual(true); - expect(wrapper.find('input[id="close-by-pushing"]').prop('disabled')).toEqual(true); + expect(newWrapper.find('input[id="close-by-user"]').prop('disabled')).toEqual(true); }); - test('it selects the correct radio button', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); + test('it disables correctly the close by pushing radio button', () => { + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - expect(wrapper.find('input[id="close-by-pushing"]').prop('checked')).toEqual(true); + expect(newWrapper.find('input[id="close-by-pushing"]').prop('disabled')).toEqual(true); }); - test('it calls the onChangeClosureType function', () => { - const onChangeClosureType = jest.fn(); - - const wrapper = mount( - , - { wrappingComponent: TestProviders } + test('it selects the correct radio button', () => { + const newWrapper = mount( + , + { + wrappingComponent: TestProviders, + } ); + expect(newWrapper.find('input[id="close-by-pushing"]').prop('checked')).toEqual(true); + }); + test('it calls the onChangeClosureType function', () => { wrapper.find('input[id="close-by-pushing"]').simulate('change'); wrapper.update(); expect(onChangeClosureType).toHaveBeenCalled(); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx index 2ea2049e82562..d2cdb7ecda7ba 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options_radio.tsx @@ -26,7 +26,7 @@ const radios: ClosureRadios[] = [ }, ]; -interface ClosureOptionsRadioComponentProps { +export interface ClosureOptionsRadioComponentProps { closureTypeSelected: ClosureType; disabled: boolean; onChangeClosureType: (newClosureType: ClosureType) => void; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index 371c7cb172e70..e988d56ed0417 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -5,29 +5,31 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; -import { Connectors } from './connectors'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { Connectors, Props } from './connectors'; import { TestProviders } from '../../../../mock'; import { ConnectorsDropdown } from './connectors_dropdown'; import { connectors } from './__mock__'; describe('Connectors', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; + const onChangeConnector = jest.fn(); + const handleShowAddFlyout = jest.fn(); + const props: Props = { + disabled: false, + connectors, + selectedConnector: 'none', + isLoading: false, + onChangeConnector, + handleShowAddFlyout, + }; - test('it shows the left side', () => { - const wrapper = shallow( - - ); + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it shows the connectors from group', () => { expect( wrapper .find('[data-test-subj="case-connectors-form-group"]') @@ -36,19 +38,7 @@ describe('Connectors', () => { ).toBe(true); }); - test('it shows the right side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - + test('it shows the connectors form row', () => { expect( wrapper .find('[data-test-subj="case-connectors-form-row"]') @@ -58,18 +48,6 @@ describe('Connectors', () => { }); test('it shows the connectors dropdown', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-connectors-dropdown"]') @@ -79,24 +57,13 @@ describe('Connectors', () => { }); test('it pass the correct props to child', () => { - const onChange = jest.fn(); - - const wrapper = shallow( - - ); - - const connectorsDropdownComponent = wrapper.find(ConnectorsDropdown); - expect(connectorsDropdownComponent.props().disabled).toEqual(false); - expect(connectorsDropdownComponent.props().isLoading).toEqual(false); - expect(connectorsDropdownComponent.props().connectors).toEqual(connectors); - expect(connectorsDropdownComponent.props().selectedConnector).toEqual('none'); - expect(connectorsDropdownComponent.props().onChange).toEqual(onChange); + const connectorsDropdownProps = wrapper.find(ConnectorsDropdown).props(); + expect(connectorsDropdownProps).toMatchObject({ + disabled: false, + isLoading: false, + connectors, + selectedConnector: 'none', + onChange: props.onChangeConnector, + }); }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx index 92ffcc5f1ef14..de6d5f76cfad0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx @@ -28,7 +28,7 @@ const EuiFormRowExtended = styled(EuiFormRow)` } `; -interface Props { +export interface Props { connectors: Connector[]; disabled: boolean; isLoading: boolean; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx index 59a8d80b040ea..044108962efc7 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.test.tsx @@ -5,28 +5,28 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; import { EuiSuperSelect } from '@elastic/eui'; -import { ConnectorsDropdown } from './connectors_dropdown'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { ConnectorsDropdown, Props } from './connectors_dropdown'; import { TestProviders } from '../../../../mock'; import { connectors } from './__mock__'; describe('ConnectorsDropdown', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; + const props: Props = { + disabled: false, + connectors, + isLoading: false, + onChange: jest.fn(), + selectedConnector: 'none', + }; - test('it renders', () => { - const wrapper = shallow( - - ); + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it renders', () => { expect( wrapper .find('[data-test-subj="dropdown-connectors"]') @@ -36,20 +36,9 @@ describe('ConnectorsDropdown', () => { }); test('it formats the connectors correctly', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - - const props = wrapper.find(EuiSuperSelect).props(); + const selectProps = wrapper.find(EuiSuperSelect).props(); - expect(props.options).toEqual( + expect(selectProps.options).toEqual( expect.arrayContaining([ expect.objectContaining({ value: 'none', @@ -62,37 +51,36 @@ describe('ConnectorsDropdown', () => { }); test('it disables the dropdown', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); expect( - wrapper + newWrapper .find('[data-test-subj="dropdown-connectors"]') .first() .prop('disabled') ).toEqual(true); }); + test('it loading correctly', () => { + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); + + expect( + newWrapper + .find('[data-test-subj="dropdown-connectors"]') + .first() + .prop('isLoading') + ).toEqual(true); + }); + test('it selects the correct connector', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - expect(wrapper.find('button span').text()).toEqual('My Connector'); + expect(newWrapper.find('button span').text()).toEqual('My Connector'); }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx index 7255652ce4507..15066e73eee82 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors_dropdown.tsx @@ -12,7 +12,7 @@ import { Connector } from '../../../../containers/case/configure/types'; import { connectors as connectorsDefinition } from '../../../../lib/connectors/config'; import * as i18n from './translations'; -interface Props { +export interface Props { connectors: Connector[]; disabled: boolean; isLoading: boolean; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx index 64bd6a57f17e1..9ab752bb589c0 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.test.tsx @@ -5,19 +5,28 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; -import { FieldMapping } from './field_mapping'; +import { FieldMapping, FieldMappingProps } from './field_mapping'; import { mapping } from './__mock__'; import { FieldMappingRow } from './field_mapping_row'; import { defaultMapping } from '../../../../lib/connectors/config'; +import { TestProviders } from '../../../../mock'; describe('FieldMappingRow', () => { - test('it renders', () => { - const wrapper = shallow( - - ); + let wrapper: ReactWrapper; + const onChangeMapping = jest.fn(); + const props: FieldMappingProps = { + disabled: false, + mapping, + onChangeMapping, + }; + + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it renders', () => { expect( wrapper .find('[data-test-subj="case-configure-field-mapping-cols"]') @@ -36,18 +45,14 @@ describe('FieldMappingRow', () => { }); test('it shows the correct number of FieldMappingRow with default mapping', () => { - const wrapper = shallow( - - ); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - expect(wrapper.find(FieldMappingRow).length).toEqual(3); + expect(newWrapper.find(FieldMappingRow).length).toEqual(3); }); test('it pass the corrects props to mapping row', () => { - const wrapper = shallow( - - ); - const rows = wrapper.find(FieldMappingRow); rows.forEach((row, index) => { expect(row.prop('siemField')).toEqual(mapping[index].source); @@ -57,11 +62,11 @@ describe('FieldMappingRow', () => { }); test('it pass the default mapping when mapping is null', () => { - const wrapper = shallow( - - ); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - const rows = wrapper.find(FieldMappingRow); + const rows = newWrapper.find(FieldMappingRow); rows.forEach((row, index) => { expect(row.prop('siemField')).toEqual(defaultMapping[index].source); expect(row.prop('selectedActionType')).toEqual(defaultMapping[index].actionType); @@ -70,10 +75,10 @@ describe('FieldMappingRow', () => { }); test('it should show zero rows on empty array', () => { - const wrapper = shallow( - - ); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); - expect(wrapper.find(FieldMappingRow).length).toEqual(0); + expect(newWrapper.find(FieldMappingRow).length).toEqual(0); }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx index e22c31943afc0..2934b1056e29c 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping.tsx @@ -48,7 +48,7 @@ const supportedThirdPartyFields: Array> = }, ]; -interface FieldMappingProps { +export interface FieldMappingProps { disabled: boolean; mapping: CasesConfigurationMapping[] | null; onChangeMapping: (newMapping: CasesConfigurationMapping[]) => void; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx index 7678016900d04..5143df37a3052 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.test.tsx @@ -5,11 +5,10 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; import { EuiSuperSelectOption, EuiSuperSelect } from '@elastic/eui'; -import { FieldMappingRow } from './field_mapping_row'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; +import { FieldMappingRow, RowProps } from './field_mapping_row'; import { TestProviders } from '../../../../mock'; import { ThirdPartyField } from '../../../../containers/case/configure/types'; @@ -27,21 +26,25 @@ const thirdPartyOptions: Array> = [ ]; describe('FieldMappingRow', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; + const onChangeActionType = jest.fn(); + const onChangeThirdParty = jest.fn(); - test('it renders', () => { - const wrapper = shallow( - - ); + const props: RowProps = { + disabled: false, + siemField: 'title', + thirdPartyOptions, + onChangeActionType, + onChangeThirdParty, + selectedActionType: 'nothing', + selectedThirdParty: 'short_description', + }; + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + + test('it renders', () => { expect( wrapper .find('[data-test-subj="case-configure-third-party-select"]') @@ -58,25 +61,12 @@ describe('FieldMappingRow', () => { }); test('it passes thirdPartyOptions correctly', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - - const props = wrapper + const selectProps = wrapper .find(EuiSuperSelect) .first() .props(); - expect(props.options).toEqual( + expect(selectProps.options).toEqual( expect.arrayContaining([ expect.objectContaining({ value: 'short_description', @@ -91,25 +81,12 @@ describe('FieldMappingRow', () => { }); test('it passes the correct actionTypeOptions', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - - const props = wrapper + const selectProps = wrapper .find(EuiSuperSelect) .at(1) .props(); - expect(props.options).toEqual( + expect(selectProps.options).toEqual( expect.arrayContaining([ expect.objectContaining({ value: 'nothing', diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx index 9f48b7c590fcc..732a11a58d35a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/field_mapping_row.tsx @@ -21,7 +21,7 @@ import { ThirdPartyField, } from '../../../../containers/case/configure/types'; -interface RowProps { +export interface RowProps { disabled: boolean; siemField: CaseField; thirdPartyOptions: Array>; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index 139833b961ff3..69cc150281583 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -5,6 +5,7 @@ */ import React, { useEffect } from 'react'; +import { ReactWrapper, mount } from 'enzyme'; import { useKibana } from '../../../../lib/kibana'; import { @@ -42,7 +43,6 @@ import { ConnectorEditFlyout, } from '../../../../../../../../plugins/triggers_actions_ui/public'; import { EuiBottomBar } from '@elastic/eui'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; const useCaseConfigureResponse: ReturnUseCaseConfigure = { loading: false, @@ -65,17 +65,10 @@ const kibanaMockImplementationArgs = { }; describe('ConfigureCases', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; beforeEach(() => { jest.resetAllMocks(); - useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse); - useConnectorsMock.mockImplementation(() => useConnectorsResponse); - useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs); - useGetUrlSearchMock.mockImplementation(() => searchURL); - }); - - test('it renders correctly', () => { useCaseConfigureMock.mockImplementation( ({ setConnector, setClosureType, setCurrentConfiguration }) => { useEffect(() => setConnector('123'), []); @@ -91,9 +84,14 @@ describe('ConfigureCases', () => { return useCaseConfigureResponse; } ); + useConnectorsMock.mockImplementation(() => useConnectorsResponse); + useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs); + useGetUrlSearchMock.mockImplementation(() => searchURL); - const wrapper = mount(, { wrappingComponent: TestProviders }); + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it renders correctly', () => { expect(wrapper.find(Connectors).exists()).toBeTruthy(); expect(wrapper.find(ClosureOptions).exists()).toBeTruthy(); expect(wrapper.find(Mapping).exists()).toBeTruthy(); @@ -107,24 +105,6 @@ describe('ConfigureCases', () => { }); test('it renders with correct props', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - // Connector expect(wrapper.find(Connectors).prop('connectors')).toEqual(connectors); expect(wrapper.find(Connectors).prop('disabled')).toBe(false); @@ -160,14 +140,14 @@ describe('ConfigureCases', () => { }); test('it disables correctly when the user cannot crud', () => { - const wrapper = mount(, { + const newWrapper = mount(, { wrappingComponent: TestProviders, }); - expect(wrapper.find(Connectors).prop('disabled')).toBe(true); - expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); - expect(wrapper.find(Mapping).prop('updateConnectorDisabled')).toBe(true); + expect(newWrapper.find(Connectors).prop('disabled')).toBe(true); + expect(newWrapper.find(ClosureOptions).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('updateConnectorDisabled')).toBe(true); }); test('it shows the warning callout when configuration is invalid', () => { @@ -178,33 +158,22 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists() + newWrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists() ).toBeTruthy(); }); - test('it pass an empty array when connectors is null', () => { - useConnectorsMock.mockImplementation(() => ({ - ...useConnectorsResponse, - connectors: null, - })); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - - expect(wrapper.find(Connectors).prop('connectors').length).toBe(0); - }); - test('it disables correctly Connector when loading connectors', () => { useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Connectors).prop('disabled')).toBe(true); + expect(newWrapper.find(Connectors).prop('disabled')).toBe(true); }); test('it disables correctly Connector when saving configuration', () => { @@ -213,9 +182,9 @@ describe('ConfigureCases', () => { persistLoading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Connectors).prop('disabled')).toBe(true); + expect(newWrapper.find(Connectors).prop('disabled')).toBe(true); }); test('it pass the correct value to isLoading attribute on Connector', () => { @@ -224,9 +193,9 @@ describe('ConfigureCases', () => { loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Connectors).prop('isLoading')).toBe(true); + expect(newWrapper.find(Connectors).prop('isLoading')).toBe(true); }); test('it set correctly the selected connector', () => { @@ -237,21 +206,12 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('456'); + expect(newWrapper.find(Connectors).prop('selectedConnector')).toBe('456'); }); test('the connector is changed successfully', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); wrapper.update(); wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); @@ -261,15 +221,7 @@ describe('ConfigureCases', () => { }); test('the connector is changed successfully to none', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - + wrapper = mount(, { wrappingComponent: TestProviders }); wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); wrapper.update(); wrapper.find('button[data-test-subj="dropdown-connector-no-connector"]').simulate('click'); @@ -279,8 +231,6 @@ describe('ConfigureCases', () => { }); test('it show the add flyout when pressing the add connector button', () => { - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); wrapper.update(); @@ -294,9 +244,9 @@ describe('ConfigureCases', () => { loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + expect(newWrapper.find(ClosureOptions).prop('disabled')).toBe(true); }); test('it disables correctly ClosureOptions when saving configuration', () => { @@ -305,9 +255,9 @@ describe('ConfigureCases', () => { persistLoading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + expect(newWrapper.find(ClosureOptions).prop('disabled')).toBe(true); }); test('it disables correctly ClosureOptions when the connector is set to none', () => { @@ -318,9 +268,9 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(ClosureOptions).prop('disabled')).toBe(true); + expect(newWrapper.find(ClosureOptions).prop('disabled')).toBe(true); }); test('it set correctly the selected closure type', () => { @@ -331,21 +281,12 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); + expect(newWrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); }); test('the closure type is changed successfully', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setClosureType('close-by-user'), []); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('input[id="close-by-pushing"]').simulate('change'); wrapper.update(); @@ -353,8 +294,6 @@ describe('ConfigureCases', () => { }); test('it disables the mapping permanently', () => { - const wrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); }); @@ -364,8 +303,6 @@ describe('ConfigureCases', () => { loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); }); @@ -375,9 +312,9 @@ describe('ConfigureCases', () => { loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('disabled')).toBe(true); }); test('it disables the update connector button when saving the configuration', () => { @@ -386,9 +323,9 @@ describe('ConfigureCases', () => { persistLoading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('disabled')).toBe(true); }); test('it disables the update connector button when the connectorId is invalid', () => { @@ -399,9 +336,9 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('disabled')).toBe(true); }); test('it disables the update connector button when the connectorId is set to none', () => { @@ -412,21 +349,12 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('disabled')).toBe(true); + expect(newWrapper.find(Mapping).prop('disabled')).toBe(true); }); test('it show the edit flyout when pressing the update connector button', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="case-mapping-update-connector-button"]').simulate('click'); wrapper.update(); @@ -435,15 +363,6 @@ describe('ConfigureCases', () => { }); test('it sets the mapping of a connector correctly', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - expect(wrapper.find(Mapping).prop('mapping')).toEqual( connectors[0].config.casesConfiguration.mapping ); @@ -454,48 +373,12 @@ describe('ConfigureCases', () => { test.todo('the mapping is changed successfully when changing the action type'); test('it not shows the action bar when there is no change', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - expect( wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() ).toBeFalsy(); }); test('it shows the action bar when the connector is changed', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); wrapper.update(); wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); @@ -513,24 +396,6 @@ describe('ConfigureCases', () => { }); test('it shows the action bar when the closure type is changed', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('input[id="close-by-pushing"]').simulate('change'); wrapper.update(); @@ -546,24 +411,6 @@ describe('ConfigureCases', () => { }); test('it tracks the changes successfully', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); wrapper.update(); wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); @@ -583,24 +430,6 @@ describe('ConfigureCases', () => { }); test('it tracks and reverts the changes successfully ', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - // change settings wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); wrapper.update(); @@ -623,24 +452,6 @@ describe('ConfigureCases', () => { }); test('it close and restores the action bar when the add connector button is pressed', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - // Change closure type wrapper.find('input[id="close-by-pushing"]').simulate('change'); wrapper.update(); @@ -674,24 +485,6 @@ describe('ConfigureCases', () => { }); test('it close and restores the action bar when the update connector button is pressed', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('123'), []); - useEffect(() => setClosureType('close-by-user'), []); - useEffect( - () => - setCurrentConfiguration({ - connectorId: '123', - closureType: 'close-by-user', - }), - [] - ); - return useCaseConfigureResponse; - } - ); - - const wrapper = mount(, { wrappingComponent: TestProviders }); - // Change closure type wrapper.find('input[id="close-by-pushing"]').simulate('change'); wrapper.update(); @@ -746,17 +539,17 @@ describe('ConfigureCases', () => { loading: true, })); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') .first() .prop('isDisabled') ).toBe(true); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .prop('isDisabled') @@ -780,17 +573,17 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') .first() .prop('isDisabled') ).toBe(true); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .prop('isDisabled') @@ -814,17 +607,17 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') .first() .prop('isDisabled') ).toBe(true); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .prop('isDisabled') @@ -848,17 +641,17 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') .first() .prop('isLoading') ).toBe(true); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .prop('isLoading') @@ -882,17 +675,17 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .simulate('click'); - wrapper.update(); + newWrapper.update(); expect( - wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + newWrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() ).toBeFalsy(); }); @@ -915,14 +708,14 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-save-button"]') .first() .simulate('click'); - wrapper.update(); + newWrapper.update(); expect(persistCaseConfigure).toHaveBeenCalled(); expect(persistCaseConfigure).toHaveBeenCalledWith({ @@ -951,10 +744,10 @@ describe('ConfigureCases', () => { } ); - const wrapper = mount(, { wrappingComponent: TestProviders }); + const newWrapper = mount(, { wrappingComponent: TestProviders }); expect( - wrapper + newWrapper .find('[data-test-subj="case-configure-action-bottom-bar-cancel-button"]') .first() .prop('href') diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx index f9b8941f52ad0..fefcb2ca8cf6a 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.test.tsx @@ -5,27 +5,29 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; -import { useMountAppended } from '../../../../utils/use_mount_appended'; import { TestProviders } from '../../../../mock'; -import { Mapping } from './mapping'; +import { Mapping, MappingProps } from './mapping'; import { mapping } from './__mock__'; describe('Mapping', () => { - const mount = useMountAppended(); + let wrapper: ReactWrapper; + const onChangeMapping = jest.fn(); + const setEditFlyoutVisibility = jest.fn(); + const props: MappingProps = { + disabled: false, + mapping, + updateConnectorDisabled: false, + onChangeMapping, + setEditFlyoutVisibility, + }; - test('it shows the left side', () => { - const wrapper = shallow( - - ); + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + test('it shows mapping form group', () => { expect( wrapper .find('[data-test-subj="case-mapping-form-group"]') @@ -34,18 +36,7 @@ describe('Mapping', () => { ).toBe(true); }); - test('it shows the right side', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - + test('it shows mapping form row', () => { expect( wrapper .find('[data-test-subj="case-mapping-form-row"]') @@ -55,17 +46,6 @@ describe('Mapping', () => { }); test('it shows the update button', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-mapping-update-connector-button"]') @@ -75,17 +55,6 @@ describe('Mapping', () => { }); test('it shows the field mapping', () => { - const wrapper = mount( - , - { wrappingComponent: TestProviders } - ); - expect( wrapper .find('[data-test-subj="case-mapping-field"]') diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx index 4a229dfa6303a..7340a49f6d0bb 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/mapping.tsx @@ -20,7 +20,7 @@ import * as i18n from './translations'; import { FieldMapping } from './field_mapping'; import { CasesConfigurationMapping } from '../../../../containers/case/configure/types'; -interface MappingProps { +export interface MappingProps { disabled: boolean; updateConnectorDisabled: boolean; mapping: CasesConfigurationMapping[] | null; From 408d7c3b1b00c4a2271164f4812f8f38e91512b4 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 3 Apr 2020 17:24:59 +0300 Subject: [PATCH 15/18] Test button --- .../configure_cases/button.test.tsx | 114 ++++++++++++++++++ .../components/configure_cases/button.tsx | 10 +- 2 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx new file mode 100644 index 0000000000000..cf52fef94ed17 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.test.tsx @@ -0,0 +1,114 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { ReactWrapper, mount } from 'enzyme'; +import { EuiText } from '@elastic/eui'; + +import { ConfigureCaseButton, ConfigureCaseButtonProps } from './button'; +import { TestProviders } from '../../../../mock'; +import { searchURL } from './__mock__'; + +describe('Configuration button', () => { + let wrapper: ReactWrapper; + const props: ConfigureCaseButtonProps = { + isDisabled: false, + label: 'My label', + msgTooltip: <>, + showToolTip: false, + titleTooltip: '', + urlSearch: searchURL, + }; + + beforeAll(() => { + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + + test('it renders without the tooltip', () => { + expect( + wrapper + .find('[data-test-subj="configure-case-button"]') + .first() + .exists() + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="configure-case-tooltip"]') + .first() + .exists() + ).toBe(false); + }); + + test('it pass the correct props to the button', () => { + expect( + wrapper + .find('[data-test-subj="configure-case-button"]') + .first() + .props() + ).toMatchObject({ + href: `#/link-to/case/configure${searchURL}`, + iconType: 'controlsHorizontal', + isDisabled: false, + 'aria-label': 'My label', + children: 'My label', + }); + }); + + test('it renders the tooltip', () => { + const msgTooltip = {'My message tooltip'}; + + const newWrapper = mount( + , + { + wrappingComponent: TestProviders, + } + ); + + expect( + newWrapper + .find('[data-test-subj="configure-case-tooltip"]') + .first() + .exists() + ).toBe(true); + + expect( + wrapper + .find('[data-test-subj="configure-case-button"]') + .first() + .exists() + ).toBe(true); + }); + + test('it shows the tooltip when hovering the button', () => { + const msgTooltip = 'My message tooltip'; + const titleTooltip = 'My title'; + + const newWrapper = mount( + {msgTooltip}} + />, + { + wrappingComponent: TestProviders, + } + ); + + newWrapper + .find('[data-test-subj="configure-case-button"]') + .first() + .simulate('mouseOver'); + + expect(newWrapper.find('.euiToolTipPopover').text()).toBe(`${titleTooltip}${msgTooltip}`); + }); +}); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx index b0bea83148bda..844ffea28415f 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/button.tsx @@ -8,7 +8,7 @@ import { EuiButton, EuiToolTip } from '@elastic/eui'; import React, { memo, useMemo } from 'react'; import { getConfigureCasesUrl } from '../../../../components/link_to'; -interface ConfigureCaseButtonProps { +export interface ConfigureCaseButtonProps { label: string; isDisabled: boolean; msgTooltip: JSX.Element; @@ -32,6 +32,7 @@ const ConfigureCaseButtonComponent: React.FC = ({ iconType="controlsHorizontal" isDisabled={isDisabled} aria-label={label} + data-test-subj="configure-case-button" > {label} @@ -39,7 +40,12 @@ const ConfigureCaseButtonComponent: React.FC = ({ [label, isDisabled, urlSearch] ); return showToolTip ? ( - {msgTooltip}

}> + {msgTooltip}

} + data-test-subj="configure-case-tooltip" + > {configureCaseButton} ) : ( From 1b2a21480b7d800d2f7deef4847165e51af9ad75 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Fri, 3 Apr 2020 17:39:00 +0300 Subject: [PATCH 16/18] Test reducer --- .../configure_cases/__mock__/index.tsx | 8 +++ .../configure_cases/reducer.test.ts | 68 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/reducer.test.ts diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx index a6589f9cbf34a..71aa3c37ff477 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx @@ -8,6 +8,7 @@ import { Connector, CasesConfigurationMapping, } from '../../../../../containers/case/configure/types'; +import { State } from '../reducer'; export const connectors: Connector[] = [ { @@ -86,3 +87,10 @@ export const mapping: CasesConfigurationMapping[] = [ export const searchURL = '?timerange=(global:(linkTo:!(),timerange:(from:1585487656371,fromStr:now-24h,kind:relative,to:1585574056371,toStr:now)),timeline:(linkTo:!(),timerange:(from:1585227005527,kind:absolute,to:1585313405527)))'; + +export const initialState: State = { + connectorId: 'none', + closureType: 'close-by-user', + mapping: null, + currentConfiguration: { connectorId: 'none', closureType: 'close-by-user' }, +}; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/reducer.test.ts b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/reducer.test.ts new file mode 100644 index 0000000000000..df958b75dc6b8 --- /dev/null +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/reducer.test.ts @@ -0,0 +1,68 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { configureCasesReducer, Action, State } from './reducer'; +import { initialState, mapping } from './__mock__'; + +describe('Reducer', () => { + let reducer: (state: State, action: Action) => State; + + beforeAll(() => { + reducer = configureCasesReducer(); + }); + + test('it should set the correct configuration', () => { + const action: Action = { + type: 'setCurrentConfiguration', + currentConfiguration: { connectorId: '123', closureType: 'close-by-user' }, + }; + const state = reducer(initialState, action); + + expect(state).toEqual({ + ...state, + currentConfiguration: action.currentConfiguration, + }); + }); + + test('it should set the correct connector id', () => { + const action: Action = { + type: 'setConnectorId', + connectorId: '456', + }; + const state = reducer(initialState, action); + + expect(state).toEqual({ + ...state, + connectorId: action.connectorId, + }); + }); + + test('it should set the closure type', () => { + const action: Action = { + type: 'setClosureType', + closureType: 'close-by-pushing', + }; + const state = reducer(initialState, action); + + expect(state).toEqual({ + ...state, + closureType: action.closureType, + }); + }); + + test('it should set the mapping', () => { + const action: Action = { + type: 'setMapping', + mapping, + }; + const state = reducer(initialState, action); + + expect(state).toEqual({ + ...state, + mapping: action.mapping, + }); + }); +}); From a11e210f820b0195c7ba925781093d418cb5a88c Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Mon, 6 Apr 2020 12:50:05 +0300 Subject: [PATCH 17/18] Move test --- .../configure_cases/closure_options.test.tsx | 7 ++++ .../configure_cases/connectors.test.tsx | 21 ++++++++++ .../components/configure_cases/index.test.tsx | 41 +------------------ 3 files changed, 29 insertions(+), 40 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx index 437e98d9f9ead..209dce9aedffc 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/closure_options.test.tsx @@ -57,4 +57,11 @@ describe('ClosureOptions', () => { expect(closureOptionsRadioComponent.props().closureTypeSelected).toEqual('close-by-user'); expect(closureOptionsRadioComponent.props().onChangeClosureType).toEqual(onChangeClosureType); }); + + test('the closure type is changed successfully', () => { + wrapper.find('input[id="close-by-pushing"]').simulate('change'); + + expect(onChangeClosureType).toHaveBeenCalled(); + expect(onChangeClosureType).toHaveBeenCalledWith('close-by-pushing'); + }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx index e988d56ed0417..5fb52c374b482 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx @@ -66,4 +66,25 @@ describe('Connectors', () => { onChange: props.onChangeConnector, }); }); + + test('the connector is changed successfully', () => { + wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); + + expect(onChangeConnector).toHaveBeenCalled(); + expect(onChangeConnector).toHaveBeenCalledWith('456'); + }); + + test('the connector is changed successfully to none', () => { + onChangeConnector.mockClear(); + const newWrapper = mount(, { + wrappingComponent: TestProviders, + }); + + newWrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); + newWrapper.find('button[data-test-subj="dropdown-connector-no-connector"]').simulate('click'); + + expect(onChangeConnector).toHaveBeenCalled(); + expect(onChangeConnector).toHaveBeenCalledWith('none'); + }); }); diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index 69cc150281583..ed5c352e56fbf 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -211,25 +211,6 @@ describe('ConfigureCases', () => { expect(newWrapper.find(Connectors).prop('selectedConnector')).toBe('456'); }); - test('the connector is changed successfully', () => { - wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); - wrapper.update(); - wrapper.find('button[data-test-subj="dropdown-connector-456"]').simulate('click'); - wrapper.update(); - - expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('456'); - }); - - test('the connector is changed successfully to none', () => { - wrapper = mount(, { wrappingComponent: TestProviders }); - wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click'); - wrapper.update(); - wrapper.find('button[data-test-subj="dropdown-connector-no-connector"]').simulate('click'); - wrapper.update(); - - expect(wrapper.find(Connectors).prop('selectedConnector')).toBe('none'); - }); - test('it show the add flyout when pressing the add connector button', () => { wrapper.find('button[data-test-subj="case-configure-add-connector-button"]').simulate('click'); wrapper.update(); @@ -273,26 +254,6 @@ describe('ConfigureCases', () => { expect(newWrapper.find(ClosureOptions).prop('disabled')).toBe(true); }); - test('it set correctly the selected closure type', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setClosureType('close-by-pushing'), []); - return useCaseConfigureResponse; - } - ); - - const newWrapper = mount(, { wrappingComponent: TestProviders }); - - expect(newWrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); - }); - - test('the closure type is changed successfully', () => { - wrapper.find('input[id="close-by-pushing"]').simulate('change'); - wrapper.update(); - - expect(wrapper.find(ClosureOptions).prop('closureTypeSelected')).toBe('close-by-pushing'); - }); - test('it disables the mapping permanently', () => { expect(wrapper.find(Mapping).prop('disabled')).toBe(true); }); @@ -372,7 +333,7 @@ describe('ConfigureCases', () => { test.todo('the mapping is changed successfully when changing the third party'); test.todo('the mapping is changed successfully when changing the action type'); - test('it not shows the action bar when there is no change', () => { + test('it does not shows the action bar when there is no change', () => { expect( wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() ).toBeFalsy(); From f7f1c6f6e1c7df4a7cb7d73912c28e9ad9907f17 Mon Sep 17 00:00:00 2001 From: Christos Nasikas Date: Mon, 6 Apr 2020 16:08:58 +0300 Subject: [PATCH 18/18] Better structure --- .../configure_cases/__mock__/index.tsx | 26 ++++ .../components/configure_cases/index.test.tsx | 139 +++++++++++------- .../case/components/configure_cases/index.tsx | 1 + 3 files changed, 112 insertions(+), 54 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx index 71aa3c37ff477..a3df3664398ad 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/__mock__/index.tsx @@ -9,6 +9,12 @@ import { CasesConfigurationMapping, } from '../../../../../containers/case/configure/types'; import { State } from '../reducer'; +import { ReturnConnectors } from '../../../../../containers/case/configure/use_connectors'; +import { ReturnUseCaseConfigure } from '../../../../../containers/case/configure/use_configure'; +import { createUseKibanaMock } from '../../../../../mock/kibana_react'; + +// eslint-disable-next-line @kbn/eslint/no-restricted-paths +import { actionTypeRegistryMock } from '../../../../../../../../../plugins/triggers_actions_ui/public/application/action_type_registry.mock'; export const connectors: Connector[] = [ { @@ -94,3 +100,23 @@ export const initialState: State = { mapping: null, currentConfiguration: { connectorId: 'none', closureType: 'close-by-user' }, }; + +export const useCaseConfigureResponse: ReturnUseCaseConfigure = { + loading: false, + persistLoading: false, + refetchCaseConfigure: jest.fn(), + persistCaseConfigure: jest.fn(), +}; + +export const useConnectorsResponse: ReturnConnectors = { + loading: false, + connectors, + refetchConnectors: jest.fn(), +}; + +export const kibanaMockImplementationArgs = { + services: { + ...createUseKibanaMock()().services, + triggers_actions_ui: { actionTypeRegistry: actionTypeRegistryMock.create() }, + }, +}; diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx index ed5c352e56fbf..5ea3f500c0349 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.test.tsx @@ -8,17 +8,17 @@ import React, { useEffect } from 'react'; import { ReactWrapper, mount } from 'enzyme'; import { useKibana } from '../../../../lib/kibana'; -import { - useConnectors, - ReturnConnectors, -} from '../../../../containers/case/configure/use_connectors'; -import { - useCaseConfigure, - ReturnUseCaseConfigure, -} from '../../../../containers/case/configure/use_configure'; +import { useConnectors } from '../../../../containers/case/configure/use_connectors'; +import { useCaseConfigure } from '../../../../containers/case/configure/use_configure'; import { useGetUrlSearch } from '../../../../components/navigation/use_get_url_search'; -import { connectors, searchURL } from './__mock__'; +import { + connectors, + searchURL, + useCaseConfigureResponse, + useConnectorsResponse, + kibanaMockImplementationArgs, +} from './__mock__'; jest.mock('../../../../lib/kibana'); jest.mock('../../../../containers/case/configure/use_connectors'); @@ -32,8 +32,6 @@ const useGetUrlSearchMock = useGetUrlSearch as jest.Mock; import { ConfigureCases } from './'; import { TestProviders } from '../../../../mock'; -import { createUseKibanaMock } from '../../../../mock/kibana_react'; -import { actionTypeRegistryMock } from '../../../../../../../../plugins/triggers_actions_ui/public/application/action_type_registry.mock'; import { Connectors } from './connectors'; import { ClosureOptions } from './closure_options'; import { Mapping } from './mapping'; @@ -44,27 +42,84 @@ import { } from '../../../../../../../../plugins/triggers_actions_ui/public'; import { EuiBottomBar } from '@elastic/eui'; -const useCaseConfigureResponse: ReturnUseCaseConfigure = { - loading: false, - persistLoading: false, - refetchCaseConfigure: jest.fn(), - persistCaseConfigure: jest.fn(), -}; +describe('rendering', () => { + let wrapper: ReactWrapper; + beforeEach(() => { + jest.resetAllMocks(); + useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse); + useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] })); + useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs); + useGetUrlSearchMock.mockImplementation(() => searchURL); -const useConnectorsResponse: ReturnConnectors = { - loading: false, - connectors, - refetchConnectors: jest.fn(), -}; + wrapper = mount(, { wrappingComponent: TestProviders }); + }); + + test('it renders the Connectors', () => { + expect(wrapper.find('[data-test-subj="case-connectors-form-group"]').exists()).toBeTruthy(); + }); + + test('it renders the ClosureType', () => { + expect( + wrapper.find('[data-test-subj="case-closure-options-form-group"]').exists() + ).toBeTruthy(); + }); + + test('it renders the Mapping', () => { + expect(wrapper.find('[data-test-subj="case-mapping-form-group"]').exists()).toBeTruthy(); + }); + + test('it renders the ActionsConnectorsContextProvider', () => { + // Components from triggers_actions_ui do not have a data-test-subj + expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy(); + }); + + test('it renders the ConnectorAddFlyout', () => { + // Components from triggers_actions_ui do not have a data-test-subj + expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy(); + }); + + test('it does NOT render the ConnectorEditFlyout', () => { + // Components from triggers_actions_ui do not have a data-test-subj + expect(wrapper.find(ConnectorEditFlyout).exists()).toBeFalsy(); + }); + + test('it does NOT render the EuiCallOut', () => { + expect(wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()).toBeFalsy(); + }); + + test('it does NOT render the EuiBottomBar', () => { + expect( + wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() + ).toBeFalsy(); + }); +}); + +describe('ConfigureCases - Unhappy path', () => { + beforeEach(() => { + jest.resetAllMocks(); + useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse); + useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, connectors: [] })); + useKibanaMock.mockImplementation(() => kibanaMockImplementationArgs); + useGetUrlSearchMock.mockImplementation(() => searchURL); + }); -const kibanaMockImplementationArgs = { - services: { - ...createUseKibanaMock()().services, - triggers_actions_ui: { actionTypeRegistry: actionTypeRegistryMock.create() }, - }, -}; + test('it shows the warning callout when configuration is invalid', () => { + useCaseConfigureMock.mockImplementation( + ({ setConnector, setClosureType, setCurrentConfiguration }) => { + useEffect(() => setConnector('not-id'), []); + return useCaseConfigureResponse; + } + ); + + const wrapper = mount(, { wrappingComponent: TestProviders }); -describe('ConfigureCases', () => { + expect( + wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists() + ).toBeTruthy(); + }); +}); + +describe('ConfigureCases - Happy path', () => { let wrapper: ReactWrapper; beforeEach(() => { @@ -91,17 +146,8 @@ describe('ConfigureCases', () => { wrapper = mount(, { wrappingComponent: TestProviders }); }); - test('it renders correctly', () => { - expect(wrapper.find(Connectors).exists()).toBeTruthy(); - expect(wrapper.find(ClosureOptions).exists()).toBeTruthy(); - expect(wrapper.find(Mapping).exists()).toBeTruthy(); - expect(wrapper.find(ActionsConnectorsContextProvider).exists()).toBeTruthy(); - expect(wrapper.find(ConnectorAddFlyout).exists()).toBeTruthy(); + test('it renders the ConnectorEditFlyout', () => { expect(wrapper.find(ConnectorEditFlyout).exists()).toBeTruthy(); - expect(wrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists()).toBeFalsy(); - expect( - wrapper.find('[data-test-subj="case-configure-action-bottom-bar"]').exists() - ).toBeFalsy(); }); test('it renders with correct props', () => { @@ -150,21 +196,6 @@ describe('ConfigureCases', () => { expect(newWrapper.find(Mapping).prop('updateConnectorDisabled')).toBe(true); }); - test('it shows the warning callout when configuration is invalid', () => { - useCaseConfigureMock.mockImplementation( - ({ setConnector, setClosureType, setCurrentConfiguration }) => { - useEffect(() => setConnector('not-id'), []); - return useCaseConfigureResponse; - } - ); - - const newWrapper = mount(, { wrappingComponent: TestProviders }); - - expect( - newWrapper.find('[data-test-subj="configure-cases-warning-callout"]').exists() - ).toBeTruthy(); - }); - test('it disables correctly Connector when loading connectors', () => { useConnectorsMock.mockImplementation(() => ({ ...useConnectorsResponse, diff --git a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx index ddf12d56a37ac..241dcef14a145 100644 --- a/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/case/components/configure_cases/index.tsx @@ -140,6 +140,7 @@ const ConfigureCasesComponent: React.FC = ({ userC setClosureType, setCurrentConfiguration, }); + const { loading: isLoadingConnectors, connectors, refetchConnectors } = useConnectors(); // ActionsConnectorsContextProvider reloadConnectors prop expects a Promise.