From 962b30bed931ed57579d3d41af6839184afe4891 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Fri, 20 Jun 2025 13:05:34 -0600 Subject: [PATCH] test: replacing snapshot tests with RTL tests part 9 (#2206) --- .../Checker/__snapshots__/index.test.jsx.snap | 55 ---- .../components/Checker/index.test.jsx | 27 -- .../components/Checker/index.test.tsx | 43 +++ ...rCard.test.jsx => ShowAnswerCard.test.tsx} | 46 +-- .../settingsComponents/TypeCard.jsx | 10 +- .../settingsComponents/TypeCard.test.jsx | 26 -- .../settingsComponents/TypeCard.test.tsx | 32 ++ .../ShowAnswerCard.test.jsx.snap | 121 ------- .../__snapshots__/TypeCard.test.jsx.snap | 82 ----- .../__snapshots__/index.test.jsx.snap | 309 ------------------ .../{index.test.jsx => index.test.tsx} | 74 ++--- ...test.jsx => TranscriptActionMenu.test.tsx} | 53 +-- .../TranscriptActionMenu.test.jsx.snap | 109 ------ 13 files changed, 161 insertions(+), 826 deletions(-) delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.tsx rename src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/{ShowAnswerCard.test.jsx => ShowAnswerCard.test.tsx} (63%) delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.tsx delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap delete mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap delete mode 100644 src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap rename src/editors/containers/TextEditor/{index.test.jsx => index.test.tsx} (67%) rename src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/{TranscriptActionMenu.test.jsx => TranscriptActionMenu.test.tsx} (65%) delete mode 100644 src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 8dceea743..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Checker component with disabled 1`] = ` - - - - A - - -`; - -exports[`Checker component with multiple answers 1`] = ` - - - - A - - -`; - -exports[`Checker component with single answer 1`] = ` - - - - A - - -`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx deleted file mode 100644 index 1f99057ac..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import { shallow } from '@edx/react-unit-test-utils'; -import Checker from '.'; - -const props = { - hasSingleAnswer: true, - answer: { - id: 'A', - title: 'Answer 1', - correct: true, - selectedFeedback: 'some feedback', - }, - setAnswer: jest.fn(), -}; -describe('Checker component', () => { - test('with single answer', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - - test('with multiple answers', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - - test('with disabled', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.tsx new file mode 100644 index 000000000..5f32e4c77 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.tsx @@ -0,0 +1,43 @@ +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; +import Checker from '.'; + +const props = { + hasSingleAnswer: true, + answer: { + id: 1, + correct: true, + }, + setAnswer: jest.fn(), +}; +describe('Checker component', () => { + beforeEach(() => { + initializeMocks(); + }); + + test('renders with single answer', () => { + render(); + expect(screen.getByText('1')).toBeInTheDocument(); + expect(screen.getByRole('radio')).toBeInTheDocument(); + expect(screen.queryByRole('checkbox')).not.toBeInTheDocument(); + }); + + test('renders with multiple answers', () => { + render(); + expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(screen.queryByRole('radio')).not.toBeInTheDocument(); + }); + + test('renders with disabled radio', () => { + render(); + expect(screen.getByRole('radio')).toBeInTheDocument(); + }); + + test('calls setAnswer when radio button is clicked', () => { + render(); + expect(screen.getByRole('radio')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('radio'), { target: { checked: !props.answer.correct } }); + expect(props.setAnswer).toHaveBeenCalledWith({ correct: true }); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx similarity index 63% rename from src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx rename to src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx index dae004510..5e42cd7a8 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.tsx @@ -1,14 +1,11 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../../testUtils'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; +import { formatMessage } from '@src/editors/testUtils'; import { selectors } from '../../../../../../data/redux'; import { ShowAnswerCardInternal as ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard'; -import { useAnswerSettings } from '../hooks'; - -jest.mock('../hooks', () => ({ - useAnswerSettings: jest.fn(), -})); +import * as hooks from '../hooks'; jest.mock('../../../../../../data/redux', () => ({ selectors: { @@ -30,33 +27,34 @@ describe('ShowAnswerCard', () => { updateSettings: jest.fn().mockName('args.updateSettings'), intl: { formatMessage }, }; + const props = { showAnswer, defaultValue: 'finished', + updateSettings: jest.fn(), // injected intl: { formatMessage }, // redux studioEndpointUrl: 'SoMEeNDpOinT', learningContextId: 'sOMEcouRseId', + isLibrary: false, }; - const useAnswerSettingsProps = { - handleShowAnswerChange: jest.fn().mockName('useAnswerSettings.handleShowAnswerChange'), - handleAttemptsChange: jest.fn().mockName('useAnswerSettings.handleAttemptsChange'), - }; - - useAnswerSettings.mockReturnValue(useAnswerSettingsProps); - - describe('behavior', () => { - it(' calls useAnswerSettings when initialized', () => { - shallow(); - expect(useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings); + describe('renders', () => { + beforeEach(() => { + initializeMocks(); }); - }); - describe('snapshot', () => { - test('snapshot: show answer setting card', () => { - expect(shallow().snapshot).toMatchSnapshot(); + test('show answer setting card', () => { + render(); + expect(screen.getByText('Show answer')).toBeInTheDocument(); + }); + + test('calls useAnswerSettings when initialized', () => { + jest.spyOn(hooks, 'useAnswerSettings'); + render(); + expect(screen.getByText('Show answer')).toBeInTheDocument(); + expect(hooks.useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings); }); }); describe('mapStateToProps', () => { @@ -64,11 +62,13 @@ describe('ShowAnswerCard', () => { test('studioEndpointUrl from app.studioEndpointUrl', () => { expect( mapStateToProps(testState).studioEndpointUrl, + // @ts-ignore ).toEqual(selectors.app.studioEndpointUrl(testState)); }); test('learningContextId from app.learningContextId', () => { expect( mapStateToProps(testState).learningContextId, + // @ts-ignore ).toEqual(selectors.app.learningContextId(testState)); }); }); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx index 75137b505..2d51ae00c 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx @@ -1,6 +1,6 @@ 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 SettingsOption from '../SettingsOption'; import { ProblemTypeKeys, ProblemTypes } from '../../../../../../data/constants/problem'; import messages from '../messages'; @@ -14,9 +14,8 @@ const TypeCard = ({ setBlockTitle, updateField, updateAnswer, - // inject - intl, }) => { + const intl = useIntl(); const problemTypeKeysArray = Object.values(ProblemTypeKeys).filter(key => key !== ProblemTypeKeys.ADVANCED); if (problemType === ProblemTypeKeys.ADVANCED) { return null; } @@ -60,9 +59,6 @@ TypeCard.propTypes = { setBlockTitle: PropTypes.func.isRequired, updateField: PropTypes.func.isRequired, updateAnswer: PropTypes.func.isRequired, - // injected - intl: intlShape.isRequired, }; -export const TypeCardInternal = TypeCard; // For testing only -export default injectIntl(TypeCard); +export default TypeCard; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx deleted file mode 100644 index bd914dec9..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../../testUtils'; -import { TypeCardInternal as TypeCard } from './TypeCard'; -import { ProblemTypeKeys } from '../../../../../../data/constants/problem'; - -describe('TypeCard', () => { - const props = { - answers: [], - blockTitle: 'BLocktiTLE', - correctAnswerCount: 0, - problemType: ProblemTypeKeys.TEXTINPUT, - setBlockTitle: jest.fn().mockName('args.setBlockTitle'), - updateField: jest.fn().mockName('args.updateField'), - updateAnswer: jest.fn().mockName('args.updateAnswer'), - // injected - intl: { formatMessage }, - }; - - describe('snapshot', () => { - test('snapshot: renders type setting card', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.tsx new file mode 100644 index 000000000..998397b33 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { render, screen, initializeMocks } from '@src/testUtils'; +import TypeCard from './TypeCard'; +import { ProblemTypeKeys } from '../../../../../../data/constants/problem'; + +describe('TypeCard', () => { + const props = { + answers: [], + blockTitle: 'BLocktiTLE', + correctAnswerCount: 0, + problemType: ProblemTypeKeys.TEXTINPUT, + setBlockTitle: jest.fn().mockName('args.setBlockTitle'), + updateField: jest.fn().mockName('args.updateField'), + updateAnswer: jest.fn().mockName('args.updateAnswer'), + }; + + beforeEach(() => { + initializeMocks(); + }); + + test('renders type setting card', () => { + render(); + expect(screen.getByText('Type')).toBeInTheDocument(); + expect(screen.getByText('Text input')).toBeInTheDocument(); + }); + + test('renders nothing if problemType is advanced', () => { + const { container } = render(); + expect(screen.queryByText('Type')).not.toBeInTheDocument(); + expect(container.firstChild?.textContent).toBe(''); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap deleted file mode 100644 index fbebc864f..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap +++ /dev/null @@ -1,121 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShowAnswerCard snapshot snapshot: show answer setting card 1`] = ` - - -
- - - -
-
- - - -
- - - - - - - - - - - - - - - - - - -`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap deleted file mode 100644 index 03f9dc771..000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap +++ /dev/null @@ -1,82 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TypeCard snapshot snapshot: renders type setting card 1`] = ` - - - - - - - -`; diff --git a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 1f8c21c76..000000000 --- a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,309 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = ` - -
- - Error: Could Not Load Text Content - - -
- -`; - -exports[`TextEditor snapshots loaded, raw editor 1`] = ` - -
- - Error: Could Not Load Text Content - - -
- -`; - -exports[`TextEditor snapshots not yet loaded, Spinner appears 1`] = ` - -
- - Error: Could Not Load Text Content - -
- -
-
- -`; - -exports[`TextEditor snapshots renders as expected with default behavior 1`] = ` - -
- - Error: Could Not Load Text Content - - -
- -`; - -exports[`TextEditor snapshots renders static images with relative paths 1`] = ` - -
- - Error: Could Not Load Text Content - - " - editorRef={ - { - "current": { - "value": "something", - }, - } - } - editorType="text" - enableImageUpload={true} - id={null} - images={{}} - initializeEditor={[MockFunction args.intializeEditor]} - isLibrary={null} - learningContextId="course+org+run" - lmsEndpointUrl="" - maxHeight={500} - minHeight={500} - onChange={[Function]} - setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]} - studioEndpointUrl="" - /> -
- -`; diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.tsx similarity index 67% rename from src/editors/containers/TextEditor/index.test.jsx rename to src/editors/containers/TextEditor/index.test.tsx index 2b386b3bb..6e57df221 100644 --- a/src/editors/containers/TextEditor/index.test.jsx +++ b/src/editors/containers/TextEditor/index.test.tsx @@ -1,49 +1,14 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - +import { render, screen, initializeMocks } from '@src/testUtils'; import { formatMessage } from '../../testUtils'; import { actions, selectors } from '../../data/redux'; import { RequestKeys } from '../../data/constants/requests'; import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.'; -// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce. -// Consequently, mock the Editor out. -jest.mock('@tinymce/tinymce-react', () => { - const originalModule = jest.requireActual('@tinymce/tinymce-react'); - return { - __esModule: true, - ...originalModule, - Editor: () => 'TiNYmCE EDitOR', - }; -}); +jest.mock('../../sharedComponents/TinyMceWidget', () => 'TinyMceWidget'); jest.mock('../EditorContainer', () => 'EditorContainer'); -jest.mock('./hooks', () => ({ - getContent: jest.fn(args => ({ getContent: args })), - isDirty: jest.fn(args => ({ isDirty: args })), - nullMethod: jest.fn().mockName('hooks.nullMethod'), -})); - -jest.mock('../../sharedComponents/TinyMceWidget/hooks', () => ({ - ...jest.requireActual('../../sharedComponents/TinyMceWidget/hooks'), - prepareEditorRef: jest.fn(() => ({ - editorRef: { current: { value: 'something' } }, - refReady: true, - setEditorRef: jest.fn().mockName('hooks.prepareEditorRef.setEditorRef'), - })), -})); - -jest.mock('react', () => { - const updateState = jest.fn(); - return { - ...jest.requireActual('react'), - updateState, - useState: jest.fn(val => ([{ state: val }, jest.fn().mockName('setState')])), - }; -}); - jest.mock('../../data/redux', () => ({ __esModule: true, default: jest.fn(), @@ -87,33 +52,52 @@ describe('TextEditor', () => { blockFinished: true, learningContextId: 'course+org+run', images: {}, + isLibrary: false, // inject intl: { formatMessage }, }; - describe('snapshots', () => { - test('renders as expected with default behavior', () => { - expect(shallow().snapshot).toMatchSnapshot(); + + afterAll(() => jest.restoreAllMocks()); + describe('renders', () => { + beforeEach(() => { + initializeMocks(); }); + + test('renders as expected with default behavior', () => { + const { container } = render(); + const element = container.querySelector('tinymcewidget'); + expect(element).toBeInTheDocument(); + expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text'); + }); + test('renders static images with relative paths', () => { const updatedProps = { ...props, blockValue: { data: { data: 'eDiTablE Text with ' } }, }; - expect(shallow().snapshot).toMatchSnapshot(); + const { container } = render(); + const element = container.querySelector('tinymcewidget'); + expect(element).toBeInTheDocument(); + expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text with '); }); test('not yet loaded, Spinner appears', () => { - expect(shallow().snapshot).toMatchSnapshot(); + const { container } = render(); + expect(container.querySelector('.pgn__spinner')).toBeInTheDocument(); }); test('loaded, raw editor', () => { - expect(shallow().snapshot).toMatchSnapshot(); + render(); + expect(screen.getByText('You are using the raw html editor.')).toBeInTheDocument(); }); test('block failed to load, Toast is shown', () => { - expect(shallow().snapshot).toMatchSnapshot(); + render(); + expect(screen.getByRole('alert')).toBeInTheDocument(); + expect(screen.getByText('Error: Could Not Load Text Content')).toBeInTheDocument(); }); }); describe('mapStateToProps', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; + // type set to any to prevent warning on not matchig expected type on the selectors + const testState: any = { A: 'pple', B: 'anana', C: 'ucumber' }; test('blockValue from app.blockValue', () => { expect( mapStateToProps(testState).blockValue, diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.tsx similarity index 65% rename from src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx rename to src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.tsx index b23f5040e..d7e2d4840 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.tsx @@ -1,12 +1,12 @@ -import 'CourseAuthoring/editors/setupEditorTest'; import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; import { thunkActions, selectors } from '../../../../../../data/redux'; -import * as module from './TranscriptActionMenu'; +import * as componentModule from './TranscriptActionMenu'; -const TranscriptActionMenu = module.TranscriptActionMenuInternal; +const TranscriptActionMenu = componentModule.TranscriptActionMenuInternal; jest.mock('react-redux', () => { const dispatchFn = jest.fn().mockName('mockUseDispatch'); @@ -49,7 +49,7 @@ describe('TranscriptActionMenu', () => { const result = { newFile: { mockFile, name: mockFileName }, newFilename: mockFileName, language: lang1Code }; test('it dispatches the correct thunk', () => { - const cb = module.hooks.replaceFileCallback({ + const cb = componentModule.hooks.replaceFileCallback({ dispatch: mockDispatch, language: lang1Code, }); cb(mockEvent); @@ -59,42 +59,51 @@ describe('TranscriptActionMenu', () => { }); }); - describe('Snapshots', () => { + describe('renders', () => { const props = { - index: 'sOmenUmBer', + index: 1, language: 'lAnG', launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'), // redux getTranscriptDownloadUrl: jest.fn().mockName('selectors.video.getTranscriptDownloadUrl'), - buildTranscriptUrl: jest.fn().mockName('selectors.video.buildTranscriptUrl'), + buildTranscriptUrl: jest.fn().mockName('selectors.video.buildTranscriptUrl').mockImplementation((url) => url.transcriptUrl), }; + beforeEach(() => { + initializeMocks(); + }); + afterAll(() => { jest.clearAllMocks(); }); - test('snapshots: renders as expected with default props: dont show confirm delete', () => { - jest.spyOn(module.hooks, 'replaceFileCallback').mockImplementationOnce(() => jest.fn().mockName('module.hooks.replaceFileCallback')); - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with default props', () => { + render(); + expect(screen.getByRole('button', { name: 'Actions dropdown' })).toBeInTheDocument(); }); - test('snapshots: renders as expected with transcriptUrl props: dont show confirm delete', () => { - jest.spyOn(module.hooks, 'replaceFileCallback').mockImplementationOnce(() => jest.fn().mockName('module.hooks.replaceFileCallback')); - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('snapshots: renders as expected with transcriptUrl props', () => { + render(); + const actionsDropdown = screen.getByRole('button', { name: 'Actions dropdown' }); + expect(actionsDropdown).toBeInTheDocument(); + fireEvent.click(actionsDropdown); + const downloadOption = screen.getByRole('link', { name: 'Download' }); + expect(downloadOption).toBeInTheDocument(); + expect(downloadOption).toHaveAttribute('href', 'url'); }); }); + describe('mapStateToProps', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; + // type set to any to prevent warning on not matchig expected type on the selectors + const testState: any = { A: 'pple', B: 'anana', C: 'ucumber' }; test('getTranscriptDownloadUrl from video.getTranscriptDownloadUrl', () => { expect( - module.mapStateToProps(testState).getTranscriptDownloadUrl, + componentModule.mapStateToProps(testState).getTranscriptDownloadUrl, ).toEqual(selectors.video.getTranscriptDownloadUrl(testState)); }); }); describe('mapDispatchToProps', () => { test('deleteTranscript from thunkActions.video.deleteTranscript', () => { - expect(module.mapDispatchToProps.downloadTranscript).toEqual(thunkActions.video.downloadTranscript); + expect(componentModule.mapDispatchToProps.downloadTranscript).toEqual(thunkActions.video.downloadTranscript); }); }); }); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap deleted file mode 100644 index f9c0bc533..000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap +++ /dev/null @@ -1,109 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TranscriptActionMenu Snapshots snapshots: renders as expected with default props: dont show confirm delete 1`] = ` - - - - - - - - - - - - - - - -`; - -exports[`TranscriptActionMenu Snapshots snapshots: renders as expected with transcriptUrl props: dont show confirm delete 1`] = ` - - - - - - - - - - - - - - - -`;