From f6f566fa44c14032a2f88f73ef52a5432ad6acc8 Mon Sep 17 00:00:00 2001
From: amina-deriv <84661147+amina-deriv@users.noreply.github.com>
Date: Thu, 26 Oct 2023 10:20:35 +0400
Subject: [PATCH] Amina/comp 515/amend financial information dropdown (#10360)
* fix: set form values
* fix: common formating function
* fix: add id
* fix: aa
* fix: account signup
* fix: revert unrelated file change
* fix: test case
* fix: revert eslint fix on unrelated files
* fix: revert eslint fix on unrelated files
* fix: revert eslint fix on unrelated files
* fix: merge master
* fix: function to common
* fix: mobile
* fix: validation
* fix: add optional parameter
* fix: eslint
* chore: merge master
---
.../__tests__/financial-details.spec.tsx | 77 +++++++++++++++---
.../financial-details-partials.tsx | 81 +++++++++++++++++--
.../financial-details/financial-details.tsx | 12 ++-
.../src/Configs/financial-details-config.ts | 6 ++
.../src/Constants/financial-details.ts | 4 +
.../__tests__/financial-assessment.spec.tsx | 75 +++++++++++++++++
.../financial-assessment.tsx | 44 ++++++++--
.../RealAccountSignup/account-wizard.jsx | 3 +
8 files changed, 274 insertions(+), 28 deletions(-)
create mode 100644 packages/account/src/Constants/financial-details.ts
create mode 100644 packages/account/src/Sections/Assessment/FinancialAssessment/__tests__/financial-assessment.spec.tsx
diff --git a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx
index b7683eef5b7f..ef4216e9be33 100644
--- a/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx
+++ b/packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx
@@ -1,7 +1,7 @@
-import { FormikValues } from 'formik';
import React from 'react';
+import { FormikValues } from 'formik';
import { isDesktop, isMobile } from '@deriv/shared';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import FinancialDetails from '../financial-details';
@@ -25,6 +25,7 @@ describe('', () => {
validate: jest.fn(() => ({ errors: {} })),
goToPreviousStep: jest.fn(() => ({ errors: {} })),
value: {},
+ employment_status: '',
};
const fieldsRenderCheck = () => {
@@ -73,7 +74,7 @@ describe('', () => {
const btns = screen.getAllByRole('button');
expect(btns[0]).toHaveTextContent('Previous');
- fireEvent.click(btns[0]);
+ userEvent.click(btns[0]);
expect(mock_props.getCurrentStep).toHaveBeenCalledTimes(1);
});
@@ -103,21 +104,21 @@ describe('', () => {
(option: FormikValues) => option.name === 'source_of_wealth'
);
- fireEvent.change(account_turnover_select as HTMLElement, { target: { value: 'account turnover 1' } });
+ userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1');
- fireEvent.change(education_level_select as HTMLElement, { target: { value: 'education level 2' } });
- fireEvent.change(employment_indystry_select as HTMLElement, { target: { value: 'employment industry 1' } });
- fireEvent.change(estimated_worth_select as HTMLElement, { target: { value: 'estimated worth 2' } });
- fireEvent.change(income_source_select as HTMLElement, { target: { value: 'income source 1' } });
- fireEvent.change(net_income_select as HTMLElement, { target: { value: 'net income 1' } });
- fireEvent.change(occuppation_select as HTMLElement, { target: { value: 'occupation 2' } });
+ userEvent.type(education_level_select as HTMLElement, 'education level 2');
+ userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1');
+ userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2');
+ userEvent.type(income_source_select as HTMLElement, 'income source 1');
+ userEvent.type(net_income_select as HTMLElement, 'net income 1');
+ userEvent.type(occuppation_select as HTMLElement, 'Government Officers');
- fireEvent.change(source_of_wealth_select as HTMLElement, { target: { value: 'source of wealth 1' } });
+ userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1');
const btns = screen.getAllByRole('button');
expect(btns[1]).toHaveTextContent('Next');
- fireEvent.click(btns[1]);
+ userEvent.click(btns[1]);
await waitFor(() => {
expect(mock_props.onSubmit).toHaveBeenCalledTimes(1);
});
@@ -137,4 +138,56 @@ describe('', () => {
expect(screen.getByRole('option', { name: 'Salaried Employee' }).selected).toBe(true);
});
+
+ it('should show "Unemployed" in occupation list if employment status is not "Employed"', async () => {
+ (isDesktop as jest.Mock).mockReturnValue(false);
+ (isMobile as jest.Mock).mockReturnValue(true);
+ const new_mock_props = {
+ ...mock_props,
+ employment_status: 'Pensioner',
+ };
+ render();
+
+ fieldsRenderCheck();
+
+ const select_inputs = screen.getAllByRole('combobox');
+
+ const account_turnover_select = select_inputs.find(
+ (option: FormikValues) => option.name === 'account_turnover'
+ );
+ const education_level_select = select_inputs.find((option: FormikValues) => option.name === 'education_level');
+ const employment_indystry_select = select_inputs.find(
+ (option: FormikValues) => option.name === 'employment_industry'
+ );
+ const estimated_worth_select = select_inputs.find((option: FormikValues) => option.name === 'estimated_worth');
+ const income_source_select = select_inputs.find((option: FormikValues) => option.name === 'income_source');
+ const net_income_select = select_inputs.find((option: FormikValues) => option.name === 'net_income');
+
+ const source_of_wealth_select = select_inputs.find(
+ (option: FormikValues) => option.name === 'source_of_wealth'
+ );
+ const occuppation_select = select_inputs.find((option: FormikValues) => option.name === 'occupation');
+
+ userEvent.type(account_turnover_select as HTMLElement, 'account turnover 1');
+
+ userEvent.type(education_level_select as HTMLElement, 'education level 2');
+ userEvent.type(employment_indystry_select as HTMLElement, 'employment industry 1');
+ userEvent.type(estimated_worth_select as HTMLElement, 'estimated worth 2');
+ userEvent.type(income_source_select as HTMLElement, 'income source 1');
+ userEvent.type(net_income_select as HTMLElement, 'net income 1');
+ userEvent.type(source_of_wealth_select as HTMLElement, 'source of wealth 1');
+
+ const occupation_text = screen.getAllByText('Unemployed')[0];
+ expect(occupation_text).toBeInTheDocument();
+
+ userEvent.type(occuppation_select as HTMLElement, 'Unemployed');
+
+ const next_btn = screen.getByRole('button', { name: 'Next' });
+ expect(next_btn).toBeEnabled();
+
+ userEvent.click(next_btn);
+ await waitFor(() => {
+ expect(mock_props.onSubmit).toHaveBeenCalled();
+ });
+ });
});
diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx
index 1887f19849d0..c4fbd50aab62 100644
--- a/packages/account/src/Components/financial-details/financial-details-partials.tsx
+++ b/packages/account/src/Components/financial-details/financial-details-partials.tsx
@@ -9,15 +9,21 @@ import {
getEstimatedWorthList,
getIncomeSourceList,
getNetIncomeList,
- getOccupationList,
+ getFormattedOccupationList,
getSourceOfWealthList,
} from 'Configs/financial-details-config';
+import { EMPLOYMENT_VALUES } from 'Constants/financial-details';
type TFinancialDetailsDropdownFieldProps = {
dropdown_list: Array