diff --git a/src/editors/containers/VideoGallery/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoGallery/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 31dc76953..000000000 --- a/src/editors/containers/VideoGallery/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,95 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`VideoGallery component snapshot 1`] = ` -
- -
-`; diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js index 84104711b..2eabcfc28 100644 --- a/src/editors/containers/VideoGallery/hooks.js +++ b/src/editors/containers/VideoGallery/hooks.js @@ -19,7 +19,7 @@ export const state = { hideSelectedVideos: (val) => React.useState(val), }; -export const searchAndSortHooks = () => { +export const searchAndSortProps = () => { const [searchString, setSearchString] = module.state.searchString(''); const [sortBy, setSortBy] = module.state.sortBy(sortKeys.dateNewest); const [filterBy, setFilterBy] = module.state.filertBy(filterKeys.videoStatus); @@ -80,7 +80,7 @@ export const filterList = ({ return filteredList.sort(sortFunctions[sortBy in sortKeys ? sortKeys[sortBy] : sortKeys.dateNewest]); }; -export const videoListHooks = ({ searchSortProps, videos }) => { +export const videoListProps = ({ searchSortProps, videos }) => { const [highlighted, setHighlighted] = module.state.highlighted(null); const [ showSelectVideoError, @@ -123,7 +123,7 @@ export const videoListHooks = ({ searchSortProps, videos }) => { }; }; -export const fileInputHooks = () => { +export const fileInputProps = () => { // TODO [Update video] Implement this const ref = React.useRef(); const click = () => ref.current.click(); @@ -137,9 +137,9 @@ export const fileInputHooks = () => { export const buildVideos = ({ rawVideos }) => { let videos = []; - const videoList = Object.values(rawVideos); - if (videoList.length > 0) { - videos = videoList.map(video => ({ + const rawVideoList = Object.values(rawVideos); + if (rawVideoList.length > 0) { + videos = rawVideoList.map(video => ({ id: video.edx_video_id, displayName: video.client_video_id, externalUrl: video.course_video_image_url, @@ -167,16 +167,16 @@ export const getstatusBadgeVariant = ({ status }) => { } }; -export const videoHooks = ({ videos }) => { - const searchSortProps = module.searchAndSortHooks(); - const videoList = module.videoListHooks({ searchSortProps, videos }); +export const videoProps = ({ videos }) => { + const searchSortProps = module.searchAndSortProps(); + const videoList = module.videoListProps({ searchSortProps, videos }); const { galleryError, galleryProps, inputError, selectBtnProps, } = videoList; - const fileInput = module.fileInputHooks(); + const fileInput = module.fileInputProps(); return { galleryError, @@ -189,6 +189,6 @@ export const videoHooks = ({ videos }) => { }; export default { - videoHooks, + videoProps, buildVideos, }; diff --git a/src/editors/containers/VideoGallery/hooks.test.js b/src/editors/containers/VideoGallery/hooks.test.js index 43d0b77f0..d3ad83e97 100644 --- a/src/editors/containers/VideoGallery/hooks.test.js +++ b/src/editors/containers/VideoGallery/hooks.test.js @@ -41,9 +41,9 @@ describe('VideoGallery hooks', () => { beforeEach(() => { state.mock(); }); afterEach(() => { state.restore(); }); - describe('searchAndSortHooks', () => { + describe('searchAndSortProps', () => { beforeEach(() => { - hook = hooks.searchAndSortHooks(); + hook = hooks.searchAndSortProps(); }); it('returns searchString value, initialized to an empty string', () => { expect(state.stateVals.searchString).toEqual(hook.searchString); @@ -152,7 +152,7 @@ describe('VideoGallery hooks', () => { expect(value).toBeNull(); }); }); - describe('videoListHooks outputs', () => { + describe('videoListProps outputs', () => { const props = { searchSortProps: { searchString: 'Es', @@ -170,7 +170,7 @@ describe('VideoGallery hooks', () => { const filterList = (args) => ({ filterList: args }); const load = () => { jest.spyOn(hooks, hookKeys.filterList).mockImplementationOnce(filterList); - hook = hooks.videoListHooks(props); + hook = hooks.videoListProps(props); }; beforeEach(() => { load(); @@ -196,7 +196,7 @@ describe('VideoGallery hooks', () => { const show = 'sHOWSelectiRROr'; expect(hook.galleryError.show).toEqual(false); state.mockVal(state.keys.showSelectVideoError, show); - hook = hooks.videoListHooks(props); + hook = hooks.videoListProps(props); expect(hook.galleryError.show).toEqual(show); }); test('set sets showSelectVideoError to true', () => { @@ -210,44 +210,44 @@ describe('VideoGallery hooks', () => { }); }); }); - describe('videoHooks', () => { - const videoListHooks = { + describe('videoProps', () => { + const videoList = { galleryProps: 'some gallery props', selectBtnProps: 'some select btn props', }; - const searchAndSortHooks = { search: 'props' }; - const fileInputHooks = { file: 'input hooks' }; + const searchAndSortProps = { search: 'props' }; + const fileInput = { file: 'input hooks' }; const videos = { video: { staTICUrl: '/assets/sOmEuiMAge' } }; const spies = {}; beforeEach(() => { - spies.videoList = jest.spyOn(hooks, hookKeys.videoListHooks) - .mockReturnValueOnce(videoListHooks); - spies.search = jest.spyOn(hooks, hookKeys.searchAndSortHooks) - .mockReturnValueOnce(searchAndSortHooks); - spies.file = jest.spyOn(hooks, hookKeys.fileInputHooks) - .mockReturnValueOnce(fileInputHooks); - hook = hooks.videoHooks({ videos }); + spies.videoList = jest.spyOn(hooks, hookKeys.videoListProps) + .mockReturnValueOnce(videoList); + spies.search = jest.spyOn(hooks, hookKeys.searchAndSortProps) + .mockReturnValueOnce(searchAndSortProps); + spies.file = jest.spyOn(hooks, hookKeys.fileInputProps) + .mockReturnValueOnce(fileInput); + hook = hooks.videoProps({ videos }); }); - it('forwards fileInputHooks as fileInput', () => { - expect(hook.fileInput).toEqual(fileInputHooks); + it('forwards fileInput as fileInput', () => { + expect(hook.fileInput).toEqual(fileInput); expect(spies.file.mock.calls.length).toEqual(1); expect(spies.file).toHaveBeenCalled(); }); - it('initializes videoListHooks', () => { + it('initializes videoList', () => { expect(spies.videoList.mock.calls.length).toEqual(1); expect(spies.videoList).toHaveBeenCalledWith({ - searchSortProps: searchAndSortHooks, + searchSortProps: searchAndSortProps, videos, }); }); it('forwards searchAndSortHooks as searchSortProps', () => { - expect(hook.searchSortProps).toEqual(searchAndSortHooks); + expect(hook.searchSortProps).toEqual(searchAndSortProps); expect(spies.search.mock.calls.length).toEqual(1); expect(spies.search).toHaveBeenCalled(); }); it('forwards galleryProps and selectBtnProps from the video list hooks', () => { - expect(hook.galleryProps).toEqual(videoListHooks.galleryProps); - expect(hook.selectBtnProps).toEqual(videoListHooks.selectBtnProps); + expect(hook.galleryProps).toEqual(videoList.galleryProps); + expect(hook.selectBtnProps).toEqual(videoList.selectBtnProps); }); }); }); diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx index 0f1cced0b..8ea788349 100644 --- a/src/editors/containers/VideoGallery/index.jsx +++ b/src/editors/containers/VideoGallery/index.jsx @@ -23,7 +23,7 @@ export const VideoGallery = ({ galleryProps, searchSortProps, selectBtnProps, - } = hooks.videoHooks({ videos }); + } = hooks.videoProps({ videos }); const modalMessages = { confirmMsg: messages.selectVideoButtonlabel, diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 58469c424..31d3896ba 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -9,7 +9,7 @@ jest.mock('../../sharedComponents/SelectionModal', () => 'SelectionModal'); jest.mock('./hooks', () => ({ buildVideos: jest.fn(() => []), - videoHooks: jest.fn(() => ({ + videoProps: jest.fn(() => ({ galleryError: { show: 'ShoWERror gAlLery', set: jest.fn(), @@ -60,31 +60,28 @@ describe('VideoGallery', () => { isUploadError: false, }; let el; - const videoHooks = hooks.videoHooks(); + const videoProps = hooks.videoProps(); beforeEach(() => { el = shallow(); }); - test('snapshot', () => { - expect(el).toMatchSnapshot(); - }); it('provides confirm action, forwarding selectBtnProps from imgHooks', () => { expect(el.find(SelectionModal).props().selectBtnProps).toEqual( - expect.objectContaining({ ...hooks.videoHooks().selectBtnProps }), + expect.objectContaining({ ...hooks.videoProps().selectBtnProps }), ); }); it('provides file upload button linked to fileInput.click', () => { expect(el.find(SelectionModal).props().fileInput.click).toEqual( - videoHooks.fileInput.click, + videoProps.fileInput.click, ); }); it('provides a SearchSort component with searchSortProps from imgHooks', () => { - expect(el.find(SelectionModal).props().searchSortProps).toEqual(videoHooks.searchSortProps); + expect(el.find(SelectionModal).props().searchSortProps).toEqual(videoProps.searchSortProps); }); it('provides a Gallery component with galleryProps from imgHooks', () => { - expect(el.find(SelectionModal).props().galleryProps).toEqual(videoHooks.galleryProps); + expect(el.find(SelectionModal).props().galleryProps).toEqual(videoProps.galleryProps); }); it('provides a FileInput component with fileInput props from imgHooks', () => { - expect(el.find(SelectionModal).props().fileInput).toMatchObject(videoHooks.fileInput); + expect(el.find(SelectionModal).props().fileInput).toMatchObject(videoProps.fileInput); }); }); }); diff --git a/src/editors/sharedComponents/SelectionModal/index.test.jsx b/src/editors/sharedComponents/SelectionModal/index.test.jsx index 2f9389059..164204194 100644 --- a/src/editors/sharedComponents/SelectionModal/index.test.jsx +++ b/src/editors/sharedComponents/SelectionModal/index.test.jsx @@ -11,7 +11,7 @@ const props = { size: 'fullscreen', isFullscreenScroll: false, galleryError: { - show: 'ShoWERror gAlLery', + show: false, set: jest.fn(), dismiss: jest.fn(), message: { @@ -21,7 +21,7 @@ const props = { }, }, inputError: { - show: 'ShoWERror inPUT', + show: false, set: jest.fn(), dismiss: jest.fn(), message: { @@ -66,26 +66,120 @@ const props = { description: 'uploadError', }, }, + isLoaded: true, + isFetchError: false, + isUploadError: false, intl: { formatMessage }, }; +const mockGalleryFn = jest.fn(); +const mockFileInputFn = jest.fn(); +const mockFetchErrorAlertFn = jest.fn(); +const mockUploadErrorAlertFn = jest.fn(); + jest.mock('../BaseModal', () => 'BaseModal'); jest.mock('./SearchSort', () => 'SearchSort'); -jest.mock('./Gallery', () => () => 'Gallery'); -jest.mock('../FileInput', () => 'FileInput'); -jest.mock('../ErrorAlerts/ErrorAlert', () => 'ErrorAlert'); -jest.mock('../ErrorAlerts/FetchErrorAlert', () => 'FetchErrorAlert'); -jest.mock('../ErrorAlerts/UploadErrorAlert', () => 'UploadErrorAlert'); +jest.mock('./Gallery', () => (componentProps) => { + mockGalleryFn(componentProps); + return (
Gallery
); +}); +jest.mock('../FileInput', () => (componentProps) => { + mockFileInputFn(componentProps); + return (
FileInput
); +}); +jest.mock('../ErrorAlerts/ErrorAlert', () => () => (
ErrorAlert
)); +jest.mock('../ErrorAlerts/FetchErrorAlert', () => (componentProps) => { + mockFetchErrorAlertFn(componentProps); + return (
FetchErrorAlert
); +}); +jest.mock('../ErrorAlerts/UploadErrorAlert', () => (componentProps) => { + mockUploadErrorAlertFn(componentProps); + return (
UploadErrorAlert
); +}); describe('Selection Modal', () => { - describe('snapshots', () => { - test('rendering correctly with expected Input', async () => { - render( - - - , - ); - expect(screen.getByText('Gallery')).toBeInTheDocument(); - }); + beforeEach(() => { + jest.clearAllMocks(); + }); + test('rendering correctly with expected Input', async () => { + render( + + + , + ); + expect(screen.getByText('Gallery')).toBeInTheDocument(); + expect(screen.getByText('FileInput')).toBeInTheDocument(); + expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument(); + expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument(); + + expect(mockGalleryFn).toHaveBeenCalledWith( + expect.objectContaining({ + ...props.galleryProps, + isLoaded: props.isLoaded, + show: true, + }), + ); + expect(mockFetchErrorAlertFn).toHaveBeenCalledWith( + expect.objectContaining({ + isFetchError: props.isFetchError, + message: props.modalMessages.fetchError, + }), + ); + expect(mockUploadErrorAlertFn).toHaveBeenCalledWith( + expect.objectContaining({ + isUploadError: props.isUploadError, + message: props.modalMessages.uploadError, + }), + ); + expect(mockFileInputFn).toHaveBeenCalledWith( + expect.objectContaining({ + acceptedFiles: '.png', + fileInput: props.fileInput, + }), + ); + }); + test('rendering correctly with errors', () => { + render( + + + , + ); + expect(screen.getByText('Gallery')).toBeInTheDocument(); + expect(screen.getByText('FileInput')).toBeInTheDocument(); + expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument(); + expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument(); + + expect(mockFetchErrorAlertFn).toHaveBeenCalledWith( + expect.objectContaining({ + isFetchError: true, + message: props.modalMessages.fetchError, + }), + ); + expect(mockGalleryFn).toHaveBeenCalledWith( + expect.objectContaining({ + ...props.galleryProps, + isLoaded: props.isLoaded, + show: false, + }), + ); + }); + test('rendering correctly with loading', () => { + render( + + + , + ); + expect(screen.getByText('Gallery')).toBeInTheDocument(); + expect(screen.getByText('FileInput')).toBeInTheDocument(); + expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument(); + expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument(); + + expect(mockGalleryFn).toHaveBeenCalledWith( + expect.objectContaining({ + ...props.galleryProps, + isLoaded: false, + show: true, + }), + ); }); });