OCT-1481 CY: AllocationItem

client/cypress/e2e/_2makePandingSnapshot.cy.ts → client/cypress/e2e/_2makePendingSnapshot.cy.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 import { mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e';
+import { QUERY_KEYS } from 'src/api/queryKeys';
 import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
 import env from 'src/env';
 import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
@@ -21,13 +22,25 @@ describe('Make pending snapshot', () => {
     mockCoinPricesServer();
     localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
     localStorage.setItem(IS_ONBOARDING_DONE, 'true');
-    visitWithLoader(ROOT_ROUTES.earn.absolute);
+    visitWithLoader(ROOT_ROUTES.playground.absolute);
   });
 
   it('make pending snapshot', () => {
-    cy.window().then(async () => {
-      await axios.post(`${env.serverEndpoint}snapshots/pending`);
-      cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
+    cy.window().then(async win => {
+      const isDecisionWindowOpen = win.clientReactQuery.getQueryData(
+        QUERY_KEYS.isDecisionWindowOpen,
+      );
+
+      if (!isDecisionWindowOpen) {
+        expect(true).to.be.true;
+        return;
+      }
+
+      cy.wrap(null).then(() => {
+        axios.post(`${env.serverEndpoint}snapshots/pending`).then(() => {
+          cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
+        });
+      });
     });
   });
 });

client/cypress/e2e/allocationItemWindowClosed.cy.ts

@@ -0,0 +1,108 @@
+import {
+  connectWallet,
+  visitWithLoader,
+  mockCoinPricesServer,
+  navigateWithCheck,
+} from 'cypress/utils/e2e';
+import { moveTime, setupAndMoveToPlayground } from 'cypress/utils/moveTime';
+import viewports from 'cypress/utils/viewports';
+import { QUERY_KEYS } from 'src/api/queryKeys';
+import {
+  ALLOCATION_ITEMS_KEY,
+  IS_ONBOARDING_ALWAYS_VISIBLE,
+  IS_ONBOARDING_DONE,
+} from 'src/constants/localStorageKeys';
+import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+describe('allocation (allocation window closed)', () => {
+  describe('move time', () => {
+    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;
+        });
+      });
+    });
+  });
+
+  Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDesktop }) => {
+    describe(`test cases: ${device}`, { viewportHeight, viewportWidth }, () => {
+      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();
+      });
+
+      beforeEach(() => {
+        cy.disconnectMetamaskWalletFromAllDapps();
+        mockCoinPricesServer();
+        localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
+        localStorage.setItem(IS_ONBOARDING_DONE, 'true');
+        localStorage.setItem(ALLOCATION_ITEMS_KEY, '[]');
+        visitWithLoader(ROOT_ROUTES.projects.absolute);
+
+        cy.get('[data-test^=ProjectItemSkeleton').should('not.exist');
+        cy.get('[data-test^=ProjectsView__ProjectsListItem]')
+          .eq(0)
+          .should('be.visible')
+          .find('[data-test=ProjectsListItem__name]')
+          .then($text => {
+            cy.wrap($text.text()).as('projectName');
+          });
+
+        cy.get('[data-test^=ProjectsView__ProjectsListItem')
+          .eq(0)
+          .find('[data-test=ProjectsListItem__ButtonAddToAllocate]')
+          .click();
+        navigateWithCheck(ROOT_ROUTES.allocation.absolute);
+      });
+
+      it('AllocationItem shows all the elements', () => {
+        connectWallet(true, false);
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__name]')
+          .then($allocationItemName => {
+            cy.get('@projectName').then(projectName => {
+              expect(projectName).to.eq($allocationItemName.text());
+            });
+          });
+
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__imageProfile]')
+          .should(isDesktop ? 'be.visible' : 'not.be.visible');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItemRewards]')
+          .contains(isDesktop ? 'Threshold data unavailable' : 'No threshold data');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .should('be.disabled');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText__suffix]')
+          .contains('GWEI');
+      });
+    });
+  });
+});

client/cypress/e2e/allocationItemWindowOpen.cy.ts

