Skip to content

Commit

Permalink
[DTRA] Henry/webrel 74/refactor test coverage form trade params durat…
Browse files Browse the repository at this point in the history 
…ion (deriv-com#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
  • Loading branch information
@henry-deriv
henry-deriv authored Jan 23, 2024
1 parent 278a8b2 commit 8872a9b
Show file tree
Hide file tree
Showing 14 changed files with 989 additions and 264 deletions.
187 changes: 187 additions & 0 deletions ...Modules/Trading/Components/Form/TradeParams/Duration/__tests__/advanced-duration.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
import TraderProviders from '../../../../../../../trader-providers';
import AdvancedDuration from '../advanced-duration';
import { mockStore } from '@deriv/stores';

const button_toggle = 'MockedButtonToggle';
const dropdown = 'MockedDropDown';
const input_field = 'MockedInputField';
const range_slider = 'MockedRangeSlider';
const date_picker = 'MockedDatePicker';
const time_picker = 'MockedTimePicker';
const expiry_text = 'MockedExpiryText';
const duration_range_text = 'MockedDurationRangeText';

jest.mock('@deriv/components', () => ({
...jest.requireActual('@deriv/components'),
ButtonToggle: jest.fn(() => <div>{button_toggle}</div>),
Dropdown: jest.fn(() => <div>{dropdown}</div>),
InputField: jest.fn(() => <div>{input_field}</div>),
}));
jest.mock('App/Components/Form/RangeSlider', () => jest.fn(() => <div>{range_slider}</div>));
jest.mock('../../../DatePicker', () => jest.fn(() => <div>{date_picker}</div>));
jest.mock('../../../TimePicker', () => jest.fn(() => <div>{time_picker}</div>));
jest.mock('../expiry-text', () => jest.fn(() => <div>{expiry_text}</div>));
jest.mock('../duration-range-text', () => jest.fn(() => <div>{duration_range_text}</div>));

describe('<AdvancedDuration />', () => {
let mock_store: ReturnType<typeof mockStore>, default_props: React.ComponentProps<typeof AdvancedDuration>;
beforeEach(() => {
mock_store = {
...mockStore({
ui: {
current_focus: '',
setCurrentFocus: jest.fn(),
},
modules: {
trade: {
contract_expiry_type: 'intraday',
duration_min_max: {
daily: {
min: 1234,
max: 2345,
},
intraday: {
min: 12345,
max: 23456,
},
},
validation_errors: {},
},
},
}),
};
default_props = {
advanced_duration_unit: 't',
advanced_expiry_type: 'duration',
changeDurationUnit: jest.fn(),
duration_t: 10,
duration_units_list: [
{
text: 'Ticks',
value: 't',
},
{
text: 'Seconds',
value: 's',
},
{
text: 'Minutes',
value: 'm',
},
{
text: 'Hours',
value: 'h',
},
{
text: 'Days',
value: 'd',
},
],
expiry_date: '',
expiry_epoch: 1703057788,
expiry_list: [
{
text: 'Duration',
value: 'duration',
},
{
text: 'End time',
value: 'endtime',
},
],
expiry_type: 'duration',
getDurationFromUnit: jest.fn(),
number_input_props: {
type: 'number',
is_incrementable: false,
},
onChange: jest.fn(),
onChangeUiStore: jest.fn(),
server_time: 0,
shared_input_props: {
is_hj_whitelisted: true,
max_value: 86400,
min_value: 15,
onChange: jest.fn(),
},
start_date: 0,
};
});
const renderAdvancedDuration = (
mock_store: ReturnType<typeof mockStore>,
default_props: React.ComponentProps<typeof AdvancedDuration>
) => {
return render(
<TraderProviders store={mock_store}>
<AdvancedDuration {...default_props} />
</TraderProviders>
);
};
it('Should render mocked button toggle if expiry_list is of length > 1', () => {
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(button_toggle)).toBeInTheDocument();
});
it('Should not render mocked button toggle if expiry_list is of length <= 1', () => {
default_props.expiry_list = [
{
text: 'Duration',
value: 'duration',
},
];
renderAdvancedDuration(mock_store, default_props);
expect(screen.queryByText(button_toggle)).not.toBeInTheDocument();
});
it('Should render mocked trading date and trading time picker if contract is 24 hours and expiry type is endtime', () => {
default_props.expiry_type = 'endtime';
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(date_picker)).toBeInTheDocument();
expect(screen.getByText(time_picker)).toBeInTheDocument();
});
it('Should render mocked expiry text and should not render trading time picker if contract is not 24 hours and expiry type is endtime', () => {
default_props.expiry_type = 'endtime';
default_props.duration_units_list = [
{
text: 'Ticks',
value: 't',
},
{
text: 'Seconds',
value: 's',
},
{
text: 'Days',
value: 'd',
},
];
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(expiry_text)).toBeInTheDocument();
expect(screen.queryByText(time_picker)).not.toBeInTheDocument();
});
it('Should render mocked dropdown if duration_units_list length is > 1', () => {
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(dropdown)).toBeInTheDocument();
});
it('Should not render mocked dropdown if duration_units_list length is > 0', () => {
default_props.duration_units_list = [];
renderAdvancedDuration(mock_store, default_props);
expect(screen.queryByText(dropdown)).not.toBeInTheDocument();
});
it('Should render mocked trading date picker and mocked expiry text if advanced_duration_unit === d & !==t', () => {
default_props.advanced_duration_unit = 'd';
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(duration_range_text)).toBeInTheDocument();
expect(screen.getByText(expiry_text)).toBeInTheDocument();
});
it('Should render mocked trading date picker and mocked expiry text if advanced_duration_unit === t && contract_expiry_type === tick', () => {
mock_store.modules.trade.contract_expiry_type = 'tick';
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(range_slider)).toBeInTheDocument();
});
it('Should render mocked mocked input field if advanced_duration_unit is intraday like h or m', () => {
default_props.advanced_duration_unit = 'm';
renderAdvancedDuration(mock_store, default_props);
expect(screen.getByText(input_field)).toBeInTheDocument();
});
});
106 changes: 106 additions & 0 deletions ...c/Modules/Trading/Components/Form/TradeParams/Duration/__tests__/duration-mobile.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';
import { screen, render } from '@testing-library/react';
import TraderProviders from '../../../../../../../trader-providers';
import DurationMobile from '../duration-mobile';
import { mockStore } from '@deriv/stores';

