refactor: add tests and change file structure

packages/core/build/config.js

@@ -114,6 +114,10 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../src/public/images/common/static_images/'),
             to: 'public/images/common',
         },
+        {
+            from: path.resolve(__dirname, '../src/public/video/'),
+            to: 'public/video',
+        },
         // { from: path.resolve(__dirname, '../src/public/images/common/og_image.gif'), to: 'images/common/og_image.gif' }, // Once the design for og_image is ready, bring this back.
         {
             from: path.resolve(__dirname, '../src/public/images/common/logos/platform_logos/'),

packages/trader/src/Assets/Trading/Categories/__tests__/contract-type-description-video.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../trader-providers';
+import ContractTypeDescriptionVideo from '../contract-type-description-video';
+import { TCoreStores } from '@deriv/stores/types';
+import { isMobile } from '@deriv/shared';
+
+const default_mocked_props = {
+    selected_contract_type: 'vanilla',
+};
+
+type Tmocked_props = {
+    selected_contract_type: string;
+};
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(),
+}));
+
+describe('<ContractTypeDescriptionVideo />', () => {
+    const mockContractTypeDescriptionVideo = (mocked_store: TCoreStores, mocked_props: Tmocked_props) => {
+        return (
+            <TraderProviders store={mocked_store}>
+                <ContractTypeDescriptionVideo {...mocked_props} />
+            </TraderProviders>
+        );
+    };
+    it('should render the component with video if selected_contract_type does support video', () => {
+        (isMobile as jest.Mock).mockReturnValueOnce(false);
+        const mock_root_store = mockStore({});
+        render(mockContractTypeDescriptionVideo(mock_root_store, default_mocked_props));
+        const video = screen.getByTestId(/description_video/i);
+
+        expect(video).toBeInTheDocument();
+        expect(video).toHaveAttribute('width', '480');
+        expect(video).toHaveAttribute('height', '270');
+    });
+    it('should not render the component if selected_contract_type does not support video', () => {
+        (isMobile as jest.Mock).mockReturnValueOnce(false);
+        const mock_root_store = mockStore({});
+        render(mockContractTypeDescriptionVideo(mock_root_store, { selected_contract_type: 'test' }));
+
+        expect(screen.queryByTestId(/description_video/i)).not.toBeInTheDocument();
+    });
+    it('should be able to find a proper video and render the component if is_dark_mode_on is true', () => {
+        (isMobile as jest.Mock).mockReturnValueOnce(false);
+        const mock_root_store = mockStore({ ui: { is_dark_mode_on: true } });
+        render(mockContractTypeDescriptionVideo(mock_root_store, default_mocked_props));
+
+        expect(screen.getByTestId(/description_video/i)).toBeInTheDocument();
+    });
+    it('should render the component with video of proper width and height if it is mobile', () => {
+        (isMobile as jest.Mock).mockReturnValue(true);
+        const mock_root_store = mockStore({});
+        render(mockContractTypeDescriptionVideo(mock_root_store, default_mocked_props));
+        const video = screen.getByTestId(/description_video/i);
+
+        expect(video).toBeInTheDocument();
+        expect(video).toHaveAttribute('width', '328');
+        expect(video).toHaveAttribute('height', '184.5');
+    });
+});

packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx

@@ -9,9 +9,7 @@ const ContractTypeDescriptionVideo = ({ selected_contract_type }: { selected_con
     const getVideoSource = React.useCallback(
         (extension: 'mp4' | 'webm') => {
             return getUrlBase(
-                `/public/images/common/${selected_contract_type}_description${
-                    is_dark_theme ? '_dark' : '_light'
-                }.${extension}`
+                `/public/video/${selected_contract_type}_description${is_dark_theme ? '_dark' : '_light'}.${extension}`
             );
         },
         [is_dark_theme, selected_contract_type]
@@ -23,6 +21,7 @@ const ContractTypeDescriptionVideo = ({ selected_contract_type }: { selected_con
     const webm_src = React.useMemo(() => getVideoSource('webm'), [getVideoSource]);
 
     if (!should_show_video) return null;
+
     return (
         <video
             autoPlay
@@ -35,6 +34,7 @@ const ContractTypeDescriptionVideo = ({ selected_contract_type }: { selected_con
             controls
             width={isMobile() ? 328 : 480}
             height={isMobile() ? 184.5 : 270}
+            data-testid='description_video'
         >
             {/* a browser will select a source with extension it recognizes */}
             <source src={mp4_src} type='video/mp4' />

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx

@@ -12,7 +12,7 @@ const AccumulatorsStatsManualModal = ({ icon_classname, is_dark_theme, is_manual
     const getVideoSource = React.useCallback(
         extension => {
             return getUrlBase(
-                `/public/images/common/accumulators_manual_${is_mobile ? 'mobile' : 'desktop'}${
+                `/public/video/accumulators_manual_${is_mobile ? 'mobile' : 'desktop'}${
                     is_dark_theme ? '_dark' : ''
                 }.${extension}`
             );