Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DTRA-V2]/Ahmad/Barrier spot fix #17793

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+165 −168
Open

[DTRA-V2]/Ahmad/Barrier spot fix #17793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5519abb
fix: fix
ahmadtaimoor-deriv Dec 10, 2024
5c7fccb
chore: removing irrelevant file
ahmadtaimoor-deriv Dec 11, 2024
e09e4d2
chore: fixing test case
ahmadtaimoor-deriv Dec 11, 2024
ed0304a
fix: show error on empty field
ahmadtaimoor-deriv Dec 11, 2024
1db8d17
chore: remove unused state
ahmadtaimoor-deriv Dec 11, 2024
60d7823
fix: merge master and review comment
ahmadtaimoor-deriv Dec 17, 2024
3425543
chore: merge master
ahmadtaimoor-deriv Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 85 additions & 92 deletions ...ages/trader/src/AppV2/Components/TradeParameters/Barrier/__tests__/barrier-input.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,21 @@ import TraderProviders from '../../../../../trader-providers';
import { mockStore } from '@deriv/stores';
import ModulesProvider from 'Stores/Providers/modules-providers';
import { TCoreStores } from '@deriv/stores/types';
import { useDtraderQuery } from 'AppV2/Hooks/useDtraderQuery';

jest.mock('AppV2/Hooks/useDtraderQuery', () => ({
...jest.requireActual('AppV2/Hooks/useDtraderQuery'),
useDtraderQuery: jest.fn(),
}));

describe('BarrierInput', () => {
const setInitialBarrierValue = jest.fn();
let mockUseDtraderQuery: jest.Mock;

beforeEach(() => {
mockUseDtraderQuery = useDtraderQuery as jest.Mock;
mockUseDtraderQuery.mockReset();
});

const onChange = jest.fn();
const onClose = jest.fn();
const default_trade_store = {
Expand All @@ -22,18 +34,25 @@ describe('BarrierInput', () => {
},
},
};

const mockBarrierInput = (mocked_store: TCoreStores) => {
const mockBarrierInput = (mocked_store: TCoreStores, is_open = true) => {
render(
<TraderProviders store={mocked_store}>
<ModulesProvider store={mocked_store}>
<BarrierInput isDays={false} setInitialBarrierValue={setInitialBarrierValue} onClose={onClose} />
<BarrierInput is_days={false} onClose={onClose} is_open={is_open} />
</ModulesProvider>
</TraderProviders>
);
};

it('renders BarrierInput component correctly', () => {
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: +10 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});

mockBarrierInput(mockStore(default_trade_store));
expect(screen.getByText('Above spot')).toBeInTheDocument();
expect(screen.getByText('Below spot')).toBeInTheDocument();
Expand All @@ -43,118 +62,92 @@ describe('BarrierInput', () => {
});

it('closes ActionSheet on pressing primary action when on first page', async () => {
mockBarrierInput(mockStore(default_trade_store));
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: +10 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});
mockBarrierInput(mockStore(default_trade_store), false);
await userEvent.click(screen.getByRole('textbox'));
await userEvent.click(screen.getByText(/Save/));
await waitFor(() => {
expect(onClose).toBeCalledWith(true);
expect(onClose).toHaveBeenCalled();
});
});

it('calls setInitialBarrierValue and onChange on component mount', () => {
mockBarrierInput(mockStore(default_trade_store));
expect(setInitialBarrierValue).toHaveBeenCalledWith('+10');
});

it('handles chip selection correctly', async () => {
mockBarrierInput(mockStore(default_trade_store));
const aboveSpotChip = screen.getByText('Above spot');
const belowSpotChip = screen.getByText('Below spot');
const fixedPriceChip = screen.getByText('Fixed barrier');

await userEvent.click(belowSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-10' } });

await userEvent.click(fixedPriceChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '' } });

await userEvent.click(aboveSpotChip);
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+10' } });
});

it('handles input change correctly', async () => {
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: -101 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});
mockBarrierInput(mockStore(default_trade_store));
const input = screen.getByPlaceholderText('Distance to spot');

fireEvent.change(input, { target: { value: '20' } });
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+20' } });

const belowSpotChip = screen.getByText('Below spot');
await userEvent.click(belowSpotChip);
fireEvent.change(input, { target: { value: '15' } });
expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-15' } });
});

it('sets initial barrier value and option correctly for a positive barrier', () => {
mockBarrierInput(mockStore(default_trade_store));
expect(setInitialBarrierValue).toHaveBeenCalledWith('+10');
expect(screen.getAllByRole('button')[0]).toHaveAttribute('data-state', 'selected');
});

