[DTRA] henry/webrel-46/chore: add test cases for trading time picker (b…

…inary-com#11951)

* chore: add test cases for trading time picker

* chore: test case for trading-date-picker

* fix: add the rest of the test cases

* fix: resolve comments

* fix: failing test

* fix: change to pascal case

packages/trader/src/App/Components/Form/TimePicker/__tests__/dialog.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Dialog from '../dialog';
+import moment from 'moment';
+
+describe('<Dialog />', () => {
+    const default_props = {
+        start_times: [moment('2023-11-21T08:00:00')],
+        end_times: [moment('2023-11-22T12:00:00')],
+        onChange: jest.fn(),
+        className: 'testClassName',
+        preClass: 'testPreClass',
+        selected_time: '23:45',
+    };
+
+    it('Should render minute and hours dialogs', () => {
+        render(<Dialog {...default_props} />);
+        const hour_element = screen.getByText('23');
+        const minute_element = screen.getByText('45');
+
+        expect(screen.getByText(/hour/i)).toBeInTheDocument();
+        expect(screen.getByText(/minute/i)).toBeInTheDocument();
+        expect(hour_element).toBeInTheDocument();
+        expect(minute_element).toBeInTheDocument();
+        expect(minute_element).toHaveClass('testPreClass__selector-list-item--selected');
+        expect(hour_element).toHaveClass('testPreClass__selector-list-item--selected');
+    });
+    it('Selecting disabled hour and minute does not call onChange function', () => {
+        render(<Dialog {...default_props} />);
+        const disabled_hour_element = screen.getByText('12');
+        const disabled_minute_element = screen.getByText('45');
+        userEvent.click(disabled_hour_element);
+        userEvent.click(disabled_minute_element);
+
+        expect(default_props.onChange).not.toHaveBeenCalled();
+    });
+});

packages/trader/src/App/Components/Form/TimePicker/__tests__/time-picker.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import TimePicker from '../time-picker';
+import moment from 'moment';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../trader-providers';
+
+jest.mock('../dialog', () => jest.fn(() => 'TimePickerDialog'));
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    Icon: jest.fn(() => <div>Mocked Icon</div>),
+}));
+jest.mock('react-transition-group', () => ({
+    CSSTransition: jest.fn(({ children, ...props }) =>
+        props.in ? <div>{children}</div> : <div>CSSTransitionElement</div>
+    ),
+}));
+
+describe('<TimePicker />', () => {
+    let default_mocked_store: ReturnType<typeof mockStore>;
+    const mocked_props = {
+        end_times: [moment('2023-11-22T12:00:00')],
+        is_nativepicker: false,
+        name: 'testTimePicker',
+        onChange: jest.fn(),
+        placeholder: '',
+        selected_time: '23:45',
+        start_times: [moment('2023-11-21T08:00:00')],
+        validation_errors: ['error', 'error1'],
+    };
+    beforeEach(() => {
+        default_mocked_store = {
+            ...mockStore({
+                ui: {
+                    current_focus: '',
+                    setCurrentFocus: jest.fn(),
+                },
+            }),
+        };
+    });
+    const mockTimePicker = () => {
+        return (
+            <TraderProviders store={default_mocked_store}>
+                <TimePicker {...mocked_props} />
+            </TraderProviders>
+        );
+    };
+    it('should render CSS Transition Element, mocked Icon and input with selected_time if is_native_picker is false and input is not clicked', () => {
+        render(mockTimePicker());
+        expect(screen.getByRole('textbox')).toHaveValue('23:45 GMT');
+        expect(screen.getByText(/mocked icon/i)).toBeInTheDocument();
+        expect(screen.getByText(/csstransitionelement/i)).toBeInTheDocument();
+    });
+    it('should render TimePickerDialog if input is clicked', () => {
+        render(mockTimePicker());
+        userEvent.click(screen.getByRole('textbox'));
+        expect(screen.getByText(/timepickerdialog/i)).toBeInTheDocument();
+    });
+    it('should render native html input if is_native_picker is true', () => {
+        mocked_props.is_nativepicker = true;
+        render(mockTimePicker());
+        const input = screen.getByTestId('dt_testTimePicker_input');
+        expect(input).toHaveValue('23:45');
+        expect(input).toHaveAttribute('min', '08:00');
+        expect(input).toHaveAttribute('max', '12:00');
+    });
+});

packages/trader/src/App/Components/Form/TimePicker/time-picker.tsx

