Kate / Test coverage + TS migration: Components/Elements/Media files …

…in Trader package (binary-com#8457)

* refactor: ts migration and tess for media

* fix: change path for import

* refactor: change type for svg

* chore: remove file type from imports

* refactor: replace svg in test

* refactor: implemented suggestion from review

* fix: replace old type in svg d ts

* refactor: replace react.fc

* refactor: ts of index file

packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaDescription } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaDescription', () => {
+    it('should render children inside of proper MediaDescription div container with className', () => {
+        render(<MediaDescription>{test_children}</MediaDescription>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media__description');
+    });
+});

packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaHeading } from 'App/Components/Elements/Media';
+
+const test_children = 'Test Children';
+
+describe('MediaHeading', () => {
+    it('should render children inside of proper MediaHeading div container with className', () => {
+        render(<MediaHeading>{test_children}</MediaHeading>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media__heading');
+    });
+});

packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MediaIcon } from 'App/Components/Elements/Media';
+
+const test_disabled = 'Interval Duration Disabled Light Icon';
+const test_enabled = 'Interval Duration Enabled Light Icon';
+const mock_props = {
+    disabled: jest.fn(() => <div>{test_disabled}</div>),
+    enabled: jest.fn(() => <div>{test_enabled}</div>),
+    id: 'test_id',
+    is_enabled: true,
+};
+
+describe('MediaIcon', () => {
+    it('should render MediaIcon component with enabled SVG if is_enabled === true', () => {
+        render(<MediaIcon {...mock_props} />);
+
+        expect(screen.getByText(test_enabled)).toBeInTheDocument();
+    });
+    it('should render MediaIcon component with disabled SVG if is_enabled === false', () => {
+        render(<MediaIcon {...mock_props} is_enabled={false} />);
+
+        expect(screen.getByText(test_disabled)).toBeInTheDocument();
+    });
+});

packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MediaItem from '../media-item';
+
+const test_children = 'Test Children';
+
+describe('MediaItem', () => {
+    it('should render children inside of proper MediaItem div container with className', () => {
+        render(<MediaItem>{test_children}</MediaItem>);
+        const test_props_children = screen.getByText(test_children);
+
+        expect(test_props_children).toBeInTheDocument();
+        expect(test_props_children).toHaveClass('media');
+    });
+});

packages/trader/src/App/Components/Elements/Media/index.ts

@@ -0,0 +1,6 @@
+import MediaItem from './media-item';
+
+export * from './media-description';
+export * from './media-heading';
+export * from './media-icon';
+export default MediaItem;

packages/trader/src/App/Components/Elements/Media/media-description.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const MediaDescription = ({ children }: React.PropsWithChildren) => (
+    <div className='media__description'>{children}</div>
+);
+
+export { MediaDescription };

packages/trader/src/App/Components/Elements/Media/media-heading.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaHeading = ({ children }: React.PropsWithChildren) => <div className='media__heading'>{children}</div>;
+
+export { MediaHeading };

packages/trader/src/App/Components/Elements/Media/media-icon.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type TMediaIcon = {
+    disabled: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    enabled: React.ComponentType<React.SVGAttributes<SVGElement>>;
+    id: string;
+    is_enabled: boolean;
+};
+const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => {
+    const Icon = is_enabled ? enabled : disabled;
+    return <Icon id={id} className='media__icon' />;
+};
+
+export { MediaIcon };

packages/trader/src/App/Components/Elements/Media/media-item.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MediaItem = ({ children }: React.PropsWithChildren) => <div className='media'>{children}</div>;
+
+export default MediaItem;