diff --git a/src/components/DemoAlert/index.jsx b/src/components/DemoAlert/index.jsx index 0ecc632..cd3c41b 100644 --- a/src/components/DemoAlert/index.jsx +++ b/src/components/DemoAlert/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { ActionRow, AlertModal, @@ -11,29 +11,30 @@ import { import messages from './messages'; export const DemoAlert = ({ - intl: { formatMessage }, isOpen, onClose, -}) => ( - - - +}) => { + const { formatMessage } = useIntl(); + return ( + + + )} - > -

{formatMessage(messages.warningMessage)}

-
-); + > +

{formatMessage(messages.warningMessage)}

+
+ ); +}; DemoAlert.propTypes = { - intl: intlShape.isRequired, isOpen: PropTypes.bool.isRequired, onClose: PropTypes.func.isRequired, }; -export default injectIntl(DemoAlert); +export default DemoAlert; diff --git a/src/components/DemoAlert/index.test.jsx b/src/components/DemoAlert/index.test.jsx index 79517bc..604d7e5 100644 --- a/src/components/DemoAlert/index.test.jsx +++ b/src/components/DemoAlert/index.test.jsx @@ -9,7 +9,6 @@ jest.unmock('react'); describe('DemoAlert component', () => { const props = { - intl: { formatMessage }, isOpen: true, onClose: jest.fn().mockName('props.onClose'), }; diff --git a/src/components/FilePreview/FileRenderer.jsx b/src/components/FilePreview/FileRenderer.jsx index bf8d35b..901ef2b 100644 --- a/src/components/FilePreview/FileRenderer.jsx +++ b/src/components/FilePreview/FileRenderer.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import FileCard from './FileCard'; import { ErrorBanner, LoadingBanner } from './Banners'; @@ -12,8 +12,8 @@ import { renderHooks } from './hooks'; */ export const FileRenderer = ({ file, - intl, }) => { + const intl = useIntl(); const { Renderer, isLoading, @@ -39,8 +39,6 @@ FileRenderer.propTypes = { name: PropTypes.string, downloadUrl: PropTypes.string, }).isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(FileRenderer); +export default FileRenderer; diff --git a/src/components/FilePreview/FileRenderer.test.jsx b/src/components/FilePreview/FileRenderer.test.jsx index acbf995..08e1e22 100644 --- a/src/components/FilePreview/FileRenderer.test.jsx +++ b/src/components/FilePreview/FileRenderer.test.jsx @@ -1,5 +1,4 @@ import { render, screen } from '@testing-library/react'; -import { formatMessage } from 'testUtils'; import { keyStore } from 'utils'; import { ErrorStatuses } from 'data/constants/requests'; import { FileRenderer } from './FileRenderer'; @@ -16,7 +15,6 @@ const props = { name: 'filename.txt', description: 'A text file', }, - intl: { formatMessage }, }; describe('FileRenderer', () => { describe('component', () => { diff --git a/src/components/InfoPopover/index.jsx b/src/components/InfoPopover/index.jsx index 7af916d..5ba81b7 100644 --- a/src/components/InfoPopover/index.jsx +++ b/src/components/InfoPopover/index.jsx @@ -8,7 +8,7 @@ import { IconButton, } from '@openedx/paragon'; import { InfoOutline } from '@openedx/paragon/icons'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { nullMethod } from 'hooks'; @@ -17,27 +17,35 @@ import messages from './messages'; /** * */ -export const InfoPopover = ({ onClick, children, intl }) => ( - - {children} - - )} - > - - -); +export const InfoPopover = ( + { + onClick, + children, + }, +) => { + const intl = useIntl(); + return ( + + {children} + + )} + > + + + ); +}; InfoPopover.defaultProps = { onClick: nullMethod, @@ -48,7 +56,6 @@ InfoPopover.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]).isRequired, - intl: intlShape.isRequired, }; -export default injectIntl(InfoPopover); +export default InfoPopover; diff --git a/src/components/InfoPopover/index.test.jsx b/src/components/InfoPopover/index.test.jsx index d6682f0..ba408a4 100644 --- a/src/components/InfoPopover/index.test.jsx +++ b/src/components/InfoPopover/index.test.jsx @@ -1,5 +1,4 @@ import { render, fireEvent } from '@testing-library/react'; -import { formatMessage } from 'testUtils'; import { InfoPopover } from '.'; jest.unmock('@openedx/paragon'); @@ -12,7 +11,7 @@ describe('Info Popover Component', () => { describe('Component', () => { it('renders the help icon button', () => { const { getByTestId } = render( - + {child} , ); @@ -21,7 +20,7 @@ describe('Info Popover Component', () => { it('calls onClick when the help icon is clicked', () => { const { getByTestId } = render( - + {child} , ); diff --git a/src/containers/ReviewActions/components/StartGradingButton/index.jsx b/src/containers/ReviewActions/components/StartGradingButton/index.jsx index 15691d4..2838877 100644 --- a/src/containers/ReviewActions/components/StartGradingButton/index.jsx +++ b/src/containers/ReviewActions/components/StartGradingButton/index.jsx @@ -2,14 +2,15 @@ import React from 'react'; import { useDispatch } from 'react-redux'; import { Button } from '@openedx/paragon'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import StopGradingConfirmModal from '../StopGradingConfirmModal'; import OverrideGradeConfirmModal from '../OverrideGradeConfirmModal'; import * as hooks from './hooks'; -export const StartGradingButton = ({ intl }) => { +export const StartGradingButton = () => { + const intl = useIntl(); const dispatch = useDispatch(); const { hide, @@ -31,8 +32,4 @@ export const StartGradingButton = ({ intl }) => { ); }; -StartGradingButton.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(StartGradingButton); +export default StartGradingButton; diff --git a/src/containers/ReviewActions/components/StartGradingButton/index.test.jsx b/src/containers/ReviewActions/components/StartGradingButton/index.test.jsx index e1f11a2..096e678 100644 --- a/src/containers/ReviewActions/components/StartGradingButton/index.test.jsx +++ b/src/containers/ReviewActions/components/StartGradingButton/index.test.jsx @@ -3,7 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils'; import { useDispatch } from 'react-redux'; -import { formatMessage } from 'testUtils'; import * as hooks from './hooks'; import { StartGradingButton } from '.'; @@ -14,13 +13,10 @@ jest.mock('./hooks', () => ({ buttonHooks: jest.fn(), })); -const intl = { formatMessage }; - let el; describe('StartGradingButton component', () => { describe('component', () => { const dispatch = useDispatch(); - const props = { intl }; const buttonHooks = { hide: false, buttonArgs: { props: 'hooks.buttonArgs' }, @@ -30,20 +26,21 @@ describe('StartGradingButton component', () => { describe('behavior', () => { it('initializes buttonHooks with dispatch and intl fields', () => { hooks.buttonHooks.mockReturnValueOnce(buttonHooks); - el = shallow(); - expect(hooks.buttonHooks).toHaveBeenCalledWith({ dispatch, intl }); + el = shallow(); + const expected = { dispatch, intl: { formatMessage: expect.any(Function), formatDate: expect.any(Function) } }; + expect(hooks.buttonHooks).toHaveBeenCalledWith(expected); }); }); describe('snapshots', () => { test('hide: renders empty component if hook.hide is true', () => { hooks.buttonHooks.mockReturnValueOnce({ ...buttonHooks, hide: true }); - el = shallow(); + el = shallow(); expect(el.snapshot).toMatchSnapshot(); expect(el.isEmptyRender()).toEqual(true); }); test('smoke test: forwards props to components from hooks', () => { hooks.buttonHooks.mockReturnValueOnce(buttonHooks); - el = shallow(); + el = shallow(); expect(el.snapshot).toMatchSnapshot(); expect(el.isEmptyRender()).toEqual(false); }); diff --git a/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx b/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx index edce7c8..84f61be 100644 --- a/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx +++ b/src/containers/ReviewActions/components/StopGradingConfirmModal.jsx @@ -1,39 +1,39 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import ConfirmModal from 'components/ConfirmModal'; import messages from './messages'; export const StopGradingConfirmModal = ({ - intl, isOpen, isOverride, onCancel, onConfirm, -}) => ( - -); +}) => { + const intl = useIntl(); + return ( + + ); +}; StopGradingConfirmModal.propTypes = { isOpen: PropTypes.bool.isRequired, isOverride: PropTypes.bool.isRequired, onCancel: PropTypes.func.isRequired, onConfirm: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; -export default injectIntl(StopGradingConfirmModal); +export default StopGradingConfirmModal; diff --git a/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx b/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx index c656536..776dd87 100644 --- a/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx +++ b/src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx @@ -1,13 +1,11 @@ import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from 'testUtils'; import { StopGradingConfirmModal } from './StopGradingConfirmModal'; jest.mock('components/ConfirmModal', () => 'ConfirmModal'); describe('StopGradingConfirmModal', () => { const props = { - intl: { formatMessage }, isOpen: false, isOverride: false, onCancel: jest.fn().mockName('this.props.onCancel'), diff --git a/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.jsx b/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.jsx index 47c9695..467768a 100644 --- a/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.jsx +++ b/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { rendererHooks } from './hooks'; @@ -10,7 +10,8 @@ import ReviewError from '../ReviewError'; /** * */ -export const SubmitErrors = ({ intl }) => { +export const SubmitErrors = () => { + const intl = useIntl(); const dispatch = useDispatch(); const { show, @@ -29,9 +30,4 @@ export const SubmitErrors = ({ intl }) => { ); }; -SubmitErrors.propTypes = { - // injected - intl: intlShape.isRequired, -}; - -export default injectIntl(SubmitErrors); +export default SubmitErrors; diff --git a/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.test.jsx b/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.test.jsx index 57790a2..884b7c3 100644 --- a/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.test.jsx +++ b/src/containers/ReviewModal/ReviewErrors/SubmitErrors/index.test.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { shallow } from '@edx/react-unit-test-utils'; import { keyStore } from 'utils'; -import { formatMessage } from 'testUtils'; import * as hooks from './hooks'; import { SubmitErrors } from '.'; @@ -11,11 +10,10 @@ jest.mock('../ReviewError', () => 'ReviewError'); const hookKeys = keyStore(hooks); describe('SubmitErrors component', () => { - const props = { intl: { formatMessage } }; describe('snapshots', () => { test('snapshot: no failure', () => { jest.spyOn(hooks, hookKeys.rendererHooks).mockReturnValueOnce({ show: false }); - const el = shallow(); + const el = shallow(); expect(el.snapshot).toMatchSnapshot(); expect(el.isEmptyRender()).toEqual(true); }); @@ -30,7 +28,7 @@ describe('SubmitErrors component', () => { content: 'hooks.content', }; jest.spyOn(hooks, hookKeys.rendererHooks).mockReturnValueOnce(mockHook); - expect(shallow().snapshot).toMatchSnapshot(); + expect(shallow().snapshot).toMatchSnapshot(); }); }); });