fix: add missing modals and test ids (#2706)

Author: mmioana

src/app/ui/portfolio/PortfolioPositionsList.tsx

@@ -10,6 +10,8 @@ import { PortfolioAnimatedAssetContainer } from './PortfolioAnimatedAssetContain
 import { useMemo } from 'react';
 import { hasPositionDataToDisplay } from '@/components/composite/PositionCard/utils';
 import { mapValues, pickBy } from 'lodash';
+import { DepositFlowModal } from '@/components/composite/DepositFlow/DepositFlow';
+import { WithdrawFlowModal } from '@/components/composite/WithdrawFlow/WithdrawFlow';
 
 export const PortfolioPositionsList = () => {
   const { data, isEmpty, isLoading, clearFilters } = usePositionsFiltering();
@@ -55,8 +57,12 @@ export const PortfolioPositionsList = () => {
   }
 
   return (
-    <PortfolioAssetsListContainer useFlexGap direction="column">
-      <AnimatePresence mode="popLayout">{renderContent()}</AnimatePresence>
-    </PortfolioAssetsListContainer>
+    <>
+      <PortfolioAssetsListContainer useFlexGap direction="column">
+        <AnimatePresence mode="popLayout">{renderContent()}</AnimatePresence>
+      </PortfolioAssetsListContainer>
+      <DepositFlowModal />
+      <WithdrawFlowModal />
+    </>
   );
 };

src/components/composite/PositionCard/PositionCard.tsx

@@ -103,7 +103,12 @@ export const PositionCard: FC<PositionCardProps> = ({
     : [];
 
   return (
-    <StyledAccordion expanded={isExpanded} disableGutters>
+    <StyledAccordion
+      data-testId="position-card"
+      aria-label={`Position card for ${firstPosition.protocol.name} protocol`}
+      expanded={isExpanded}
+      disableGutters
+    >
       <StyledAccordionSummary>
         <StyledSummaryContent onClick={() => handleMainPositionClick()}>
           <EntityStackWithBadge
@@ -233,7 +238,7 @@ export const PositionCard: FC<PositionCardProps> = ({
                     </StyledOverviewActions>
                   </StyledOverviewColumn>
 
-                  <StyledTablesColumn>
+                  <StyledTablesColumn data-testId="position-card-entry">
                     {positionGroup.sections.map((section) => (
                       <ColumnTable
                         key={section.id}

src/components/composite/PositionCard/utils.tsx

@@ -178,6 +178,7 @@ export const renderPositionActions = ({
         protocolUrl={item.protocol.url}
         protocolName={item.protocol.name}
         disabled={!item.earn}
+        data-testId="portfolio-withdraw-button"
       />
       <DepositFlowOnDemandButton
         displayMode={DepositButtonDisplayMode.LabelOnly}
@@ -188,6 +189,7 @@ export const renderPositionActions = ({
         protocolUrl={item.protocol.url}
         protocolName={item.protocol.name}
         disabled={!item.earn}
+        data-testId="portfolio-deposit-button"
       />
     </StyledPositionActions>
   );