diff --git a/src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx b/src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx index 17dfe14b4..0f4fe41ed 100644 --- a/src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx +++ b/src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx @@ -11,10 +11,6 @@ import { useMessageHandlers } from '..'; jest.useFakeTimers(); -jest.mock('@edx/react-unit-test-utils', () => ({ - useKeyedState: jest.fn(), -})); - jest.mock('@edx/frontend-platform/logging', () => ({ logError: jest.fn(), })); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx index 60cd97ee6..a0ee440b6 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx @@ -8,7 +8,7 @@ import { Form, } from '@openedx/paragon'; import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; import messages from './messages'; import { selectors } from '../../../../../data/redux'; @@ -22,8 +22,6 @@ import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextAr const AnswerOption = ({ answer, hasSingleAnswer, - // injected - intl, // redux problemType, images, @@ -31,6 +29,7 @@ const AnswerOption = ({ blockId, learningContextId, }) => { + const intl = useIntl(); const dispatch = useDispatch(); const removeAnswer = hooks.removeAnswer({ answer, dispatch }); const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch }); @@ -151,8 +150,6 @@ const AnswerOption = ({ AnswerOption.propTypes = { answer: answerOptionProps.isRequired, hasSingleAnswer: PropTypes.bool.isRequired, - // injected - intl: intlShape.isRequired, // redux problemType: PropTypes.string.isRequired, images: PropTypes.shape({}).isRequired, @@ -171,4 +168,4 @@ export const mapStateToProps = (state) => ({ export const mapDispatchToProps = {}; export const AnswerOptionInternal = AnswerOption; // For testing only -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption))); +export default connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption)); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx deleted file mode 100644 index 53d81e313..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../testUtils'; -import { selectors } from '../../../../../data/redux'; -import { AnswerOptionInternal as AnswerOption, mapStateToProps } from './AnswerOption'; - -jest.mock('../../../../../data/redux', () => ({ - __esModule: true, - default: jest.fn(), - selectors: { - problem: { - problemType: jest.fn(state => ({ problemType: state })), - }, - app: { - images: jest.fn(state => ({ images: state })), - isLibrary: jest.fn(state => ({ isLibrary: state })), - learningContextId: jest.fn(state => ({ learningContextId: state })), - blockId: jest.fn(state => ({ blockId: state })), - }, - }, - thunkActions: { - video: { - importTranscripts: jest.fn(), - }, - }, -})); - -describe('AnswerOption', () => { - const answerWithOnlyFeedback = { - id: 'A', - title: 'Answer 1', - correct: true, - selectedFeedback: 'some feedback', - }; - const answerWithSelectedUnselectedFeedback = { - id: 'A', - title: 'Answer 1', - correct: true, - selectedFeedback: 'selected feedback', - unselectedFeedback: 'unselected feedback', - }; - const answerRange = { - id: 'A', - title: 'Answer 1', - correct: true, - selectedFeedback: 'selected feedback', - unselectedFeedback: 'unselected feedback', - isAnswerRange: true, - }; - - const props = { - hasSingleAnswer: false, - answer: answerWithOnlyFeedback, - // inject - intl: { formatMessage }, - // redux - problemType: 'multiplechoiceresponse', - images: {}, - isLibrary: false, - learningContextId: 'course+org+run', - }; - describe('render', () => { - test('snapshot: renders correct option with feedback', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders correct option with selected unselected feedback', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders correct option with numeric input problem', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders correct option with numeric input problem and answer range', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); - - describe('mapStateToProps', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; - test('problemType from problem.problemType', () => { - expect( - mapStateToProps(testState).problemType, - ).toEqual(selectors.problem.problemType(testState)); - }); - test('images from app.images', () => { - expect( - mapStateToProps(testState).images, - ).toEqual(selectors.app.images(testState)); - }); - test('learningContextId from app.learningContextId', () => { - expect( - mapStateToProps(testState).learningContextId, - ).toEqual(selectors.app.learningContextId(testState)); - }); - test('isLibrary from app.isLibrary', () => { - expect( - mapStateToProps(testState).isLibrary, - ).toEqual(selectors.app.isLibrary(testState)); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx new file mode 100644 index 000000000..d47f9e046 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx @@ -0,0 +1,110 @@ +import React from 'react'; +import { render, screen, initializeMocks } from '@src/testUtils'; +import AnswerOption from './AnswerOption'; +import * as hooks from './hooks'; +import { selectors } from '../../../../../data/redux'; + +const { problem } = selectors; + +jest.mock('../../../../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), + selectors: { + problem: { + problemType: jest.fn().mockReturnValue(''), + }, + app: { + images: jest.fn(state => ({ images: state })), + isLibrary: jest.fn().mockReturnValue(true), + learningContextId: jest.fn(state => ({ learningContextId: state })), + blockId: jest.fn(state => ({ blockId: state })), + }, + }, + thunkActions: { + video: { + importTranscripts: jest.fn(), + }, + }, +})); + +jest.mock('../../../../../sharedComponents/ExpandableTextArea', () => 'ExpandableTextArea'); + +describe('AnswerOption', () => { + const answerWithOnlyFeedback = { + id: 'A', + title: 'Answer 1', + correct: true, + selectedFeedback: 'some feedback', + isAnswerRange: true, + }; + const answerWithSelectedUnselectedFeedback = { + id: 'B', + title: 'Answer 2', + correct: true, + selectedFeedback: 'selected feedback', + unselectedFeedback: 'unselected feedback', + isAnswerRange: false, + }; + const answerRange = { + id: 'A', + title: 'Answer Range 1', + correct: true, + selectedFeedback: 'selected feedback', + unselectedFeedback: 'unselected feedback', + isAnswerRange: true, + }; + + const props = { + hasSingleAnswer: false, + answer: answerWithOnlyFeedback, + // redux + problemType: 'multiplechoiceresponse', + images: {}, + isLibrary: false, + learningContextId: 'course+org+run', + blockId: 'block-id', + }; + + beforeEach(() => { + jest.spyOn(hooks, 'removeAnswer').mockReturnValue(jest.fn()); + jest.spyOn(hooks, 'setAnswer').mockReturnValue(jest.fn()); + jest.spyOn(hooks, 'setAnswerTitle').mockReturnValue(jest.fn()); + jest.spyOn(hooks, 'setSelectedFeedback').mockReturnValue(jest.fn()); + jest.spyOn(hooks, 'setUnselectedFeedback').mockReturnValue(jest.fn()); + jest.spyOn(hooks, 'useFeedback').mockReturnValue({ + isFeedbackVisible: false, + toggleFeedback: jest.fn(), + }); + initializeMocks(); + }); + + test('renders correct option with feedback', () => { + jest.spyOn(problem, 'problemType').mockReturnValue('multiplechoiceresponse'); + render(); + expect(screen.getByPlaceholderText('Enter an answer')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Delete answer' })).toBeInTheDocument(); + }); + + test('renders correct option with selected unselected feedback', () => { + jest.spyOn(problem, 'problemType').mockReturnValue('choiceresponse'); + const myProps = { ...props, answer: answerWithSelectedUnselectedFeedback }; + render(); + expect(screen.getByText(answerWithSelectedUnselectedFeedback.id)).toBeInTheDocument(); + }); + + test('renders correct option with optionresponse input problem', () => { + jest.spyOn(problem, 'problemType').mockReturnValue('optionresponse'); + const myProps = { ...props }; + render(); + expect(screen.getByRole('textbox')).toBeInTheDocument(); + expect(screen.getByText(answerWithOnlyFeedback.title)).toBeInTheDocument(); + }); + + test('renders correct option with numeric input problem and answer range', () => { + jest.spyOn(problem, 'problemType').mockReturnValue('numericalresponse'); + const myProps = { ...props }; + render(); + expect(screen.getByText(answerRange.title)).toBeInTheDocument(); + expect(screen.getByRole('textbox')).toBeInTheDocument(); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap deleted file mode 100644 index d1443d903..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap +++ /dev/null @@ -1,342 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AnswerOption render snapshot: renders correct option with feedback 1`] = ` - -
- -
-
- - - - -
-
- - - - -
- -`; - -exports[`AnswerOption render snapshot: renders correct option with numeric input problem 1`] = ` - -
- -
-
- - - - -
-
- - - - -
- -`; - -exports[`AnswerOption render snapshot: renders correct option with numeric input problem and answer range 1`] = ` - -
- -
-
-
- -
- -
-
- - - -
-
- - - - -
- -`; - -exports[`AnswerOption render snapshot: renders correct option with selected unselected feedback 1`] = ` - -
- -
-
- - - - -
-
- - - - -
- -`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx deleted file mode 100644 index 5c9c1a17e..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import SettingsOption from './SettingsOption'; - -describe('SettingsOption', () => { - describe('default with children', () => { - const children = (

My test content

); - test('snapshot: renders correct', () => { - expect(shallow({children}).snapshot).toMatchSnapshot(); - }); - }); - describe('with additional sections', () => { - const children = (

First Section

); - const sections = [

Second Section

,

Third Section

]; - test('snapshot: renders correct', () => { - expect(shallow( - - {children} - , - ).snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.tsx new file mode 100644 index 000000000..8aa5c1fba --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; +import SettingsOption from './SettingsOption'; + +describe('SettingsOption', () => { + const defaultProps = { + title: 'Settings Option Title', + summary: 'Settings Option Summary', + hasExpandableTextArea: true, + className: 'test-classname', + extraSections: [], + }; + + beforeEach(() => { + initializeMocks(); + }); + + test('renders correct expanded area', () => { + const children =

My test content

; + render({children}); + expect(screen.getByText('Settings Option Title')).toBeInTheDocument(); + expect(screen.getByText('My test content')).toBeInTheDocument(); + expect(document.querySelector('.test-classname')).toBeInTheDocument(); + }); + + test('renders summary when not expanded', () => { + const children =

My test content

; + render(({children})); + expect(screen.getByText('Settings Option Title')).toBeInTheDocument(); + expect(screen.queryByText('My test content')).not.toBeInTheDocument(); + expect(screen.getByText('Settings Option Summary')).toBeInTheDocument(); + }); + + test('renders sections when expanded', () => { + const children = (

First Section

); + const sections = [{ children:

Second Section

}, { children:

Third Section

}]; + render({children}); + expect(screen.getByText('First Section')).toBeInTheDocument(); + expect(screen.getByText('Second Section')).toBeInTheDocument(); + expect(screen.getByText('Third Section')).toBeInTheDocument(); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap deleted file mode 100644 index 031121967..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap +++ /dev/null @@ -1,109 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SettingsOption default with children snapshot: renders correct 1`] = ` - - - - - - Settings Option Title - - - - - - - - - - - -

- My test content -

- - -`; - -exports[`SettingsOption with additional sections snapshot: renders correct 1`] = ` - - - - - - Settings Option Title - - - - - - - - - - - -

- First Section -

- - - - - - - - -`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx index 53e232cbc..eb180ef3a 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { ActionRow, Form, Icon, IconButton, Row, } from '@openedx/paragon'; import { DeleteOutline } from '@openedx/paragon/icons'; import PropTypes from 'prop-types'; +import { useIntl } from '@edx/frontend-platform/i18n'; import messages from '../../messages'; const GroupFeedbackRow = ({ @@ -13,48 +13,47 @@ const GroupFeedbackRow = ({ handleFeedbackChange, handleDelete, answers, - // injected - intl, -}) => ( - -
- - -
- { + const intl = useIntl(); + return ( +
+ + -
- - - - {answers.map((letter) => ( - = 0} - > -
- {letter.id} -
- - ))} - - -
- -); +
+ +
+ + + + {answers.map((letter) => ( + = 0} + > +
+ {letter.id} +
+ + ))} + + +
+ ); +}; GroupFeedbackRow.propTypes = { answers: PropTypes.arrayOf(PropTypes.shape({ @@ -72,9 +71,6 @@ GroupFeedbackRow.propTypes = { answers: PropTypes.arrayOf(PropTypes.string), feedback: PropTypes.string, }).isRequired, - // injected - intl: intlShape.isRequired, }; -export const GroupFeedbackRowInternal = GroupFeedbackRow; // For testing only -export default injectIntl(GroupFeedbackRow); +export default GroupFeedbackRow; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx deleted file mode 100644 index 93be2e266..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../../../testUtils'; -import { GroupFeedbackRowInternal as GroupFeedbackRow } from './GroupFeedbackRow'; - -jest.mock('@openedx/paragon', () => ({ - ...jest.requireActual('@openedx/paragon'), - Row: 'Row', - IconButton: 'IconButton', - Icon: 'Icon', - Form: { - CheckboxSet: 'Form.CheckboxSet', - Checkbox: 'Form.CheckboxSet', - Control: 'Form.Control', - }, - ActionRow: 'ActionRow', -})); -jest.mock('@openedx/paragon/icons', () => ({ - ...jest.requireActual('@openedx/paragon/icons'), - DeleteOutline: 'DeleteOutline', -})); - -describe('GroupFeedbackRow', () => { - const props = { - value: { answers: ['A', 'C'], feedback: 'sOmE FeEDBACK' }, - answers: ['A', 'B', 'C', 'D'], - handleAnswersSelectedChange: jest.fn().mockName('handleAnswersSelectedChange'), - handleFeedbackChange: jest.fn().mockName('handleFeedbackChange'), - handleDelete: jest.fn().mockName('handleDelete'), - intl: { formatMessage }, - }; - - describe('snapshot', () => { - test('snapshot: renders hints row', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.tsx new file mode 100644 index 000000000..3b5de1c7f --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { + render, + screen, + initializeMocks, + fireEvent, +} from '@src/testUtils'; +import GroupFeedbackRow from './GroupFeedbackRow'; + +describe('GroupFeedbackRow', () => { + const answers = [ + { id: '1', text: 'Answer 1', isCorrect: false }, + { id: '2', text: 'Answer 2', isCorrect: true }, + { id: '3', text: 'Answer 3', isCorrect: false }, + { id: '4', text: 'Answer 4', isCorrect: false }, + ]; + const props = { + value: { id: 1, answers: answers.map(a => a.id), feedback: 'sOmE FeEDBACK' }, + answers, + handleAnswersSelectedChange: jest.fn(), + handleFeedbackChange: jest.fn(), + handleDelete: jest.fn(), + }; + + beforeEach(() => { + initializeMocks(); + }); + + test('renders component and anwers', () => { + render(); + expect(screen.getByRole('button', { name: 'Delete answer' })).toBeInTheDocument(); + const options = screen.getAllByRole('checkbox'); + expect(options).toHaveLength(answers.length); + }); + + test('handles delete answear correctly', () => { + const mockDelete = jest.fn(); + render(); + const button = screen.getByRole('button', { name: 'Delete answer' }); + fireEvent.click(button); + expect(mockDelete).toHaveBeenCalled(); + }); + + test('handles selected answer change correctly', () => { + const handleAnswersSelectedChangeMock = jest.fn(); + render(); + const checkbox2 = screen.getByRole('checkbox', { name: '2' }); + fireEvent.click(checkbox2); + expect(handleAnswersSelectedChangeMock).toHaveBeenCalled(); + }); + + test('handles feedback change correctly', () => { + const handleFeedbackChangeMock = jest.fn(); + render(); + const feedbackInput = screen.getByRole('textbox'); + fireEvent.change(feedbackInput, { target: { value: 'New feedback' } }); + expect(handleFeedbackChangeMock).toHaveBeenCalled(); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap deleted file mode 100644 index 21c50f982..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`GroupFeedbackRow snapshot snapshot: renders hints row 1`] = ` -
- - -
- -
- - - - -
- - -
- - -
- - -
- - - -
-`; 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 index 7ba767504..f343f1e49 100644 --- 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 @@ -18,7 +18,7 @@ exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card multip id="authoring.problemeditor.settings.GroupFeedbackInputLabel" />
- -
- { + const intl = useIntl(); const { handleChange } = timerCardHooks(updateSettings); return ( @@ -40,8 +39,6 @@ const TimerCard = ({ TimerCard.propTypes = { timeBetween: PropTypes.number.isRequired, updateSettings: PropTypes.func.isRequired, - intl: intlShape.isRequired, }; -export const TimerCardInternal = TimerCard; // For testing only -export default injectIntl(TimerCard); +export default TimerCard; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx deleted file mode 100644 index 614a73639..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../../testUtils'; -import { TimerCardInternal as TimerCard } from './TimerCard'; -import { timerCardHooks } from '../hooks'; - -jest.mock('../hooks', () => ({ - timerCardHooks: jest.fn(), -})); - -describe('TimerCard', () => { - const props = { - timeBetween: 5, - updateSettings: jest.fn().mockName('args.updateSettings'), - intl: { formatMessage }, - }; - - const timerCardHooksProps = { - handleChange: jest.fn().mockName('timerCardHooks.handleChange'), - }; - - timerCardHooks.mockReturnValue(timerCardHooksProps); - - describe('behavior', () => { - it(' calls timerCardHooks when initialized', () => { - shallow(); - expect(timerCardHooks).toHaveBeenCalledWith(props.updateSettings); - }); - }); - - describe('snapshot', () => { - test('snapshot: renders reset true setting card', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.tsx new file mode 100644 index 000000000..e3bf7c056 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; +import TimerCard from './TimerCard'; + +describe('TimerCard', () => { + const updateSettingsMock = jest.fn().mockName('updateSettingsMock'); + const props = { + timeBetween: 5, + updateSettings: updateSettingsMock, + }; + + beforeEach(() => { + initializeMocks(); + }); + + test('renders component', () => { + render(); + expect(screen.getByText('Time between attempts')).toBeInTheDocument(); + expect(screen.getByText(`${props.timeBetween} seconds`)).toBeInTheDocument(); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap deleted file mode 100644 index 8204e4a01..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TimerCard snapshot snapshot: renders reset true setting card 1`] = ` - -
- - - -
- - - - -`;