Merge branch 'maryia/kate/DTRA-1279/redesign_position_page' of github…

….com:kate-deriv/deriv-app into maryia/positions-redesign/finish-contract-card-add-total-profit
kate-deriv · May 27, 2024 · 9688013 · 9688013
2 parents 1163533 + 06c9356
commit 9688013
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 28 deletions.
diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -638,6 +638,16 @@ const mock = (): TStores & { is_mock: boolean } => {
                 setAccountType: jest.fn(),
                 setMigratedMT5Accounts: jest.fn(),
             },
+            positions: {
+                openContractTypeFilter: [],
+                closedContractTypeFilter: [],
+                timeFilter: '',
+                customTimeRangeFilter: '',
+                setClosedContractTypeFilter: jest.fn(),
+                setOpenContractTypeFilter: jest.fn(),
+                setTimeFilter: jest.fn(),
+                setCustomTimeRangeFilter: jest.fn(),
+            },
             trade: {
                 accumulator_range_list: [],
                 active_symbols: [],

diff --git a/packages/trader/src/AppV2/Components/Filter/__tests__/time-filter.spec.tsx b/packages/trader/src/AppV2/Components/Filter/__tests__/time-filter.spec.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import TimeFilter from '../time-filter';
 
 const defaultFilterName = 'All time';
+const datePickerComponentText = 'Choose a date range';
 const mockProps = {
     handleDateChange: jest.fn(),
     setTimeFilter: jest.fn(),
@@ -34,4 +35,56 @@ describe('TimeFilter', () => {
 
         expect(screen.getAllByText(defaultFilterName)).toHaveLength(2);
     });
+
+    it('should call setTimeFilter with corresponding value if user clicks on "Today"', () => {
+        render(<TimeFilter {...mockProps} />);
+
+        userEvent.click(screen.getByText('Today'));
+
+        expect(mockProps.setTimeFilter).toHaveBeenCalledWith('Today');
+    });
+
+    it('should call setTimeFilter with corresponding value if user clicks on "Yesterday"', () => {
+        render(<TimeFilter {...mockProps} />);
+
+        userEvent.click(screen.getByText('Yesterday'));
+
+        expect(mockProps.setTimeFilter).toHaveBeenCalledWith('Yesterday');
+    });
+
+    it('should call setTimeFilter with corresponding value if user clicks on "Last 60 days"', () => {
+        render(<TimeFilter {...mockProps} />);
+
+        userEvent.click(screen.getByText('Last 60 days'));
+
+        expect(mockProps.setTimeFilter).toHaveBeenCalledWith('60');
+    });
+
+    it('should call setTimeFilter and setCustomTimeRangeFilter with empty string if user clicks on "All time"', () => {
+        render(<TimeFilter {...mockProps} timeFilter='30' />);
+
+        userEvent.click(screen.getByText('All time'));
+
+        expect(mockProps.setTimeFilter).toHaveBeenCalledWith('');
+    });
+
+    it('should show Date Picker if user clicks on "Custom" button', () => {
+        render(<TimeFilter {...mockProps} />);
+
+        expect(screen.queryByText(datePickerComponentText)).not.toBeInTheDocument();
+
+        userEvent.click(screen.getByText('Custom'));
+
+        expect(screen.getByText(datePickerComponentText)).toBeInTheDocument();
+    });
+
+    it('should close Date Picker if it was shown after user clicks on overlay', () => {
+        render(<TimeFilter {...mockProps} />);
+
+        userEvent.click(screen.getByText('Custom'));
+        expect(screen.getByText(datePickerComponentText)).toBeInTheDocument();
+
+        userEvent.click(screen.getAllByTestId('dt-actionsheet-overlay')[1]);
+        expect(screen.queryByText(datePickerComponentText)).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx b/packages/trader/src/AppV2/Components/Filter/contract-type-filter.tsx
@@ -8,7 +8,6 @@ type TContractTypeFilter = {
     setContractTypeFilter: (filterValues: string[]) => void;
 };
 
-// TODO: Replace mockAvailableContractsList with real data when BE will be ready (send list of all available contracts based on account)
 const mockAvailableContractsList = [
     { tradeType: <Localize i18n_default_text='Accumulators' />, id: 'Accumulators' },
     { tradeType: <Localize i18n_default_text='Vanillas' />, id: 'Vanillas' },

diff --git a/packages/trader/src/AppV2/Components/Filter/time-filter.tsx b/packages/trader/src/AppV2/Components/Filter/time-filter.tsx
@@ -84,7 +84,7 @@ const TimeFilter = ({
             });
         } else {
             handleDateChange({
-                from: Number(value) ? toMoment().startOf('day').subtract(Number(value), 'day').add(1, 's') : undefined,
+                from: toMoment().startOf('day').subtract(Number(value), 'day').add(1, 's'),
                 to: toMoment().endOf('day'),
                 is_batch: true,
             });

diff --git a/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx b/packages/trader/src/AppV2/Containers/Positions/positions-content.tsx
@@ -51,17 +51,6 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
     const shouldShowContractCards =
         isClosedTab || (filteredPositions.length && (filteredPositions[0]?.contract_info as TContractInfo)?.status);
 
-    React.useEffect(() => {
-        isClosedTab ? onClosedTabMount() : onOpenTabMount();
-
-        return () => {
-            isClosedTab && onClosedTabUnmount();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    React.useEffect(() => setFilteredPositions(positions), [positions]);
-
     const handleTradeTypeFilterChange = (filterValues: string[]) => {
         setContractTypeFilter(filterValues);
         if (filterValues.length) {
@@ -74,6 +63,20 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
         }
     };
 
+    const contractCards = isClosedTab ? (
+        <ContractCardsSections positions={filteredPositions} onScroll={handleScroll} />
+    ) : (
+        <ContractCardList
+            currency={currency}
+            hasButtonsDemo={hasButtonsDemo}
+            onClickCancel={isClosedTab ? undefined : onClickCancel}
+            onClickSell={isClosedTab ? undefined : onClickSell}
+            positions={filteredPositions}
+            setHasButtonsDemo={setHasButtonsDemo}
+            serverTime={server_time}
+        />
+    );
+
     React.useEffect(() => {
         if (isClosedTab) {
             setNoMatchesFound(!positions.length && !!(timeFilter || customTimeRangeFilter));
@@ -87,6 +90,17 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
         }
     }, [customTimeRangeFilter, timeFilter, isClosedTab, positions, contractTypeFilter]);
 
+    React.useEffect(() => {
+        isClosedTab ? onClosedTabMount() : onOpenTabMount();
+
+        return () => {
+            isClosedTab && onClosedTabUnmount();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    React.useEffect(() => setFilteredPositions(positions), [positions]);
+
     if (isLoading || (!shouldShowContractCards && !shouldShowEmptyMessage)) return <Loading />;
     return (
         <div className={`positions-page__${isClosedTab ? 'closed' : 'open'}`}>
@@ -118,20 +132,7 @@ const PositionsContent = observer(({ hasButtonsDemo, isClosedTab, setHasButtonsD
             {shouldShowEmptyMessage ? (
                 <EmptyPositions isClosedTab={isClosedTab} noMatchesFound={noMatchesFound} />
             ) : (
-                shouldShowContractCards &&
-                (isClosedTab ? (
-                    <ContractCardsSections positions={filteredPositions} onScroll={handleScroll} />
-                ) : (
-                    <ContractCardList
-                        currency={currency}
-                        hasButtonsDemo={hasButtonsDemo}
-                        onClickCancel={isClosedTab ? undefined : onClickCancel}
-                        onClickSell={isClosedTab ? undefined : onClickSell}
-                        positions={filteredPositions}
-                        setHasButtonsDemo={setHasButtonsDemo}
-                        serverTime={server_time}
-                    />
-                ))
+                shouldShowContractCards && contractCards
             )}
         </div>
     );

diff --git a/packages/trader/src/AppV2/Hooks/__tests__/useTimeFilter.spec.tsx b/packages/trader/src/AppV2/Hooks/__tests__/useTimeFilter.spec.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { mockStore } from '@deriv/stores';
+import ModulesProvider from 'Stores/Providers/modules-providers';
+import useTimeFilter from '../useTimeFilter';
+
+describe('useTimeFilter', () => {
+    const wrapper = ({ children }: { children: JSX.Element }) => {
+        return <ModulesProvider store={mockStore({})}>{children}</ModulesProvider>;
+    };
+
+    it('should return the correct initial values', () => {
+        const { result } = renderHook(() => useTimeFilter(), { wrapper });
+        expect(result.current.customTimeRangeFilter).toEqual('');
+        expect(result.current.timeFilter).toEqual('');
+        expect(result.current.setCustomTimeRangeFilter).toBeDefined();
+        expect(result.current.setTimeFilter).toBeDefined();
+    });
+});
diff --git a/packages/trader/src/AppV2/Hooks/__tests__/useTradeTypeFilter.spec.tsx b/packages/trader/src/AppV2/Hooks/__tests__/useTradeTypeFilter.spec.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { mockStore } from '@deriv/stores';
+import ModulesProvider from 'Stores/Providers/modules-providers';
+import useTradeTypeFilter from '../useTradeTypeFilter';
+
+describe('useTradeTypeFilter', () => {
+    const wrapper = ({ children }: { children: JSX.Element }) => {
+        return <ModulesProvider store={mockStore({})}>{children}</ModulesProvider>;
+    };
+
+    it('should return the correct initial values if isClosedTab === true', () => {
+        const { result } = renderHook(() => useTradeTypeFilter({ isClosedTab: true }), { wrapper });
+        const { contractTypeFilter, setContractTypeFilter } = result.current;
+
+        expect(contractTypeFilter).toEqual([]);
+        expect(setContractTypeFilter).toBeDefined();
+    });
+
+    it('should return the correct initial values if isClosedTab === false', () => {
+        const { result } = renderHook(() => useTradeTypeFilter({}), { wrapper });
+        const { contractTypeFilter, setContractTypeFilter } = result.current;
+
+        expect(contractTypeFilter).toEqual([]);
+        expect(setContractTypeFilter).toBeDefined();
+    });
+});
diff --git a/packages/trader/src/AppV2/Utils/positions-utils.ts b/packages/trader/src/AppV2/Utils/positions-utils.ts
@@ -22,7 +22,6 @@ export const filterPositions = (positions: (TPortfolioPosition | TClosedPosition
     // Split contract type names with '/' (e.g. Rise/Fall)
     const splittedFilter = filter.map(option => (option.includes('/') ? option.split('/') : option)).flat();
 
-    //TODO: Create own config instead of getSupportedContracts
     return positions.filter(({ contract_info }) => {
         const config = getSupportedContracts(isHighLow({ shortcode: contract_info.shortcode }))[
             contract_info.contract_type as keyof ReturnType<typeof getSupportedContracts>