jest.mock('@deriv/components', () => {
return {
...jest.requireActual('@deriv/components'),
Tabs: jest.fn(({ onTabItemClick, children }) => (
<div>
{children}
<button onClick={() => onTabItemClick(0)}>Button</button>
</div>
)),
};
});

jest.mock('../duration-ticks-widget-mobile.tsx', () => jest.fn(() => 'MockedDurationTicksWidgetMobile'));
jest.mock('../duration-numbers-widget-mobile.tsx', () => jest.fn(() => 'MockedDurationNumbersWidgetMobile'));

describe('<DurationMobile />', () => {
let mock_store: ReturnType<typeof mockStore>, default_props: React.ComponentProps<typeof DurationMobile>;
beforeEach(() => {
mock_store = {
...mockStore({
modules: {
trade: {
duration_units_list: [
{
text: 'Ticks',
value: 't',
},
{
text: 'Seconds',
value: 's',
},
{
text: 'Minutes',
value: 'm',
},
{
text: 'Hours',
value: 'h',
},
{
text: 'Days',
value: 'd',
},
{
text: 'Weeks',
value: 'w',
},
],
duration_unit: 't',
basis: 'stake',
duration_min_max: {
daily: {
min: 1234,
max: 2345,
},
intraday: {
min: 12345,
max: 23456,
},
},
validation_errors: {},
},
},
}),
};
default_props = {
amount_tab_idx: 0,
d_duration: 1,
duration_tab_idx: 1,
expiry_epoch: 1703057788,
h_duration: 1,
has_amount_error: false,
m_duration: 1,
payout_value: 123,
s_duration: 1,
setDurationError: jest.fn(),
setDurationTabIdx: jest.fn(),
setSelectedDuration: jest.fn(),
stake_value: 12,
t_duration: 1,
toggleModal: jest.fn(),
};
});
const renderDurationMobile = (
mock_store: ReturnType<typeof mockStore>,
default_props: React.ComponentProps<typeof DurationMobile>
) => {
return render(
<TraderProviders store={mock_store}>
<DurationMobile {...default_props} />
</TraderProviders>
);
};
it('Should render 1 Ticks Widget, 4 Numbers Widget and mocked date picker', () => {
renderDurationMobile(mock_store, default_props);
expect(screen.getByText(/mockeddurationtickswidgetmobile/i)).toBeInTheDocument();
expect(screen.getAllByText(/mockeddurationnumberswidgetmobile/i)).toHaveLength(4);
expect(screen.getByText(/pick an end date/i)).toBeInTheDocument();
});
});
Loading

0 comments on commit 8872a9b

Please sign in to comment.