@@ -0,0 +1,139 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import chaiColors from 'chai-colors';
+
+import {
+  visitWithLoader,
+  mockCoinPricesServer,
+  navigateWithCheck,
+  connectWallet,
+} from 'cypress/utils/e2e';
+import { moveTime, setupAndMoveToPlayground } from 'cypress/utils/moveTime';
+import viewports from 'cypress/utils/viewports';
+import { QUERY_KEYS } from 'src/api/queryKeys';
+import {
+  ALLOCATION_ITEMS_KEY,
+  IS_ONBOARDING_ALWAYS_VISIBLE,
+  IS_ONBOARDING_DONE,
+} from 'src/constants/localStorageKeys';
+import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+chai.use(chaiColors);
+
+const budget = '10000000000'; // 10 GWEI.
+
+describe('allocation (allocation window open)', () => {
+  describe('move time', () => {
+    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 open, when it is not, move time', () => {
+      setupAndMoveToPlayground();
+
+      cy.window().then(async win => {
+        moveTime(win, 'nextEpochDecisionWindowOpen').then(() => {
+          const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData(
+            QUERY_KEYS.isDecisionWindowOpen,
+          );
+          expect(isDecisionWindowOpenAfter).to.be.true;
+        });
+      });
+    });
+  });
+
+  Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDesktop }) => {
+    describe(`test cases: ${device}`, { viewportHeight, viewportWidth }, () => {
+      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();
+      });
+
+      beforeEach(() => {
+        cy.intercept('GET', '/rewards/budget/*/epoch/*', { body: { budget } });
+        cy.disconnectMetamaskWalletFromAllDapps();
+        mockCoinPricesServer();
+        localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
+        localStorage.setItem(IS_ONBOARDING_DONE, 'true');
+        localStorage.setItem(ALLOCATION_ITEMS_KEY, '[]');
+        visitWithLoader(ROOT_ROUTES.projects.absolute);
+        connectWallet(true, false);
+
+        cy.get('[data-test^=ProjectItemSkeleton').should('not.exist');
+        cy.get('[data-test^=ProjectsView__ProjectsListItem]')
+          .eq(0)
+          .should('be.visible')
+          .find('[data-test=ProjectsListItem__name]')
+          .then($text => {
+            cy.wrap($text.text()).as('projectName');
+          });
+
+        cy.get('[data-test^=ProjectsView__ProjectsListItem')
+          .eq(0)
+          .find('[data-test=ProjectsListItem__ButtonAddToAllocate]')
+          .click();
+        navigateWithCheck(ROOT_ROUTES.allocation.absolute);
+        cy.get('[data-test=AllocationItemSkeleton]').should('not.exist');
+      });
+
+      it('AllocationItem shows all the elements', () => {
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__name]')
+          .then($allocationItemName => {
+            cy.get('@projectName').then(projectName => {
+              expect(projectName).to.eq($allocationItemName.text());
+            });
+          });
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__imageProfile]')
+          .should(isDesktop ? 'be.visible' : 'not.be.visible');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .should('be.enabled');
+      });
+
+      it('AllocationItem__InputText correctly changes background color on focus', () => {
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .focus();
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .should('have.focus');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .should('have.css', 'background-color')
+          .and('be.colored', '#f1faf8');
+      });
+
+      it('AllocationItem__InputText correctly changes background color on error', () => {
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText__suffix]')
+          .contains('GWEI');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .type('99');
+        cy.get('[data-test=AllocationItem]')
+          .eq(0)
+          .find('[data-test=AllocationItem__InputText]')
+          .should('have.css', 'background-color')
+          .and('be.colored', '#f1faf8');
+      });
+    });
+  });
+});

client/cypress/e2e/earn.cy.ts

@@ -1,4 +1,5 @@
-import { visitWithLoader, mockCoinPricesServer, moveEpoch } from 'cypress/utils/e2e';
+import { visitWithLoader, mockCoinPricesServer } from 'cypress/utils/e2e';
+import { moveTime } from 'cypress/utils/moveTime';
 import viewports from 'cypress/utils/viewports';
 import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
 import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
@@ -248,7 +249,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
           }).should('not.exist');
           cy.window().then(async win => {
             cy.wrap(null).then(() => {
-              return moveEpoch(win).then(() => {
+              return moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
                 cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]', {
                   timeout: 60000,
                 })

client/cypress/e2e/projectsArchive.cy.ts

@@ -1,4 +1,5 @@
-import { checkLocationWithLoader, moveEpoch, visitWithLoader } from 'cypress/utils/e2e';
+import { checkLocationWithLoader, visitWithLoader } from 'cypress/utils/e2e';
+import { moveTime } from 'cypress/utils/moveTime';
 import viewports from 'cypress/utils/viewports';
 import { QUERY_KEYS } from 'src/api/queryKeys';
 import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
@@ -23,7 +24,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) =>
           );
 
           cy.wrap(null).then(() => {
-            return moveEpoch(win).then(() => {
+            return moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
               const currentEpochAfter = Number(
                 win.clientReactQuery.getQueryData(QUERY_KEYS.currentEpoch),
               );

client/cypress/support/e2e.d.ts

@@ -4,6 +4,8 @@ declare namespace Cypress {
   interface ApplicationWindow {
     // Importing QueryClient breaks <reference types="cypress" /> making these types not visible.
     clientReactQuery: any;
-    mutateAsyncMoveEpoch: () => Promise<void>;
+    mutateAsyncMakeSnapshot: (type: 'pending' | 'finalized') => Promise<void>;
+    mutateAsyncMoveToDecisionWindowClosed: () => Promise<void>;
+    mutateAsyncMoveToDecisionWindowOpen: () => Promise<void>;
   }
 }

client/cypress/utils/e2e.ts

@@ -1,7 +1,4 @@
-import axios from 'axios';
-
 import { navigationTabs } from 'src/constants/navigationTabs/navigationTabs';
-import env from 'src/env';
 
 import Chainable = Cypress.Chainable;
 
@@ -49,32 +46,3 @@ export const connectWallet = (
   cy.switchToMetamaskNotification();
   return cy.acceptMetamaskAccess();
 };
-
-export const moveEpoch = (cypressWindow: Cypress.AUTWindow): Promise<boolean> => {
-  return new Promise(resolve => {
-    cypressWindow.mutateAsyncMoveEpoch().then(() => {
-      // Waiting 2s is a way to prevent the effects of slowing down the e2e environment (data update).
-      cy.wait(2000);
-      // Manually taking a pending snapshot after the epoch shift ensures that the snapshot is taken. Passing epoch multiple times without manually triggering pending snapshot in a short period of time may cause the e2e environment to fail.
-      axios.post(`${env.serverEndpoint}snapshots/pending`).then(() => {
-        // Waiting 2s is a way to prevent the effects of slowing down the e2e environment (data update).
-        cy.wait(2000);
-        // reload is needed to get updated data in the app
-        cy.reload();
-        cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
-        // reload is needed to get updated data in the app
-        cy.reload();
-        axios.post(`${env.serverEndpoint}snapshots/finalized`).then(() => {
-          // Waiting 2s is a way to prevent the effects of slowing down the e2e environment (data update).
-          cy.wait(2000);
-          // reload is needed to get updated data in the app
-          cy.reload();
-          cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
-          // reload is needed to get updated data in the app
-          cy.reload();
-          resolve(true);
-        });
-      });
-    });
-  });
-};