Kate / Add video for Vanillas description (binary-com#9622)

* feat: add video for vanilla

* refactor: add tests and change file structure

* refactor: video component and test

* refactor: change folders name and add more videos

* refactor: apply suggestions

* chore: rename data test id

* chore: correct spelling

* chore: remove optional data test id

* refactor: add backup

* fix: tests

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/videos/'),
+            to: 'public/videos',
+        },
         // { 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,56 @@
+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',
+    data_testid: 'dt_description_video',
+};
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(),
+}));
+
+describe('<ContractTypeDescriptionVideo />', () => {
+    const mockContractTypeDescriptionVideo = (
+        mocked_store: TCoreStores,
+        mocked_props: React.ComponentProps<typeof ContractTypeDescriptionVideo>
+    ) => {
+        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).mockReturnValue(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 be able to find a proper video and render the component if is_dark_mode_on is true', () => {
+        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/__tests__/icon-trade-categories.spec.tsx

@@ -19,7 +19,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect MockedIcon to be rendered when category is rise_fall', () => {
         render(<IconTradeCategory category='rise_fall' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -28,7 +28,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is rise_fall_equal', () => {
         render(<IconTradeCategory category='rise_fall_equal' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -37,7 +37,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is high_low', () => {
         render(<IconTradeCategory category='high_low' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -46,7 +46,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is end', () => {
         render(<IconTradeCategory category='end' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -55,7 +55,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is stay', () => {
         render(<IconTradeCategory category='stay' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -64,7 +64,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is match_diff', () => {
         render(<IconTradeCategory category='match_diff' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -73,7 +73,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is even_odd', () => {
         render(<IconTradeCategory category='even_odd' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -82,7 +82,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is over_under', () => {
         render(<IconTradeCategory category='over_under' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -91,7 +91,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is touch', () => {
         render(<IconTradeCategory category='touch' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -100,7 +100,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is asian', () => {
         render(<IconTradeCategory category='asian' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -127,7 +127,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is run_high_low', () => {
         render(<IconTradeCategory category='run_high_low' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -136,7 +136,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is reset', () => {
         render(<IconTradeCategory category='reset' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -145,7 +145,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is tick_high_low', () => {
         render(<IconTradeCategory category='tick_high_low' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -154,7 +154,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is callputspread', () => {
         render(<IconTradeCategory category='callputspread' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -163,7 +163,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is multiplier', () => {
         render(<IconTradeCategory category='multiplier' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');
@@ -178,7 +178,7 @@ describe('<IconTradeCatgory />', () => {
     it('Expect two MockedIcons to be rendered when category is vanilla', () => {
         render(<IconTradeCategory category='vanilla' />);
         const mocked_icons = screen.getAllByText(mocked_icon);
-        expect(mocked_icons.length).toBe(2);
+        expect(mocked_icons).toHaveLength(2);
         mocked_icons.forEach(icon => {
             expect(icon).toBeInTheDocument();
             expect(icon).toHaveClass('category-wrapper');