@@ -71,6 +71,7 @@ const TimePicker = observer(
                 {is_nativepicker ? (
                     <input
                         type='time'
+                        data-testid={`dt_${name}_input`}
                         id={`dt_${name}_input`}
                         value={selected_time}
                         onChange={handleChange}

packages/trader/src/Modules/Trading/Components/Form/DatePicker/__tests__/trading-date-picker.spec.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import moment from 'moment';
+import TradingDatePicker from '../trading-date-picker';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../trader-providers';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    DatePicker: jest.fn(() => 'MockedDatePicker'),
+}));
+jest.mock('Stores/Modules/Trading/Helpers/contract-type', () => ({
+    ContractType: {
+        getTradingEvents: jest.fn(() => [
+            {
+                dates: 'today, Fridays',
+                descrip: 'Closes early (at 20:55)',
+            },
+            {
+                dates: '2023-12-25',
+                descrip: 'Christmas Day',
+            },
+            {
+                dates: '2024-01-01',
+                descrip: "New Year's Day",
+            },
+        ]),
+    },
+}));
+describe('<TradingTimePicker />', () => {
+    let default_mocked_store: ReturnType<typeof mockStore>;
+    const mocked_props = {
+        id: 'test_id',
+        is_24_hours_contract: false,
+        mode: 'duration',
+        name: 'test_time_picker',
+    };
+    beforeEach(() => {
+        default_mocked_store = {
+            ...mockStore({
+                common: {
+                    server_time: moment('2023-11-21T14:30:00'),
+                },
+                modules: {
+                    trade: {
+                        duration: 1,
+                        duration_min_max: {
+                            daily: {
+                                min: 1234,
+                                max: 2345,
+                            },
+                            intraday: {
+                                min: 12345,
+                                max: 23456,
+                            },
+                        },
+                        duration_units_list: [
+                            { text: 'Minutes', value: 'm' },
+                            { text: 'Hours', value: 'h' },
+                            { text: 'Days', value: 'd' },
+                        ],
+                        expiry_type: 'duration',
+                        onChange: jest.fn(),
+                        start_date: 0,
+                        start_time: null,
+                        symbol: '100HZ',
+                        validation_errors: {},
+                    },
+                },
+            }),
+        };
+    });
+
+    const mockTradingDatePicker = (mock_store: ReturnType<typeof mockStore>) => {
+        return (
+            <TraderProviders store={mock_store}>
+                <TradingDatePicker {...mocked_props} />
+            </TraderProviders>
+        );
+    };
+    it('Should render Mocked Date Picker and tooltip should be rendered', () => {
+        render(mockTradingDatePicker(default_mocked_store));
+        const date_picker = screen.getByText(/mockeddatepicker/i);
+        expect(date_picker).toBeInTheDocument();
+        expect(date_picker).toHaveClass('trade-container__tooltip');
+    });
+});

packages/trader/src/Modules/Trading/Components/Form/TimePicker/__tests__/trading-time-picker.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import moment from 'moment';
+import TradingTimePicker from '../trading-time-picker';
+import { mockStore } from '@deriv/stores';
+import TraderProviders from '../../../../../../trader-providers';
+import { render, screen } from '@testing-library/react';
+
+jest.mock('App/Components/Form/TimePicker', () => jest.fn(() => <div>MockedTimePicker</div>));
+
+describe('<TradingTimePicker />', () => {
+    let default_mocked_store: ReturnType<typeof mockStore>;
+
+    beforeEach(() => {
+        default_mocked_store = {
+            ...mockStore({
+                common: {
+                    server_time: moment('2023-11-21T14:30:00'),
+                },
+                modules: {
+                    trade: {
+                        expiry_date: '2023-11-22',
+                        expiry_time: '12:45',
+                        market_open_times: ['00:00'],
+                        market_close_times: ['20:55'],
+                        onChange: jest.fn(),
+                        is_market_closed: false,
+                    },
+                },
+            }),
+        };
+    });
+
+    const mockTradingTimePicker = (mock_store: ReturnType<typeof mockStore>) => {
+        return (
+            <TraderProviders store={mock_store}>
+                <TradingTimePicker />
+            </TraderProviders>
+        );
+    };
+    it('Should render Mocked Time Picker', () => {
+        render(mockTradingTimePicker(default_mocked_store));
+        expect(screen.getByText(/MockedTimePicker/i)).toBeInTheDocument();
+    });
+    it('Should call onChange if expiry_time is outside of market opening times', () => {
+        default_mocked_store.modules.trade.expiry_time = '21:45';
+        render(mockTradingTimePicker(default_mocked_store));
+        expect(default_mocked_store.modules.trade.onChange).toHaveBeenCalled();
+    });
+});