diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 7fcd593f04..0000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,451 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SettingsWidget isLibrary snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = ` -
-
- -
-
- -
- -
- - - - - -
- - -
- -
- -
-
-`; - -exports[`SettingsWidget isLibrary snapshot: renders Settings widget page 1`] = ` -
-
- -
-
- -
- -
- - - - - -
- - -
- -
- -
-
-`; - -exports[`SettingsWidget isLibrary snapshot: renders Settings widget page advanced settings visible 1`] = ` -
-
- -
-
- -
- -
- - - - - -
- - -
- -
- -
-
-`; - -exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = ` -
-
- -
-
- -
-
- -
- -
- - - - - -
- - -
- -
-
- -
-
- -
-
- -
- -
-
-`; - -exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = ` -
-
- -
-
- -
-
- -
- -
- - - - - -
- - -
- -
-
- -
-
- -
-
- -
- -
-
-`; - -exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = ` -
-
- -
-
- -
-
- -
- -
- - - - - -
- - -
- -
-
- -
-
- -
-
- -
- -
-
-`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx deleted file mode 100644 index 955bc8241e..0000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { showAdvancedSettingsCards } from './hooks'; -import { SettingsWidgetInternal as SettingsWidget, mapDispatchToProps } from '.'; -import { ProblemTypeKeys } from '../../../../../data/constants/problem'; -import { actions } from '../../../../../data/redux'; - -jest.mock('./hooks', () => ({ - showAdvancedSettingsCards: jest.fn(), -})); - -jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback'); -jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback'); -jest.mock('./settingsComponents/Randomization', () => 'Randomization'); -jest.mock('./settingsComponents/HintsCard', () => 'HintsCard'); -jest.mock('./settingsComponents/ResetCard', () => 'ResetCard'); -jest.mock('./settingsComponents/ScoringCard', () => 'ScoringCard'); -jest.mock('./settingsComponents/ShowAnswerCard', () => 'ShowAnswerCard'); -jest.mock('./settingsComponents/SwitchEditorCard', () => 'SwitchEditorCard'); -jest.mock('./settingsComponents/TimerCard', () => 'TimerCard'); -jest.mock('./settingsComponents/TypeCard', () => 'TypeCard'); - -describe('SettingsWidget', () => { - const props = { - problemType: ProblemTypeKeys.TEXTINPUT, - settings: {}, - defaultSettings: { - maxAttempts: 2, - showanswer: 'finished', - showResetButton: false, - }, - images: {}, - isLibrary: false, - learningContextId: 'course+org+run', - }; - - describe('behavior', () => { - it(' calls showAdvancedSettingsCards when initialized', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: false, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - shallow(); - expect(showAdvancedSettingsCards).toHaveBeenCalledWith(); - }); - }); - - describe('snapshot', () => { - test('snapshot: renders Settings widget page', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: false, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders Settings widget page advanced settings visible', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: true, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders Settings widget for Advanced Problem with correct widgets', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: true, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - }); - - describe('isLibrary', () => { - const libraryProps = { - ...props, - isLibrary: true, - }; - test('snapshot: renders Settings widget page', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: false, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders Settings widget page advanced settings visible', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: true, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders Settings widget for Advanced Problem with correct widgets', () => { - const showAdvancedSettingsCardsProps = { - isAdvancedCardsVisible: true, - setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), - }; - showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps); - expect(shallow( - , - ).snapshot).toMatchSnapshot(); - }); - }); - - describe('mapDispatchToProps', () => { - test('setBlockTitle from actions.app.setBlockTitle', () => { - expect(mapDispatchToProps.setBlockTitle).toEqual(actions.app.setBlockTitle); - }); - }); - - describe('mapDispatchToProps', () => { - test('updateSettings from actions.problem.updateSettings', () => { - expect(mapDispatchToProps.updateSettings).toEqual(actions.problem.updateSettings); - }); - }); - - describe('mapDispatchToProps', () => { - test('updateField from actions.problem.updateField', () => { - expect(mapDispatchToProps.updateField).toEqual(actions.problem.updateField); - }); - }); - - describe('mapDispatchToProps', () => { - test('updateAnswer from actions.problem.updateAnswer', () => { - expect(mapDispatchToProps.updateAnswer).toEqual(actions.problem.updateAnswer); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx new file mode 100644 index 0000000000..f74b710a36 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; +import * as hooks from './hooks'; +import { SettingsWidgetInternal as SettingsWidget } from '.'; +import { ProblemTypeKeys } from '../../../../../data/constants/problem'; + +jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback'); +jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback'); +jest.mock('./settingsComponents/Randomization', () => 'Randomization'); +jest.mock('./settingsComponents/HintsCard', () => 'HintsCard'); +jest.mock('./settingsComponents/ResetCard', () => 'ResetCard'); +jest.mock('./settingsComponents/ScoringCard', () => 'ScoringCard'); +jest.mock('./settingsComponents/ShowAnswerCard', () => 'ShowAnswerCard'); +jest.mock('./settingsComponents/SwitchEditorCard', () => 'SwitchEditorCard'); +jest.mock('./settingsComponents/TimerCard', () => 'TimerCard'); +jest.mock('./settingsComponents/TypeCard', () => 'TypeCard'); + +describe('SettingsWidget', () => { + const showAdvancedSettingsCardsBaseProps = { + isAdvancedCardsVisible: false, + showAdvancedCards: jest.fn().mockName('showAdvancedSettingsCards.showAdvancedCards'), + setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'), + }; + + const props = { + problemType: ProblemTypeKeys.TEXTINPUT, + settings: {}, + defaultSettings: { + maxAttempts: 2, + showanswer: 'finished', + showResetButton: false, + }, + images: {}, + isLibrary: false, + learningContextId: 'course+org+run', + setBlockTitle: jest.fn().mockName('setBlockTitle'), + blockTitle: '', + updateAnswer: jest.fn().mockName('updateAnswer'), + updateSettings: jest.fn().mockName('updateSettings'), + updateField: jest.fn().mockName('updateField'), + answers: [], + correctAnswerCount: 0, + groupFeedbackList: [], + showMarkdownEditorButton: false, + + }; + + beforeEach(() => { + initializeMocks(); + }); + + describe('behavior', () => { + it('calls showAdvancedSettingsCards when initialized', () => { + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps); + render(); + expect(hooks.showAdvancedSettingsCards).toHaveBeenCalled(); + }); + }); + + describe('renders', () => { + test('renders Settings widget page', () => { + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps); + render(); + expect(screen.getByText('Show advanced settings')).toBeInTheDocument(); + }); + + test('renders Settings widget page advanced settings visible', () => { + const showAdvancedSettingsCardsProps = { + ...showAdvancedSettingsCardsBaseProps, + isAdvancedCardsVisible: true, + }; + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps); + const { container } = render(); + expect(screen.queryByText('Show advanced settings')).not.toBeInTheDocument(); + expect(container.querySelector('showanswercard')).toBeInTheDocument(); + expect(container.querySelector('resetcard')).toBeInTheDocument(); + }); + + test('renders Settings widget for Advanced Problem with correct widgets', () => { + const showAdvancedSettingsCardsProps = { + ...showAdvancedSettingsCardsBaseProps, + isAdvancedCardsVisible: true, + }; + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps); + const { container } = render( + , + ); + expect(container.querySelector('randomization')).toBeInTheDocument(); + }); + }); + + describe('isLibrary', () => { + const libraryProps = { + ...props, + isLibrary: true, + }; + test('renders Settings widget page', () => { + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsBaseProps); + const { container } = render(); + expect(container.querySelector('timercard')).not.toBeInTheDocument(); + expect(container.querySelector('resetcard')).not.toBeInTheDocument(); + expect(container.querySelector('typecard')).toBeInTheDocument(); + expect(container.querySelector('hintscard')).toBeInTheDocument(); + expect(screen.getByText('Show advanced settings')).toBeInTheDocument(); + }); + + test('renders Settings widget page advanced settings visible', () => { + const showAdvancedSettingsCardsProps = { + ...showAdvancedSettingsCardsBaseProps, + isAdvancedCardsVisible: true, + }; + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps); + const { container } = render(); + expect(screen.queryByText('Show advanced settings')).not.toBeInTheDocument(); + expect(container.querySelector('showanswearscard')).not.toBeInTheDocument(); + expect(container.querySelector('resetcard')).not.toBeInTheDocument(); + expect(container.querySelector('typecard')).toBeInTheDocument(); + expect(container.querySelector('hintscard')).toBeInTheDocument(); + }); + + test('renders Settings widget for Advanced Problem with correct widgets', () => { + const showAdvancedSettingsCardsProps = { + ...showAdvancedSettingsCardsBaseProps, + isAdvancedCardsVisible: true, + }; + jest.spyOn(hooks, 'showAdvancedSettingsCards').mockReturnValue(showAdvancedSettingsCardsProps); + const { container } = render(); + expect(container.querySelector('randomization')).toBeInTheDocument(); + }); + }); +}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 08c3a66986..0000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,157 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RandomizationCard snapshot snapshot: renders randomization setting card with default randomization 1`] = ` - -
- {randomization, select, - null {No Python based randomization is present in this problem.} - other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".} - } -
- - - - - - - - -
-`; - -exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization defined 1`] = ` - -
- {randomization, select, - null {No Python based randomization is present in this problem.} - other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".} - } -
- - - - - - - - -
-`; - -exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization null 1`] = ` - -
- {randomization, select, - null {No Python based randomization is present in this problem.} - other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".} - } -
- - - - - - - - -
-`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx deleted file mode 100644 index d3438f6196..0000000000 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; -import { formatMessage } from '../../../../../../../testUtils'; -import { RandomizationCard } from './index'; -import { useRandomizationSettingStatus } from './hooks'; - -jest.mock('./hooks', () => ({ - useRandomizationSettingStatus: jest.fn(), -})); - -describe('RandomizationCard', () => { - const props = { - randomization: 'sOmE_vAlUE', - defaultValue: 'default_vAlUE', - updateSettings: jest.fn().mockName('args.updateSettings'), - intl: { formatMessage }, - }; - - const randomizationCardHooksProps = { - summary: { message: { defaultMessage: 'sUmmary' } }, - handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'), - }; - - useRandomizationSettingStatus.mockReturnValue(randomizationCardHooksProps); - - describe('behavior', () => { - it(' calls useRandomizationSettingStatus when initialized', () => { - shallow(); - expect(useRandomizationSettingStatus).toHaveBeenCalledWith( - { updateSettings: props.updateSettings, randomization: props.randomization }, - ); - }); - }); - - describe('snapshot', () => { - test('snapshot: renders randomization setting card with randomization defined', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders randomization setting card with default randomization', () => { - expect(shallow().snapshot).toMatchSnapshot(); - }); - test('snapshot: renders randomization setting card with randomization null', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - }); -}); diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx new file mode 100644 index 0000000000..eb85ea5267 --- /dev/null +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { + render, screen, initializeMocks, fireEvent, +} from '@src/testUtils'; +import { formatMessage } from '@src/editors/testUtils'; +import { RandomizationCard } from './index'; +import * as hooks from './hooks'; + +describe('RandomizationCard', () => { + const props = { + randomization: 'per_student', + defaultValue: 'always', + updateSettings: jest.fn().mockName('args.updateSettings'), + intl: { formatMessage }, + }; + + const randomizationCardHooksProps = { + summary: { message: { defaultMessage: 'sUmmary' } }, + handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'), + }; + + jest.spyOn(hooks, 'useRandomizationSettingStatus').mockReturnValue(randomizationCardHooksProps); + + beforeEach(() => { + initializeMocks(); + }); + + describe('behavior', () => { + it('calls useRandomizationSettingStatus when initialized', () => { + render(); + expect(hooks.useRandomizationSettingStatus).toHaveBeenCalledWith( + { updateSettings: props.updateSettings, randomization: props.randomization }, + ); + }); + }); + + describe('renders', () => { + test('renders randomization setting card with randomization defined', () => { + render(); + expect(screen.getByText('sUmmary')).toBeInTheDocument(); + expect(screen.getByText('Randomization')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: 'Randomization' })); + expect(screen.getByRole('combobox')).toHaveValue(props.randomization); + }); + + test('renders randomization setting card with default randomization', () => { + render(); + expect(screen.getByText('sUmmary')).toBeInTheDocument(); + expect(screen.getByText('Randomization')).toBeInTheDocument(); + fireEvent.click(screen.getByRole('button', { name: 'Randomization' })); + expect(screen.getByRole('combobox')).toHaveValue(props.defaultValue); + }); + + test('renders randomization setting card with randomization null', () => { + render(); + fireEvent.click(screen.getByRole('button', { name: 'Randomization' })); + expect(screen.getByRole('combobox')).toHaveValue('never'); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx deleted file mode 100644 index 48e4abdc38..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { actions } from '../../../../../../data/redux'; -import { LicenseDetailsInternal as LicenseDetails, mapStateToProps, mapDispatchToProps } from './LicenseDetails'; - -jest.mock('react', () => { - const updateState = jest.fn(); - return { - ...jest.requireActual('react'), - updateState, - useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })), - }; -}); - -jest.mock('../../../../../../data/redux', () => ({ - actions: { - video: { - updateField: jest.fn().mockName('actions.video.updateField'), - }, - }, -})); - -describe('LicenseDetails', () => { - const props = { - license: null, - details: {}, - level: 'course', - updateField: jest.fn().mockName('args.updateField'), - }; - - describe('snapshots', () => { - test('snapshots: renders as expected with default props', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with level set to library', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with level set to block and license set to select', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with level set to block and license set to all rights reserved', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with level set to block and license set to Creative Commons', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - }); - describe('mapStateToProps', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; - test('mapStateToProps equals an empty object', () => { - expect(mapStateToProps(testState)).toEqual({}); - }); - }); - describe('mapDispatchToProps', () => { - const dispatch = jest.fn(); - test('updateField from actions.video.updateField', () => { - expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); - }); - }); -}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx new file mode 100644 index 0000000000..0bf69f8ac6 --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { + render, screen, initializeMocks, +} from '@src/testUtils'; + +import { actions } from '../../../../../../data/redux'; +import { LicenseDetailsInternal as LicenseDetails, mapStateToProps, mapDispatchToProps } from './LicenseDetails'; + +jest.mock('../../../../../../data/redux', () => ({ + actions: { + video: { + updateField: jest.fn().mockName('actions.video.updateField'), + }, + }, +})); + +describe('LicenseDetails', () => { + const props = { + license: '', + details: { + attribution: false, + noncommercial: false, + noDerivatives: false, + shareAlike: false, + }, + level: 'course', + updateField: jest.fn().mockName('args.updateField'), + }; + + beforeEach(() => { + initializeMocks(); + }); + + describe('renders', () => { + test('renders as expected with default props', () => { + const { container } = render(); + const reduxWrapper = (container.firstChild as HTMLElement); + expect(reduxWrapper?.innerHTML).toBe(''); + expect(screen.queryByText('License Details')).not.toBeInTheDocument(); + }); + + test('renders as expected with level set to library', () => { + render(); + expect(screen.queryByText('License Details')).toBeInTheDocument(); + }); + + test('renders as expected with level set to block and license set to select', () => { + const { container } = render(); + const reduxWrapper = (container.firstChild as HTMLElement); + expect(reduxWrapper?.innerHTML).toBe(''); + expect(screen.queryByText('License Details')).not.toBeInTheDocument(); + }); + + test('renders as expected with level set to block and license set to all rights reserved', () => { + render(); + expect(screen.queryByText('License Details')).toBeInTheDocument(); + expect(screen.queryByText('You reserve all rights for your work.')).toBeInTheDocument(); + }); + + test('renders as expected with level set to block and license set to Creative Commons', () => { + render(); + expect(screen.queryByText('License Details')).toBeInTheDocument(); + expect(screen.getByRole('checkbox', { name: 'Attribution' })).toBeInTheDocument(); + expect(screen.getByRole('checkbox', { name: 'Noncommercial' })).toBeInTheDocument(); + expect(screen.getByRole('checkbox', { name: 'Share Alike' })).toBeInTheDocument(); + expect(screen.getByRole('checkbox', { name: 'No Derivatives' })).toBeInTheDocument(); + }); + }); + describe('mapStateToProps', () => { + const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; + test('mapStateToProps equals an empty object', () => { + // @ts-ignore-next-line + expect(mapStateToProps(testState)).toEqual({}); + }); + }); + describe('mapDispatchToProps', () => { + const dispatch = jest.fn(); + test('updateField from actions.video.updateField', () => { + // @ts-ignore-next-line + expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap deleted file mode 100644 index 9e608e8c68..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap +++ /dev/null @@ -1,198 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LicenseDetails snapshots snapshots: renders as expected with default props 1`] = `false`; - -exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = ` -
- -
- -
- -
- - - - - - - - - - -
- -
-
-
- - - - - - - - - - -
- -
-
-
- - - - - - - - - - -
- -
-
-
- - - - - - - - - - -
- -
-
-
-
-
-`; - -exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = ` -
- -
- -
-
- -
-
-
-`; - -exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to select 1`] = `false`; - -exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = ` -
- -
- -
-
-
-`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 31ad92d693..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,85 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SocialShareWidget rendered with videoSharingEnabled false with default props should return null 1`] = `null`; - -exports[`SocialShareWidget rendered with videoSharingEnabled false with videoSharingEnabledForAll false and isLibrary true should return null 1`] = `null`; - -exports[`SocialShareWidget rendered with videoSharingEnabled false with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true should return null 1`] = `null`; - -exports[`SocialShareWidget rendered with videoSharingEnabled true and allowVideoSharing value equals false should have subtitle with text that reads Enabled 1`] = ` - -
- -
- -
- This video is shareable to social media -
-
-
- - Learn more about social sharing - -
-
-`; - -exports[`SocialShareWidget rendered with videoSharingEnabled true and allowVideoSharing value equals true should have subtitle with text that reads Enabled 1`] = ` - -
- -
- -
- This video is shareable to social media -
-
-
- - Learn more about social sharing - -
-
-`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx deleted file mode 100644 index 2d7fccd76c..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx +++ /dev/null @@ -1,274 +0,0 @@ -import 'CourseAuthoring/editors/setupEditorTest'; -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { formatMessage } from '../../../../../../testUtils'; -import { actions, selectors } from '../../../../../../data/redux'; -import { SocialShareWidgetInternal as SocialShareWidget, mapStateToProps, mapDispatchToProps } from '.'; -import messages from './messages'; - -jest.mock('react', () => { - const updateState = jest.fn(); - return { - ...jest.requireActual('react'), - updateState, - useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })), - }; -}); - -jest.mock('../../../../../../data/redux', () => ({ - actions: { - video: { - updateField: jest.fn().mockName('actions.video.updateField'), - }, - }, - selectors: { - app: { - isLibrary: jest.fn(state => ({ isLibrary: state })), - }, - video: { - allowVideoSharing: jest.fn(state => ({ allowVideoSharing: state })), - videoSharingEnabledForAll: jest.fn(state => ({ videoSharingEnabledForAll: state })), - videoSharingEnabledForCourse: jest.fn(state => ({ videoSharingEnabledForCourse: state })), - videoSharingLearnMoreLink: jest.fn(state => ({ videoSharingLearnMoreLink: state })), - }, - }, -})); - -describe('SocialShareWidget', () => { - const props = { - title: 'tiTLE', - intl: { formatMessage }, - videoSharingEnabledForCourse: false, - videoSharingEnabledForAll: false, - isLibrary: false, - allowVideoSharing: { - level: 'block', - value: false, - }, - videoSharingLearnMoreLink: 'sOMeURl.cOM', - updateField: jest.fn().mockName('args.updateField'), - }; - - describe('rendered with videoSharingEnabled false', () => { - describe('with default props', () => { - it('should return null', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); - }); - }); - describe('with videoSharingEnabledForAll false and isLibrary true', () => { - it('should return null', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); - }); - }); - describe('with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true', () => { - it('should return null', () => { - const wrapper = shallow(); - expect(wrapper.snapshot).toMatchSnapshot(); - }); - }); - }); - - describe('rendered with videoSharingEnabled true', () => { - describe('and allowVideoSharing value equals true', () => { - describe(' with level equal to course', () => { - const wrapper = shallow(); - it('should have setting location message', () => { - const settingLocationDisclaimer = wrapper.instance.findByType('FormattedMessage')[2].props.defaultMessage; - expect(settingLocationDisclaimer).toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should have checkbox disabled prop equal true', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(true); - }); - }); - describe(' with level equal to block', () => { - const wrapper = shallow(); - it('should not have setting location message', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages[0]).not.toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should not have override note', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages[0]).not.toEqual(messages.overrideSocialSharingNote.defaultMessage); - }); - it('should have checkbox disabled prop equal false', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(false); - }); - }); - describe('isLibrary equals true', () => { - const wrapper = shallow(); - it('should not have setting location message', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages[0]).not.toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should not have override note', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages[0]).not.toEqual(messages.overrideSocialSharingNote.defaultMessage); - }); - it('should have checkbox disabled prop equal false', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(false); - }); - }); - it('should have subtitle with text that reads Enabled', () => { - const wrapper = shallow(); - const { subtitle } = wrapper.shallowWrapper.props; - expect(wrapper.snapshot).toMatchSnapshot(); - expect(subtitle).toEqual('Enabled'); - }); - }); - describe('and allowVideoSharing value equals false', () => { - describe(' with level equal to course', () => { - const wrapper = shallow(); - it('should have setting location message', () => { - const settingLocationDisclaimer = wrapper.instance.findByType('FormattedMessage')[2].props.defaultMessage; - expect(settingLocationDisclaimer).toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should have checkbox disabled prop equal true', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(true); - }); - }); - describe(' with level equal to block', () => { - const wrapper = shallow(); - it('should not have setting location message', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages.at(0)).not.toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should not have override note', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages.at(0)).not.toEqual(messages.overrideSocialSharingNote.defaultMessage); - }); - it('should have checkbox disabled prop equal false', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(false); - }); - }); - describe('isLibrary equals true', () => { - const wrapper = shallow(); - it('should not have setting location message', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages.at(0)).not.toEqual(messages.disclaimerSettingLocation.defaultMessage); - }); - it('should not have override note', () => { - const formattedMessages = wrapper.instance.findByType('FormattedMessage'); - expect(formattedMessages.length).toEqual(1); - expect(formattedMessages.at(0)).not.toEqual(messages.overrideSocialSharingNote.defaultMessage); - }); - it('should have checkbox disabled prop equal false', () => { - const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled; - expect(disabledCheckbox).toEqual(false); - }); - }); - it('should have subtitle with text that reads Enabled', () => { - const wrapper = shallow(); - const { subtitle } = wrapper.shallowWrapper.props; - expect(wrapper.snapshot).toMatchSnapshot(); - expect(subtitle).toEqual('Disabled'); - }); - }); - }); - describe('mapStateToProps', () => { - const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; - test('isLibrary from app.isLibrary', () => { - expect( - mapStateToProps(testState).isLibrary, - ).toEqual(selectors.app.isLibrary(testState)); - }); - test('allowVideoSharing from video.allowVideoSharing', () => { - expect( - mapStateToProps(testState).allowVideoSharing, - ).toEqual(selectors.video.allowVideoSharing(testState)); - }); - test('videoSharingEnabledForCourse from video.videoSharingEnabledForCourse', () => { - expect( - mapStateToProps(testState).videoSharingEnabledForCourse, - ).toEqual(selectors.video.videoSharingEnabledForCourse(testState)); - }); - test('videoSharingEnabledForAll from video.videoSharingEnabledForAll', () => { - expect( - mapStateToProps(testState).videoSharingEnabledForAll, - ).toEqual(selectors.video.videoSharingEnabledForAll(testState)); - }); - test('videoSharingLearnMoreLink from video.videoSharingLearnMoreLink', () => { - expect( - mapStateToProps(testState).videoSharingLearnMoreLink, - ).toEqual(selectors.video.videoSharingLearnMoreLink(testState)); - }); - }); - describe('mapDispatchToProps', () => { - const dispatch = jest.fn(); - test('updateField from actions.video.updateField', () => { - expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); - }); - }); -}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx new file mode 100644 index 0000000000..b93e847a1d --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.tsx @@ -0,0 +1,318 @@ +import React from 'react'; +import { + render, screen, initializeMocks, + fireEvent, +} from '@src/testUtils'; + +import { formatMessage } from '../../../../../../testUtils'; +import { SocialShareWidgetInternal as SocialShareWidget } from '.'; +import * as hooks from './hooks'; + +jest.mock('../../../../../../data/redux', () => ({ + actions: { + video: { + updateField: jest.fn().mockName('actions.video.updateField'), + }, + }, + selectors: { + app: { + isLibrary: jest.fn(state => ({ isLibrary: state })), + }, + video: { + allowVideoSharing: jest.fn(state => ({ allowVideoSharing: state })), + videoSharingEnabledForAll: jest.fn(state => ({ videoSharingEnabledForAll: state })), + videoSharingEnabledForCourse: jest.fn(state => ({ videoSharingEnabledForCourse: state })), + videoSharingLearnMoreLink: jest.fn(state => ({ videoSharingLearnMoreLink: state })), + }, + }, +})); + +describe('SocialShareWidget', () => { + const props = { + intl: { formatMessage }, + videoSharingEnabledForCourse: false, + videoSharingEnabledForAll: false, + isLibrary: false, + allowVideoSharing: { + level: 'block', + value: false, + }, + videoSharingLearnMoreLink: 'sOMeURl.cOM', + updateField: jest.fn().mockName('args.updateField'), + }; + + beforeEach(() => { + initializeMocks(); + jest.spyOn(hooks, 'useTrackSocialSharingChange').mockReturnValue(jest.fn()); + }); + + describe('rendered with videoSharingEnabled false', () => { + describe('with default props', () => { + it('should return null', () => { + const { container } = render(); + const reduxWrapper = container.firstChild; + expect(reduxWrapper?.textContent).toBe(''); + }); + }); + + describe('with videoSharingEnabledForAll false and isLibrary true', () => { + it('should return null', () => { + const { container } = render(); + const reduxWrapper = container.firstChild; + expect(reduxWrapper?.textContent).toBe(''); + }); + }); + + describe('with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true', () => { + it('should return null', () => { + const { container } = render(); + const reduxWrapper = container.firstChild; + expect(reduxWrapper?.textContent).toBe(''); + }); + }); + }); + + describe('rendered with videoSharingEnabled true', () => { + describe('and allowVideoSharing value equals true', () => { + describe(' with level equal to course', () => { + it('should have setting location message', () => { + render(); + expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal true', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeDisabled(); + }); + }); + describe(' with level equal to block', () => { + it('should not have setting location message', () => { + render(); + expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument(); + }); + it('should not have override note', () => { + render(); + expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal false', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeDisabled(); + }); + }); + describe('isLibrary equals true', () => { + it('should not have setting location message', () => { + render(); + expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument(); + }); + it('should not have override note', () => { + render(); + expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal false', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeDisabled(); + }); + }); + it('should have subtitle with text that reads Enabled', () => { + render(); + expect(screen.getByText('Social Sharing')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Social Sharing')); + const subtitle = screen.getByText('Enabled'); + expect(subtitle).toBeInTheDocument(); + }); + }); + + describe('and allowVideoSharing value equals false', () => { + describe(' with level equal to course', () => { + it('should have setting location message', () => { + render(); + expect(screen.getByText('Change this setting on the course outline page.')).toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal true', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeDisabled(); + }); + }); + + describe(' with level equal to block', () => { + it('should not have setting location message', () => { + render(); + expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument(); + }); + it('should not have override note', () => { + render(); + expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal false', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeEnabled(); + }); + }); + + describe('isLibrary equals true', () => { + it('should not have setting location message', () => { + render(); + expect(screen.queryByText('Change this setting on the course outline page.')).not.toBeInTheDocument(); + }); + it('should not have override note', () => { + render(); + expect(screen.queryByText('Note: This setting is overridden by the course outline page.')).not.toBeInTheDocument(); + }); + it('should have checkbox disabled prop equal false', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'This video is shareable to social media' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeEnabled(); + }); + }); + it('should have subtitle with text that reads Enabled', () => { + render(); + expect(screen.getByText('Social Sharing')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Social Sharing')); + const subtitle = screen.getByText('Disabled'); + expect(subtitle).toBeInTheDocument(); + }); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 142328e51d..0000000000 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,925 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TranscriptWidget component snapshots snapshot: render when \`isCreateWorkflow\` is \`True\` 1`] = ` -
- - - Transcripts -
- } - > -
- To add transcripts, save and reopen this video -
- - - -`; - -exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with delete error message 1`] = ` - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with upload error message 1`] = ` - - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptDownloads true 1`] = ` - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptImport true 1`] = ` - - - - - - - - - - - - -
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with default props 1`] = ` - - - - - - - - - - - -
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with showTranscriptByDefault true 1`] = ` - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcript urls 1`] = ` - - - - - - - - - - - -
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts 1`] = ` - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; - -exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts and urls 1`] = ` - - - - - - - - - - - - -
- -
-
- - - - } - placement="top" - > - - - -
- -
- -
-
-
-
- -
-
-
-`; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.tsx similarity index 50% rename from src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx rename to src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.tsx index 23d8088a9c..8174a509ce 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.tsx @@ -1,24 +1,16 @@ -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, +} from '@src/testUtils'; +import * as reactredux from 'react-redux'; import { RequestKeys } from '../../../../../../data/constants/requests'; import { formatMessage } from '../../../../../../testUtils'; import { actions, selectors } from '../../../../../../data/redux'; -// This 'module' self-import hack enables mocking during tests. -// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested -// should be re-thought and cleaned up to avoid this pattern. -// eslint-disable-next-line import/no-self-import -import * as module from './index'; - -const TranscriptWidget = module.TranscriptWidgetInternal; - -jest.mock('react', () => ({ - ...jest.requireActual('react'), - useContext: jest.fn(() => ({ transcripts: ['error.transcripts', jest.fn().mockName('error.setTranscripts')] })), -})); +import { + TranscriptWidgetInternal as TranscriptWidget, mapStateToProps, mapDispatchToProps, hooks, +} from './index'; jest.mock('../../../../../../data/redux', () => ({ actions: { @@ -59,48 +51,48 @@ jest.mock('react-redux', () => ({ useSelector: jest.fn(), })); -useSelector.mockImplementation((selectorFn) => selectorFn({})); +jest.spyOn(reactredux, 'useSelector').mockImplementation((selectorFn) => selectorFn({})); describe('TranscriptWidget', () => { beforeEach(() => { - selectors.app.shouldCreateBlock.mockReset(); + jest.spyOn(selectors.app, 'shouldCreateBlock').mockReset(); }); describe('hooks', () => { describe('transcriptLanguages', () => { test('empty list of transcripts returns ', () => { - expect(module.hooks.transcriptLanguages([])).toEqual('None'); + expect(hooks.transcriptLanguages([])).toEqual('None'); }); test('unset gives none', () => { - expect(module.hooks.transcriptLanguages(['', ''])).toEqual(''); + expect(hooks.transcriptLanguages(['', ''])).toEqual(''); }); test('en gives English', () => { - expect(module.hooks.transcriptLanguages(['en'])).toEqual('English'); + expect(hooks.transcriptLanguages(['en'])).toEqual('English'); }); test('en, FR gives English, French', () => { - expect(module.hooks.transcriptLanguages(['en', 'fr'])).toEqual('English, French'); + expect(hooks.transcriptLanguages(['en', 'fr'])).toEqual('English, French'); }); }); describe('hasTranscripts', () => { test('null returns false ', () => { - expect(module.hooks.hasTranscripts(null)).toEqual(false); + expect(hooks.hasTranscripts(null)).toEqual(false); }); test('empty list returns false', () => { - expect(module.hooks.hasTranscripts([])).toEqual(false); + expect(hooks.hasTranscripts([])).toEqual(false); }); test('content returns true', () => { - expect(module.hooks.hasTranscripts(['en'])).toEqual(true); + expect(hooks.hasTranscripts(['en'])).toEqual(true); }); }); describe('onAddNewTranscript', () => { const mockUpdateField = jest.fn(); test('null returns [empty string] ', () => { - module.hooks.onAddNewTranscript({ transcripts: null, updateField: mockUpdateField }); + hooks.onAddNewTranscript({ transcripts: null, updateField: mockUpdateField }); expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: [''] }); }); test(' transcripts return list with blank added', () => { const mocklist = ['en', 'fr', 3]; - module.hooks.onAddNewTranscript({ transcripts: mocklist, updateField: mockUpdateField }); + hooks.onAddNewTranscript({ transcripts: mocklist, updateField: mockUpdateField }); expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: ['en', 'fr', 3, ''] }); }); @@ -123,96 +115,110 @@ describe('TranscriptWidget', () => { isDeleteError: false, }; - describe('snapshots', () => { - test('snapshots: renders as expected with default props', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); - }); - test('snapshots: renders as expected with allowTranscriptImport true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + beforeEach(() => { + initializeMocks(); + }); + + describe('render component', () => { + test('renders as expected with default props', () => { + const { container } = render(); + expect(container.querySelector('collapsibleformwidget')).toBeInTheDocument(); + expect(screen.getByText('Add video transcripts (.srt files only) for improved accessibility.')).toBeInTheDocument(); }); - test('snapshots: renders as expected with transcripts', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with allowTranscriptImport true', () => { + render(); + expect(screen.getByText('We found transcript for this video on YouTube. Would you like to import it now?')).toBeInTheDocument(); }); - test('snapshots: renders as expected with transcript urls', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with transcripts', () => { + const { container } = render(); + expect(container.querySelector('transcript')).toBeInTheDocument(); + expect(container.querySelector('transcript')).toHaveAttribute('language', 'en'); }); - test('snapshots: renders as expected with transcripts and urls', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with transcripts and urls', () => { + const { container } = render(); + expect(container.querySelector('transcript')).toBeInTheDocument(); + expect(container.querySelector('transcript')).toHaveAttribute('language', 'en'); + expect(container.querySelector('transcript')).toHaveAttribute('transcriptUrl', 'url'); }); - test('snapshots: renders as expected with allowTranscriptDownloads true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with allowTranscriptDownloads true', () => { + const { container } = render(); + expect(container.querySelector('transcript')).toBeInTheDocument(); + expect(container.querySelector('transcript')).toHaveAttribute('language', 'en'); + const checkbox = screen.getByRole('checkbox', { name: 'Allow transcript downloads' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeChecked(); }); - test('snapshots: renders as expected with showTranscriptByDefault true', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + + test('renders as expected with showTranscriptByDefault true', () => { + render(); + const checkbox = screen.getByRole('checkbox', { name: 'Show transcript in the video player by default' }); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).toBeChecked(); }); + test('snapshot: renders ErrorAlert with upload error message', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + render(); + expect(screen.getByText('Failed to upload transcript. Please try again.')).toBeInTheDocument(); }); + test('snapshot: renders ErrorAlert with delete error message', () => { - expect( - shallow().snapshot, - ).toMatchSnapshot(); + render(); + expect(screen.getByText('Failed to delete transcript. Please try again.')).toBeInTheDocument(); }); + test('snapshot: render when `isCreateWorkflow` is `True`', () => { - selectors.app.shouldCreateBlock.mockReturnValue(true); - expect( - shallow().snapshot, - ).toMatchSnapshot(); + jest.spyOn(selectors.app, 'shouldCreateBlock').mockReturnValue(true); + render(); + expect(screen.getByText('Transcripts')).toBeInTheDocument(); + expect(screen.getByText('To add transcripts, save and reopen this video')).toBeInTheDocument(); }); }); describe('mapStateToProps', () => { const testState = { A: 'pple', B: 'anana', C: 'ucumber' }; test('transcripts from video.transcript', () => { expect( - module.mapStateToProps(testState).transcripts, + mapStateToProps(testState).transcripts, + // @ts-ignore ).toEqual(selectors.video.transcripts(testState)); }); test('allowTranscriptDownloads from video.allowTranscriptDownloads', () => { expect( - module.mapStateToProps(testState).allowTranscriptDownloads, + mapStateToProps(testState).allowTranscriptDownloads, + // @ts-ignore ).toEqual(selectors.video.allowTranscriptDownloads(testState)); }); test('showTranscriptByDefault from video.showTranscriptByDefault', () => { expect( - module.mapStateToProps(testState).showTranscriptByDefault, + mapStateToProps(testState).showTranscriptByDefault, + // @ts-ignore ).toEqual(selectors.video.showTranscriptByDefault(testState)); }); test('allowTranscriptImport from video.allowTranscriptImport', () => { expect( - module.mapStateToProps(testState).allowTranscriptImport, + mapStateToProps(testState).allowTranscriptImport, + // @ts-ignore ).toEqual(selectors.video.allowTranscriptImport(testState)); }); test('isUploadError from requests.isFinished', () => { expect( - module.mapStateToProps(testState).isUploadError, + mapStateToProps(testState).isUploadError, ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.uploadTranscript })); }); test('isDeleteError from requests.isFinished', () => { expect( - module.mapStateToProps(testState).isDeleteError, + mapStateToProps(testState).isDeleteError, ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.deleteTranscript })); }); }); describe('mapDispatchToProps', () => { const dispatch = jest.fn(); test('updateField from actions.video.updateField', () => { - expect(module.mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); + // @ts-ignore + expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField)); }); }); });