From 9cd8d8b0f593b7d64ac272223d8863bcc0db35ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jhon=20Vent=C3=A9?= Date: Mon, 22 Jan 2024 08:54:50 -0500 Subject: [PATCH] fix: remove enzyme for tests --- .../__snapshots__/index.test.jsx.snap | 33 ++++++++++ .../InsertLinkModal/BlockLink/index.test.jsx | 35 +++++++---- .../__snapshots__/index.test.jsx.snap | 36 +++-------- .../FilteredBlock/index.test.jsx | 63 ++++++++++--------- 4 files changed, 97 insertions(+), 70 deletions(-) create mode 100644 src/editors/sharedComponents/InsertLinkModal/BlockLink/__snapshots__/index.test.jsx.snap diff --git a/src/editors/sharedComponents/InsertLinkModal/BlockLink/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/InsertLinkModal/BlockLink/__snapshots__/index.test.jsx.snap new file mode 100644 index 000000000..de192bfcb --- /dev/null +++ b/src/editors/sharedComponents/InsertLinkModal/BlockLink/__snapshots__/index.test.jsx.snap @@ -0,0 +1,33 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlockLink Component snapshot 1`] = ` +
+
+
+

+

+ Some Path +

+
+
+ +
+
+
+`; diff --git a/src/editors/sharedComponents/InsertLinkModal/BlockLink/index.test.jsx b/src/editors/sharedComponents/InsertLinkModal/BlockLink/index.test.jsx index b2157927c..165e34d39 100644 --- a/src/editors/sharedComponents/InsertLinkModal/BlockLink/index.test.jsx +++ b/src/editors/sharedComponents/InsertLinkModal/BlockLink/index.test.jsx @@ -1,20 +1,28 @@ import React from 'react'; -import Enzyme, { shallow } from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import { render, fireEvent, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { formatBlockPath } from '../utils'; import BlockLink from './index'; -Enzyme.configure({ adapter: new Adapter() }); - describe('BlockLink Component', () => { const defaultProps = { path: 'Some Path', onCloseLink: jest.fn(), }; + const renderComponent = (overrideProps = {}) => render( + , + ); + test('renders with default props', () => { - const wrapper = shallow(); - expect(wrapper.text()).toContain('Some Path'); + renderComponent(); + expect(screen.getByText('Some Path')).toBeInTheDocument(); + }); + + test('snapshot', () => { + const { container } = renderComponent(); + expect(container).toMatchSnapshot(); }); test('renders correctly with custom path', () => { @@ -22,13 +30,13 @@ describe('BlockLink Component', () => { ...defaultProps, path: 'Custom Path', }; - const wrapper = shallow(); - expect(wrapper.text()).toContain('Custom Path'); + renderComponent(customProps); + expect(screen.getByText('Custom Path')).toBeInTheDocument(); }); test('calls onCloseLink when the button is clicked', () => { - const wrapper = shallow(); - wrapper.find({ 'data-testid': 'close-link-button' }).simulate('click'); + renderComponent(); + fireEvent.click(screen.getByTestId('close-link-button')); expect(defaultProps.onCloseLink).toHaveBeenCalledTimes(1); }); @@ -37,10 +45,11 @@ describe('BlockLink Component', () => { path: 'Root Section / Child 1', onCloseLink: jest.fn(), }; - const wrapper = shallow(); + + renderComponent(customProps); const { title, subTitle } = formatBlockPath(customProps.path); - expect(wrapper.text()).toContain(title); - expect(wrapper.text()).toContain(subTitle); + expect(screen.getByText(title)).toBeInTheDocument(); + expect(screen.getByText(subTitle)).toBeInTheDocument(); }); }); diff --git a/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/__snapshots__/index.test.jsx.snap index dea9da1e6..e1c65fa4a 100644 --- a/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/__snapshots__/index.test.jsx.snap +++ b/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/__snapshots__/index.test.jsx.snap @@ -1,42 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FilteredBlock Component snapshot 1`] = ` - - - + + `; diff --git a/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/index.test.jsx b/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/index.test.jsx index 5afbca3a6..0a08e7621 100644 --- a/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/index.test.jsx +++ b/src/editors/sharedComponents/InsertLinkModal/FilteredBlock/index.test.jsx @@ -1,51 +1,56 @@ import React from 'react'; -import Enzyme, { mount } from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import { render, fireEvent, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; import FilterBlock from '.'; -Enzyme.configure({ adapter: new Adapter() }); - -const mockBlock = { - id: 'block-key', - blockId: 'edx_block-1', - lmsWebUrl: 'http://localhost/weburl', - legacyWebUrl: 'http://localhost/legacy', - studentViewUrl: 'http://localhost/studentview', - type: 'sequential', - displayName: 'Any display name', - path: 'Path / To / Block 1', - children: ['block-children-1', 'block-children-2'], -}; +jest.unmock('@edx/frontend-platform/i18n'); +jest.unmock('@edx/paragon'); +jest.unmock('@edx/paragon/icons'); describe('FilteredBlock Component', () => { const mockOnBlockFilterClick = jest.fn(); - const setup = ( - block = mockBlock, - onBlockFilterClick = mockOnBlockFilterClick, - ) => mount(); + const mockBlock = { + id: 'block-key', + blockId: 'edx_block-1', + lmsWebUrl: 'http://localhost/weburl', + legacyWebUrl: 'http://localhost/legacy', + studentViewUrl: 'http://localhost/studentview', + type: 'sequential', + displayName: 'Any display name', + path: 'Path / To / Block 1', + children: ['block-children-1', 'block-children-2'], + }; + + const renderComponent = (overrideProps = {}) => render( + , + ); test('renders without crashing', () => { - const wrapper = setup(); - expect(wrapper.exists()).toBeTruthy(); + const { container } = renderComponent(); + expect(container).toBeTruthy(); }); test('snapshot', () => { - const wrapper = setup(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderComponent(); + expect(container).toMatchSnapshot(); }); test('calls onBlockFilterClick when the button is clicked', () => { - const wrapper = setup(); - const button = wrapper.find('Button[data-testid="filter-block-item"]'); - button.simulate('click'); + const { getByTestId } = renderComponent(); + const button = getByTestId('filter-block-item'); + fireEvent.click(button); expect(mockOnBlockFilterClick).toHaveBeenCalledWith(mockBlock); }); test('displays the block title and subtitle', () => { - const wrapper = setup(); - expect(wrapper.find('.h5').text()).toContain('Path / To'); - expect(wrapper.find('.h3').text()).toContain('Block 1'); + renderComponent(); + expect(screen.getByText('Path / To')).toBeInTheDocument(); + expect(screen.getByText('Block 1')).toBeInTheDocument(); }); });