diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 129fe2e181..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,165 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`HandoutWidget snapshots snapshots: renders as expected with default props 1`] = ` - - - - - - - - - - - -`; - -exports[`HandoutWidget snapshots snapshots: renders as expected with handout 1`] = ` - - - - - - - - - sOMeUrl - - - - - - - - - - - - - - - - - - - -`; - -exports[`HandoutWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `null`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx similarity index 53% rename from src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx rename to src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx index 8ecb7e613f..f2ad0a2aaa 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.tsx @@ -1,17 +1,10 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { formatMessage } from '../../../../../../testUtils'; -import { actions, selectors } from '../../../../../../data/redux'; +import { render, screen, initializeMocks } from '@src/testUtils'; +import { formatMessage } from '@src/editors/testUtils'; +import { actions, selectors } from '@src/editors/data/redux'; import { HandoutWidgetInternal as HandoutWidget, mapStateToProps, mapDispatchToProps } from '.'; -jest.mock('react', () => ({ - ...jest.requireActual('react'), - useContext: jest.fn(() => ({ handout: ['error.handout', jest.fn().mockName('error.setHandout')] })), -})); - -jest.mock('../../../../../../data/redux', () => ({ +jest.mock('@src/editors/data/redux', () => ({ actions: { video: { updateField: jest.fn().mockName('actions.video.updateField'), @@ -33,30 +26,36 @@ jest.mock('../../../../../../data/redux', () => ({ describe('HandoutWidget', () => { const props = { - subtitle: 'SuBTItle', - title: 'tiTLE', intl: { formatMessage }, isLibrary: false, handout: '', + isUploadError: false, getHandoutDownloadUrl: jest.fn().mockName('args.getHandoutDownloadUrl'), updateField: jest.fn().mockName('args.updateField'), }; - describe('snapshots', () => { - test('snapshots: renders as expected with default props', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + describe('renders', () => { + beforeEach(() => { + initializeMocks(); }); - test('snapshots: renders as expected with isLibrary true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + test('renders as expected with default props', () => { + render(); + expect(screen.getByText('Handout')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Upload Handout' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Handout' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument(); }); - test('snapshots: renders as expected with handout', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + test('renders as expected with isLibrary true', () => { + const { container } = render(); + const reduxWrapper = container.firstChild; + expect(reduxWrapper?.textContent).toBe(''); + expect(screen.queryByText('Handout')).not.toBeInTheDocument(); + }); + test('renders as expected with handout', () => { + const handoutUrl = 'sOMeUrl '; + render(); + expect(screen.getByText('Handout')).toBeInTheDocument(); + expect(screen.getByText(handoutUrl.trim())).toBeInTheDocument(); }); }); describe('mapStateToProps', () => { @@ -64,17 +63,20 @@ describe('HandoutWidget', () => { test('isLibrary from app.isLibrary', () => { expect( mapStateToProps(testState).isLibrary, + // @ts-ignore ).toEqual(selectors.app.isLibrary(testState)); }); test('getHandoutDownloadUrl from video.getHandoutDownloadUrl', () => { expect( mapStateToProps(testState).getHandoutDownloadUrl, + // @ts-ignore ).toEqual(selectors.video.getHandoutDownloadUrl(testState)); }); }); describe('mapDispatchToProps', () => { const dispatch = jest.fn(); test('updateField from actions.video.updateField', () => { + // @ts-ignore expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); }); }); diff --git a/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 877112366d..0000000000 --- a/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CodeEditor Component Snapshots Renders and calls Hooks 1`] = ` -
-
- -
-`; diff --git a/src/editors/sharedComponents/CodeEditor/index.jsx b/src/editors/sharedComponents/CodeEditor/index.jsx index 8877fe4ba0..533256d913 100644 --- a/src/editors/sharedComponents/CodeEditor/index.jsx +++ b/src/editors/sharedComponents/CodeEditor/index.jsx @@ -29,14 +29,16 @@ const CodeEditor = ({
{showBtnEscapeHTML && lang !== 'markdown' && ( - + + + )}
); diff --git a/src/editors/sharedComponents/CodeEditor/index.test.jsx b/src/editors/sharedComponents/CodeEditor/index.test.tsx similarity index 68% rename from src/editors/sharedComponents/CodeEditor/index.test.jsx rename to src/editors/sharedComponents/CodeEditor/index.test.tsx index 4e3fa57ea5..c410966081 100644 --- a/src/editors/sharedComponents/CodeEditor/index.test.jsx +++ b/src/editors/sharedComponents/CodeEditor/index.test.tsx @@ -1,53 +1,15 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { EditorState } from '@codemirror/state'; -import { EditorView } from '@codemirror/view'; -import { html } from '@codemirror/lang-html'; +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; import { formatMessage, MockUseState } from '../../testUtils'; import alphanumericMap from './constants'; -import * as module from './index'; +import { CodeEditorInternal as CodeEditor } from './index'; import * as hooks from './hooks'; -const CodeEditor = module.CodeEditorInternal; - -jest.mock('@codemirror/view'); - -jest.mock('react', () => ({ - ...jest.requireActual('react'), - useRef: jest.fn(val => ({ current: val })), - useEffect: jest.fn(), - useCallback: (cb, prereqs) => ({ cb, prereqs }), -})); - -jest.mock('@codemirror/state', () => ({ - ...jest.requireActual('@codemirror/state'), - EditorState: { - create: jest.fn(), - }, -})); - -jest.mock('@codemirror/lang-html', () => ({ - html: jest.fn(), -})); - -jest.mock('@codemirror/lang-xml', () => ({ - xml: jest.fn(), -})); - -jest.mock('@codemirror/lang-markdown', () => ({ - markdown: jest.fn(), -})); - -jest.mock('codemirror', () => ({ - basicSetup: 'bAsiCSetUp', -})); - -const state = new MockUseState(hooks); - describe('CodeEditor', () => { describe('Hooks', () => { + const state = new MockUseState(hooks); beforeEach(() => { jest.clearAllMocks(); }); @@ -103,30 +65,6 @@ describe('CodeEditor', () => { expect(mockHideBtn).toHaveBeenCalled(); }); }); - - describe('createCodeMirrorDomNode', () => { - const props = { - ref: { - current: 'sOmEvAlUe', - }, - lang: 'html', - initialText: 'sOmEhTmL', - upstreamRef: { - current: 'sOmEotHERvAlUe', - }, - }; - beforeEach(() => { - hooks.createCodeMirrorDomNode(props); - }); - it('calls useEffect and sets up codemirror objects', () => { - const [cb, prereqs] = React.useEffect.mock.calls[0]; - expect(prereqs).toStrictEqual([]); - cb(); - expect(EditorState.create).toHaveBeenCalled(); - expect(EditorView).toHaveBeenCalled(); - expect(html).toHaveBeenCalled(); - }); - }); }); describe('xmlSyntaxChecker', () => { @@ -165,11 +103,12 @@ describe('CodeEditor', () => { }); describe('Component', () => { - describe('Snapshots', () => { - const mockHideBtn = jest.fn().mockName('mockHidebtn'); - let props; - beforeAll(() => { - props = { + describe('renders', () => { + beforeEach(() => { + initializeMocks(); + }); + test('Renders and calls Hooks ', () => { + const props = { intl: { formatMessage }, innerRef: { current: 'sOmEvALUE', @@ -177,16 +116,29 @@ describe('CodeEditor', () => { lang: 'html', value: 'mOcKhTmL', }; + const mockBtnRef = { current: null }; + const mockDOMRef = { current: null }; + const mockUseRef = jest.fn() + .mockImplementationOnce(() => mockDOMRef) // for DOMref + .mockImplementationOnce(() => mockBtnRef); // for btnRef + + jest.spyOn(React, 'useRef').mockImplementation(mockUseRef); + + const mockHideBtn = jest.fn(); + jest.spyOn(hooks, 'prepareShowBtnEscapeHTML').mockImplementation(() => ({ + showBtnEscapeHTML: true, + hideBtn: mockHideBtn, + })); jest.spyOn(hooks, 'createCodeMirrorDomNode').mockImplementation(() => ({})); - }); - afterAll(() => { - jest.clearAllMocks(); - }); - test('Renders and calls Hooks ', () => { - jest.spyOn(hooks, 'prepareShowBtnEscapeHTML').mockImplementation(() => ({ showBtnEscapeHTML: true, hideBtn: mockHideBtn })); + const mockEscapeHTMLSpecialChars = jest.fn(); + jest.spyOn(hooks, 'escapeHTMLSpecialChars').mockImplementation(mockEscapeHTMLSpecialChars); // Note: ref won't show up as it is not acutaly a DOM attribute. - expect(shallow().snapshot).toMatchSnapshot(); + render(); + expect(screen.getByRole('button', { name: 'Unescape HTML Literals' })).toBeInTheDocument(); + expect(hooks.prepareShowBtnEscapeHTML).toHaveBeenCalled(); expect(hooks.createCodeMirrorDomNode).toHaveBeenCalled(); + fireEvent.click(screen.getByRole('button', { name: 'Unescape HTML Literals' })); + expect(mockEscapeHTMLSpecialChars).toHaveBeenCalled(); }); }); }); diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx deleted file mode 100644 index 139f6c98e1..0000000000 --- a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { selectors } from '../../data/redux'; -import { formatMessage } from '../../testUtils'; -import { ErrorPageInternal as ErrorPage, mapStateToProps } from './ErrorPage'; - -jest.mock('../../data/redux', () => ({ - selectors: { - app: { - unitUrl: jest.fn(state => ({ unitUrl: state })), - }, - }, -})); - -describe('Editor Page', () => { - const emptyProps = { - learningContextId: null, - studioEndpointUrl: null, - intl: { formatMessage }, - }; - const passedProps = { - learningContextId: 'course-v1:edX+DemoX+Demo_Course', - studioEndpointUrl: 'fakeurl.com', - message: 'cUStomMEssagE', - intl: { formatMessage }, - }; - const unitData = { - data: { - ancestors: [{ id: 'SomeID' }], - }, - }; - - describe('rendered with empty props', () => { - it('should only have one button (try again)', () => { - const wrapper = shallow(); - const buttonText = wrapper.instance.findByType('Button')[0].children[0].el; - expect(wrapper.snapshot).toMatchSnapshot(); - expect(buttonText).toEqual('Try again'); - }); - }); - - describe('rendered with pass through props defined', () => { - const wrapper = shallow(); - describe('shows two buttons', () => { - it('the first button should correspond to returning to the course outline', () => { - const firstButtonText = wrapper.instance.findByType('Button')[0].children[0].el; - const secondButtonText = wrapper.instance.findByType('Button')[1].children[0].el; - expect(wrapper.snapshot).toMatchSnapshot(); - expect(firstButtonText).toEqual('Return to course outline'); - expect(secondButtonText).toEqual('Try again'); - }); - it('the first button should correspond to returning to the unit page', () => { - const returnToUnitPageWrapper = shallow(); - expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot(); - const firstButtonText = returnToUnitPageWrapper.instance.findByType('Button')[0].children[0].el; - const secondButtonText = returnToUnitPageWrapper.instance.findByType('Button')[1].children[0].el; - expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot(); - expect(firstButtonText).toEqual('Return to unit page'); - expect(secondButtonText).toEqual('Try again'); - }); - }); - it('should have custom message', () => { - const customMessageText = wrapper.instance.findByType('div')[0].children[0].children[0].el; - expect(wrapper.snapshot).toMatchSnapshot(); - expect(customMessageText).toEqual('cUStomMEssagE'); - }); - }); - describe('mapStateToProps() function', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; - test('unitData should equal unitUrl from app.unitUrl', () => { - expect( - mapStateToProps(testState).unitData, - ).toEqual(selectors.app.unitUrl(testState)); - }); - }); -}); diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx new file mode 100644 index 0000000000..ff4345c917 --- /dev/null +++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { render, screen, initializeMocks } from '@src/testUtils'; +import { selectors } from '../../data/redux'; +import { formatMessage } from '../../testUtils'; +import { ErrorPageInternal as ErrorPage, mapStateToProps } from './ErrorPage'; + +jest.mock('../../data/redux', () => ({ + selectors: { + app: { + unitUrl: jest.fn(state => ({ unitUrl: state })), + }, + }, +})); + +describe('Editor Page', () => { + const emptyProps = { + learningContextId: 'course-v1:edX+DemoX+Demo_Course', + studioEndpointUrl: 'fakeurl.com', + intl: { formatMessage }, + }; + const passedProps = { + learningContextId: 'course-v1:edX+DemoX+Demo_Course', + studioEndpointUrl: 'fakeurl.com', + message: 'cUStomMEssagE', + intl: { formatMessage }, + }; + const unitData = { + data: { + ancestors: [{ id: 'SomeID' }], + }, + }; + + beforeEach(() => { + initializeMocks(); + }); + + describe('rendered with empty props', () => { + it('should only have one button (try again)', () => { + render(); + expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument(); + }); + }); + + describe('rendered with pass through props defined', () => { + describe('shows two buttons', () => { + it('the first button should correspond to returning to the course outline', () => { + render(); + const firstButton = screen.getByRole('button', { name: 'Return to course outline' }); + const secondButton = screen.getByRole('button', { name: 'Try again' }); + expect(firstButton).toBeInTheDocument(); + expect(secondButton).toBeInTheDocument(); + }); + it('the first button should correspond to returning to the unit page', () => { + render(); + const firstButton = screen.getByRole('button', { name: 'Return to unit page' }); + const secondButton = screen.getByRole('button', { name: 'Try again' }); + expect(firstButton).toBeInTheDocument(); + expect(secondButton).toBeInTheDocument(); + }); + }); + it('should have custom message', () => { + render(); + expect(screen.getByText('cUStomMEssagE')).toBeInTheDocument(); + }); + }); + describe('mapStateToProps() function', () => { + const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; + test('unitData should equal unitUrl from app.unitUrl', () => { + expect( + mapStateToProps(testState).unitData, + // @ts-ignore + ).toEqual(selectors.app.unitUrl(testState)); + }); + }); +}); diff --git a/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap b/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap deleted file mode 100644 index 8b93543e60..0000000000 --- a/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap +++ /dev/null @@ -1,196 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Editor Page rendered with empty props should only have one button (try again) 1`] = ` - - - -

- An unexpected error occurred. Please click the button below to refresh the page. -

- - - - - - -`; - -exports[`Editor Page rendered with pass through props defined should have custom message 1`] = ` - - - -

- An unexpected error occurred. Please click the button below to refresh the page. -

-
-

- cUStomMEssagE -

-
- - - - - - - -`; - -exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the course outline 1`] = ` - - - -

- An unexpected error occurred. Please click the button below to refresh the page. -

-
-

- cUStomMEssagE -

-
- - - - - - - -`; - -exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the unit page 1`] = ` - - - -

- An unexpected error occurred. Please click the button below to refresh the page. -

-
-

- cUStomMEssagE -

-
- - - - - - - -`; - -exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the unit page 2`] = ` - - - -

- An unexpected error occurred. Please click the button below to refresh the page. -

-
-

- cUStomMEssagE -

-
- - - - - - - -`; diff --git a/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 23228aa399..0000000000 --- a/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,50 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ExpandableTextArea snapshots renders as expected with default behavior 1`] = ` - -
- -
- -`; - -exports[`ExpandableTextArea snapshots renders error message 1`] = ` - -
- -
-
- -`; diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.jsx b/src/editors/sharedComponents/ExpandableTextArea/index.jsx index 4e632e386d..6598bee8e5 100644 --- a/src/editors/sharedComponents/ExpandableTextArea/index.jsx +++ b/src/editors/sharedComponents/ExpandableTextArea/index.jsx @@ -28,7 +28,7 @@ const ExpandableTextArea = ({
{error && (
- {props.errorMessage} + {errorMessage}
)} diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.test.jsx b/src/editors/sharedComponents/ExpandableTextArea/index.test.tsx similarity index 52% rename from src/editors/sharedComponents/ExpandableTextArea/index.test.jsx rename to src/editors/sharedComponents/ExpandableTextArea/index.test.tsx index d8766a8f46..6d69436850 100644 --- a/src/editors/sharedComponents/ExpandableTextArea/index.test.jsx +++ b/src/editors/sharedComponents/ExpandableTextArea/index.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen, initializeMocks } from '@src/testUtils'; import ExpandableTextArea from '.'; // Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce. @@ -31,13 +31,27 @@ describe('ExpandableTextArea', () => { error: false, errorMessage: null, }; - describe('snapshots', () => { + beforeEach(() => { + initializeMocks(); + }); + describe('renders', () => { test('renders as expected with default behavior', () => { - expect(shallow().snapshot).toMatchSnapshot(); + const { container } = render(); + expect(container.querySelector('TinyMceWidget')).toBeInTheDocument(); }); test('renders error message', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); + render(); + expect(screen.getByText('eRRormeSsaGE')).toBeInTheDocument(); + }); + test('renders nothing when refReady is null', () => { + // eslint-disable-next-line global-require + jest.spyOn(require('../TinyMceWidget/hooks'), 'prepareEditorRef').mockReturnValue({ + editorRef: { current: { value: 'something' } }, + refReady: false, + setEditorRef: jest.fn().mockName('hooks.prepareEditorRef.setEditorRef'), + }); + const { container } = render(); + expect(container.firstChild?.textContent).toBe(''); }); }); }); diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap deleted file mode 100644 index edc1be5cd7..0000000000 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,175 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ImageSettingsModal render snapshot 1`] = ` - - - - } - footerAction={null} - headerComponent={null} - hideCancelButton={false} - isFullscreenScroll={true} - isOpen={false} - size="lg" - title="Image Settings" -> - - - - -
-
-
- -
-
-
- - -
-
- -`; diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx index da0073f514..cc93a2ae55 100644 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx +++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Button, Image } from '@openedx/paragon'; import { ArrowBackIos } from '@openedx/paragon/icons'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import './index.scss'; import * as hooks from './hooks'; @@ -29,9 +29,8 @@ const ImageSettingsModal = ({ returnToSelection, saveToEditor, selection, - // inject - intl, }) => { + const intl = useIntl(); const altText = hooks.altTextHooks(selection.altText); const dimensions = hooks.dimensionHooks(altText); const onSaveClick = hooks.onSaveClick({ @@ -99,8 +98,5 @@ ImageSettingsModal.propTypes = { externalUrl: PropTypes.string, url: PropTypes.string, }).isRequired, - // inject - intl: intlShape.isRequired, }; -export const ImageSettingsModalInternal = ImageSettingsModal; // For testing only -export default injectIntl(ImageSettingsModal); +export default ImageSettingsModal; diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.tsx similarity index 56% rename from src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.tsx index f6d378ccfa..a55a365b3c 100644 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx +++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.tsx @@ -1,9 +1,6 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { formatMessage } from '../../../testUtils'; -import { ImageSettingsModalInternal as ImageSettingsModal } from '.'; +import { render, screen, initializeMocks } from '@src/testUtils'; +import ImageSettingsModal from '.'; jest.mock('./AltTextControls', () => 'AltTextControls'); jest.mock('./DimensionControls', () => 'DimensionControls'); @@ -28,23 +25,21 @@ jest.mock('./hooks', () => ({ describe('ImageSettingsModal', () => { const props = { - isOpen: false, + isOpen: true, selection: { altText: 'AlTTExt', externalUrl: 'ExtERNALurL', url: 'UrL', }, - // inject - intl: { formatMessage }, + close: jest.fn().mockName('props.close'), + returnToSelection: jest.fn().mockName('props.returnToSelector'), + saveToEditor: jest.fn().mockName('props.saveToEditor'), }; beforeEach(() => { - props.close = jest.fn().mockName('props.close'); - props.saveToEditor = jest.fn().mockName('props.saveToEditor'); - props.returnToSelection = jest.fn().mockName('props.returnToSelector'); + initializeMocks(); }); - describe('render', () => { - test('snapshot', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); + test('renders component', () => { + render(); + expect(screen.getByText('Image Settings')).toBeInTheDocument(); }); });