test: Adding test for VideoGallery and SelectionModal

src/editors/containers/VideoGallery/__snapshots__/index.test.jsx.snap

@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VideoGallery component snapshot 1`] = `
-<div>
-  <SelectionModal
-    acceptedFiles={
-      Object {
-        "mp4": ".mp4",
-      }
-    }
-    close={[Function]}
-    fileInput={
-      Object {
-        "addFile": "videoHooks.fileInput.addFile",
-        "click": "videoHooks.fileInput.click",
-        "ref": "videoHooks.fileInput.ref",
-      }
-    }
-    galleryError={
-      Object {
-        "dismiss": [MockFunction],
-        "message": Object {
-          "defaultMessage": "Gallery error",
-          "description": "Gallery error",
-          "id": "Gallery error id",
-        },
-        "set": [MockFunction],
-        "show": "ShoWERror gAlLery",
-      }
-    }
-    galleryProps={
-      Object {
-        "gallery": "props",
-      }
-    }
-    inputError={
-      Object {
-        "dismiss": [MockFunction],
-        "message": Object {
-          "defaultMessage": "Input error",
-          "description": "Input error",
-          "id": "Input error id",
-        },
-        "set": [MockFunction],
-        "show": "ShoWERror inPUT",
-      }
-    }
-    isFetchError={false}
-    isFullscreenScroll={false}
-    isLoaded={false}
-    isOpen={true}
-    isUploadError={false}
-    modalMessages={
-      Object {
-        "confirmMsg": Object {
-          "defaultMessage": "Select video",
-          "description": "Label for Select video button",
-          "id": "authoring.selectvideomodal.selectvideo.label",
-        },
-        "fetchError": Object {
-          "defaultMessage": "Failed to obtain course videos. Please try again.",
-          "description": "Message presented to user when videos are not found",
-          "id": "authoring.selectvideomodal.error.fetchVideosError",
-        },
-        "titleMsg": Object {
-          "defaultMessage": "Add video to your course",
-          "description": "Title for the select video modal",
-          "id": "authoring.selectvideomodal.title.label",
-        },
-        "uploadButtonMsg": Object {
-          "defaultMessage": "Upload or embed a new video",
-          "description": "Label for upload button",
-          "id": "authoring.selectvideomodal.upload.label",
-        },
-        "uploadError": Object {
-          "defaultMessage": "Failed to upload video. Please try again.",
-          "description": "Message presented to user when video fails to upload",
-          "id": "authoring.selectvideomodal.error.uploadVideoError",
-        },
-      }
-    }
-    searchSortProps={
-      Object {
-        "search": "sortProps",
-      }
-    }
-    selectBtnProps={
-      Object {
-        "select": "btnProps",
-      }
-    }
-    size="fullscreen"
-  />
-</div>
-`;

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,
 };

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);
     });
   });
 });

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,

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(<module.VideoGallery {...props} />);
     });
-    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);
     });
   });
 });

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 (<div>Gallery</div>);
+});
+jest.mock('../FileInput', () => (componentProps) => {
+  mockFileInputFn(componentProps);
+  return (<div>FileInput</div>);
+});
+jest.mock('../ErrorAlerts/ErrorAlert', () => () => (<div>ErrorAlert</div>));
+jest.mock('../ErrorAlerts/FetchErrorAlert', () => (componentProps) => {
+  mockFetchErrorAlertFn(componentProps);
+  return (<div>FetchErrorAlert</div>);
+});
+jest.mock('../ErrorAlerts/UploadErrorAlert', () => (componentProps) => {
+  mockUploadErrorAlertFn(componentProps);
+  return (<div>UploadErrorAlert</div>);
+});
 
 describe('Selection Modal', () => {
-  describe('snapshots', () => {
-    test('rendering correctly with expected Input', async () => {
-      render(
-        <IntlProvider>
-          <SelectionModal {...props} />
-        </IntlProvider>,
-      );
-      expect(screen.getByText('Gallery')).toBeInTheDocument();
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  test('rendering correctly with expected Input', async () => {
+    render(
+      <IntlProvider>
+        <SelectionModal {...props} />
+      </IntlProvider>,
+    );
+    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(
+      <IntlProvider>
+        <SelectionModal {...props} isFetchError />
+      </IntlProvider>,
+    );
+    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(
+      <IntlProvider>
+        <SelectionModal {...props} isLoaded={false} />
+      </IntlProvider>,
+    );
+    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,
+      }),
+    );
   });
 });