[WALL] Lubega / WEBREL-3156 / Fix console errors (deriv-com#16812)

* fix: console errors * fix: sonarcloud * fix: sonarcloud * fix: test case * fix: updated keys * fix: compare accounts keys
aizad-deriv · Sep 12, 2024 · c851e6d · c851e6d
1 parent 6d70297
commit c851e6d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 16 deletions.
diff --git a/...rc/components/OptionsAndMultipliersListing/__test__/OptionsAndMultipliersListing.spec.tsx b/...rc/components/OptionsAndMultipliersListing/__test__/OptionsAndMultipliersListing.spec.tsx
@@ -46,7 +46,9 @@ describe('OptionsAndMultipliersListing', () => {
             data: { loginid: undefined },
         });
         render(<OptionsAndMultipliersListing />, { wrapper });
-        expect(screen.getAllByTestId('dt_wallets_trading_account_card')[0]).toBeDisabled();
+        const tradingAccountCard = screen.getAllByTestId('dt_wallets_trading_account_card')[0];
+        expect(tradingAccountCard).toHaveAttribute('aria-disabled', 'true');
+        expect(tradingAccountCard).toHaveClass('wallets-trading-account-card--disabled');
         expect(screen.queryByTestId('dt_label_paired_chevron')).not.toBeInTheDocument();
     });
 });
diff --git a/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.scss b/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.scss
@@ -8,6 +8,10 @@
     border: none;
     background: none;
 
+    &--disabled {
+        cursor: not-allowed;
+    }
+
     @include desktop {
         padding-inline: 1.6rem;
         $columns: 3;

diff --git a/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.tsx b/packages/wallets/src/components/TradingAccountCard/TradingAccountCard.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import TradingAccountCardButton from './TradingAccountCardButton';
 import TradingAccountCardContent from './TradingAccountCardContent';
@@ -13,20 +13,30 @@ export type TCommonProps = {
 
 type TProps = {
     className?: string;
-    disabled?: ComponentProps<'button'>['disabled'];
-    onClick?: ComponentProps<'button'>['onClick'];
+    disabled?: boolean;
+    onClick?: () => void;
 };
 
 const TradingAccountCard = ({ children, className, disabled, onClick }: PropsWithChildren<TProps>) => {
+    const handleClick = () => {
+        if (!disabled && onClick) {
+            onClick();
+        }
+    };
+
     return (
-        <button
-            className={classNames('wallets-trading-account-card', className)}
+        <div
+            aria-disabled={disabled}
+            className={classNames('wallets-trading-account-card', className, {
+                'wallets-trading-account-card--disabled': disabled,
+            })}
             data-testid='dt_wallets_trading_account_card'
-            disabled={disabled}
-            onClick={onClick}
+            onClick={handleClick}
+            onKeyDown={handleClick}
+            tabIndex={disabled ? -1 : 0} // Remove focusability if disabled
         >
             {children}
-        </button>
+        </div>
     );
 };
 

diff --git a/...lets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx b/...lets/src/features/cfd/flows/CTrader/AddedCTraderAccountsList/AddedCTraderAccountsList.tsx
@@ -13,9 +13,9 @@ const AddedCTraderAccountsList: React.FC = () => {
 
     return (
         <React.Fragment>
-            {cTraderAccounts?.map(account => (
+            {cTraderAccounts?.map((account, index) => (
                 <TradingAccountCard
-                    key={`added-ctrader-${account.login}`}
+                    key={`added-ctrader-${account.login}-${index}`}
                     onClick={() => show(<MT5TradeModal platform={PlatformDetails.ctrader.platform} />)}
                 >
                     <TradingAccountCard.Icon>{PlatformDetails.ctrader.icon}</TradingAccountCard.Icon>

diff --git a/...eatures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/...eatures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -13,9 +13,9 @@ const AddedDxtradeAccountsList: React.FC = () => {
 
     return (
         <React.Fragment>
-            {data?.map(account => (
+            {data?.map((account, index) => (
                 <TradingAccountCard
-                    key={account?.account_id}
+                    key={`added-dxtrade-${account?.login}-${index}`}
                     onClick={() => show(<MT5TradeModal platform={PlatformDetails.dxtrade.platform} />)}
                 >
                     <TradingAccountCard.Icon>{PlatformDetails.dxtrade.icon}</TradingAccountCard.Icon>

diff --git a/...rCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx b/...rCFDs/Dxtrade/AvailableDxtradeAccountsList/__test__/AvailableDxtradeAccountsList.spec.tsx
@@ -32,7 +32,7 @@ describe('AvailableDxtradeAccountsList', () => {
 
     it('shows DxtradeEnterPasswordModal upon clicking on the TradingAccountCard component', () => {
         render(<AvailableDxtradeAccountsList />, { wrapper });
-        const tradingAccountCard = screen.getByRole('button');
+        const tradingAccountCard = screen.getByTestId('dt_wallets_trading_account_card');
         userEvent.click(tradingAccountCard);
         expect(mockShow).toHaveBeenCalled();
     });

diff --git a/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx b/packages/wallets/src/features/cfd/screens/CompareAccounts/CompareAccountsScreen.tsx
@@ -20,12 +20,12 @@ const CompareAccountsScreen = () => {
             <CompareAccountsHeader isDemo={isDemo} isEuRegion={isEuRegion} />
             <div className='wallets-compare-accounts__card-list'>
                 <CompareAccountsCarousel>
-                    {mt5Accounts?.map(item => (
+                    {mt5Accounts?.map((item, index) => (
                         <CompareAccountsCard
                             isDemo={isDemo}
                             isEuRegion={isEuRegion}
                             isEuUser={isEuUser}
-                            key={`${item?.market_type} ${item?.shortcode}`}
+                            key={`compare-accounts-${item?.product}-${index}`}
                             marketType={item?.market_type}
                             platform={item?.platform}
                             product={item?.product}