Vinu/migrating cashier-container into ts

packages/cashier/src/components/cashier-container/real/__tests__/real.spec.js → packages/cashier/src/components/cashier-container/real/__tests__/real.spec.tsx

@@ -3,37 +3,39 @@ import { render, screen } from '@testing-library/react';
 import Real from '../real';
 
 jest.mock('@deriv/components', () => ({
-    ...jest.requireActual('@deriv/components'),
+    ...(jest.requireActual('@deriv/components') as any),
     Loading: () => <div>Loading</div>,
 }));
 
 describe('<Real />', () => {
     const props = {
         iframe_url: 'https://www.test_url.com',
         clearIframe: jest.fn(),
+        iframe_height: '',
+        is_loading: false,
     };
 
     it('should render the component with iframe when iframe_url value is passed', () => {
-        const { queryByTestId } = render(<Real {...props} />);
+        render(<Real {...props} />);
         const el_loader = screen.queryByText('Loading');
 
         expect(el_loader).not.toBeInTheDocument();
-        expect(queryByTestId('doughflow_section')).toBeTruthy();
+        expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument();
     });
 
     it('should render the loading when is_loading is true', () => {
-        const { queryByTestId } = render(<Real {...props} iframe_url='' is_loading />);
+        render(<Real {...props} iframe_url='' is_loading />);
         const el_loader = screen.queryByText('Loading');
 
         expect(el_loader).toBeInTheDocument();
-        expect(queryByTestId('doughflow_section')).toBeNull();
+        expect(screen.queryByTestId('dt_doughflow_section')).not.toBeInTheDocument();
     });
 
     it('will display doughflow and loader if all props are provided', () => {
-        const { queryByTestId } = render(<Real {...props} is_loading />);
+        render(<Real {...props} is_loading />);
         const el_loader = screen.queryByText('Loading');
 
         expect(el_loader).toBeInTheDocument();
-        expect(queryByTestId('doughflow_section')).toBeTruthy();
+        expect(screen.queryByTestId('dt_doughflow_section')).toBeInTheDocument();
     });
 });

packages/cashier/src/components/cashier-container/real/index.ts

@@ -0,0 +1,3 @@
+import Real from './real';
+
+export default Real;

packages/cashier/src/components/cashier-container/real/real.jsx → packages/cashier/src/components/cashier-container/real/real.tsx

@@ -1,8 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading } from '@deriv/components';
 
-const Real = ({ iframe_height, iframe_url, clearIframe, is_loading }) => {
+type TRealProps = {
+    iframe_height: number | string;
+    iframe_url: string;
+    clearIframe: () => void;
+    is_loading: boolean;
+};
+
+const Real = ({ iframe_height, iframe_url, clearIframe, is_loading }: TRealProps) => {
     React.useEffect(() => {
         return () => {
             clearIframe();
@@ -19,18 +25,11 @@ const Real = ({ iframe_height, iframe_url, clearIframe, is_loading }) => {
                     src={iframe_url}
                     frameBorder='0'
                     scrolling='auto'
-                    data-testid='doughflow_section'
+                    data-testid='dt_doughflow_section'
                 />
             )}
         </div>
     );
 };
 
-Real.propTypes = {
-    iframe_height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    iframe_url: PropTypes.string,
-    clearIframe: PropTypes.func,
-    is_loading: PropTypes.bool,
-};
-
 export default Real;

packages/cashier/src/components/cashier-container/virtual/__tests__/virtual.spec.js → packages/cashier/src/components/cashier-container/virtual/__tests__/virtual.spec.tsx

@@ -14,33 +14,33 @@ describe('<Virtual />', () => {
     const history = createBrowserHistory();
 
     it('component should render', () => {
-        const component = render(
+        render(
             <Router history={history}>
                 <Virtual />
             </Router>
         );
 
-        expect(component.container.querySelector('.cashier__wrapper')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_cashier_wrapper_id')).toBeInTheDocument();
     });
 
     it(`icon styling should be dark when 'is_dark_mode_on' prop is true`, () => {
-        const component = render(
+        render(
             <Router history={history}>
                 <Virtual is_dark_mode_on />
             </Router>
         );
 
-        expect(component.container.querySelector('.virtual__account-switch-icon--dark')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_virtual_account_switch_icon_dark_id')).toBeInTheDocument();
     });
 
     it(`icon styling should be light when 'is_dark_mode_on' prop is false`, () => {
-        const component = render(
+        render(
             <Router history={history}>
                 <Virtual is_dark_mode_on={false} />
             </Router>
         );
 
-        expect(component.container.querySelector('.virtual__account-switch-icon--light')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_virtual_account_switch_icon_light_id')).toBeInTheDocument();
     });
 
     it(`toggleAccountsDialog func should be triggered on click on text element 'Account Switcher.'`, () => {

packages/cashier/src/components/cashier-container/virtual/index.ts

@@ -0,0 +1,3 @@
+import Virtual from './virtual';
+
+export default Virtual;

packages/cashier/src/components/cashier-container/virtual/virtual.jsx → packages/cashier/src/components/cashier-container/virtual/virtual.tsx

@@ -1,18 +1,28 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { RootStore } from 'Types';
 import './virtual.scss';
 
-const Virtual = ({ is_dark_mode_on, toggleAccountsDialog }) => {
+type TVirtualProps = RouteComponentProps & {
+    is_dark_mode_on: boolean;
+    toggleAccountsDialog: () => void;
+};
+const Virtual = ({ is_dark_mode_on, toggleAccountsDialog }: TVirtualProps) => {
     return (
-        <div className='cashier__wrapper'>
+        <div className='cashier__wrapper' data-testid='dt_cashier_wrapper_id'>
             <React.Fragment>
                 <div
+                    data-testid={
+                        is_dark_mode_on
+                            ? 'dt_virtual_account_switch_icon_dark_id'
+                            : 'dt_virtual_account_switch_icon_light_id'
+                    }
                     className={classNames(
                         'virtual__account-switch-icon',
                         is_dark_mode_on ? 'virtual__account-switch-icon--dark' : 'virtual__account-switch-icon--light'
@@ -41,12 +51,7 @@ const Virtual = ({ is_dark_mode_on, toggleAccountsDialog }) => {
     );
 };
 
-Virtual.propTypes = {
-    is_dark_mode_on: PropTypes.bool,
-    toggleAccountsDialog: PropTypes.func,
-};
-
-export default connect(({ ui }) => ({
+export default connect(({ ui }: RootStore) => ({
     is_dark_mode_on: ui.is_dark_mode_on,
     toggleAccountsDialog: ui.toggleAccountsDialog,
 }))(withRouter(Virtual));

packages/cashier/tsconfig.json

@@ -9,7 +9,7 @@
             "Images/*": ["public/images/*"],
             "Pages/*": ["pages/*"],
             "Stores/*": ["stores/*"],
-            "Types/*": ["types/*"],
+            "Types": ["types"],
             "Utils/*": ["utils/*"],
         },
         "outDir": "./dist",