From 54bd778d9ca20cfe1177e9c87dd4d65f70f07042 Mon Sep 17 00:00:00 2001 From: Denys Malofeiev <77440017+Dekshut@users.noreply.github.com> Date: Fri, 4 Feb 2022 22:34:34 +0200 Subject: [PATCH] Fixed issue/1465 partially got rid of enzyme in tests (#1489) * got rid of enzyme in Dropdown tests * got rid of enzyme in DynamicTextButton tests * got rid of enzyme in Search tests * Revert "got rid of enzyme in Search tests" This reverts commit cd2c5b10ab152c86da81ac58418c72ede13713a6. * got rid of enzyme in Search tests * got rid of enzyme in SQLEditor tests * got rid of enzyme in Connect tests * got rid of enzyme in Connect/Details tests * got rid of enzyme in Topics\Topic tests * got rid of ThemeProvider in render function * fixed redundant * used userEvent instead of fireEvent * fixed snapshot tests * used screen * rise testing-library approach * got rid of snapshot in Search component test * changed titles of Search component test * fixed topics details test --- .../Details/__tests__/Details.spec.tsx | 15 +- .../Connect/__tests__/Connect.spec.tsx | 61 +- .../__snapshots__/Connect.spec.tsx.snap | 34 - .../__test__/ResetOffsets.spec.tsx | 9 +- .../Topic/Details/__test__/Details.spec.tsx | 56 +- .../__snapshots__/Details.spec.tsx.snap | 619 ++---------------- .../Dropdown/__tests__/Dropdown.spec.tsx | 50 +- .../Dropdown/__tests__/DropdownItem.spec.tsx | 17 +- .../__snapshots__/Dropdown.spec.tsx.snap | 128 ++-- .../__snapshots__/DropdownItem.spec.tsx.snap | 17 +- .../__tests__/DynamicTextButton.spec.tsx | 19 +- .../SQLEditor/__tests__/SQLEditor.spec.tsx | 16 +- .../__snapshots__/SQLEditor.spec.tsx.snap | 401 ++++++++---- .../common/Search/__tests__/Search.spec.tsx | 50 +- .../__snapshots__/Search.spec.tsx.snap | 23 - 15 files changed, 548 insertions(+), 967 deletions(-) delete mode 100644 kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap delete mode 100644 kafka-ui-react-app/src/components/common/Search/__tests__/__snapshots__/Search.spec.tsx.snap diff --git a/kafka-ui-react-app/src/components/Connect/Details/__tests__/Details.spec.tsx b/kafka-ui-react-app/src/components/Connect/Details/__tests__/Details.spec.tsx index 2a8e8192d3..3e9fa1745b 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/__tests__/Details.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/Details/__tests__/Details.spec.tsx @@ -1,7 +1,10 @@ import React from 'react'; import { create } from 'react-test-renderer'; -import { mount } from 'enzyme'; -import { containerRendersView, TestRouterWrapper } from 'lib/testHelpers'; +import { + containerRendersView, + TestRouterWrapper, + render, +} from 'lib/testHelpers'; import { clusterConnectConnectorPath } from 'lib/paths'; import DetailsContainer from 'components/Connect/Details/DetailsContainer'; import Details, { DetailsProps } from 'components/Connect/Details/Details'; @@ -79,13 +82,13 @@ describe('Details', () => { }); it('is empty when no connector', () => { - const wrapper = mount(setupWrapper({ connector: null })); - expect(wrapper.html()).toEqual(''); + const wrapper = render(setupWrapper({ connector: null })).baseElement; + expect(wrapper.querySelector('div')).toBeEmptyDOMElement(); }); it('fetches connector on mount', () => { const fetchConnector = jest.fn(); - mount(setupWrapper({ fetchConnector })); + render(setupWrapper({ fetchConnector })); expect(fetchConnector).toHaveBeenCalledTimes(1); expect(fetchConnector).toHaveBeenCalledWith( clusterName, @@ -96,7 +99,7 @@ describe('Details', () => { it('fetches tasks on mount', () => { const fetchTasks = jest.fn(); - mount(setupWrapper({ fetchTasks })); + render(setupWrapper({ fetchTasks })); expect(fetchTasks).toHaveBeenCalledTimes(1); expect(fetchTasks).toHaveBeenCalledWith( clusterName, diff --git a/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx b/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx index 62413ad53d..8708a2cea3 100644 --- a/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx +++ b/kafka-ui-react-app/src/components/Connect/__tests__/Connect.spec.tsx @@ -1,10 +1,63 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from 'lib/testHelpers'; +import { screen } from '@testing-library/react'; import Connect from 'components/Connect/Connect'; +import { store } from 'redux/store'; +import { Route } from 'react-router-dom'; +import { + clusterConnectorsPath, + clusterConnectorNewPath, + clusterConnectConnectorPath, + clusterConnectConnectorEditPath, +} from 'lib/paths'; + +jest.mock('components/Connect/New/NewContainer', () => () => ( +
NewContainer
+)); +jest.mock('components/Connect/List/ListContainer', () => () => ( +
ListContainer
+)); +jest.mock('components/Connect/Details/DetailsContainer', () => () => ( +
DetailsContainer
+)); +jest.mock('components/Connect/Edit/EditContainer', () => () => ( +
EditContainer
+)); describe('Connect', () => { - it('matches snapshot', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const renderComponent = (pathname: string) => + render( + + + , + { pathname, store } + ); + + it('renders ListContainer', () => { + renderComponent(clusterConnectorsPath('my-cluster')); + expect(screen.getByText('ListContainer')).toBeInTheDocument(); + }); + + it('renders NewContainer', () => { + renderComponent(clusterConnectorNewPath('my-cluster')); + expect(screen.getByText('NewContainer')).toBeInTheDocument(); + }); + + it('renders DetailsContainer', () => { + renderComponent( + clusterConnectConnectorPath('my-cluster', 'my-connect', 'my-connector') + ); + expect(screen.getByText('DetailsContainer')).toBeInTheDocument(); + }); + + it('renders EditContainer', () => { + renderComponent( + clusterConnectConnectorEditPath( + 'my-cluster', + 'my-connect', + 'my-connector' + ) + ); + expect(screen.getByText('EditContainer')).toBeInTheDocument(); }); }); diff --git a/kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap deleted file mode 100644 index 60797682f9..0000000000 --- a/kafka-ui-react-app/src/components/Connect/__tests__/__snapshots__/Connect.spec.tsx.snap +++ /dev/null @@ -1,34 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Connect matches snapshot 1`] = ` -
- - - - - - -
-`; diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx index 9cd0562960..9569c5df50 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx +++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/__test__/ResetOffsets.spec.tsx @@ -1,7 +1,7 @@ import React from 'react'; import fetchMock from 'fetch-mock'; import { Route } from 'react-router'; -import { screen, waitFor, fireEvent } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { render } from 'lib/testHelpers'; import { clusterConsumerGroupResetOffsetsPath } from 'lib/paths'; @@ -122,9 +122,10 @@ describe('ResetOffsets', () => { } ); await waitFor(() => { - fireEvent.change(screen.getAllByLabelText('Partition #0')[1], { - target: { value: '10' }, - }); + userEvent.click(screen.getAllByLabelText('Partition #0')[1]); + }); + await waitFor(() => { + userEvent.keyboard('10'); }); userEvent.click(screen.getByText('Submit')); await waitFor(() => resetConsumerGroupOffsetsMockCalled()); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx index a175b5c0b3..c01e5ecb86 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx @@ -1,17 +1,11 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { StaticRouter } from 'react-router-dom'; import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ClusterContext from 'components/contexts/ClusterContext'; import Details from 'components/Topics/Topic/Details/Details'; import { internalTopicPayload } from 'redux/reducers/topics/__test__/fixtures'; -import { Provider } from 'react-redux'; -import { store } from 'redux/store'; -import { ThemeProvider } from 'styled-components'; import { render } from 'lib/testHelpers'; import { clusterTopicPath } from 'lib/paths'; -import theme from 'theme/theme'; describe('Details', () => { const mockDelete = jest.fn(); @@ -45,36 +39,30 @@ describe('Details', () => { describe('when it has readonly flag', () => { it('does not render the Action button a Topic', () => { - const component = mount( - - - - -
- - - - + const { baseElement } = render( + +
+ ); - expect(component.exists('button')).toBeFalsy(); - expect(component).toMatchSnapshot(); + expect(screen.queryByText('Produce Message')).not.toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); }); }); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap index 386777843e..08ea5b1dae 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap @@ -87,584 +87,47 @@ exports[`Details when it has readonly flag does not render the Action button a T gap: 26px; } - - - - +
+
+
-
+ __internal.topic + +
+
+
+
+
- - - - + Overview + + + Messages + + + Consumers + + + Settings + + +
+
+ `; diff --git a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx index a1f40dac4e..cc1dc697ca 100644 --- a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx @@ -1,8 +1,10 @@ import React from 'react'; -import { mount } from 'enzyme'; import Dropdown, { DropdownProps } from 'components/common/Dropdown/Dropdown'; import DropdownItem from 'components/common/Dropdown/DropdownItem'; import DropdownDivider from 'components/common/Dropdown/DropdownDivider'; +import userEvent from '@testing-library/user-event'; +import { render } from 'lib/testHelpers'; +import { screen } from '@testing-library/react'; const dummyLable = 'My Test Label'; const dummyChildren = ( @@ -25,45 +27,47 @@ describe('Dropdown', () => { ); it('renders Dropdown with initial props', () => { - const wrapper = mount(setupWrapper()); - expect(wrapper.exists('.dropdown')).toBeTruthy(); + const wrapper = render(setupWrapper()).baseElement; + expect(wrapper.querySelector('.dropdown')).toBeTruthy(); - expect(wrapper.exists('.dropdown.is-active')).toBeFalsy(); - expect(wrapper.exists('.dropdown.is-right')).toBeFalsy(); - expect(wrapper.exists('.dropdown.is-up')).toBeFalsy(); + expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy(); + expect(wrapper.querySelector('.dropdown.is-right')).toBeFalsy(); + expect(wrapper.querySelector('.dropdown.is-up')).toBeFalsy(); - expect(wrapper.exists('.dropdown-content')).toBeTruthy(); - expect(wrapper.find('.dropdown-content').text()).toEqual(''); + expect(wrapper.querySelector('.dropdown-content')).toBeTruthy(); + expect(wrapper.querySelector('.dropdown-content')).toHaveTextContent(''); }); it('renders custom children', () => { - const wrapper = mount(setupWrapper({}, dummyChildren)); - expect(wrapper.exists('.dropdown-content')).toBeTruthy(); - expect(wrapper.find('a.dropdown-item').length).toEqual(3); - expect(wrapper.find('.dropdown-divider').length).toEqual(1); + const wrapper = render(setupWrapper({}, dummyChildren)).baseElement; + expect(wrapper.querySelector('.dropdown-content')).toBeTruthy(); + expect(wrapper.querySelectorAll('.dropdown-item').length).toEqual(3); + expect(wrapper.querySelectorAll('.dropdown-divider').length).toEqual(1); }); it('renders dropdown with a right-aligned menu', () => { - const wrapper = mount(setupWrapper({ right: true })); - expect(wrapper.exists('.dropdown.is-right')).toBeTruthy(); + const wrapper = render(setupWrapper({ right: true })).baseElement; + expect(wrapper.querySelector('.dropdown.is-right')).toBeTruthy(); }); it('renders dropdown with a popup menu', () => { - const wrapper = mount(setupWrapper({ up: true })); - expect(wrapper.exists('.dropdown.is-up')).toBeTruthy(); + const wrapper = render(setupWrapper({ up: true })).baseElement; + expect(wrapper.querySelector('.dropdown.is-up')).toBeTruthy(); }); it('handles click', () => { - const wrapper = mount(setupWrapper()); - expect(wrapper.exists('button')).toBeTruthy(); - expect(wrapper.exists('.dropdown.is-active')).toBeFalsy(); + const wrapper = render(setupWrapper()).baseElement; + const button = screen.getByText('My Test Label'); - wrapper.find('button').simulate('click'); - expect(wrapper.exists('.dropdown.is-active')).toBeTruthy(); + expect(button).toBeInTheDocument(); + expect(wrapper.querySelector('.dropdown.is-active')).toBeFalsy(); + + userEvent.click(button); + expect(wrapper.querySelector('.dropdown.is-active')).toBeTruthy(); }); it('matches snapshot', () => { - const wrapper = mount( + const { baseElement } = render( setupWrapper( { right: true, @@ -72,6 +76,6 @@ describe('Dropdown', () => { dummyChildren ) ); - expect(wrapper).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); }); diff --git a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx index e0d02bc69f..f85bdd6715 100644 --- a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/DropdownItem.spec.tsx @@ -1,23 +1,26 @@ import React from 'react'; -import { mount } from 'enzyme'; import DropdownItem from 'components/common/Dropdown/DropdownItem'; +import { render } from 'lib/testHelpers'; +import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; const onClick = jest.fn(); describe('DropdownItem', () => { it('matches snapshot', () => { - const wrapper = mount( + const { baseElement } = render( Item 1 ); expect(onClick).not.toHaveBeenCalled(); - expect(wrapper).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); it('handles Click', () => { - const wrapper = mount( - Item 1 - ); - wrapper.simulate('click'); + render(Item 1); + + const dropDown = screen.getByText('Item 1'); + + userEvent.click(dropDown); expect(onClick).toHaveBeenCalled(); }); }); diff --git a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap index 9d1d6b972d..6d61afed7c 100644 --- a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap @@ -36,103 +36,59 @@ exports[`Dropdown matches snapshot 1`] = ` color: initial; } - -
- -
- - - -
- + +
- + `; diff --git a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap index 3fa81aca6f..ad2f3b9713 100644 --- a/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap @@ -5,23 +5,16 @@ exports[`DropdownItem matches snapshot 1`] = ` color: initial; } - - + +
Item 1 - - +
+ `; diff --git a/kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx b/kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx index 453cc18545..21dec04e80 100644 --- a/kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx +++ b/kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx @@ -1,31 +1,36 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; import DynamicTextButton from 'components/common/DynamicTextButton/DynamicTextButton'; +import { render } from 'lib/testHelpers'; +import userEvent from '@testing-library/user-event'; +import { screen } from '@testing-library/react'; describe('DynamicButton', () => { const mockCallback = jest.fn(); it('exectutes callback', () => { - const component = shallow( + render( 'text'} /> ); - component.simulate('click'); + + userEvent.click(screen.getByTitle('title')); expect(mockCallback).toBeCalled(); }); it('changes the text', () => { - const component = mount( + render( (clicked ? 'active' : 'default')} /> ); - expect(component.text()).toEqual('default'); - component.simulate('click'); - expect(component.text()).toEqual('active'); + + const button = screen.getByTitle('title'); + expect(button).toHaveTextContent('default'); + userEvent.click(button); + expect(button).toHaveTextContent('active'); }); }); diff --git a/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/SQLEditor.spec.tsx b/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/SQLEditor.spec.tsx index e24d4d3c1e..bdd7805b7c 100644 --- a/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/SQLEditor.spec.tsx +++ b/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/SQLEditor.spec.tsx @@ -1,20 +1,22 @@ -import { shallow } from 'enzyme'; import React from 'react'; import SQLEditor from 'components/common/SQLEditor/SQLEditor'; +import { render } from 'lib/testHelpers'; describe('SQLEditor component', () => { it('matches the snapshot', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); it('matches the snapshot with fixed height', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { baseElement } = render( + + ); + expect(baseElement).toMatchSnapshot(); }); it('matches the snapshot with fixed height with no value', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); }); diff --git a/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap b/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap index ca848dd7dd..f186a99bf7 100644 --- a/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/common/SQLEditor/__tests__/__snapshots__/SQLEditor.spec.tsx.snap @@ -1,126 +1,295 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SQLEditor component matches the snapshot 1`] = ` - + +
+
+