✅e2e: add leverage test

exactly · Sep 25, 2023 · 73d1932 · 73d1932
1 parent c70fe9d
commit 73d1932
Show file tree

Hide file tree

Showing 16 changed files with 469 additions and 21 deletions.
diff --git a/components/Leverager/AssetInput/index.tsx b/components/Leverager/AssetInput/index.tsx
@@ -56,7 +56,6 @@ function AssetInput({ symbol }: Props) {
             fontWeight: 600,
             fontSize: 12,
           }}
-          data-testid="modal-on-max"
           disabled={!available || !parseFloat(available)}
         >
           Max

diff --git a/components/Leverager/AssetSelector/index.tsx b/components/Leverager/AssetSelector/index.tsx
@@ -14,9 +14,17 @@ type AssetSelectorProps = {
   options: AssetSelectorOption[];
   onChange: (newValue: string) => void;
   disabled?: boolean;
+  'data-testid'?: string;
 };
 
-const AssetSelector: FC<AssetSelectorProps> = ({ title, currentValue, options, onChange, disabled = false }) => {
+const AssetSelector: FC<AssetSelectorProps> = ({
+  title,
+  currentValue,
+  options,
+  onChange,
+  'data-testid': testId,
+  disabled = false,
+}) => {
   return (
     <DropdownMenu
       label={title}
@@ -33,9 +41,15 @@ const AssetSelector: FC<AssetSelectorProps> = ({ title, currentValue, options, o
         )
       }
       renderOption={({ symbol, value }: AssetSelectorOption) => (
-        <AssetOption option assetSymbol={symbol} value={value} unformattedSymbol={true} />
+        <AssetOption
+          option
+          assetSymbol={symbol}
+          value={value}
+          unformattedSymbol={true}
+          data-testid={`${testId}-${symbol}`}
+        />
       )}
-      data-testid="modal-asset-selector"
+      data-testid={testId}
     />
   );
 };

diff --git a/components/Leverager/Modal/index.tsx b/components/Leverager/Modal/index.tsx
@@ -54,6 +54,7 @@ function LeveragerModal({ isOpen, close }: Props) {
 
   return (
     <Dialog
+      data-testid="leverage-modal"
       open={isOpen}
       onClose={loadingTx ? undefined : close}
       PaperComponent={isMobile ? undefined : PaperComponent}
@@ -81,6 +82,7 @@ function LeveragerModal({ isOpen, close }: Props) {
             top: 8,
             color: 'grey.500',
           }}
+          data-testid="leverage-modal-close"
         >
           <CloseIcon sx={{ fontSize: 19 }} />
         </IconButton>

diff --git a/components/Leverager/MultiplierSlider/index.tsx b/components/Leverager/MultiplierSlider/index.tsx
@@ -53,14 +53,22 @@ const MultiplierSlider = () => {
           onClick={onClick}
           sx={{ cursor: 'pointer' }}
         >
-          <Typography fontFamily="IBM Plex Mono" fontSize={10}>{`${t(
+          <Typography fontFamily="IBM Plex Mono" fontSize={10} data-testid="leverage-slider-current">{`${t(
             'Current',
           ).toUpperCase()}:${currentLeverageRatio.toFixed(2)}x`}</Typography>
         </Box>
       </Box>
       <Box display="flex" justifyItems="space-between" alignItems="center" gap={2}>
-        <Typography variant="h6">1x</Typography>
+        <Typography
+          variant="h6"
+          onClick={() => setLeverageRatio(minLeverageRatio)}
+          sx={{ cursor: 'pointer' }}
+          data-testid="leverage-slider-min"
+        >
+          1x
+        </Typography>
         <Slider
+          data-testid="leverage-slider"
           value={input.leverageRatio}
           onChange={(_, value) => setLeverageRatio(value as number)}
           marks={currentMark}
@@ -104,7 +112,14 @@ const MultiplierSlider = () => {
             },
           }}
         />
-        <Typography variant="h6">{t('Max')}</Typography>
+        <Typography
+          variant="h6"
+          onClick={() => setLeverageRatio(max)}
+          sx={{ cursor: 'pointer' }}
+          data-testid="leverage-slider-max"
+        >
+          {t('Max')}
+        </Typography>
       </Box>
     </Box>
   );

diff --git a/components/Leverager/NetPosition/index.tsx b/components/Leverager/NetPosition/index.tsx
@@ -14,10 +14,14 @@ const NetPosition = () => {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <Box position="relative">
+    <Box position="relative" data-testid="leverage-more-options" aria-expanded={expanded}>
       {input.collateralSymbol && (
         <Box position="absolute" top={8} right={8} zIndex={99999999}>
-          <IconButton sx={{ width: 20, height: 20 }} onClick={() => setExpanded((_expanded) => !_expanded)}>
+          <IconButton
+            sx={{ width: 20, height: 20 }}
+            onClick={() => setExpanded((_expanded) => !_expanded)}
+            data-testid="leverage-more-options-expand"
+          >
             {expanded ? <ExpandLessIcon sx={{ fontSize: 16 }} /> : <ExpandMoreIcon sx={{ fontSize: 16 }} />}
           </IconButton>
         </Box>

diff --git a/components/Leverager/Operation/index.tsx b/components/Leverager/Operation/index.tsx
@@ -52,6 +52,7 @@ const Operation = () => {
                 currentValue={input.collateralSymbol}
                 options={collateralOptions}
                 onChange={setCollateralSymbol}
+                data-testid="leverage-select-from"
               />
             </Grid>
             <Grid display="flex" alignItems="center" justifyContent="center" item xs={2}>
@@ -64,6 +65,7 @@ const Operation = () => {
                 options={borrowOptions}
                 onChange={setBorrowSymbol}
                 disabled={!input.collateralSymbol}
+                data-testid="leverage-select-to"
               />
             </Grid>
           </Grid>
@@ -88,11 +90,16 @@ const Operation = () => {
         <ModalAlert message={t('You are currently over leveraged with the selected markets.')} variant="info" />
       )}
       {disabledSubmit ? (
-        <Button fullWidth variant="contained" disabled>
+        <Button fullWidth variant="contained" disabled data-testid="leverage-modal-continue">
           {t('Leverage')}
         </Button>
       ) : (
-        <Button fullWidth variant="contained" onClick={() => setViewSummary(true)}>
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={() => setViewSummary(true)}
+          data-testid="leverage-modal-continue"
+        >
           {`${input.secondaryOperation === 'deposit' ? t('Leverage') : t('Deleverage')} ${formatNumber(
             netPosition ?? '0',
             input.collateralSymbol,

diff --git a/components/Leverager/Summary/index.tsx b/components/Leverager/Summary/index.tsx
@@ -215,6 +215,7 @@ const Summary = () => {
             sx={{ width: 18, height: 18 }}
             value={acceptedTerms}
             onChange={(e) => setAcceptedTerms(e.target.checked)}
+            data-testid="leverage-accept-risk"
           />
           <Typography component="label" htmlFor="accept-risk" fontSize={14} fontWeight={500} sx={{ cursor: 'pointer' }}>
             {t('I fully acknowledge and accept the risks of leveraging.')}
@@ -251,6 +252,7 @@ const Summary = () => {
                 fullWidth
                 variant="contained"
                 disabled={disabledConfirm}
+                data-testid="leverage-submit"
               >
                 {requiresApproval
                   ? approvalMessage[approvalStatus] ?? t('Approve')

diff --git a/components/asset/AssetOption/index.tsx b/components/asset/AssetOption/index.tsx
@@ -11,6 +11,7 @@ type AssetOptionProps = {
   selectedSize?: number;
   value?: string;
   unformattedSymbol?: boolean;
+  'data-testid'?: string;
 };
 
 function AssetOption({
@@ -20,6 +21,7 @@ function AssetOption({
   selectedSize = 21,
   value,
   unformattedSymbol = false,
+  'data-testid': testId,
 }: AssetOptionProps) {
   const size = option ? optionSize : selectedSize;
 
@@ -36,6 +38,7 @@ function AssetOption({
       alignItems="center"
       justifyContent="space-between"
       width="100%"
+      data-testid={testId}
     >
       <Box display="flex" gap={1} alignContent="center" justifyContent="center">
         <Image

diff --git a/components/strategies/StrategiesContent/index.tsx b/components/strategies/StrategiesContent/index.tsx
@@ -18,7 +18,7 @@ function StrategiesContent() {
         description: t('Amplify gains or mitigate risk with the power of leverage and deleverage in your investments.'),
         tags: ['advanced'],
         children: (
-          <Button fullWidth variant="contained" onClick={() => startLeverager()}>
+          <Button fullWidth variant="contained" onClick={() => startLeverager()} data-testid="leverage">
             {t('Leverage')}
           </Button>
         ),
@@ -28,7 +28,7 @@ function StrategiesContent() {
         description: t('Reduce your risk by decreasing your investment exposure and borrowing less.'),
         tags: ['advanced'],
         children: (
-          <Button fullWidth variant="contained" onClick={() => startLeverager()}>
+          <Button fullWidth variant="contained" onClick={() => startLeverager()} data-testid="deleverage">
             {t('Deleverage')}
           </Button>
         ),
@@ -40,7 +40,7 @@ function StrategiesContent() {
         ),
         tags: ['basic'],
         children: (
-          <Button fullWidth variant="contained" onClick={() => startDebtManager({})}>
+          <Button fullWidth variant="contained" onClick={() => startDebtManager({})} data-testid="rollover">
             {t('Rollover')}
           </Button>
         ),

diff --git a/e2e/common/allowance.ts b/e2e/common/allowance.ts
@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { parseUnits } from 'viem';
+import type { Address, PublicClient } from 'viem';
+
+import { erc20, type ERC20TokenSymbol, erc20Market } from '../utils/contracts';
+import { CommonTest } from './types';
+
+export default function ({ test, publicClient }: CommonTest & { publicClient: PublicClient }) {
+  type AllowanceParams = {
+    address: Address;
+    type: 'erc20' | 'market';
+    symbol: ERC20TokenSymbol;
+    spender: Address;
+    less: string;
+  };
+
+  const check = async ({ address, type, symbol, spender, less: _less }: AllowanceParams) => {
+    await test.step(`checks ${spender} allowance to be less than ${_less}`, async () => {
+      let decimals = 18;
+      let allowance = 2n ** 256n - 1n;
+
+      switch (type) {
+        case 'erc20': {
+          const contract = await erc20(symbol, { publicClient });
+          allowance = await contract.read.allowance([address, spender]);
+          decimals = await contract.read.decimals();
+          break;
+        }
+        case 'market': {
+          const market = await erc20Market(symbol, { publicClient });
+          allowance = await market.read.allowance([address, spender]);
+          decimals = await market.read.decimals();
+        }
+      }
+
+      const less = parseUnits(_less, decimals);
+      expect(allowance).toBeLessThanOrEqual(less);
+    });
+  };
+
+  return { check };
+}
diff --git a/e2e/common/balance.ts b/e2e/common/balance.ts
@@ -25,8 +25,8 @@ export default function ({ test, publicClient }: CommonTest & { publicClient: Pu
         const lower = (expected * (wad - delta)) / wad;
         const upper = (expected * (wad + delta)) / wad;
 
-        expect(balance > lower).toBe(true);
-        expect(balance < upper).toBe(true);
+        expect(balance).toBeGreaterThan(lower);
+        expect(balance).toBeLessThan(upper);
       } else {
         expect(balance).toBe(expected);
       }