ts-migration-verification-email (#5769)

binary-com · Jul 1, 2022 · 06f4e7e · 06f4e7e
1 parent dad6473
commit 06f4e7e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 26 deletions.
diff --git a/...mail/__tests__/verification-email.spec.js → ...ail/__tests__/verification-email.spec.tsx b/...mail/__tests__/verification-email.spec.js → ...ail/__tests__/verification-email.spec.tsx
@@ -9,52 +9,65 @@ jest.mock('Stores/connect.js', () => ({
 }));
 
 describe('<VerificationEmail />', () => {
-    const resendVerificationEmail = jest.fn();
-    const setIsResendClicked = jest.fn();
+    const mockProps = () => ({
+        is_resend_clicked: false,
+        is_withdrawal: false,
+        resendVerificationEmail: jest.fn(),
+        setIsResendClicked: jest.fn(),
+    });
 
     it('component should be rendered', () => {
-        const { container } = render(<VerificationEmail />);
+        const props = mockProps();
+        render(<VerificationEmail {...props} />);
 
-        expect(container.querySelector('.verification-email')).toBeInTheDocument();
         expect(screen.getByText("We've sent you an email.")).toBeInTheDocument();
         expect(
             screen.getByText('Please check your email for the verification link to complete the process.')
         ).toBeInTheDocument();
     });
 
     it("React.Fragment should be rendered if 'is_resend_clicked' prop is true", () => {
-        const { container } = render(<VerificationEmail is_resend_clicked />);
+        const props = mockProps();
+        props.is_resend_clicked = true;
+
+        render(<VerificationEmail {...props} />);
+        const btn = screen.getByRole('button');
 
         expect(screen.getByText("Didn't receive the email?")).toBeInTheDocument();
         expect(
             screen.getByText("Check your spam or junk folder. If it's not there, try resending the email.")
         ).toBeInTheDocument();
-        expect(container.querySelector('.verification-email__resend-button')).toBeInTheDocument();
+        expect(btn).toHaveClass('verification-email__resend-button');
     });
 
     it('resendVerificationEmail func should be triggered when resend button in clicked', () => {
-        const { container } = render(
-            <VerificationEmail is_resend_clicked resendVerificationEmail={resendVerificationEmail} />
-        );
+        const props = mockProps();
+        props.is_resend_clicked = true;
+
+        render(<VerificationEmail {...props} />);
 
-        const btn = container.querySelector('.verification-email__resend-button');
+        const btn = screen.getByRole('button', { name: 'Resend email' });
         fireEvent.click(btn);
 
-        expect(resendVerificationEmail).toHaveBeenCalledTimes(1);
+        expect(props.resendVerificationEmail).toHaveBeenCalledTimes(1);
     });
 
     it("button with 'Didn't receive the email?' text should be rendered when 'is_resend_clicked' prop is false", () => {
-        render(<VerificationEmail is_resend_clicked={false} />);
+        const props = mockProps();
+
+        render(<VerificationEmail {...props} />);
 
         expect(screen.getByRole('button', { name: "Didn't receive the email?" })).toBeInTheDocument();
     });
 
     it('setIsResendClicked func should be triggered', () => {
-        render(<VerificationEmail is_resend_clicked={false} setIsResendClicked={setIsResendClicked} />);
+        const props = mockProps();
+
+        render(<VerificationEmail {...props} />);
 
         const btn = screen.getByRole('button', { name: "Didn't receive the email?" });
         fireEvent.click(btn);
 
-        expect(setIsResendClicked).toHaveBeenCalledTimes(1);
+        expect(props.setIsResendClicked).toHaveBeenCalledTimes(1);
     });
 });
diff --git a/packages/cashier/src/components/verification-email/index.js b/packages/cashier/src/components/verification-email/index.js
diff --git a/packages/cashier/src/components/verification-email/index.ts b/packages/cashier/src/components/verification-email/index.ts
@@ -0,0 +1,3 @@
+import VerificationEmail from './verification-email';
+
+export default VerificationEmail;
diff --git a/...verification-email/verification-email.jsx → ...verification-email/verification-email.tsx b/...verification-email/verification-email.jsx → ...verification-email/verification-email.tsx
@@ -1,11 +1,22 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Icon, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import ResendEmailButtonWrapper from 'Components/resend-email-button-wrapper';
 import './verification-email.scss';
 
-const VerificationEmail = ({ is_resend_clicked, is_withdrawal, resendVerificationEmail, setIsResendClicked }) => (
+type TVerificationEmailProps = {
+    is_resend_clicked: boolean;
+    is_withdrawal: boolean;
+    resendVerificationEmail: () => void;
+    setIsResendClicked: (is_resend_clicked: boolean) => void;
+};
+
+const VerificationEmail = ({
+    is_resend_clicked,
+    is_withdrawal,
+    resendVerificationEmail,
+    setIsResendClicked,
+}: TVerificationEmailProps) => (
     <div className='verification-email'>
         <Icon icon='IcEmailSent' className='verification-email__icon' size={128} />
         <Text as='p' weight='bold' align='center' className='verification-email__title'>
@@ -43,11 +54,4 @@ const VerificationEmail = ({ is_resend_clicked, is_withdrawal, resendVerificatio
     </div>
 );
 
-VerificationEmail.propTypes = {
-    is_resend_clicked: PropTypes.bool,
-    is_withdrawal: PropTypes.bool,
-    resendVerificationEmail: PropTypes.func,
-    setIsResendClicked: PropTypes.func,
-};
-
 export default VerificationEmail;