it('sets initial barrier value and option correctly for a negative barrier', () => {
default_trade_store.modules.trade.barrier_1 = '-10';
mockBarrierInput(mockStore(default_trade_store));
expect(setInitialBarrierValue).toHaveBeenCalledWith('-10');
expect(screen.getAllByRole('button')[1]).toHaveAttribute('data-state', 'selected');
});

it('sets initial barrier value and option correctly for a fixed price barrier', () => {
default_trade_store.modules.trade.barrier_1 = '30';
mockBarrierInput(mockStore(default_trade_store));
expect(setInitialBarrierValue).toHaveBeenCalledWith('30');
expect(screen.getAllByRole('button')[2]).toHaveAttribute('data-state', 'selected');
fireEvent.change(input, { target: { value: '10' } });
const inputElement = screen.getByPlaceholderText('Distance to spot');
expect(inputElement).toHaveValue('10');
});

it('shows error when a validation error comes', () => {
default_trade_store.modules.trade.validation_errors.barrier_1 = ['Something went wrong'] as never;
mockBarrierInput(mockStore(default_trade_store));
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
});

it('shows error when a validation error comes for fixed price as well', () => {
default_trade_store.modules.trade.validation_errors.barrier_1 = ['Something went wrong'] as never;
default_trade_store.modules.trade.barrier_1 = '10';
mockBarrierInput(mockStore(default_trade_store));
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
});

it('handles chip selection correctly for Above spot when initial barrier is negative', async () => {
default_trade_store.modules.trade.barrier_1 = '-10';
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: -0.6 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {
message: 'Barrier is out of acceptable range.',
},
},
});
mockBarrierInput(mockStore(default_trade_store));

const aboveSpotChip = screen.getByText('Above spot');
await userEvent.click(aboveSpotChip);

expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+10' } });
expect(screen.getByText('Barrier is out of acceptable range.')).toBeInTheDocument();
});

it('handles chip selection correctly for Below spot when initial barrier is positive', async () => {
default_trade_store.modules.trade.barrier_1 = '+.6';
it('show value correctly for Below spot', async () => {
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: -0.6 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});
default_trade_store.modules.trade.barrier_1 = '-0.6';
mockBarrierInput(mockStore(default_trade_store));

const belowSpotChip = screen.getByText('Below spot');
await userEvent.click(belowSpotChip);

expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '-0.6' } });
const inputElement = screen.getByPlaceholderText('Distance to spot');
expect(inputElement).toHaveValue('0.6');
});

it('handles chip selection correctly for Fixed barrier', async () => {
default_trade_store.modules.trade.barrier_1 = '+.6';
it('show value correctly for above spot', async () => {
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: +0.6 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});
default_trade_store.modules.trade.barrier_1 = '+0.6';
mockBarrierInput(mockStore(default_trade_store));

const fixedPriceChip = screen.getByText('Fixed barrier');
await userEvent.click(fixedPriceChip);

expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '' } });
const inputElement = screen.getByPlaceholderText('Distance to spot');
expect(inputElement).toHaveValue('0.6');
});

it('handles chip selection correctly for Above spot when initial barrier is fixed price', async () => {
default_trade_store.modules.trade.barrier_1 = '.6';
it('show value correctly when initial barrier is fixed price', async () => {
default_trade_store.modules.trade.barrier_1 = '60';
mockUseDtraderQuery.mockReturnValue({
data: {
proposal: { barrier: 60 },
echo_req: { contract_type: 'TURBOSSHORT', authorized: true },
error: {},
},
});
mockBarrierInput(mockStore(default_trade_store));

const aboveSpotChip = screen.getByText('Above spot');
await userEvent.click(aboveSpotChip);

expect(onChange).toHaveBeenCalledWith({ target: { name: 'barrier_1', value: '+0.6' } });
const inputElement = screen.getByPlaceholderText('Price');
expect(inputElement).toHaveValue('60');
});
});
4 changes: 2 additions & 2 deletions packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React from 'react';
import { ActionSheet, Text } from '@deriv-com/quill-ui';
import { Localize } from '@deriv/translations';

const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
const BarrierDescription = ({ is_days }: { is_days: boolean }) => {
return (
<ActionSheet.Content className='barrier-params__description-content'>
{isDays ? (
{is_days ? (
<div className='content-section'>
<Text bold>
<Localize i18n_default_text='Fixed barrier:' />
Expand Down
Loading
Loading