OCT-2124: Allocation AW Closed E2E (#575)

## Description ## Definition of Done 1. [ ] If required, the desciption of your change is added to the [QA changelog](https://www.notion.so/octantapp/Changelog-for-the-QA-d96fa3b411cf488bb1d8d9a598d88281) 2. [ ] Acceptance criteria are met. 3. [ ] PR is manually tested before the merge by developer(s). - [ ] Happy path is manually checked. 4. [ ] PR is manually tested by QA when their assistance is required (1). - [ ] Octant Areas & Test Cases are checked for impact and updated if required (2). 5. [ ] Unit tests are added unless there is a reason to omit them. 6. [ ] Automated tests are added when required. 7. [ ] The code is merged. 8. [ ] Tech documentation is added / updated, reviewed and approved (including mandatory approval by a code owner, should such exist for changed files). - [ ] BE: Swagger documentation is updated. 9. [ ] When required by QA: - [ ] Deployed to the relevant environment. - [ ] Passed system tests. --- (1) Developer(s) in coordination with QA decide whether it's required. For small tickets introducing small changes QA assistance is most probably not required. (2) [Octant Areas & Test Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).
golemfoundation · Dec 5, 2024 · fe7372f · fe7372f
2 parents 62e7b10 + db88e13
commit fe7372f
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 5 deletions.
diff --git a/client/cypress/e2e/_15closeAW.cy.ts b/client/cypress/e2e/_15closeAW.cy.ts
@@ -0,0 +1,27 @@
+import { moveTime, setupAndMoveToPlayground } from 'cypress/utils/moveTime';
+import { QUERY_KEYS } from 'src/api/queryKeys';
+
+describe('move time - AW IS CLOSED', () => {
+  before(() => {
+    /**
+     * Global Metamask setup done by Synpress is not always done.
+     * Since Synpress needs to have valid provider to fetch the data from contracts,
+     * setupMetamask is required in each test suite.
+     */
+    cy.setupMetamask();
+  });
+
+  it('allocation window is closed, when it is not, move time', () => {
+    setupAndMoveToPlayground();
+
+    cy.window().then(async win => {
+      moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
+        cy.get('[data-test=PlaygroundView]').should('be.visible');
+        const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData(
+          QUERY_KEYS.isDecisionWindowOpen,
+        );
+        expect(isDecisionWindowOpenAfter).to.be.false;
+      });
+    });
+  });
+});
diff --git a/client/cypress/e2e/_16allocationAWClosed.cy.ts b/client/cypress/e2e/_16allocationAWClosed.cy.ts
@@ -0,0 +1,164 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import chaiColors from 'chai-colors';
+
+import { mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e';
+import viewports from 'cypress/utils/viewports';
+import {
+  HAS_ONBOARDING_BEEN_CLOSED,
+  IS_ONBOARDING_ALWAYS_VISIBLE,
+  IS_ONBOARDING_DONE,
+} from 'src/constants/localStorageKeys';
+import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+chai.use(chaiColors);
+
+Object.values(viewports).forEach(
+  ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop }) => {
+    describe(`[AW IS CLOSED] Allocation: ${device}`, { viewportHeight, viewportWidth }, () => {
+      before(() => {
+        cy.clearLocalStorage();
+      });
+
+      beforeEach(() => {
+        mockCoinPricesServer();
+        localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
+        localStorage.setItem(IS_ONBOARDING_DONE, 'true');
+        localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true');
+        visitWithLoader(
+          ROOT_ROUTES.allocation.absolute,
+          isLargeDesktop || isDesktop ? ROOT_ROUTES.home.absolute : ROOT_ROUTES.allocation.absolute,
+        );
+      });
+
+      if (isLargeDesktop || isDesktop) {
+        it('Allocation render as a drawer', () => {
+          cy.get('[data-test=AllocationDrawer]').should('be.visible');
+          cy.get('[data-test=AllocationView]').should('not.exist');
+        });
+
+        it('if user resize viewport from large-desktop/desktop to tablet/mobile allocation drawer will hide and current view will change to Allocation view.', () => {
+          // mobile
+          cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight);
+          cy.get('[data-test=AllocationDrawer]').should('not.exist');
+          cy.get('[data-test=AllocationView]').should('be.visible');
+          cy.location('pathname').should('eq', ROOT_ROUTES.allocation.absolute);
+          // tablet
+          cy.viewport(viewports.tablet.viewportWidth, viewports.tablet.viewportHeight);
+          cy.get('[data-test=AllocationDrawer]').should('not.exist');
+          cy.get('[data-test=AllocationView]').should('be.visible');
+          cy.location('pathname').should('eq', ROOT_ROUTES.allocation.absolute);
+        });
+
+        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.', () => {
+          // mobile
+          cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight);
+          cy.get('[data-test=LayoutNavbar__Button--projects]').click();
+          cy.viewport(
+            viewports[isDesktop ? 'desktop' : 'largeDesktop'].viewportWidth,
+            viewports[isDesktop ? 'desktop' : 'largeDesktop'].viewportHeight,
+          );
+          cy.location('pathname').should('eq', ROOT_ROUTES.projects.absolute);
+          cy.get('[data-test=AllocationDrawer]').should('not.exist');
+
+          cy.get('[data-test=LayoutTopBar__allocationButton]').click();
+          cy.get('[data-test=AllocationDrawer]').should('be.visible');
+
+          // tablet
+          cy.viewport(viewports.tablet.viewportWidth, viewports.tablet.viewportHeight);
+          cy.get('[data-test=LayoutNavbar__Button--projects]').click();
+          cy.viewport(
+            viewports[isDesktop ? 'desktop' : 'largeDesktop'].viewportWidth,
+            viewports[isDesktop ? 'desktop' : 'largeDesktop'].viewportHeight,
+          );
+          cy.location('pathname').should('eq', ROOT_ROUTES.projects.absolute);
+          cy.get('[data-test=AllocationDrawer]').should('not.exist');
+        });
+      } else {
+        it('Allocation render as a independent view', () => {
+          cy.get('[data-test=AllocationDrawer]').should('not.exist');
+          cy.get('[data-test=AllocationView]').should('be.visible');
+        });
+
+        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.', () => {
+          // desktop
+          cy.viewport(viewports.desktop.viewportWidth, viewports.desktop.viewportHeight);
+          cy.get('[data-test=AllocationDrawer]').should('be.visible');
+          cy.get('[data-test=AllocationView]').should('not.exist');
+          cy.location('pathname').should('eq', ROOT_ROUTES.home.absolute);
+          // large-desktop
+          cy.viewport(viewports.largeDesktop.viewportWidth, viewports.largeDesktop.viewportHeight);
+          cy.get('[data-test=AllocationDrawer]').should('be.visible');
+          cy.get('[data-test=AllocationView]').should('not.exist');
+          cy.location('pathname').should('eq', ROOT_ROUTES.home.absolute);
+        });
+      }
+
+      it('User sees amount of rewards available during allocation', () => {
+        cy.get('[data-test=AllocationRewardsBox]').should('be.visible');
+        cy.get('[data-test=AllocationRewardsBox__value]').should('be.visible');
+        cy.get('[data-test=AllocationRewardsBox__value]').invoke('text').should('eq', '0 ETH');
+      });
+
+      it('User sees info about locking GLM to earn rewards when there are no projects added to allocation', () => {
+        if (isLargeDesktop || isDesktop) {
+          cy.get('[data-test=Allocation__emptyState]').should('be.visible');
+        } else {
+          cy.get('[data-test=AllocationView__emptyState]').should('be.visible');
+        }
+      });
+
+      it('User can add and remove projects from allocation ', () => {
+        if (isLargeDesktop || isDesktop) {
+          cy.get('[data-test=AllocationDrawer__closeButton]').click();
+          cy.get('[data-test=LayoutTopBar__link--projects]').click();
+        } else {
+          cy.get('[data-test=LayoutNavbar__Button--projects]').click();
+        }
+        cy.get('[data-test=ProjectsListItem__ButtonAddToAllocate]').eq(0).click();
+        cy.get('[data-test=ProjectsListItem__ButtonAddToAllocate]').eq(1).click();
+        cy.get('[data-test=ProjectsListItem__ButtonAddToAllocate]').eq(2).click();
+
+        if (isLargeDesktop || isDesktop) {
+          cy.get('[data-test=LayoutTopBar__allocationButton]').click();
+        } else {
+          cy.get('[data-test=LayoutNavbar__Button--allocate]').click();
+        }
+
+        cy.get('[data-test=AllocationItem]').should('have.length', 3);
+
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .then($allocationItem => {
+            const { right: allocationItemLeft } = $allocationItem[0].getBoundingClientRect();
+
+            cy.get('[data-test=AlloocationItem__draggableContainer]')
+              .eq(0)
+              .trigger('pointerdown', {
+                pageX: allocationItemLeft,
+              })
+              .trigger('pointermove', {
+                pageX: allocationItemLeft - 100,
+              })
+              .trigger('pointerup', {
+                pageX: allocationItemLeft - 100,
+              });
+
+            cy.get('[data-test=AllocationItem__removeButton]').eq(0).should('be.visible');
+            cy.get('[data-test=AllocationItem__removeButton]').eq(0).click();
+            cy.wait(1000);
+            cy.get('[data-test=AllocationItem]').should('have.length', 2);
+          });
+      });
+
+      it('User can`t reset allocation', () => {
+        cy.get('[data-test=AllocationNavigation__resetButton]').should('be.visible');
+        cy.get('[data-test=AllocationNavigation__resetButton]').should('be.disabled');
+      });
+
+      it('User can`t confirm allocation', () => {
+        cy.get('[data-test=AllocationNavigation__ctaButton]').should('be.visible');
+        cy.get('[data-test=AllocationNavigation__ctaButton]').should('be.disabled');
+      });
+    });
+  },
+);
diff --git a/client/src/components/Allocation/Allocation.tsx b/client/src/components/Allocation/Allocation.tsx
@@ -614,7 +614,11 @@ const Allocation: FC<AllocationProps> = ({ dataTest }) => {
           />
         )}
         {!allocations.length && currentView === 'edit' && (
-          <div ref={allocationEmptyStateRef} className={styles.emptyState}>
+          <div
+            ref={allocationEmptyStateRef}
+            className={styles.emptyState}
+            data-test={`${dataTestRoot}__emptyState`}
+          >
             {isEmptyStateImageVisible && (
               <Img className={styles.emptyStateImage} src="/images/window-with-dog.webp" />
             )}

diff --git a/client/src/components/Allocation/AllocationItem/AllocationItem.tsx b/client/src/components/Allocation/AllocationItem/AllocationItem.tsx
@@ -253,6 +253,7 @@ const AllocationItem: FC<AllocationItemProps> = ({
       )}
       <motion.div
         ref={ref}
+        data-test="AlloocationItem__draggableContainer"
         drag={isInputFocused ? false : 'x'}
         dragConstraints={{ left: constraints[0], right: constraints[1] }}
         dragElastic={false}

diff --git a/client/src/components/Allocation/AllocationNavigation/AllocationNavigation.tsx b/client/src/components/Allocation/AllocationNavigation/AllocationNavigation.tsx
@@ -19,6 +19,7 @@ const AllocationNavigation: FC<AllocationNavigationProps> = ({
   onResetValues,
   isWaitingForAllMultisigSignatures,
 }) => {
+  const dataTestRoot = 'AllocationNavigation';
   const { i18n, t } = useTranslation('translation', {
     keyPrefix: 'components.dedicated.allocationNavigation',
   });
@@ -83,15 +84,17 @@ const AllocationNavigation: FC<AllocationNavigationProps> = ({
   }, []);
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-test={dataTestRoot}>
       <Button
         className={styles.button}
+        dataTest={`${dataTestRoot}__resetButton`}
         isDisabled={isLeftButtonDisabled || areButtonsDisabled}
         label={t('reset')}
         onClick={onResetValues}
       />
       <Button
         className={styles.button}
+        dataTest={`${dataTestRoot}__ctaButton`}
         isDisabled={isLoading || areButtonsDisabled}
         label={nextButtonLabel}
         onClick={currentView === 'edit' ? onAllocate : () => setCurrentView('edit')}

diff --git a/client/src/components/Allocation/AllocationRewardsBox/AllocationRewardsBox.tsx b/client/src/components/Allocation/AllocationRewardsBox/AllocationRewardsBox.tsx
@@ -15,6 +15,7 @@ const AllocationRewardsBox: FC<AllocationRewardsBoxProps> = ({
   isLocked,
   isManuallyEdited,
 }) => {
+  const dataTestRoot = 'AllocationRewardsBox';
   const { i18n, t } = useTranslation('translation', {
     keyPrefix: 'components.dedicated.allocationRewardsBox',
   });
@@ -58,9 +59,15 @@ const AllocationRewardsBox: FC<AllocationRewardsBoxProps> = ({
   }, [isDecisionWindowOpen, individualReward, upcomingBudget]);
 
   return (
-    <div className={cx(styles.root, isManuallyEdited && styles.isManuallyEdited)}>
+    <div
+      className={cx(styles.root, isManuallyEdited && styles.isManuallyEdited)}
+      data-test={dataTestRoot}
+    >
       <div>
-        <div className={cx(styles.value, (isDisabled || isLocked) && styles.isGrey)}>
+        <div
+          className={cx(styles.value, (isDisabled || isLocked) && styles.isGrey)}
+          data-test={`${dataTestRoot}__value`}
+        >
           {
             getValuesToDisplay({
               cryptoCurrency: 'ethereum',
@@ -70,7 +77,9 @@ const AllocationRewardsBox: FC<AllocationRewardsBoxProps> = ({
             }).primary
           }
         </div>
-        <div className={styles.label}>{subtitle}</div>
+        <div className={styles.label} data-test={`${dataTestRoot}__subtitle`}>
+          {subtitle}
+        </div>
       </div>
       {isManuallyEdited && <div className={styles.manuallyEditedLabel}>{t('manual')}</div>}
     </div>