Merge pull request #79 from suisin-deriv/suisin/create_test_case_for_…

…phone_verification

Suisin/create test case for phone verification

packages/account/src/Sections/Profile/PhoneVerification/__test__/confirm-phone-number.spec.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ConfirmPhoneNumber from '../confirm-phone-number';
+import { StoreProvider, mockStore } from '@deriv/stores';
+
+describe('ConfirmPhoneNumber', () => {
+    const store = mockStore({
+        client: {
+            account_settings: {
+                phone: '+0123456789',
+            },
+        },
+    });
+
+    it('should render ConfirmPhoneNumber', () => {
+        render(
+            <StoreProvider store={store}>
+                <ConfirmPhoneNumber />
+            </StoreProvider>
+        );
+        const phone_number_textfield = screen.getByRole('textbox', { name: 'Phone number' });
+        expect(screen.getByText('Confirm your phone number')).toBeInTheDocument();
+        expect(phone_number_textfield).toBeInTheDocument();
+        expect(phone_number_textfield).toHaveValue('+0123456789');
+        expect(screen.getByRole('button', { name: 'Get code via SMS' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Get code via WhatsApp' })).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Profile/PhoneVerification/__test__/confirm-your-email.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ConfirmYourEmail from '../confirm-your-email';
+import userEvent from '@testing-library/user-event';
+
+describe('ConfirmPhoneNumber', () => {
+    const store = mockStore({
+        client: {
+            account_settings: {
+                email: 'johndoe@regentmarkets.com',
+            },
+        },
+    });
+
+    it('should render ConfirmPhoneNumber', () => {
+        render(
+            <StoreProvider store={store}>
+                <ConfirmYourEmail />
+            </StoreProvider>
+        );
+        expect(screen.getByText(/Confirm it's you/)).toBeInTheDocument();
+        expect(screen.getByText(/We've sent a verification code to/)).toBeInTheDocument();
+        expect(screen.getByText('johndoe@regentmarkets.com')).toBeInTheDocument();
+        expect(
+            screen.getByText(/Enter the code or click the link in the email to verify that the account belongs to you./)
+        ).toBeInTheDocument();
+        expect(screen.getByRole('textbox', { name: /OTP code/ })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Resend code/ })).toBeInTheDocument();
+    });
+
+    it('should disable button when Resend code is clicked', () => {
+        render(
+            <StoreProvider store={store}>
+                <ConfirmYourEmail />
+            </StoreProvider>
+        );
+        const resend_button = screen.getByRole('button', { name: 'Resend code' });
+
+        userEvent.click(resend_button);
+
+        expect(resend_button).toBeDisabled();
+    });
+});

packages/account/src/Sections/Profile/PhoneVerification/__test__/phone-verification-card.spec.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import PhoneVerificationCard from '../phone-verification-card';
+
+describe('ConfirmPhoneNumber', () => {
+    it('should render ConfirmPhoneNumber', () => {
+        render(<PhoneVerificationCard>Card Content</PhoneVerificationCard>);
+        expect(screen.getByText(/Card Content/)).toBeInTheDocument();
+        expect(screen.getByText(/Card Content/)).not.toHaveClass(
+            'phone-verification__card phone-verification__card--small-card'
+        );
+    });
+
+    it('should include --small-card className if props is being passed in', () => {
+        render(<PhoneVerificationCard is_small_card>Card Content</PhoneVerificationCard>);
+        const card_content = screen.getByText(/Card Content/);
+        expect(card_content).toHaveClass('phone-verification__card phone-verification__card--small-card');
+    });
+});

packages/account/src/Sections/Profile/PhoneVerification/__test__/phone-verification-page.spec.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import PhoneVerificationPage from '../phone-verification-page';
+
+jest.mock('../confirm-your-email.tsx', () => jest.fn(() => <div>Confirm Your Email</div>));
+jest.mock('../confirm-phone-number.tsx', () => jest.fn(() => <div>Confirm Phone Number</div>));
+
+describe('ConfirmPhoneNumber', () => {
+    it('should render ConfirmPhoneNumber', () => {
+        render(<PhoneVerificationPage />);
+        expect(screen.getByText(/Phone number verification/)).toBeInTheDocument();
+        expect(screen.getByText(/Confirm Your Email/)).toBeInTheDocument();
+    });
+});