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({test_children}); + 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({test_children}); + 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(() =>
{test_disabled}
), + enabled: jest.fn(() =>
{test_enabled}
), + id: 'test_id', + is_enabled: true, +}; + +describe('MediaIcon', () => { + it('should render MediaIcon component with enabled SVG if is_enabled === true', () => { + render(); + + expect(screen.getByText(test_enabled)).toBeInTheDocument(); + }); + it('should render MediaIcon component with disabled SVG if is_enabled === false', () => { + render(); + + 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({test_children}); + 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 =>
{props.children}
; - -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) => ( +
{children}
+); + +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 =>
{props.children}
; - -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) =>
{children}
; + +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 ; -}; - -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>; + enabled: React.ComponentType>; + id: string; + is_enabled: boolean; +}; +const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => { + const Icon = is_enabled ? enabled : disabled; + return ; +}; + +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 =>
{props.children}
; - -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) =>
{children}
; + +export default MediaItem;