chore: add unit tests

deriv-com · May 14, 2024 · 5eae937 · 5eae937
1 parent 20dfa30
commit 5eae937
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 27 deletions.
diff --git a/src/components/AdvertiserName/AdvertiserName.tsx b/src/components/AdvertiserName/AdvertiserName.tsx
@@ -39,7 +39,7 @@ const AdvertiserName = ({ advertiserStats, onClickBlocked }: TAdvertiserNameProp
                 <AdvertiserNameBadges advertiserStats={advertiserStats} />
             </div>
             {isDesktop && isMyProfile && <AdvertiserNameToggle advertiserInfo={advertiserStats} />}
-            {isDesktop && !isMyProfile && !advertiserStats?.isBlocked && (
+            {isDesktop && !isMyProfile && !advertiserStats?.is_blocked && (
                 <BlockDropdown id={advertiserStats?.id} onClickBlocked={onClickBlocked} />
             )}
         </div>

diff --git a/src/components/AdvertiserName/BlockDropdown.tsx b/src/components/AdvertiserName/BlockDropdown.tsx
@@ -3,6 +3,7 @@ import { useOnClickOutside } from 'usehooks-ts';
 import { BlockUnblockUserModal } from '@/components/Modals';
 import { useAdvertiserStats, useModalManager } from '@/hooks';
 import { LabelPairedEllipsisVerticalMdRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './BlockDropdown.scss';
 
@@ -15,7 +16,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
     const [visible, setVisible] = useState(false);
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
     const { data } = useAdvertiserStats(id);
-    const { isBlocked, name = '' } = data ?? {};
+    const { is_blocked: isBlocked, name = '' } = data ?? {};
     const ref = useRef(null);
     useOnClickOutside(ref, () => setVisible(false));
     const { isMobile } = useDevice();
@@ -24,8 +25,7 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
         <div className='block-dropdown' ref={ref}>
             <Button color='white' variant='outlined'>
                 <LabelPairedEllipsisVerticalMdRegularIcon
-                    className='popover-dropdown__icon'
-                    data-testid='dt_popover_dropdown_icon'
+                    data-testid='dt_block_dropdown_icon'
                     onClick={() => setVisible(prevState => !prevState)}
                 />
             </Button>
@@ -41,19 +41,21 @@ const BlockDropdown = ({ id, onClickBlocked }: TBlockDropdownProps) => {
                         variant='ghost'
                     >
                         <Text className='block-dropdown__list-item__label' size={isMobile ? 'md' : 'sm'}>
-                            Block
+                            <Localize i18n_default_text='Block' />
                         </Text>
                     </Button>
                 </div>
             )}
-            <BlockUnblockUserModal
-                advertiserName={name}
-                id={id ?? ''}
-                isBlocked={!!isBlocked}
-                isModalOpen={!!isModalOpenFor('BlockUnblockUserModal')}
-                onClickBlocked={onClickBlocked}
-                onRequestClose={hideModal}
-            />
+            {isModalOpenFor('BlockUnblockUserModal') && (
+                <BlockUnblockUserModal
+                    advertiserName={name}
+                    id={id ?? ''}
+                    isBlocked={!!isBlocked}
+                    isModalOpen
+                    onClickBlocked={onClickBlocked}
+                    onRequestClose={hideModal}
+                />
+            )}
         </div>
     );
 };

diff --git a/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx b/src/components/AdvertiserName/__tests__/BlockDropdown.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import BlockDropdown from '../BlockDropdown';
+
+jest.mock('@/hooks/custom-hooks', () => ({
+    useIsAdvertiserBarred: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({
+        isMobile: false,
+    }),
+}));
+
+const mockProps = {
+    id: '134',
+    onClickBlocked: jest.fn(),
+};
+
+const mockModalManager = {
+    hideModal: jest.fn(),
+    isModalOpenFor: jest.fn().mockReturnValue(false),
+    showModal: jest.fn(),
+};
+jest.mock('@/hooks', () => ({
+    useAdvertiserStats: jest.fn().mockReturnValue({ data: { is_blocked: false, name: 'test' } }),
+    useModalManager: jest.fn(() => mockModalManager),
+}));
+describe('BlockDropdown', () => {
+    it('should render', () => {
+        render(<BlockDropdown {...mockProps} />);
+        expect(screen.getByTestId('dt_block_dropdown_icon')).toBeInTheDocument();
+    });
+    it('should render the dropdown list on clicking on the icon', async () => {
+        render(<BlockDropdown {...mockProps} />);
+        await userEvent.click(screen.getByTestId('dt_block_dropdown_icon'));
+        expect(screen.getByText('Block')).toBeInTheDocument();
+    });
+    it('should handle the onclick event for clicking on the block button', async () => {
+        render(<BlockDropdown {...mockProps} />);
+        await userEvent.click(screen.getByTestId('dt_block_dropdown_icon'));
+        await userEvent.click(screen.getByText('Block'));
+        expect(mockModalManager.showModal).toHaveBeenCalledWith('BlockUnblockUserModal');
+    });
+});
diff --git a/src/components/ProfileContent/ProfileContent.tsx b/src/components/ProfileContent/ProfileContent.tsx
@@ -30,10 +30,7 @@ const ProfileContent = ({ id, setAdvertiserName, setShowOverlay }: TProfileConte
     return (
         <>
             <div className='profile-content'>
-                <AdvertiserName
-                    advertiserStats={data}
-                    onClickBlocked={() => setShowOverlay?.((prevState: boolean) => !prevState)}
-                />
+                <AdvertiserName advertiserStats={data} onClickBlocked={() => setShowOverlay?.(true)} />
                 {isMyProfile ? <ProfileBalance advertiserStats={data} /> : <ProfileStats advertiserStats={data} />}
             </div>
             {isMobile && isMyProfile && <AdvertiserNameToggle advertiserInfo={data} />}

diff --git a/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts b/src/hooks/api/advertiser/p2p-advertiser/useAdvertiserInfo.ts
@@ -25,6 +25,7 @@ const useAdvertiserInfo = (id?: string) => {
      * Key removal is handled in useAdvertiserStats hook's useEffect.
      * */
     const local_storage_key = id ? `p2p_advertiser_info_${id}` : 'p2p_advertiser_info';
+
     const [p2p_advertiser_info, setP2PAdvertiserInfo] = useLocalStorage<DeepPartial<TP2PAdvertiserInfo>>(
         local_storage_key,
         {}

diff --git a/src/hooks/custom-hooks/useAdvertiserStats.ts b/src/hooks/custom-hooks/useAdvertiserStats.ts
@@ -83,9 +83,6 @@ const useAdvertiserStats = (advertiserId?: string) => {
             /** Checks if the user is already an advertiser */
             isAdvertiser,
 
-            /** Indicates that the advertiser is blocked by the current user. */
-            isBlocked: !!data?.is_blocked,
-
             /** Checks if the user is eligible to upgrade their daily limits */
             isEligibleForLimitUpgrade: Boolean(data?.upgradable_daily_limits),
 

diff --git a/src/pages/advertiser/screens/Advertiser/Advertiser.tsx b/src/pages/advertiser/screens/Advertiser/Advertiser.tsx
@@ -50,8 +50,10 @@ const Advertiser = () => {
             />
             <AdvertiserBlockOverlay
                 advertiserName={advertiserName}
+                id={id}
                 isOverlayVisible={showOverlay}
                 onClickUnblock={() => showModal('BlockUnblockUserModal')}
+                setShowOverlay={setShowOverlay}
             >
                 <ProfileContent id={id} setAdvertiserName={setAdvertiserName} setShowOverlay={setShowOverlay} />
                 <AdvertiserAdvertsTable advertiserId={advertiserId} />

diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss
@@ -4,6 +4,7 @@
 
     &__wrapper {
         align-items: center;
+        gap: 2rem;
         background: #fff;
         border: 2px solid #f2f3f4;
         border-radius: 6px;
@@ -32,8 +33,4 @@
             margin-top: 2rem;
         }
     }
-
-    .advertiser-page-adverts__table-body {
-        min-height: 20vh;
-    }
 }
diff --git a/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx b/src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.tsx
@@ -1,24 +1,32 @@
 import { PropsWithChildren } from 'react';
+import { BlockUnblockUserModal } from '@/components/Modals';
+import { useModalManager } from '@/hooks';
+import { DerivLightIcBlockIcon } from '@deriv/quill-icons';
 import { Localize } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './AdvertiserBlockOverlay.scss';
 
 type TAdvertiserBlockOverlayProps = {
     advertiserName: string;
+    id?: string;
     isOverlayVisible: boolean;
     onClickUnblock: () => void;
+    setShowOverlay: (showOverlay: boolean) => void;
 };
 const AdvertiserBlockOverlay = ({
     advertiserName,
     children,
+    id,
     isOverlayVisible,
-    onClickUnblock,
+    setShowOverlay,
 }: PropsWithChildren<TAdvertiserBlockOverlayProps>) => {
     const { isMobile } = useDevice();
+    const { hideModal, isModalOpenFor, showModal } = useModalManager();
     if (isOverlayVisible) {
         return (
             <div className='advertiser-block-overlay'>
                 <div className='advertiser-block-overlay__wrapper'>
+                    <DerivLightIcBlockIcon height={160} width={160} />
                     <Text
                         className='advertiser-block-overlay__wrapper-text'
                         size={isMobile ? 'lg' : 'md'}
@@ -29,15 +37,23 @@ const AdvertiserBlockOverlay = ({
                     <Button
                         className='border-2'
                         color='black'
-                        onClick={onClickUnblock}
+                        onClick={() => showModal('BlockUnblockUserModal')}
                         size='lg'
                         textSize={isMobile ? 'md' : 'sm'}
                         variant='outlined'
                     >
-                        Unblock
+                        <Localize i18n_default_text='Unblock' />
                     </Button>
                 </div>
                 {children}
+                <BlockUnblockUserModal
+                    advertiserName={advertiserName}
+                    id={id ?? ''}
+                    isBlocked
+                    isModalOpen={!!isModalOpenFor('BlockUnblockUserModal')}
+                    onClickBlocked={() => setShowOverlay(false)}
+                    onRequestClose={hideModal}
+                />
             </div>
         );
     }