Kate / DTRA-404 / [Refactoring]: Divide trade-categories.tsx file and…

… cover changes with tests (#35)

* refactor: add rise fall description

* refactor: separate stay end high contract description

* refactor: separate description of digits contracts

* refactor: separate asian reset runhighlow touch contracts

* refactor: separate callputspread lb tickhighlow and vanilla contracts

* refactor: separate multipliers contract

* refactor: add unit tests for contract descriptions

* refactor: add more tests

* refactor: add tests for touch ans vanilla contracts

* refactor: tests for trade categories

* refactor: contract description structure

* refactor: apply suggestions

* refactor: add missing test case

packages/trader/src/Assets/Trading/Categories/Description/__tests__/asian-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AsianTradeDescription from '../asian-trade-description';
+
+describe('<AsianTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<AsianTradeDescription />);
+
+        expect(screen.getByText(/Asian options settle by comparing/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/call-put-spread-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CallPutSpreadTradeDescription from '../call-put-spread-trade-description';
+
+describe('<CallPutSpreadTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<CallPutSpreadTradeDescription />);
+
+        expect(screen.getByText(/Win maximum payout if the exit spot is higher/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/end-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EndTradeDescription from '../end-trade-description';
+
+describe('<EndTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<EndTradeDescription />);
+
+        expect(screen.getByText(/If you select "Ends Between", you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/even-odd-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import EvenOddTradeDescription from '../even-odd-trade-description';
+
+describe('<EvenOddTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<EvenOddTradeDescription />);
+
+        expect(screen.getByText(/If you select "Even", you will win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/high-low-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HighLowTradeDescription from '../high-low-trade-description';
+
+describe('<HighLowTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<HighLowTradeDescription />);
+
+        expect(screen.getByText(/If you select "Higher", you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-call-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LbCallTradeDescription from '../lb-call-trade-description';
+
+describe('<LbCallTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<LbCallTradeDescription />);
+
+        expect(screen.getByText(/By purchasing the "Close-to-Low" contract/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-high-low-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LbHighLowTradeDescription from '../lb-high-low-trade-description';
+
+describe('<LbHighLowTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<LbHighLowTradeDescription />);
+
+        expect(screen.getByText(/By purchasing the "High-to-Low" contract, you/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/lb-put-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LbPutTradeDescription from '../lb-put-trade-desciption';
+
+describe('<LbPutTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<LbPutTradeDescription />);
+
+        expect(screen.getByText(/By purchasing the "High-to-Close" contract/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/match-diff-trade-descriptioon.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MatchDiffTradeDescription from '../match-diff-trade-description';
+
+describe('<MatchDiffTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<MatchDiffTradeDescription />);
+
+        expect(screen.getByText(/If you select "Matches", you will win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/multiplier-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MultiplierTradeDescription from '../multiplier-trade-description';
+
+describe('<MultiplierTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<MultiplierTradeDescription />);
+
+        expect(screen.getByText(/Predict the market direction and select either “Up” or “Down”/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/over-under-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OverUnderTradeDescription from '../over-under-trade-description';
+
+describe('<OverUnderTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<OverUnderTradeDescription />);
+
+        expect(screen.getByText(/If you select "Over", you will win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/reset-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ResetTradeDescription from '../reset-trade-description';
+
+describe('<ResetTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<ResetTradeDescription />);
+
+        expect(screen.getByText(/If you select "Reset-Up”, you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/rise-fall-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RiseFallTradeDescription from '../rise-fall-trade-description';
+
+describe('<RiseFallTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<RiseFallTradeDescription />);
+
+        expect(screen.getByText(/If you select "Rise", you win the payout if the exit/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/run-high-low-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RunHighLowTradeDescription from '../run-high-low-trade-description';
+
+describe('<RunHighLowTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<RunHighLowTradeDescription />);
+
+        expect(screen.getByText(/If you select "Only Ups", you win the payout if consecutive/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/stay-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import StayTradeDescription from '../stay-trade-description';
+
+describe('<StayTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<StayTradeDescription />);
+
+        expect(screen.getByText(/If you select "Stays Between", you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/tick-high-low-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TickHighLowTradeDescription from '../tick-high-low-trade-description';
+
+describe('<TickHighLowTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<TickHighLowTradeDescription />);
+
+        expect(screen.getByText(/If you select "High Tick", you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/__tests__/touch-trade-description.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TouchTradeDescription from '../touch-trade-description';
+
+describe('<TouchTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<TouchTradeDescription />);
+
+        expect(screen.getByText(/If you select "Touch", you win the payout/i)).toBeInTheDocument();
+    });
+});

packages/trader/src/Assets/Trading/Categories/__tests__/turbos-trade-description.spec.tsx → packages/trader/src/Assets/Trading/Categories/Description/__tests__/turbos-trade-description.spec.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { TurbosTradeDescription } from '../turbos-trade-description';
+import TurbosTradeDescription from '../turbos-trade-description';
 
 describe('<TurbosTradeDescription />', () => {
     it('a proper text of description should be rendered', () => {
         render(<TurbosTradeDescription />);
+
         expect(
             screen.getByText(
                 /This product allows you to express a strong bullish or bearish view on an underlying asset/i

packages/trader/src/Assets/Trading/Categories/Description/__tests__/vanilla-trade-description.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import VanillaTradeDescription from '../vanilla-trade-description';
+
+const mocked_props = {
+    onClick: jest.fn(),
+};
+
+describe('<VanillaTradeDescription />', () => {
+    it('a proper text of description should be rendered', () => {
+        render(<VanillaTradeDescription {...mocked_props} />);
+
+        expect(screen.getByText(/Vanilla options allow you to predict/i)).toBeInTheDocument();
+    });
+
+    it('should call a function if word from vocabulary was clicked', () => {
+        render(<VanillaTradeDescription {...mocked_props} />);
+
+        const vocabulary_word = screen.getByText(/payout per point/i);
+        userEvent.click(vocabulary_word);
+
+        expect(mocked_props.onClick).toBeCalled();
+    });
+});

packages/trader/src/Assets/Trading/Categories/Description/accumulator-trade-description.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+import { Text } from '@deriv/components';
+
+const AccumulatorTradeDescription = ({ onClick }: { onClick: React.MouseEventHandler<HTMLSpanElement> }) => {
+    const content = [
+        <Localize
+            i18n_default_text='Accumulators allow you to express a view on the range of movement of an index and grow your stake exponentially at a fixed <0>growth rate</0>.'
+            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            key='1'
+        />,
+        <Localize
+            i18n_default_text='Your <0>payout</0> is the sum of your inital stake and profit.'
+            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            key='2'
+        />,
+        <Localize
+            i18n_default_text='Your stake will continue to grow as long as the current spot price remains within a specified <0>range</0> from the <0>previous spot price</0>. Otherwise, you lose your stake and the trade is terminated.'
+            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            key='3'
+        />,
+        <Localize
+            i18n_default_text='You can close your trade anytime. However, be aware of <0>slippage risk<0/>.'
+            components={[<span className='contract-type-info__content-definition' onClick={onClick} key={0} />]}
+            key='4'
+        />,
+    ];
+    return (
+        <React.Fragment>
+            {content.map(paragraph => (
+                <Text as='p' key={paragraph.props.key}>
+                    {paragraph}
+                </Text>
+            ))}
+        </React.Fragment>
+    );
+};
+
+export default AccumulatorTradeDescription;

packages/trader/src/Assets/Trading/Categories/Description/asian-trade-description.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+import { Text } from '@deriv/components';
+
+const AsianTradeDescription = () => {
+    const content = [
+        <Localize
+            i18n_default_text='Asian options settle by comparing the last tick with the average spot over the period.'
+            key='1'
+        />,
+        <Localize
+            i18n_default_text='If you select "Asian Rise", you will win the payout if the last tick is higher than the average of the ticks.'
+            key='2'
+        />,
+        <Localize
+            i18n_default_text='If you select "Asian Fall", you will win the payout if the last tick is lower than the average of the ticks.'
+            key='3'
+        />,
+        <Localize
+            i18n_default_text="If the last tick is equal to the average of the ticks, you don't win the payout."
+            key='4'
+        />,
+    ];
+    return (
+        <React.Fragment>
+            {content.map(paragraph => (
+                <Text as='p' key={paragraph.props.key}>
+                    {paragraph}
+                </Text>
+            ))}
+        </React.Fragment>
+    );
+};
+
+export default AsianTradeDescription;

packages/trader/src/Assets/Trading/Categories/Description/call-put-spread-trade-description.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+import { Text } from '@deriv/components';
+
+const CallPutSpreadTradeDescription = () => {
+    const content = [
+        { type: 'heading', text: <Localize i18n_default_text={'Spread Up'} /> },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize
+                    i18n_default_text='Win maximum payout if the exit spot is higher than or equal to the upper barrier.'
+                    key='1'
+                />
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize
+                    i18n_default_text='Win up to maximum payout if exit spot is between lower and upper barrier, in proportion to the difference between exit spot and lower barrier.'
+                    key='2'
+                />
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize i18n_default_text='No payout if exit spot is below or equal to the lower barrier.' key='3' />
+            ),
+        },
+        { type: 'heading', text: <Localize i18n_default_text='Spread Down' /> },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize
+                    i18n_default_text='Win maximum payout if the exit spot is lower than or equal to the lower barrier.'
+                    key='4'
+                />
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize
+                    i18n_default_text='Win up to maximum payout if exit spot is between lower and upper barrier, in proportion to the difference between upper barrier and exit spot.'
+                    key='5'
+                />
+            ),
+        },
+        {
+            type: 'paragraph',
+            text: (
+                <Localize i18n_default_text='No payout if exit spot is above or equal to the upper barrier.' key='6' />
+            ),
+        },
+    ];
+
+    return (
+        <React.Fragment>
+            {content.map(({ type, text }) =>
+                type === 'heading' ? (
+                    <Text as='h2' key={text.props.key} weight='bold' size='xs'>
+                        {text}
+                    </Text>
+                ) : (
+                    <Text as='p' key={text.props.key}>
+                        {text}
+                    </Text>
+                )
+            )}
+        </React.Fragment>
+    );
+};
+
+export default CallPutSpreadTradeDescription;