diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 2f7da401e..000000000 --- a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TitleHeader snapshots editing 1`] = ` - -`; - -exports[`TitleHeader snapshots initialized 1`] = ` -
- - { - "useSelector": [Function], - } - - -
-`; - -exports[`TitleHeader snapshots not initialized 1`] = `"Loading..."`; diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx index cca001924..26ea56291 100644 --- a/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx +++ b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { Icon, IconButton, Truncate } from '@openedx/paragon'; import { EditOutline } from '@openedx/paragon/icons'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { selectors } from '../../../../data/redux'; import { localTitleHooks } from './hooks'; @@ -13,10 +13,9 @@ import EditableHeader from './EditableHeader'; const TitleHeader = ({ isInitialized, - // injected - intl, }) => { - if (!isInitialized) { return intl.formatMessage(messages.loading); } + const intl = useIntl(); + if (!isInitialized) { return ; } // eslint-disable-next-line react-hooks/rules-of-hooks const dispatch = useDispatch(); // eslint-disable-next-line react-hooks/rules-of-hooks @@ -66,9 +65,6 @@ const TitleHeader = ({ TitleHeader.defaultProps = {}; TitleHeader.propTypes = { isInitialized: PropTypes.bool.isRequired, - // injected - intl: intlShape.isRequired, }; -export const TitleHeaderInternal = TitleHeader; // For testing only -export default injectIntl(TitleHeader); +export default TitleHeader; diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx deleted file mode 100644 index 6366e1c75..000000000 --- a/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { useDispatch } from 'react-redux'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { formatMessage } from '../../../../testUtils'; -import { localTitleHooks } from './hooks'; -import { TitleHeaderInternal as TitleHeader } from '.'; - -jest.mock('./hooks', () => ({ - localTitleHooks: jest.fn(), -})); -jest.mock('@openedx/paragon', () => ({ - ...jest.requireActual('@openedx/paragon'), - Truncate: ({ children }) =>
{children}
, // eslint-disable-line react/prop-types - IconButton: 'IconButton', - Icon: 'Icon', -})); -jest.mock('./EditableHeader'); - -describe('TitleHeader', () => { - const props = { - intl: { formatMessage }, - isInitialized: false, - setTitle: jest.fn().mockName('args.setTitle'), - title: 'html', - }; - const localTitleHooksProps = { - inputRef: jest.fn().mockName('localTitleHooks.inputRef'), - isEditing: false, - handleChange: jest.fn().mockName('localTitleHooks.handleChange'), - handleKeyDown: jest.fn().mockName('localTitleHooks.handleKeyDown'), - localTitle: 'TeST LocALtitLE', - startEditing: jest.fn().mockName('localTitleHooks.startEditing'), - updateTitle: jest.fn().mockName('localTitleHooks.updateTitle'), - }; - - describe('behavior', () => { - it(' calls localTitleHooks with initialization args', () => { - localTitleHooks.mockReturnValue(localTitleHooksProps); - shallow(); - const dispatch = useDispatch(); - expect(localTitleHooks).toHaveBeenCalledWith({ - dispatch, - }); - }); - }); - - describe('snapshots', () => { - test('not initialized', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('initialized', () => { - localTitleHooks.mockReturnValue(localTitleHooksProps); - expect(shallow().shallowWrapper).toMatchSnapshot(); - }); - test('editing', () => { - localTitleHooks.mockReturnValue({ ...localTitleHooksProps, isEditing: true }); - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.test.tsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.test.tsx new file mode 100644 index 000000000..bf01a8de6 --- /dev/null +++ b/src/editors/containers/EditorContainer/components/TitleHeader/index.test.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; +import * as redux from 'react-redux'; + +import * as hooks from './hooks'; +import TitleHeader from '.'; + +describe('TitleHeader', () => { + // setting any type to prevent warnings on the mockReturnValue + const localTitleHooksProps: any = { + inputRef: jest.fn().mockName('localTitleHooks.inputRef'), + isEditing: false, + handleChange: jest.fn().mockName('localTitleHooks.handleChange'), + handleKeyDown: jest.fn().mockName('localTitleHooks.handleKeyDown'), + localTitle: 'TeST LocALtitLE', + startEditing: jest.fn().mockName('localTitleHooks.startEditing'), + updateTitle: jest.fn().mockName('localTitleHooks.updateTitle'), + }; + + beforeEach(() => { + initializeMocks(); + jest.spyOn(hooks, 'localTitleHooks').mockReturnValue(localTitleHooksProps); + jest.spyOn(redux, 'useSelector').mockReturnValueOnce('Title mock'); + }); + + const props = { + isInitialized: true, + }; + + describe('behavior', () => { + it('calls localTitleHooks with initialization args', () => { + const mockDispatch = jest.fn(); + jest.spyOn(redux, 'useDispatch').mockReturnValueOnce(mockDispatch); + render(); + expect(screen.getByText('Title mock')).toBeInTheDocument(); + expect(hooks.localTitleHooks).toHaveBeenCalledWith({ dispatch: mockDispatch }); + }); + }); + + describe('renders', () => { + test('component is not initialized and renders loading text', () => { + render(); + expect(screen.getByText('Loading...')).toBeInTheDocument(); + }); + + test('renders component correctly when initialized is true', () => { + render(); + expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + expect(screen.getByText('Title mock')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Edit Title' })).toBeInTheDocument(); + }); + + test('renders editing component', () => { + jest.spyOn(hooks, 'localTitleHooks').mockReturnValue({ ...localTitleHooksProps, isEditing: true }); + render(); + const editable = screen.getByRole('textbox'); + expect(editable).toBeInTheDocument(); + expect(editable).toHaveDisplayValue('TeST LocALtitLE'); + }); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap deleted file mode 100644 index f343f1e49..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,171 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card multiple groupFeedbacks 1`] = ` - -
- -
- - - - -`; - -exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card no groupFeedbacks 1`] = ` - -
- -
- - -`; - -exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card one groupFeedback 1`] = ` - -
- -
- - - -`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx index 531be7bad..798c5f921 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n'; +import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import SettingsOption from '../../SettingsOption'; import messages from './messages'; import { groupFeedbackCardHooks, groupFeedbackRowHooks } from './hooks'; @@ -11,9 +11,8 @@ const GroupFeedbackCard = ({ groupFeedbacks, updateSettings, answers, - // inject - intl, }) => { + const intl = useIntl(); const { summary, handleAdd } = groupFeedbackCardHooks(groupFeedbacks, updateSettings, answers); return ( ({ - groupFeedbackCardHooks: jest.fn(), - groupFeedbackRowHooks: jest.fn(), -})); - -describe('HintsCard', () => { - const answers = ['A', 'B', 'C']; - const groupFeedback1 = { - id: 1, value: 'groupFeedback1', answers: ['A', 'C'], feedback: 'sOmE FeEDBACK', - }; - const groupFeedback2 = { - id: 2, value: '', answers: ['A'], feedback: 'sOmE FeEDBACK oTher FeEdback', - }; - const groupFeedbacks0 = []; - const groupFeedbacks1 = [groupFeedback1]; - const groupFeedbacks2 = [groupFeedback1, groupFeedback2]; - const props = { - intl: { formatMessage }, - groupFeedbacks: groupFeedbacks0, - updateSettings: jest.fn().mockName('args.updateSettings'), - answers, - }; - - const groupFeedbacksRowHooksProps = { props: 'propsValue' }; - groupFeedbackRowHooks.mockReturnValue(groupFeedbacksRowHooksProps); - - describe('behavior', () => { - it(' calls groupFeedbacksCardHooks when initialized', () => { - const groupFeedbacksCardHooksProps = { - summary: { message: messages.noGroupFeedbackSummary }, - handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), - }; - - groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps); - shallow(); - expect(groupFeedbackCardHooks).toHaveBeenCalledWith(groupFeedbacks0, props.updateSettings, answers); - }); - }); - - describe('snapshot', () => { - test('snapshot: renders groupFeedbacks setting card no groupFeedbacks', () => { - const groupFeedbacksCardHooksProps = { - summary: { message: messages.noGroupFeedbackSummary, values: {} }, - handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), - }; - - groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders groupFeedbacks setting card one groupFeedback', () => { - const groupFeedbacksCardHooksProps = { - summary: { - message: messages.groupFeedbackSummary, - values: { groupFeedback: groupFeedback1.value, count: 1 }, - }, - handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), - }; - - groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders groupFeedbacks setting card multiple groupFeedbacks', () => { - const groupFeedbacksCardHooksProps = { - summary: { - message: messages.groupFeedbackSummary, - values: { groupFeedback: groupFeedback2.value, count: 2 }, - }, - handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), - }; - - groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.tsx new file mode 100644 index 000000000..c8ff74aa7 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; +import GroupFeedbackCard from './index'; +import * as hooks from './hooks'; +import messages from './messages'; + +jest.mock('./hooks', () => ({ + groupFeedbackCardHooks: jest.fn(), + groupFeedbackRowHooks: jest.fn(), +})); + +describe('HintsCard', () => { + const answers = ['A', 'B', 'C']; + const groupFeedback1 = { + id: 1, value: 'groupFeedback1', answers: ['A', 'C'], feedback: 'sOmE FeEDBACK', + }; + const groupFeedback2 = { + id: 2, value: '', answers: ['A'], feedback: 'sOmE FeEDBACK oTher FeEdback', + }; + const groupFeedbacks0 = []; + const groupFeedbacks1 = [groupFeedback1]; + const groupFeedbacks2 = [groupFeedback1, groupFeedback2]; + const props = { + groupFeedbacks: groupFeedbacks0, + updateSettings: jest.fn().mockName('args.updateSettings'), + answers, + }; + + beforeEach(() => initializeMocks()); + + describe('behavior', () => { + it(' calls groupFeedbacksCardHooks when initialized', () => { + const groupFeedbacksCardHooksProps = { + summary: { message: messages.noGroupFeedbackSummary }, + handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), + }; + + jest.spyOn(hooks, 'groupFeedbackCardHooks').mockReturnValue(groupFeedbacksCardHooksProps); + render(); + expect(hooks.groupFeedbackCardHooks).toHaveBeenCalledWith(groupFeedbacks0, props.updateSettings, answers); + }); + }); + + describe('snapshot', () => { + test('renders groupFeedbacks setting card no groupFeedbacks', () => { + const groupFeedbacksCardHooksProps = { + summary: { message: messages.noGroupFeedbackSummary, values: {} }, + handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), + }; + jest.spyOn(hooks, 'groupFeedbackCardHooks').mockReturnValue(groupFeedbacksCardHooksProps); + render(); + expect(screen.getByText('Group Feedback')).toBeInTheDocument(); + expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + }); + + test('renders groupFeedbacks setting card one groupFeedback', () => { + const groupFeedbacksCardHooksProps = { + summary: { + message: messages.groupFeedbackSummary, + values: { groupFeedback: groupFeedback1.value, count: 1 }, + }, + handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), + }; + jest.spyOn(hooks, 'groupFeedbackCardHooks').mockReturnValue(groupFeedbacksCardHooksProps); + render(); + const feedbackOption = screen.getByText('Group Feedback'); + fireEvent.click(feedbackOption); + const groupsRendered = screen.queryAllByRole('textbox'); + expect(groupsRendered).toHaveLength(1); + expect(groupsRendered[0]).toHaveValue('sOmE FeEDBACK'); + }); + + test('renders groupFeedbacks setting card multiple groupFeedbacks', () => { + const groupFeedbacksCardHooksProps = { + summary: { + message: messages.groupFeedbackSummary, + values: { groupFeedback: groupFeedback2.value, count: 2 }, + }, + handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'), + }; + jest.spyOn(hooks, 'groupFeedbackCardHooks').mockReturnValue(groupFeedbacksCardHooksProps); + render(); + const feedbackOption = screen.getByText('Group Feedback'); + fireEvent.click(feedbackOption); + const groupsRendered = screen.queryAllByRole('textbox'); + expect(groupsRendered).toHaveLength(groupFeedbacks2.length); + groupFeedbacks2.forEach((group, index) => { + expect(groupsRendered[index]).toHaveValue(group.feedback); + }); + }); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx index 1413f092e..cef04feed 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { Button, ButtonGroup, Hyperlink } from '@openedx/paragon'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; @@ -12,9 +12,8 @@ const ResetCard = ({ showResetButton, defaultValue, updateSettings, - // inject - intl, }) => { + const intl = useIntl(); const isLibrary = useSelector(selectors.app.isLibrary); const { setResetTrue, setResetFalse } = resetCardHooks(updateSettings); const advancedSettingsLink = `${useSelector(selectors.app.studioEndpointUrl)}/settings/advanced/${useSelector(selectors.app.learningContextId)}#show_reset_button`; @@ -54,9 +53,6 @@ ResetCard.propTypes = { showResetButton: PropTypes.bool.isRequired, defaultValue: PropTypes.bool.isRequired, updateSettings: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; -export const ResetCardInternal = ResetCard; // For testing only -export default injectIntl(ResetCard); +export default ResetCard; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx index d3c46314f..09886bef1 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx @@ -1,27 +1,14 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { useSelector } from 'react-redux'; +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; +import * as reactredux from 'react-redux'; import { formatMessage } from '../../../../../../testUtils'; -import { ResetCardInternal as ResetCard } from './ResetCard'; -import { resetCardHooks } from '../hooks'; - -jest.mock('../hooks', () => ({ - resetCardHooks: jest.fn(), -})); - -jest.mock('../../../../../../data/redux', () => ({ - selectors: { - app: { - studioEndpointUrl: 'sTuDioEndpOintUrl', - learningContextId: 'leArningCoNteXtId', - }, - }, -})); - -useSelector.mockImplementation((args) => args); +import ResetCard from './ResetCard'; +import * as hooks from '../hooks'; describe('ResetCard', () => { + const resetText = "Determines whether a 'Reset' button is shown so the user may reset their answer, generally for use in practice or formative assessments."; const props = { showResetButton: false, updateSettings: jest.fn().mockName('args.updateSettings'), @@ -33,21 +20,50 @@ describe('ResetCard', () => { setResetFalse: jest.fn().mockName('resetCardHooks.setResetFalse'), }; - resetCardHooks.mockReturnValue(resetCardHooksProps); + beforeEach(() => { + initializeMocks(); + jest.spyOn(reactredux, 'useSelector').mockImplementation((args) => args); + }); describe('behavior', () => { - it(' calls resetCardHooks when initialized', () => { - shallow(); - expect(resetCardHooks).toHaveBeenCalledWith(props.updateSettings); + it('calls resetCardHooks when initialized', () => { + jest.spyOn(hooks, 'resetCardHooks').mockReturnValue(resetCardHooksProps); + render(); + expect(hooks.resetCardHooks).toHaveBeenCalledWith(props.updateSettings); }); }); - describe('snapshot', () => { - test('snapshot: renders reset true setting card', () => { - expect(shallow().snapshot).toMatchSnapshot(); + describe('renders', () => { + test('renders reset true setting card', () => { + render(); + expect(screen.getByText('Show reset option')).toBeInTheDocument(); + expect(screen.getByText('True')).toBeInTheDocument(); }); - test('snapshot: renders reset true setting card', () => { - expect(shallow().snapshot).toMatchSnapshot(); + + test('renders reset false setting card', () => { + render(); + expect(screen.getByText('Show reset option')).toBeInTheDocument(); + expect(screen.getByText('False')).toBeInTheDocument(); + }); + + test('renders link when isLibrary is false', () => { + jest.spyOn(reactredux, 'useSelector').mockReturnValueOnce(false); // mock isLibrary value + render(); + const resetOption = screen.getByText('Show reset option'); + expect(resetOption).toBeInTheDocument(); + fireEvent.click(resetOption); + expect(screen.getByText(resetText)).toBeInTheDocument(); + expect(screen.getByRole('link', { name: 'Set a default value in advanced settings in a new tab' })).toBeInTheDocument(); + }); + + test('do not render link when isLibrary is true', () => { + jest.spyOn(reactredux, 'useSelector').mockReturnValueOnce(true); // mock isLibrary value + render(); + const resetOption = screen.getByText('Show reset option'); + expect(resetOption).toBeInTheDocument(); + fireEvent.click(resetOption); + expect(screen.getByText(resetText)).toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'Set a default value in advanced settings in a new tab' })).not.toBeInTheDocument(); }); }); }); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap deleted file mode 100644 index 23d9f5c69..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap +++ /dev/null @@ -1,127 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = ` - -
- - - -
-
- - - -
- - - - - -`; - -exports[`ResetCard snapshot snapshot: renders reset true setting card 2`] = ` - -
- - - -
-
- - - -
- - - - - -`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx index 236d49631..68e0ce6de 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, - injectIntl, } from '@edx/frontend-platform/i18n'; import { Icon } from '@openedx/paragon'; import { @@ -48,5 +47,4 @@ LicenseBlurb.propTypes = { }).isRequired, }; -export const LicenseBlurbInternal = LicenseBlurb; // For testing only -export default injectIntl(LicenseBlurb); +export default LicenseBlurb; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx deleted file mode 100644 index f55458d85..000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { LicenseBlurbInternal as LicenseBlurb } from './LicenseBlurb'; - -describe('LicenseBlurb', () => { - const props = { - license: 'all-rights-reserved', - details: {}, - }; - - describe('snapshots', () => { - test('snapshots: renders as expected with default props', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with license equal to Creative Commons', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected when details.attribution equal true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected when details.attribution and details.noncommercial equal true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected when details.attribution and details.noDerivatives equal true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected when details.attribution and details.shareAlike equal true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.tsx new file mode 100644 index 000000000..24c9f207b --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; + +import LicenseBlurb from './LicenseBlurb'; + +describe('LicenseBlurb', () => { + const props = { + license: 'all-rights-reserved', + details: { + attribution: false, + noncommercial: false, + noDerivatives: false, + shareAlike: false, + + }, + }; + + beforeEach(() => initializeMocks()); + + describe('snapshots', () => { + test('renders as expected with default props', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(1); + expect(screen.getByText('All Rights Reserved')).toBeInTheDocument(); + }); + + test('renders as expected with license equal to Creative Commons', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(1); + expect(screen.getByText('Some Rights Reserved')).toBeInTheDocument(); + }); + + test('renders as expected when details.attribution equal true', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(1); + }); + + test('renders as expected when details.attribution and details.noncommercial equal true', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(2); + }); + + test('renders as expected when details.attribution and details.noDerivatives equal true', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(2); + }); + + test('renders as expected when details.attribution and details.shareAlike equal true', () => { + const { container } = render(); + expect(container.querySelectorAll('span.pgn__icon')).toHaveLength(2); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap deleted file mode 100644 index 03a8277af..000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap +++ /dev/null @@ -1,214 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noDerivatives equal true 1`] = ` -
- - - -
- -
-
-`; - -exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noncommercial equal true 1`] = ` -
- - - -
- -
-
-`; - -exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.shareAlike equal true 1`] = ` -
- - - -
- -
-
-`; - -exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution equal true 1`] = ` -
- - -
- -
-
-`; - -exports[`LicenseBlurb snapshots snapshots: renders as expected with default props 1`] = ` -
- -
- -
-
-`; - -exports[`LicenseBlurb snapshots snapshots: renders as expected with license equal to Creative Commons 1`] = ` -
- -
- -
-
-`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap index 55c2822c6..4e726f366 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap @@ -5,7 +5,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro fontSize="" subtitle={
- @@ -73,7 +73,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t fontSize="" subtitle={
- @@ -124,7 +124,7 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType fontSize="" subtitle={
- diff --git a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap deleted file mode 100644 index ea6fc97b3..000000000 --- a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,207 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = ` - - - - -`; - -exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = ` - - - - -`; - -exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = ` - - - - - -`; diff --git a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx b/src/editors/sharedComponents/TinyMceWidget/index.test.tsx similarity index 63% rename from src/editors/sharedComponents/TinyMceWidget/index.test.jsx rename to src/editors/sharedComponents/TinyMceWidget/index.test.tsx index 35e32a727..c85bc869f 100644 --- a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx +++ b/src/editors/sharedComponents/TinyMceWidget/index.test.tsx @@ -1,9 +1,10 @@ import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import SourceCodeModal from '../SourceCodeModal'; -import ImageUploadModal from '../ImageUploadModal'; -import { imgModalToggle, sourceCodeModalToggle } from './hooks'; -import { TinyMceWidgetInternal as TinyMceWidget } from '.'; +import { + screen, initializeMocks, +} from '@src/testUtils'; +import editorRender from '@src/editors/editorTestRender'; +import * as hooks from './hooks'; +import TinyMceWidget from '.'; const staticUrl = '/assets/sOmEaSsET'; @@ -42,6 +43,8 @@ jest.mock('./hooks', () => ({ })); describe('TinyMceWidget', () => { + beforeEach(() => initializeMocks()); + const props = { editorType: 'text', editorRef: { current: { value: 'something' } }, @@ -53,30 +56,41 @@ describe('TinyMceWidget', () => { id: 'sOMeiD', updateContent: () => ({}), learningContextId: 'course+org+run', + editorContentHtml: undefined, + enableImageUpload: undefined, + onChange: undefined, + staticRootUrl: undefined, }; - describe('snapshots', () => { - imgModalToggle.mockReturnValue({ + + describe('render', () => { + jest.spyOn(hooks, 'imgModalToggle').mockReturnValue({ isImgOpen: false, openImgModal: jest.fn().mockName('modal.openModal'), closeImgModal: jest.fn().mockName('modal.closeModal'), }); - sourceCodeModalToggle.mockReturnValue({ + jest.spyOn(hooks, 'sourceCodeModalToggle').mockReturnValue({ isSourceCodeOpen: false, openSourceCodeModal: jest.fn().mockName('modal.openModal'), closeSourceCodeModal: jest.fn().mockName('modal.closeModal'), }); + test('renders as expected with default behavior', () => { - expect(shallow().snapshot).toMatchSnapshot(); + const { container } = editorRender(); + expect(screen.getByText('TiNYmCE EDitOR')).toBeInTheDocument(); + expect(container.querySelector('sourcecodemodal')).toBeInTheDocument(); + expect(container.querySelector('imageuploadmodal')).toBeInTheDocument(); }); + test('SourcecodeModal is not rendered', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); - expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0); + const { container } = editorRender(); + expect(container.querySelector('imageuploadmodal')).toBeInTheDocument(); + expect(container.querySelector('sourcecodemodal')).not.toBeInTheDocument(); }); + test('ImageUploadModal is not rendered', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); - expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0); + const { container } = editorRender(); + expect(container.querySelector('imageuploadmodal')).not.toBeInTheDocument(); + expect(container.querySelector('sourcecodemodal')).toBeInTheDocument(); }); }); });