From f8609bdb699571cd970bc29bf5512c3a57a48af3 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 3 May 2023 16:31:43 +0300 Subject: [PATCH 1/9] refactor: ts migration and tess for media --- .../Media/__tests__/media-item.spec.tsx | 51 +++++++++++++++++++ .../App/Components/Elements/Media/index.js | 8 +-- .../Elements/Media/media-description.jsx | 5 -- .../Elements/Media/media-description.tsx | 7 +++ .../Elements/Media/media-heading.jsx | 5 -- .../Elements/Media/media-heading.tsx | 7 +++ .../Components/Elements/Media/media-icon.jsx | 16 ------ .../Components/Elements/Media/media-icon.tsx | 16 ++++++ .../Components/Elements/Media/media-item.jsx | 5 -- .../Components/Elements/Media/media-item.tsx | 5 ++ 10 files changed, 90 insertions(+), 35 deletions(-) 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/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-item.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx new file mode 100644 index 000000000000..67cd33305018 --- /dev/null +++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import MediaItem from '../media-item'; +import { MediaDescription, MediaHeading, MediaIcon } from 'App/Components/Elements/Media'; +import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/interval-disabled.svg'; +import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg'; + +const test_children = 'Test Children'; +const mock_props = { + disabled: IntervalDurationDisabledLightIcon, + enabled: IntervalDurationEnabledLightIcon, + id: 'test_id', + is_enabled: true, +}; +describe('MediaItem', () => { + it('should render children inside of proper 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'); + }); +}); + +describe('MediaHeading', () => { + it('should render children inside of proper 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'); + }); +}); + +describe('MediaDescription', () => { + it('should render children inside of proper 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'); + }); +}); + +// describe('MediaIcon', () => { +// it('should render MediaIcon component', () => { +// const { container } = render(); + +// expect(container).not.toBeEmpty(); +// }); +// }); diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.js index ce221026b9e0..7bbd6f9b25ae 100644 --- a/packages/trader/src/App/Components/Elements/Media/index.js +++ b/packages/trader/src/App/Components/Elements/Media/index.js @@ -1,6 +1,6 @@ -import MediaItem from './media-item.jsx'; +import MediaItem from './media-item.tsx'; -export * from './media-description.jsx'; -export * from './media-heading.jsx'; -export * from './media-icon.jsx'; +export * from './media-description.tsx'; +export * from './media-heading.tsx'; +export * from './media-icon.tsx'; 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..e8a6e3f4ccbf --- /dev/null +++ b/packages/trader/src/App/Components/Elements/Media/media-description.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const MediaDescription = (props: { children: React.ReactNode | string }) => ( +
{props.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..30e66db66b4c --- /dev/null +++ b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const MediaHeading = (props: { children: React.ReactNode | string }) => ( +
{props.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..edd4d33f0e73 --- /dev/null +++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +type TMediaIcon = { + // disabled: React.SVGAttributes; + // enabled: React.SVGAttributes; + disabled: React.FC>; + enabled: React.FC>; + 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..63784e0fd87a --- /dev/null +++ b/packages/trader/src/App/Components/Elements/Media/media-item.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +const MediaItem = (props: { children: React.ReactNode | string }) =>
{props.children}
; + +export default MediaItem; From 54c0c60db05908c3b51f7b373c502b69f6e0c6d6 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 3 May 2023 16:44:15 +0300 Subject: [PATCH 2/9] fix: change path for import --- .../Components/Elements/Media/__tests__/media-item.spec.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 index 67cd33305018..19f0ac0ae90d 100644 --- 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 @@ -1,7 +1,9 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import MediaItem from '../media-item'; -import { MediaDescription, MediaHeading, MediaIcon } from 'App/Components/Elements/Media'; +import { MediaDescription } from '../media-description'; +import { MediaHeading } from '../media-heading'; +import { MediaIcon } from '../media-icon'; import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/interval-disabled.svg'; import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg'; @@ -12,6 +14,7 @@ const mock_props = { id: 'test_id', is_enabled: true, }; + describe('MediaItem', () => { it('should render children inside of proper div container with className', () => { render({test_children}); From 4b5910db219a0ac7a58960e13509261b0301214f Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 3 May 2023 17:02:34 +0300 Subject: [PATCH 3/9] refactor: change type for svg --- .../src/App/Components/Elements/Media/media-icon.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx index edd4d33f0e73..185c9d4a1ade 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx @@ -1,15 +1,13 @@ import React from 'react'; type TMediaIcon = { - // disabled: React.SVGAttributes; - // enabled: React.SVGAttributes; - disabled: React.FC>; - enabled: React.FC>; + disabled: React.SVGAttributes; + enabled: React.SVGAttributes; id: string; is_enabled: boolean; }; const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => { - const Icon = is_enabled ? enabled : disabled; + const Icon = (is_enabled ? enabled : disabled) as React.ElementType; return ; }; From 282a3a4f6aeecedf8a7d25d6728350f4f4b7725f Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Thu, 4 May 2023 12:19:16 +0300 Subject: [PATCH 4/9] chore: remove file type from imports --- .../Media/__tests__/media-item.spec.tsx | 25 ++++++++++--------- .../App/Components/Elements/Media/index.js | 8 +++--- 2 files changed, 17 insertions(+), 16 deletions(-) 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 index 19f0ac0ae90d..41e1fbdfedf7 100644 --- 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 @@ -1,9 +1,10 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import MediaItem from '../media-item'; -import { MediaDescription } from '../media-description'; -import { MediaHeading } from '../media-heading'; -import { MediaIcon } from '../media-icon'; +import { MediaHeading, MediaDescription, MediaIcon } from 'App/Components/Elements/Media'; +// import { MediaHeading } from '../media-heading'; +// import { MediaDescription } from '../media-description'; +// import { MediaIcon } from '../media-icon'; import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/interval-disabled.svg'; import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg'; @@ -16,7 +17,7 @@ const mock_props = { }; describe('MediaItem', () => { - it('should render children inside of proper div container with className', () => { + it('should render children inside of proper MediaItem div container with className', () => { render({test_children}); const test_props_children = screen.getByText(test_children); @@ -26,7 +27,7 @@ describe('MediaItem', () => { }); describe('MediaHeading', () => { - it('should render children inside of proper div container with className', () => { + it('should render children inside of proper MediaHeading div container with className', () => { render({test_children}); const test_props_children = screen.getByText(test_children); @@ -36,7 +37,7 @@ describe('MediaHeading', () => { }); describe('MediaDescription', () => { - it('should render children inside of proper div container with className', () => { + it('should render children inside of proper MediaDescription div container with className', () => { render({test_children}); const test_props_children = screen.getByText(test_children); @@ -45,10 +46,10 @@ describe('MediaDescription', () => { }); }); -// describe('MediaIcon', () => { -// it('should render MediaIcon component', () => { -// const { container } = render(); +describe('MediaIcon', () => { + it('should render MediaIcon component', () => { + const { container } = render(); -// expect(container).not.toBeEmpty(); -// }); -// }); + expect(container).not.toBeEmptyDOMElement(); + }); +}); diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.js index 7bbd6f9b25ae..16f58a9fb22e 100644 --- a/packages/trader/src/App/Components/Elements/Media/index.js +++ b/packages/trader/src/App/Components/Elements/Media/index.js @@ -1,6 +1,6 @@ -import MediaItem from './media-item.tsx'; +import MediaItem from './media-item'; -export * from './media-description.tsx'; -export * from './media-heading.tsx'; -export * from './media-icon.tsx'; +export * from './media-description'; +export * from './media-heading'; +export * from './media-icon'; export default MediaItem; From d8f1210d86cb80ded0bfc7cccfdc0342f69a5540 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Thu, 4 May 2023 14:54:41 +0300 Subject: [PATCH 5/9] refactor: replace svg in test --- .../{media-item.spec.tsx => media.spec.tsx} | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) rename packages/trader/src/App/Components/Elements/Media/__tests__/{media-item.spec.tsx => media.spec.tsx} (69%) 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.spec.tsx similarity index 69% rename from packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx rename to packages/trader/src/App/Components/Elements/Media/__tests__/media.spec.tsx index 41e1fbdfedf7..8a5d98e4cebe 100644 --- a/packages/trader/src/App/Components/Elements/Media/__tests__/media-item.spec.tsx +++ b/packages/trader/src/App/Components/Elements/Media/__tests__/media.spec.tsx @@ -2,16 +2,13 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import MediaItem from '../media-item'; import { MediaHeading, MediaDescription, MediaIcon } from 'App/Components/Elements/Media'; -// import { MediaHeading } from '../media-heading'; -// import { MediaDescription } from '../media-description'; -// import { MediaIcon } from '../media-icon'; -import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/interval-disabled.svg'; -import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg'; const test_children = 'Test Children'; +const test_disabled = 'Interval Duration Disabled Light Icon'; +const test_enabled = 'Interval Duration Enabled Light Icon'; const mock_props = { - disabled: IntervalDurationDisabledLightIcon, - enabled: IntervalDurationEnabledLightIcon, + disabled: jest.fn(() =>
{test_disabled}
), + enabled: jest.fn(() =>
{test_enabled}
), id: 'test_id', is_enabled: true, }; @@ -47,9 +44,14 @@ describe('MediaDescription', () => { }); describe('MediaIcon', () => { - it('should render MediaIcon component', () => { - const { container } = render(); + it('should render MediaIcon component with enabled SVG if is_enabled === true', () => { + render(); - expect(container).not.toBeEmptyDOMElement(); + 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(); }); }); From f2dae5b02d36f94119f3882cacfe1f25fe177381 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Fri, 5 May 2023 09:46:55 +0300 Subject: [PATCH 6/9] refactor: implemented suggestion from review --- .../__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 +++++ .../Elements/Media/__tests__/media.spec.tsx | 57 ------------------- .../Elements/Media/media-description.tsx | 4 +- .../Elements/Media/media-heading.tsx | 4 +- .../Components/Elements/Media/media-icon.tsx | 6 +- .../Components/Elements/Media/media-item.tsx | 2 +- 9 files changed, 78 insertions(+), 65 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/__tests__/media.spec.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/__tests__/media.spec.tsx b/packages/trader/src/App/Components/Elements/Media/__tests__/media.spec.tsx deleted file mode 100644 index 8a5d98e4cebe..000000000000 --- a/packages/trader/src/App/Components/Elements/Media/__tests__/media.spec.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import MediaItem from '../media-item'; -import { MediaHeading, MediaDescription, MediaIcon } from 'App/Components/Elements/Media'; - -const test_children = 'Test Children'; -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('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'); - }); -}); - -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'); - }); -}); - -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'); - }); -}); - -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/media-description.tsx b/packages/trader/src/App/Components/Elements/Media/media-description.tsx index e8a6e3f4ccbf..8db2ccdd4e84 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-description.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-description.tsx @@ -1,7 +1,7 @@ import React from 'react'; -const MediaDescription = (props: { children: React.ReactNode | string }) => ( -
{props.children}
+const MediaDescription: React.FC> = ({ children }) => ( +
{children}
); export { MediaDescription }; diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx index 30e66db66b4c..d653f5aed216 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx @@ -1,7 +1,7 @@ import React from 'react'; -const MediaHeading = (props: { children: React.ReactNode | string }) => ( -
{props.children}
+const MediaHeading: React.FC> = ({ children }) => ( +
{children}
); export { MediaHeading }; diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx index 185c9d4a1ade..b6015fda0a95 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx @@ -1,13 +1,13 @@ import React from 'react'; type TMediaIcon = { - disabled: React.SVGAttributes; - enabled: React.SVGAttributes; + disabled: React.FC>; + enabled: React.FC>; id: string; is_enabled: boolean; }; const MediaIcon = ({ id, is_enabled, enabled, disabled }: TMediaIcon) => { - const Icon = (is_enabled ? enabled : disabled) as React.ElementType; + const Icon = is_enabled ? enabled : disabled; return ; }; diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.tsx b/packages/trader/src/App/Components/Elements/Media/media-item.tsx index 63784e0fd87a..d184beda94fc 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-item.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-item.tsx @@ -1,5 +1,5 @@ import React from 'react'; -const MediaItem = (props: { children: React.ReactNode | string }) =>
{props.children}
; +const MediaItem: React.FC> = ({ children }) =>
{children}
; export default MediaItem; From af91eddad100fd3932d3e3752636e54b3f23e5c8 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Fri, 5 May 2023 10:08:57 +0300 Subject: [PATCH 7/9] fix: replace old type in svg d ts --- types/svg.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/svg.d.ts b/types/svg.d.ts index 397f524acbf5..e5d8185d6a55 100644 --- a/types/svg.d.ts +++ b/types/svg.d.ts @@ -1,4 +1,4 @@ declare module '*.svg' { - const content: React.SVGAttributes; + const content: React.FC>; export default content; } From d341760b16e9b0464db011dddf12646b68ebb4b6 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Wed, 10 May 2023 17:14:44 +0300 Subject: [PATCH 8/9] refactor: replace react.fc --- .../src/App/Components/Elements/Media/media-description.tsx | 2 +- .../src/App/Components/Elements/Media/media-heading.tsx | 4 +--- .../trader/src/App/Components/Elements/Media/media-icon.tsx | 4 ++-- .../trader/src/App/Components/Elements/Media/media-item.tsx | 2 +- types/svg.d.ts | 2 +- 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/trader/src/App/Components/Elements/Media/media-description.tsx b/packages/trader/src/App/Components/Elements/Media/media-description.tsx index 8db2ccdd4e84..41b4b6a66644 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-description.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-description.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const MediaDescription: React.FC> = ({ children }) => ( +const MediaDescription = ({ children }: React.PropsWithChildren) => (
{children}
); diff --git a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx index d653f5aed216..5105497b3588 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-heading.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-heading.tsx @@ -1,7 +1,5 @@ import React from 'react'; -const MediaHeading: React.FC> = ({ children }) => ( -
{children}
-); +const MediaHeading = ({ children }: React.PropsWithChildren) =>
{children}
; export { MediaHeading }; diff --git a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx index b6015fda0a95..a4d7c5c0b4ac 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-icon.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-icon.tsx @@ -1,8 +1,8 @@ import React from 'react'; type TMediaIcon = { - disabled: React.FC>; - enabled: React.FC>; + disabled: React.ComponentType>; + enabled: React.ComponentType>; id: string; is_enabled: boolean; }; diff --git a/packages/trader/src/App/Components/Elements/Media/media-item.tsx b/packages/trader/src/App/Components/Elements/Media/media-item.tsx index d184beda94fc..0d0ded93016b 100644 --- a/packages/trader/src/App/Components/Elements/Media/media-item.tsx +++ b/packages/trader/src/App/Components/Elements/Media/media-item.tsx @@ -1,5 +1,5 @@ import React from 'react'; -const MediaItem: React.FC> = ({ children }) =>
{children}
; +const MediaItem = ({ children }: React.PropsWithChildren) =>
{children}
; export default MediaItem; diff --git a/types/svg.d.ts b/types/svg.d.ts index e5d8185d6a55..66e43425079a 100644 --- a/types/svg.d.ts +++ b/types/svg.d.ts @@ -1,4 +1,4 @@ declare module '*.svg' { - const content: React.FC>; + const content: React.ComponentType>; export default content; } From 9005a05bb5b5108e4f805c4cd64a9079e4f423dc Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Thu, 14 Sep 2023 15:18:53 +0300 Subject: [PATCH 9/9] refactor: ts of index file --- .../src/App/Components/Elements/Media/{index.js => index.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/trader/src/App/Components/Elements/Media/{index.js => index.ts} (100%) diff --git a/packages/trader/src/App/Components/Elements/Media/index.js b/packages/trader/src/App/Components/Elements/Media/index.ts similarity index 100% rename from packages/trader/src/App/Components/Elements/Media/index.js rename to packages/trader/src/App/Components/Elements/Media/index.ts