OCT-2130: Home Donations E2E + OCT:2133: Home Transactions E2E

client/cypress/e2e/_13allocationAWClosed.cy.ts

@@ -37,6 +37,7 @@ Object.values(viewports).forEach(
         });
 
         it('if user resize viewport from large-desktop/desktop to tablet/mobile allocation drawer will hide and current view will change to Allocation view.', () => {
+          cy.wait(1000);
           // mobile
           cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight);
           cy.get('[data-test=AllocationDrawer]').should('not.exist');
@@ -50,6 +51,7 @@ Object.values(viewports).forEach(
         });
 
         it('If user resize viewport from large-desktop/desktop to tablet/mobile when allocation drawer was open and then change view and resize again to large/desktop allocation drawer won`t be visible.', () => {
+          cy.wait(1000);
           // mobile
           cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight);
           cy.get('[data-test=LayoutNavbar__Button--projects]').click();
@@ -80,6 +82,7 @@ Object.values(viewports).forEach(
         });
 
         it('if user resize viewport from tablet/mobile to large-desktop/desktop allocation view will change to the last opened or Home view and Allocation drawer will be visible.', () => {
+          cy.wait(1000);
           // desktop
           cy.viewport(viewports.desktop.viewportWidth, viewports.desktop.viewportHeight);
           cy.get('[data-test=AllocationDrawer]').should('be.visible');

client/cypress/utils/moveTime.ts

@@ -100,7 +100,7 @@ const moveToDecisionWindowClosed = (cypressWindow: Cypress.AUTWindow): Chainable
  */
 export const moveTime = (
   cypressWindow: Cypress.AUTWindow,
-  moveTo: 'nextEpochDecisionWindowClosed' | 'nextEpochDecisionWindowOpen',
+  moveTo: 'decisionWindowClosed' | 'nextEpochDecisionWindowClosed' | 'nextEpochDecisionWindowOpen',
   connectWalletParams?: ConnectWalletParameters,
 ): Chainable<any> => {
   const isDecisionWindowOpen = cypressWindow.clientReactQuery.getQueryData(
@@ -112,11 +112,15 @@ export const moveTime = (
     waitForLoadersToDisappear();
     // reload is needed to get updated data in the app
     cy.reload();
+  } else if (moveTo === 'decisionWindowClosed') {
+    return cy.reload();
   }
 
   if (moveTo === 'nextEpochDecisionWindowOpen') {
     moveToDecisionWindowOpen(cypressWindow);
-  } else {
+  }
+
+  if (moveTo === 'nextEpochDecisionWindowClosed') {
     moveToDecisionWindowOpen(cypressWindow);
     // Reload is needed to get updated data in the app
     cy.reload();

client/src/components/Allocation/Allocation.tsx

@@ -444,6 +444,20 @@ const Allocation: FC<AllocationProps> = ({ dataTest }) => {
     userNonce,
   ]);
 
+  useEffect(() => {
+    if (currentView) {
+      return;
+    }
+
+    if (userAllocations?.hasUserAlreadyDoneAllocation) {
+      setCurrentView('summary');
+    } else {
+      setCurrentView('edit');
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentView, userAllocations?.hasUserAlreadyDoneAllocation]);
+
   const onChangeAllocationItemValue = (
     newAllocationValue: AllocationValue,
     isManualModeEnforced = false,

client/src/components/Allocation/AllocationNavigation/AllocationNavigation.tsx

@@ -78,7 +78,6 @@ const AllocationNavigation: FC<AllocationNavigationProps> = ({
     if (!userAllocations?.hasUserAlreadyDoneAllocation) {
       return;
     }
-    setCurrentView('summary');
     setIsInitialCurrentViewSet(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

client/src/components/Home/HomeGridDonations/DonationsListSkeletonItem/DonationsListSkeletonItem.tsx

@@ -4,7 +4,7 @@ import styles from './DonationsListSkeletonItem.module.scss';
 
 const DonationsListSkeletonItem = (): ReactElement => {
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-test="DonationsListSkeletonItem">
       <div className={styles.image} />
       <div className={styles.name} />
       <div className={styles.value} />

client/src/components/Home/HomeGridDonations/HomeGridDonations.tsx

@@ -69,6 +69,7 @@ const HomeGridDonations: FC<HomeGridDonationsProps> = ({ className }) => {
         isDecisionWindowOpen ? (
           <Button
             className={styles.editButton}
+            dataTest="HomeGridDonations__Button--edit"
             onClick={() => {
               setCurrentView('edit');
               setIsAllocationDrawerOpen(!isAllocationDrawerOpen);

client/src/components/Home/HomeGridPersonalAllocation/HomeGridPersonalAllocation.tsx

@@ -54,6 +54,7 @@ const HomeGridPersonalAllocation: FC<HomeGridPersonalAllocationProps> = ({ class
         <div className={styles.root}>
           <DoubleValue
             cryptoCurrency="ethereum"
+            dataTest="HomeGridPersonalAllocation--current"
             isFetching={
               isFetchingWithdrawals ||
               (isAppWaitingForTransactionToBeIndexed &&
@@ -70,10 +71,10 @@ const HomeGridPersonalAllocation: FC<HomeGridPersonalAllocationProps> = ({ class
             sections={[
               {
                 className: styles.pending,
-                dataTest: 'HomeGridPersonalAllocation__Section',
+                dataTest: 'HomeGridPersonalAllocation__Section--pending',
                 doubleValueProps: {
                   cryptoCurrency: 'ethereum',
-                  dataTest: 'HomeGridPersonalAllocation__Section--pending__DoubleValue',
+                  dataTest: 'HomeGridPersonalAllocation--pending',
                   isFetching:
                     isFetchingWithdrawals ||
                     (isAppWaitingForTransactionToBeIndexed &&
@@ -83,6 +84,7 @@ const HomeGridPersonalAllocation: FC<HomeGridPersonalAllocationProps> = ({ class
                 },
                 label: i18n.t('common.pending'),
                 tooltipProps: {
+                  dataTest: 'HomeGridPersonalAllocation--pending__Tooltip',
                   position: 'bottom-right',
                   text: (
                     <div>
@@ -110,6 +112,7 @@ const HomeGridPersonalAllocation: FC<HomeGridPersonalAllocationProps> = ({ class
           />
           <Button
             className={styles.withdrawEthButton}
+            dataTest="HomeGridPersonalAllocation__Button"
             isDisabled={
               isPreLaunch ||
               !isConnected ||

client/src/components/Home/HomeGridPersonalAllocation/ModalWithdrawEth/WithdrawEth/WithdrawEth.tsx

@@ -55,6 +55,7 @@ const WithdrawEth: FC<WithdrawEthProps> = ({ onCloseModal }) => {
     {
       doubleValueProps: {
         cryptoCurrency: 'ethereum',
+        dataTest: 'WithdrawEth__Section--amount',
         isFetching: isWithdrawableRewardsFetching || isAppWaitingForTransactionToBeIndexed,
         showCryptoSuffix: true,
         valueCrypto: withdrawals?.sums.available,
@@ -64,6 +65,7 @@ const WithdrawEth: FC<WithdrawEthProps> = ({ onCloseModal }) => {
     {
       doubleValueProps: {
         cryptoCurrency: 'ethereum',
+        dataTest: 'WithdrawEth__Section--estGasPrice',
         isFetching: isFetchingFeeData,
         showCryptoSuffix: true,
         valueCrypto: BigInt(feeData?.gasPrice ?? 0),
@@ -73,11 +75,12 @@ const WithdrawEth: FC<WithdrawEthProps> = ({ onCloseModal }) => {
   ];
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-test="WithdrawEth">
       <BoxRounded hasSections isGrey isVertical>
         <Sections hasBottomDivider sections={sections} />
         <Button
           className={styles.button}
+          dataTest="WithdrawEth__Button"
           isDisabled={
             isWithdrawableRewardsFetching ||
             isAppWaitingForTransactionToBeIndexed ||

client/src/components/Home/HomeGridTransactions/ModalTransactionDetails/TransactionDetails/TransactionDetailsAllocation/TransactionDetailsAllocation.tsx

@@ -59,8 +59,10 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
 
   const sections: SectionProps[] = [
     {
+      dataTest: 'TransactionDetailsAllocation__personal',
       doubleValueProps: {
         cryptoCurrency: 'ethereum',
+        dataTest: 'TransactionDetailsAllocation__personal--value',
         isFetching: isFetchingEpochTimestampHappenedIn || isFetchingIndividualReward,
         showCryptoSuffix: true,
         valueCrypto: individualReward ? individualReward - amount : BigInt(0),
@@ -71,6 +73,7 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
       ? []
       : ([
           {
+            dataTest: 'TransactionDetailsAllocation__allocationProjects',
             doubleValueProps: {
               cryptoCurrency: 'ethereum' as CryptoCurrency,
               showCryptoSuffix: true,
@@ -85,6 +88,7 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
                     {leverage === null ? t('sections.leverageUnknown') : `${leverageInt}x`}
                   </div>
                 ),
+                dataTest: 'TransactionDetailsAllocation__estimatedLeverage',
                 label: t('sections.estimatedLeverage'),
                 tooltipProps: {
                   position: 'bottom-right',
@@ -114,6 +118,7 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
                     }
                   </div>
                 ),
+                dataTest: 'TransactionDetailsAllocation__finalMatchFunding',
                 label: t('sections.finalMatchFunding'),
                 tooltipProps: {
                   position: 'bottom-right',
@@ -124,6 +129,7 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
         ] as SectionProps[])),
     {
       childrenRight: <TransactionDetailsDateAndTime timestamp={timestamp} />,
+      dataTest: 'TransactionDetailsAllocation__when',
       label: t('sections.when'),
     },
   ];
@@ -134,7 +140,13 @@ const TransactionDetailsAllocation: FC<TransactionDetailsAllocationProps> = ({
         <Sections hasBottomDivider sections={sections} variant="small" />
       </BoxRounded>
       {!isPersonalOnlyAllocation && (
-        <BoxRounded alignment="left" className={styles.projects} isGrey isVertical>
+        <BoxRounded
+          alignment="left"
+          className={styles.projects}
+          dataTest="TransactionDetailsAllocation__projects"
+          isGrey
+          isVertical
+        >
           {allocations?.map(allocation => (
             <ProjectAllocationDetailRow
               key={allocation.address}

client/src/components/shared/ProjectAllocationDetailRow/ProjectAllocationDetailRow.tsx

@@ -24,7 +24,7 @@ const ProjectAllocationDetailRow: FC<ProjectAllocationDetailRowProps> = ({
   const getValuesToDisplay = useGetValuesToDisplay();
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-test="ProjectAllocationDetailRow">
       {isLoading || isFetchingProjectIpfs || isAnyIpfsError ? (
         <div className={styles.skeleton} />
       ) : (
@@ -38,7 +38,7 @@ const ProjectAllocationDetailRow: FC<ProjectAllocationDetailRowProps> = ({
             />
             <div className={styles.name}>{projectIpfs[0].name}</div>
           </div>
-          <div className={styles.amount}>
+          <div className={styles.amount} data-test="ProjectAllocationDetailRow__value">
             {
               getValuesToDisplay({
                 cryptoCurrency: 'ethereum',

client/src/hooks/subgraph/useEpochTimestampHappenedIn.ts

@@ -8,6 +8,8 @@ import { QUERY_KEYS } from 'api/queryKeys';
 import env from 'env';
 import { graphql } from 'gql/gql';
 import { GetEpochTimestampHappenedInQuery } from 'gql/graphql';
+import useCurrentEpoch from 'hooks/queries/useCurrentEpoch';
+import useIsDecisionWindowOpen from 'hooks/queries/useIsDecisionWindowOpen';
 
 const GET_EPOCH_TIMESTAMP_HAPPENED_IN = graphql(`
   query GetEpochTimestampHappenedIn($timestamp: BigInt) {
@@ -21,15 +23,24 @@ export default function useEpochTimestampHappenedIn(
   timestampSeconds: string,
 ): UseQueryResult<number> {
   const { subgraphAddress } = env;
+  const { data: currentEpoch } = useCurrentEpoch();
+  const { data: isDecisionWindowOpen } = useIsDecisionWindowOpen();
   const timestampSecondsNumber = parseInt(timestampSeconds, 10);
 
   return useQuery<GetEpochTimestampHappenedInQuery, any, number, any>({
-    enabled: !!timestampSecondsNumber,
+    enabled: window.Cypress
+      ? currentEpoch !== undefined && isDecisionWindowOpen !== undefined
+      : !!timestampSecondsNumber,
     queryFn: async () =>
       request(subgraphAddress, GET_EPOCH_TIMESTAMP_HAPPENED_IN, {
         timestamp: timestampSecondsNumber,
       }),
     queryKey: QUERY_KEYS.epochTimestampHappenedIn(timestampSecondsNumber),
-    select: data => data.epoches[0].epoch,
+    select: data => {
+      if (window.Cypress) {
+        return currentEpoch!;
+      }
+      return data.epoches[0].epoch;
+    },
   });
 }

client/src/store/allocations/store.ts

@@ -5,7 +5,7 @@ import { AllocationsMethods, AllocationsData } from './types';
 
 export const initialState: AllocationsData = {
   allocations: [],
-  currentView: 'edit',
+  currentView: undefined,
   rewardsForProjects: BigInt(0),
 };
 

client/src/store/allocations/types.ts

@@ -2,7 +2,7 @@ export type CurrentView = 'edit' | 'summary';
 
 export interface AllocationsData {
   allocations: string[];
-  currentView: CurrentView;
+  currentView?: CurrentView;
   rewardsForProjects: bigint;
 }