From c2c44e7cbdb10307ccff7076f326a16dbbd31f11 Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Tue, 26 Sep 2023 12:20:21 +0300
Subject: [PATCH] Kate / Test coverage + TS migration:
 Components/Elements/Media files in Trader package (#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
---
 .../__tests__/media-description.spec.tsx      | 15 +++++++++++
 .../Media/__tests__/media-heading.spec.tsx    | 15 +++++++++++
 .../Media/__tests__/media-icon.spec.tsx       | 25 +++++++++++++++++++
 .../Media/__tests__/media-item.spec.tsx       | 15 +++++++++++
 .../App/Components/Elements/Media/index.js    |  6 -----
 .../App/Components/Elements/Media/index.ts    |  6 +++++
 .../Elements/Media/media-description.jsx      |  5 ----
 .../Elements/Media/media-description.tsx      |  7 ++++++
 .../Elements/Media/media-heading.jsx          |  5 ----
 .../Elements/Media/media-heading.tsx          |  5 ++++
 .../Components/Elements/Media/media-icon.jsx  | 16 ------------
 .../Components/Elements/Media/media-icon.tsx  | 14 +++++++++++
 .../Components/Elements/Media/media-item.jsx  |  5 ----
 .../Components/Elements/Media/media-item.tsx  |  5 ++++
 14 files changed, 107 insertions(+), 37 deletions(-)
 create mode 100644 packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/Media/index.js
 create mode 100644 packages/trader/src/App/Components/Elements/Media/index.ts
 delete mode 100644 packages/trader/src/App/Components/Elements/Media/media-description.jsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/media-description.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/Media/media-heading.jsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/media-heading.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/Media/media-icon.jsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/media-icon.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/Media/media-item.jsx
 create mode 100644 packages/trader/src/App/Components/Elements/Media/media-item.tsx

diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-description.spec.tsx
new file mode 100644
index 000000000000..ccad8a4317c1
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-heading.spec.tsx
new file mode 100644
index 000000000000..acb7f14dab68
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-icon.spec.tsx
new file mode 100644
index 000000000000..d87bdfd29a27
--- /dev/null
+++ b/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();
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx
new file mode 100644
index 000000000000..2770cd33fad3
--- /dev/null
+++ b/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');
+    });
+});
diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.js
deleted file mode 100644
index ce221026b9e0..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import MediaItem from './media-item.jsx';
-
-export * from './media-description.jsx';
-export * from './media-heading.jsx';
-export * from './media-icon.jsx';
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/index.ts b/packages/trader/src/App/Components/Elements/Media/index.ts
new file mode 100644
index 000000000000..16f58a9fb22e
--- /dev/null
+++ b/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;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.jsx b/packages/trader/src/App/Components/Elements/Media/media-description.jsx
deleted file mode 100644
index 36c190dd4dd4..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-description.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaDescription = props => <div className='media__description'>{props.children}</div>;
-
-export { MediaDescription };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.tsx b/packages/trader/src/App/Components/Elements/Media/media-description.tsx
new file mode 100644
index 000000000000..41b4b6a66644
--- /dev/null
+++ b/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 };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx b/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
deleted file mode 100644
index 68e63deb8f4d..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-heading.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaHeading = props => <div className='media__heading'>{props.children}</div>;
-
-export { MediaHeading };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx
new file mode 100644
index 000000000000..5105497b3588
--- /dev/null
+++ b/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 };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx b/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
deleted file mode 100644
index 645eeb88256a..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-icon.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const MediaIcon = ({ id, is_enabled, enabled, disabled }) => {
-    const Icon = is_enabled ? enabled : disabled;
-    return <Icon id={id} className='media__icon' />;
-};
-
-MediaIcon.propTypes = {
-    disabled: PropTypes.func,
-    enabled: PropTypes.func,
-    id: PropTypes.string,
-    is_enabled: PropTypes.bool,
-};
-
-export { MediaIcon };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx
new file mode 100644
index 000000000000..a4d7c5c0b4ac
--- /dev/null
+++ b/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 };
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.jsx b/packages/trader/src/App/Components/Elements/Media/media-item.jsx
deleted file mode 100644
index 6347c10d720e..000000000000
--- a/packages/trader/src/App/Components/Elements/Media/media-item.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MediaItem = props => <div className='media'>{props.children}</div>;
-
-export default MediaItem;
diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.tsx b/packages/trader/src/App/Components/Elements/Media/media-item.tsx
new file mode 100644
index 000000000000..0d0ded93016b
--- /dev/null
+++ b/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;