Skip to content

Commit 8872a9b

Browse files
henry-derivhenry-deriv
authored
[DTRA] Henry/webrel 74/refactor test coverage form trade params duration (#12541)
* Henry/webrel 74/test coverage form trade params duration (#9) * fix: test * fix: revert test commit * fix: empty commit * fix: change branch name * fix: add more test cases * fix: code smells * fix: code smells * fix: code smells * fix: code smells * fix: resolve comments
1 parent 278a8b2 commit 8872a9b

14 files changed

+989
-264
lines changed

‎packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/advanced-duration.spec.tsx

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import React from 'react';
2+
import { screen, render } from '@testing-library/react';
3+
import TraderProviders from '../../../../../../../trader-providers';
4+
import AdvancedDuration from '../advanced-duration';
5+
import { mockStore } from '@deriv/stores';
6+
7+
const button_toggle = 'MockedButtonToggle';
8+
const dropdown = 'MockedDropDown';
9+
const input_field = 'MockedInputField';
10+
const range_slider = 'MockedRangeSlider';
11+
const date_picker = 'MockedDatePicker';
12+
const time_picker = 'MockedTimePicker';
13+
const expiry_text = 'MockedExpiryText';
14+
const duration_range_text = 'MockedDurationRangeText';
15+
16+
jest.mock('@deriv/components', () => ({
17+
...jest.requireActual('@deriv/components'),
18+
ButtonToggle: jest.fn(() => <div>{button_toggle}</div>),
19+
Dropdown: jest.fn(() => <div>{dropdown}</div>),
20+
InputField: jest.fn(() => <div>{input_field}</div>),
21+
}));
22+
jest.mock('App/Components/Form/RangeSlider', () => jest.fn(() => <div>{range_slider}</div>));
23+
jest.mock('../../../DatePicker', () => jest.fn(() => <div>{date_picker}</div>));
24+
jest.mock('../../../TimePicker', () => jest.fn(() => <div>{time_picker}</div>));
25+
jest.mock('../expiry-text', () => jest.fn(() => <div>{expiry_text}</div>));
26+
jest.mock('../duration-range-text', () => jest.fn(() => <div>{duration_range_text}</div>));
27+
28+
describe('<AdvancedDuration />', () => {
29+
let mock_store: ReturnType<typeof mockStore>, default_props: React.ComponentProps<typeof AdvancedDuration>;
30+
beforeEach(() => {
31+
mock_store = {
32+
...mockStore({
33+
ui: {
34+
current_focus: '',
35+
setCurrentFocus: jest.fn(),
36+
},
37+
modules: {
38+
trade: {
39+
contract_expiry_type: 'intraday',
40+
duration_min_max: {
41+
daily: {
42+
min: 1234,
43+
max: 2345,
44+
},
45+
intraday: {
46+
min: 12345,
47+
max: 23456,
48+
},
49+
},
50+
validation_errors: {},
51+
},
52+
},
53+
}),
54+
};
55+
default_props = {
56+
advanced_duration_unit: 't',
57+
advanced_expiry_type: 'duration',
58+
changeDurationUnit: jest.fn(),
59+
duration_t: 10,
60+
duration_units_list: [
61+
{
62+
text: 'Ticks',
63+
value: 't',
64+
},
65+
{
66+
text: 'Seconds',
67+
value: 's',
68+
},
69+
{
70+
text: 'Minutes',
71+
value: 'm',
72+
},
73+
{
74+
text: 'Hours',
75+
value: 'h',
76+
},
77+
{
78+
text: 'Days',
79+
value: 'd',
80+
},
81+
],
82+
expiry_date: '',
83+
expiry_epoch: 1703057788,
84+
expiry_list: [
85+
{
86+
text: 'Duration',
87+
value: 'duration',
88+
},
89+
{
90+
text: 'End time',
91+
value: 'endtime',
92+
},
93+
],
94+
expiry_type: 'duration',
95+
getDurationFromUnit: jest.fn(),
96+
number_input_props: {
97+
type: 'number',
98+
is_incrementable: false,
99+
},
100+
onChange: jest.fn(),
101+
onChangeUiStore: jest.fn(),
102+
server_time: 0,
103+
shared_input_props: {
104+
is_hj_whitelisted: true,
105+
max_value: 86400,
106+
min_value: 15,
107+
onChange: jest.fn(),
108+
},
109+
start_date: 0,
110+
};
111+
});
112+
const renderAdvancedDuration = (
113+
mock_store: ReturnType<typeof mockStore>,
114+
default_props: React.ComponentProps<typeof AdvancedDuration>
115+
) => {
116+
return render(
117+
<TraderProviders store={mock_store}>
118+
<AdvancedDuration {...default_props} />
119+
</TraderProviders>
120+
);
121+
};
122+
it('Should render mocked button toggle if expiry_list is of length > 1', () => {
123+
renderAdvancedDuration(mock_store, default_props);
124+
expect(screen.getByText(button_toggle)).toBeInTheDocument();
125+
});
126+
it('Should not render mocked button toggle if expiry_list is of length <= 1', () => {
127+
default_props.expiry_list = [
128+
{
129+
text: 'Duration',
130+
value: 'duration',
131+
},
132+
];
133+
renderAdvancedDuration(mock_store, default_props);
134+
expect(screen.queryByText(button_toggle)).not.toBeInTheDocument();
135+
});
136+
it('Should render mocked trading date and trading time picker if contract is 24 hours and expiry type is endtime', () => {
137+
default_props.expiry_type = 'endtime';
138+
renderAdvancedDuration(mock_store, default_props);
139+
expect(screen.getByText(date_picker)).toBeInTheDocument();
140+
expect(screen.getByText(time_picker)).toBeInTheDocument();
141+
});
142+
it('Should render mocked expiry text and should not render trading time picker if contract is not 24 hours and expiry type is endtime', () => {
143+
default_props.expiry_type = 'endtime';
144+
default_props.duration_units_list = [
145+
{
146+
text: 'Ticks',
147+
value: 't',
148+
},
149+
{
150+
text: 'Seconds',
151+
value: 's',
152+
},
153+
{
154+
text: 'Days',
155+
value: 'd',
156+
},
157+
];
158+
renderAdvancedDuration(mock_store, default_props);
159+
expect(screen.getByText(expiry_text)).toBeInTheDocument();
160+
expect(screen.queryByText(time_picker)).not.toBeInTheDocument();
161+
});
162+
it('Should render mocked dropdown if duration_units_list length is > 1', () => {
163+
renderAdvancedDuration(mock_store, default_props);
164+
expect(screen.getByText(dropdown)).toBeInTheDocument();
165+
});
166+
it('Should not render mocked dropdown if duration_units_list length is > 0', () => {
167+
default_props.duration_units_list = [];
168+
renderAdvancedDuration(mock_store, default_props);
169+
expect(screen.queryByText(dropdown)).not.toBeInTheDocument();
170+
});
171+
it('Should render mocked trading date picker and mocked expiry text if advanced_duration_unit === d & !==t', () => {
172+
default_props.advanced_duration_unit = 'd';
173+
renderAdvancedDuration(mock_store, default_props);
174+
expect(screen.getByText(duration_range_text)).toBeInTheDocument();
175+
expect(screen.getByText(expiry_text)).toBeInTheDocument();
176+
});
177+
it('Should render mocked trading date picker and mocked expiry text if advanced_duration_unit === t && contract_expiry_type === tick', () => {
178+
mock_store.modules.trade.contract_expiry_type = 'tick';
179+
renderAdvancedDuration(mock_store, default_props);
180+
expect(screen.getByText(range_slider)).toBeInTheDocument();
181+
});
182+
it('Should render mocked mocked input field if advanced_duration_unit is intraday like h or m', () => {
183+
default_props.advanced_duration_unit = 'm';
184+
renderAdvancedDuration(mock_store, default_props);
185+
expect(screen.getByText(input_field)).toBeInTheDocument();
186+
});
187+
});

‎packages/trader/src/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/duration-mobile.spec.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
import { screen, render } from '@testing-library/react';
3+
import TraderProviders from '../../../../../../../trader-providers';
4+
import DurationMobile from '../duration-mobile';
5+
import { mockStore } from '@deriv/stores';
6+
7+
jest.mock('@deriv/components', () => {
8+
return {
9+
...jest.requireActual('@deriv/components'),
10+
Tabs: jest.fn(({ onTabItemClick, children }) => (
11+
<div>
12+
{children}
13+
<button onClick={() => onTabItemClick(0)}>Button</button>
14+
</div>
15+
)),
16+
};
17+
});
18+
19+
jest.mock('../duration-ticks-widget-mobile.tsx', () => jest.fn(() => 'MockedDurationTicksWidgetMobile'));
20+
jest.mock('../duration-numbers-widget-mobile.tsx', () => jest.fn(() => 'MockedDurationNumbersWidgetMobile'));
21+
22+
describe('<DurationMobile />', () => {
23+
let mock_store: ReturnType<typeof mockStore>, default_props: React.ComponentProps<typeof DurationMobile>;
24+
beforeEach(() => {
25+
mock_store = {
26+
...mockStore({
27+
modules: {
28+
trade: {
29+
duration_units_list: [
30+
{
31+
text: 'Ticks',
32+
value: 't',
33+
},
34+
{
35+
text: 'Seconds',
36+
value: 's',
37+
},
38+
{
39+
text: 'Minutes',
40+
value: 'm',
41+
},
42+
{
43+
text: 'Hours',
44+
value: 'h',
45+
},
46+
{
47+
text: 'Days',
48+
value: 'd',
49+
},
50+
{
51+
text: 'Weeks',
52+
value: 'w',
53+
},
54+
],
55+
duration_unit: 't',
56+
basis: 'stake',
57+
duration_min_max: {
58+
daily: {
59+
min: 1234,
60+
max: 2345,
61+
},
62+
intraday: {
63+
min: 12345,
64+
max: 23456,
65+
},
66+
},
67+
validation_errors: {},
68+
},
69+
},
70+
}),
71+
};
72+
default_props = {
73+
amount_tab_idx: 0,
74+
d_duration: 1,
75+
duration_tab_idx: 1,
76+
expiry_epoch: 1703057788,
77+
h_duration: 1,
78+
has_amount_error: false,
79+
m_duration: 1,
80+
payout_value: 123,
81+
s_duration: 1,
82+
setDurationError: jest.fn(),
83+
setDurationTabIdx: jest.fn(),
84+
setSelectedDuration: jest.fn(),
85+
stake_value: 12,
86+
t_duration: 1,
87+
toggleModal: jest.fn(),
88+
};
89+
});
90+
const renderDurationMobile = (
91+
mock_store: ReturnType<typeof mockStore>,
92+
default_props: React.ComponentProps<typeof DurationMobile>
93+
) => {
94+
return render(
95+
<TraderProviders store={mock_store}>
96+
<DurationMobile {...default_props} />
97+
</TraderProviders>
98+
);
99+
};
100+
it('Should render 1 Ticks Widget, 4 Numbers Widget and mocked date picker', () => {
101+
renderDurationMobile(mock_store, default_props);
102+
expect(screen.getByText(/mockeddurationtickswidgetmobile/i)).toBeInTheDocument();
103+
expect(screen.getAllByText(/mockeddurationnumberswidgetmobile/i)).toHaveLength(4);
104+
expect(screen.getByText(/pick an end date/i)).toBeInTheDocument();
105+
});
106+
});

0 commit comments

Comments
 (0)