From ab640fb561955d06922688e400706b1eb546f941 Mon Sep 17 00:00:00 2001 From: Farhaan Bukhsh Date: Fri, 23 Jun 2023 19:54:54 +0530 Subject: [PATCH] refactor: Moved the function to hooks in order to keep the components dumb It is done to make sure the business logic is not in a component and can be individually tested. Signed-off-by: Farhaan Bukhsh --- .../containers/VideoUploadEditor/hooks.js | 26 ++++++++++++++++++ .../VideoUploadEditor/hooks.test.js | 19 +++++++++++++ .../containers/VideoUploadEditor/index.jsx | 27 ++----------------- 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/editors/containers/VideoUploadEditor/hooks.js b/src/editors/containers/VideoUploadEditor/hooks.js index f7fde9866..415e96992 100644 --- a/src/editors/containers/VideoUploadEditor/hooks.js +++ b/src/editors/containers/VideoUploadEditor/hooks.js @@ -4,6 +4,11 @@ import { selectors } from '../../data/redux'; import store from '../../data/store'; import * as appHooks from '../../hooks'; +const extToMime = { + mp4: 'video/mp4', + mov: 'video/quicktime', +}; + export const { navigateTo, } = appHooks; @@ -44,9 +49,30 @@ export const onVideoUpload = () => { return module.postUploadRedirect(storeState); }; +const getFileExtension = (filename) => filename.slice(Math.abs(filename.lastIndexOf('.') - 1) + 2); + +export const fileValidator = (setLoading, setErrorMessage, uploadVideo) => (file) => { + const supportedFormats = Object.keys(extToMime); + const ext = getFileExtension(file.name); + const type = extToMime[ext] || ''; + const newFile = new File([file], file.name, { type }); + + if (supportedFormats.includes(ext)) { + uploadVideo({ + supportedFiles: [newFile], + setLoadSpinner: setLoading, + postUploadRedirect: onVideoUpload(), + }); + } else { + const errorMsg = 'Video must be an MP4 or MOV file'; + setErrorMessage(errorMsg); + } +}; + export default { postUploadRedirect, uploadEditor, uploader, onVideoUpload, + fileValidator, }; diff --git a/src/editors/containers/VideoUploadEditor/hooks.test.js b/src/editors/containers/VideoUploadEditor/hooks.test.js index 23dc1e519..a78978601 100644 --- a/src/editors/containers/VideoUploadEditor/hooks.test.js +++ b/src/editors/containers/VideoUploadEditor/hooks.test.js @@ -2,6 +2,9 @@ import * as hooks from './hooks'; import { MockUseState } from '../../../testUtils'; const state = new MockUseState(hooks); +const setLoading = jest.fn(); +const setErrorMessage = jest.fn(); +const uploadVideo = jest.fn(); describe('Video Upload Editor hooks', () => { beforeEach(() => { @@ -28,4 +31,20 @@ describe('Video Upload Editor hooks', () => { }); }); }); + describe('File Validation', () => { + it('Checks with valid MIME type', () => { + const file = new File(['(⌐□_□)'], 'video.mp4', { type: 'video/mp4' }); + const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo); + validator(file); + expect(uploadVideo).toHaveBeenCalled(); + expect(setErrorMessage).not.toHaveBeenCalled(); + }); + it('Checks with invalid MIME type', () => { + const file = new File(['(⌐□_□)'], 'video.gif', { type: 'video/mp4' }); + const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo); + validator(file); + expect(uploadVideo).not.toHaveBeenCalled(); + expect(setErrorMessage).toHaveBeenCalled(); + }); + }); }); diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx index d88c46a7b..853b247da 100644 --- a/src/editors/containers/VideoUploadEditor/index.jsx +++ b/src/editors/containers/VideoUploadEditor/index.jsx @@ -105,31 +105,8 @@ const VideoUploadEditor = ( console.log('No file selected.'); return; } - - const extToMime = { - mp4: 'video/mp4', - mov: 'video/quicktime', - }; - const supportedFormats = Object.keys(extToMime); - - function getFileExtension(filename) { - return filename.slice(Math.abs(filename.lastIndexOf('.') - 1) + 2); - } - - const ext = getFileExtension(file.name); - const type = extToMime[ext] || ''; - const newFile = new File([file], file.name, { type }); - - if (supportedFormats.includes(ext)) { - uploadVideo({ - supportedFiles: [newFile], - setLoadSpinner: setLoading, - postUploadRedirect: hooks.onVideoUpload(), - }); - } else { - const errorMsg = 'Video must be an MP4 or MOV file'; - setErrorMessage(errorMsg); - } + const validator = hooks.fileValidator(setLoading, setErrorMessage, uploadVideo); + validator(file); }; return (