OCT-2144: Calendar E2E

client/cypress/e2e/_3layoutTopBar.cy.ts

@@ -163,11 +163,6 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) =>
       cy.get('[data-test=LayoutTopBarCalendar]').should('be.visible');
     });
 
-    it('Epoch info badge opens Calendar on click', () => {
-      cy.get('[data-test=LayoutTopBarCalendar]').click();
-      cy.get('[data-test=Calendar]').should('be.visible');
-    });
-
     it('Connect wallet button is visible', () => {
       cy.get('[data-test=LayoutTopBar__Button]').should('be.visible');
     });

client/cypress/e2e/_8calendar.cy.ts

@@ -0,0 +1,272 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import chaiColors from 'chai-colors';
+
+import { mockCoinPricesServer, visitWithLoader } 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 {
+  HAS_ONBOARDING_BEEN_CLOSED,
+  IS_ONBOARDING_ALWAYS_VISIBLE,
+  IS_ONBOARDING_DONE,
+} from 'src/constants/localStorageKeys';
+import { ROOT, ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+chai.use(chaiColors);
+
+Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => {
+  describe(`[AW IS CLOSED] Calendar: ${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.absolute, ROOT_ROUTES.home.absolute);
+    });
+
+    it('Epoch info badge opens Calendar on click', () => {
+      cy.wait(2000);
+      cy.get('[data-test=LayoutTopBarCalendar]').click();
+      cy.get('[data-test=Calendar]').should('be.visible');
+    });
+
+    it('Clicking on overlay closes the Calendar', () => {
+      cy.wait(2000);
+      cy.get('[data-test=LayoutTopBarCalendar]').click();
+      cy.get('[data-test=Calendar]').should('be.visible');
+      if (isMobile) {
+        cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__overflow]').click({
+          force: true,
+        });
+      } else {
+        cy.get('[data-test=LayoutTopBarCalendar__calendarOverflow]').click();
+      }
+      cy.get('[data-test=Calendar]').should('not.exist');
+    });
+
+    it('Active milestone is always visible after calendar open (and has correct style)', () => {
+      cy.wait(2000);
+      cy.get('[data-test=LayoutTopBarCalendar]').click();
+      cy.get('[data-test=CalendarItem][data-is-active=true]').should('be.visible');
+      cy.get('[data-test=CalendarItem][data-is-active=true]')
+        .invoke('css', 'opacity')
+        .should('eq', '1');
+      cy.get('[data-test=CalendarItem][data-is-active=true]')
+        .then($el => $el.css('backgroundColor'))
+        .should('be.colored', '#f1faf8');
+      cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => {
+        cy.get('[data-test=CalendarItem__title__day]')
+          .then($el => $el.css('color'))
+          .should('be.colored', '#2d9b87');
+        cy.get('[data-test=CalendarItem__title__monthShort]')
+          .then($el => $el.css('color'))
+          .should('be.colored', '#2d9b87');
+        cy.get('[data-test=CalendarItem__label]')
+          .then($el => $el.css('color'))
+          .should('be.colored', '#2d9b87');
+        cy.get('[data-test=CalendarItem__date]')
+          .then($el => $el.css('color'))
+          .should('be.colored', '#2d9b87');
+      });
+    });
+
+    it('Milestone with "to" param shows end date of event', () => {
+      cy.wait(2000);
+      cy.get('[data-test=LayoutTopBarCalendar]').click();
+      cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => {
+        cy.get('[data-test=CalendarItem__date]')
+          .invoke('text')
+          .should('include', 'Closes 31 January');
+      });
+    });
+
+    it('Milestone without "to" param shows hour and timezone of event start', () => {
+      cy.wait(2000);
+      cy.get('[data-test=LayoutTopBarCalendar]').click();
+      cy.get('[data-test=CalendarItem]')
+        .eq(1)
+        .within(() => {
+          cy.get('[data-test=CalendarItem__date]').invoke('text').should('include', 'am CET');
+        });
+    });
+
+    if (isMobile) {
+      it('User can scroll through milestones by drag&drop vertically', () => {
+        cy.wait(2000);
+        cy.get('[data-test=LayoutTopBarCalendar]').click();
+        cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => {
+          const { top: calendarItemActiveTop } = $calendarItemActive[0].getBoundingClientRect();
+
+          cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible');
+          cy.get('[data-test=CalendarItem]')
+            .eq(2)
+            .then($prevCalendarItem => {
+              const { height: prevCalendarItemHeight } =
+                $prevCalendarItem[0].getBoundingClientRect();
+              const prevCalendarItemMarginBottm = parseInt(
+                $prevCalendarItem.css('marginBottom'),
+                10,
+              );
+
+              const pointerDownPageY = calendarItemActiveTop;
+              const pointerUpPageY = Math.ceil(
+                calendarItemActiveTop + prevCalendarItemHeight + prevCalendarItemMarginBottm,
+              );
+
+              cy.get('[data-test=Calendar__wrapper]')
+                .trigger('pointerdown', {
+                  pageY: pointerDownPageY,
+                })
+                .trigger('pointermove', {
+                  pageY: pointerUpPageY,
+                })
+                .trigger('pointerup', {
+                  pageY: pointerUpPageY,
+                });
+
+              cy.get('[data-test=CalendarItem]').eq(2).should('be.visible');
+            });
+        });
+      });
+    } else {
+      it('User can scroll through milestones by drag&drop horizontally', () => {
+        cy.wait(2000);
+        cy.get('[data-test=LayoutTopBarCalendar]').click();
+        cy.get('[data-test=CalendarItem][data-is-active=true]').then($calendarItemActive => {
+          const { left: calendarItemActiveLeft } = $calendarItemActive[0].getBoundingClientRect();
+
+          cy.get('[data-test=CalendarItem]').eq(2).should('not.be.visible');
+          cy.get('[data-test=CalendarItem]')
+            .eq(2)
+            .then($prevCalendarItem => {
+              const { width: prevCalendarItemWidth } = $prevCalendarItem[0].getBoundingClientRect();
+              const prevCalendarItemMarginRight = parseInt(
+                $prevCalendarItem.css('marginRight'),
+                10,
+              );
+
+              const pointerDownPageX = calendarItemActiveLeft;
+              const pointerUpPageX = Math.ceil(
+                calendarItemActiveLeft + prevCalendarItemWidth + prevCalendarItemMarginRight,
+              );
+
+              cy.get('[data-test=Calendar__wrapper]')
+                .trigger('pointerdown', {
+                  pageX: pointerDownPageX,
+                })
+                .trigger('pointermove', {
+                  pageX: pointerUpPageX,
+                })
+                .trigger('pointerup', {
+                  pageX: pointerUpPageX,
+                });
+
+              cy.get('[data-test=CalendarItem]').eq(2).should('be.visible');
+            });
+        });
+      });
+    }
+
+    if (isMobile) {
+      it('User can close Calendar by clicking on close button (X) in top-right corner', () => {
+        cy.wait(2000);
+        cy.get('[data-test=LayoutTopBarCalendar]').click();
+        cy.get('[data-test=Calendar]').should('be.visible');
+        cy.get('[data-test=LayoutTopBarCalendar__ModalCalendar__Button]').click();
+        cy.get('[data-test=Calendar]').should('not.exist');
+      });
+    }
+  });
+});
+
+describe('move time - AW IS OPEN - less than 24h to change AW', () => {
+  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, 'nextEpochDecisionWindowOpenLessThan24H').then(() => {
+        cy.get('[data-test=PlaygroundView]').should('be.visible');
+        const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData(
+          QUERY_KEYS.isDecisionWindowOpen,
+        );
+        expect(isDecisionWindowOpenAfter).to.be.true;
+      });
+    });
+  });
+});
+
+Object.values(viewports).forEach(
+  ({ device, viewportWidth, viewportHeight, isDesktop, isLargeDesktop }) => {
+    describe(`[AW IS OPEN < 24h] Calendar: ${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.absolute, ROOT_ROUTES.home.absolute);
+      });
+
+      it('Allocation window milestone has alert style when AW is going to change in less than 24h', () => {
+        cy.wait(2000);
+        cy.get('[data-test=LayoutTopBarCalendar]').click();
+        cy.get('[data-test=CalendarItem][data-is-active=true]').should('be.visible');
+        cy.get('[data-test=CalendarItem][data-is-active=true]')
+          .invoke('css', 'opacity')
+          .should('eq', '1');
+        cy.get('[data-test=CalendarItem][data-is-active=true]')
+          .then($el => $el.css('backgroundColor'))
+          .should('be.colored', '#fff5f4');
+        cy.get('[data-test=CalendarItem][data-is-active=true]').within(() => {
+          cy.get('[data-test=CalendarItem__title__day]')
+            .then($el => $el.css('color'))
+            .should('be.colored', '#ff6157');
+          cy.get('[data-test=CalendarItem__title__monthShort]')
+            .then($el => $el.css('color'))
+            .should('be.colored', '#ff6157');
+          cy.get('[data-test=CalendarItem__label]')
+            .invoke('text')
+            .should('eq', 'Allocation window');
+          cy.get('[data-test=CalendarItem__label]')
+            .then($el => $el.css('color'))
+            .should('be.colored', '#ff6157');
+          cy.get('[data-test=CalendarItem__date]')
+            .then($el => $el.css('color'))
+            .should('be.colored', '#ff6157');
+        });
+      });
+
+      if (isDesktop || isLargeDesktop) {
+        it('Allocation window milestone with alert style shows time to change AW on hover', () => {
+          cy.wait(2000);
+          cy.get('[data-test=LayoutTopBarCalendar]').click();
+          cy.get('[data-test=CalendarItem][data-is-active=true]')
+            .realHover()
+            .then($el => $el.css('backgroundColor'))
+            .should('be.colored', '#ffeae6');
+          cy.get('[data-test=CalendarItem][data-is-active=true]')
+            .realHover()
+            .within(() => {
+              cy.get('[data-test=CalendarItem__date]').invoke('text').should('contain', 'hours');
+            });
+        });
+      }
+    });
+  },
+);

client/cypress/support/index.ts

@@ -1 +1,2 @@
+import 'cypress-real-events';
 import './commands';

client/cypress/tsconfig.json

@@ -8,6 +8,7 @@
       "@synthetixio/synpress/support",
       "cypress-wait-until",
       "@testing-library/cypress",
+      "cypress-real-events",
       "../global"
     ],
     "outDir": "./output"

client/cypress/utils/moveTime.ts

@@ -39,9 +39,12 @@ export const mutateAsyncMakeSnapshot = (
     });
   });
 
-const mutateAsyncMoveToDecisionWindowOpen = (cypressWindow: Cypress.AUTWindow): Promise<any> =>
+const mutateAsyncMoveToDecisionWindowOpen = (
+  cypressWindow: Cypress.AUTWindow,
+  isLessThan24HoursToChangeAW?: boolean,
+): Promise<any> =>
   new Cypress.Promise(resolve => {
-    cypressWindow.mutateAsyncMoveToDecisionWindowOpen().then(() => {
+    cypressWindow.mutateAsyncMoveToDecisionWindowOpen(isLessThan24HoursToChangeAW).then(() => {
       resolve(true);
     });
   });
@@ -51,12 +54,17 @@ const waitForLoadersToDisappear = (): Chainable<any> => {
   return cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
 };
 
-const moveToDecisionWindowOpen = (cypressWindow: Cypress.AUTWindow): Chainable<any> => {
+const moveToDecisionWindowOpen = (
+  cypressWindow: Cypress.AUTWindow,
+  isLessThan24HoursToChangeAW?: boolean,
+): Chainable<any> => {
   waitForLoadersToDisappear();
   cy.wrap(null).then(() => {
-    return mutateAsyncMoveToDecisionWindowOpen(cypressWindow).then(str => {
-      expect(str).to.eq(true);
-    });
+    return mutateAsyncMoveToDecisionWindowOpen(cypressWindow, isLessThan24HoursToChangeAW).then(
+      str => {
+        expect(str).to.eq(true);
+      },
+    );
   });
   waitForLoadersToDisappear();
   // Waiting 2s is a way to prevent the effects of slowing down the e2e environment (data update).
@@ -100,7 +108,10 @@ const moveToDecisionWindowClosed = (cypressWindow: Cypress.AUTWindow): Chainable
  */
 export const moveTime = (
   cypressWindow: Cypress.AUTWindow,
-  moveTo: 'nextEpochDecisionWindowClosed' | 'nextEpochDecisionWindowOpen',
+  moveTo:
+    | 'nextEpochDecisionWindowClosed'
+    | 'nextEpochDecisionWindowOpen'
+    | 'nextEpochDecisionWindowOpenLessThan24H',
   connectWalletParams?: ConnectWalletParameters,
 ): Chainable<any> => {
   const isDecisionWindowOpen = cypressWindow.clientReactQuery.getQueryData(
@@ -114,8 +125,11 @@ export const moveTime = (
     cy.reload();
   }
 
-  if (moveTo === 'nextEpochDecisionWindowOpen') {
-    moveToDecisionWindowOpen(cypressWindow);
+  if (
+    moveTo === 'nextEpochDecisionWindowOpen' ||
+    moveTo === 'nextEpochDecisionWindowOpenLessThan24H'
+  ) {
+    moveToDecisionWindowOpen(cypressWindow, moveTo === 'nextEpochDecisionWindowOpenLessThan24H');
   } else {
     moveToDecisionWindowOpen(cypressWindow);
     // Reload is needed to get updated data in the app

client/cypress/utils/viewports.ts

@@ -5,7 +5,7 @@ type Viewport = {
   isMobile: boolean;
   isTablet: boolean;
   viewportHeight: number;
-  viewportWidth: 471 | 755 | 1280 | 1920;
+  viewportWidth: 390 | 755 | 1280 | 1920;
 };
 
 type Viewports = {
@@ -37,8 +37,8 @@ const viewports: Viewports = {
     isLargeDesktop: false,
     isMobile: true,
     isTablet: false,
-    viewportHeight: 1020,
-    viewportWidth: 471,
+    viewportHeight: 844,
+    viewportWidth: 390,
   },
   tablet: {
     device: 'tablet',

client/package.json

@@ -44,6 +44,7 @@
     "@wagmi/core": "^2.14.1",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
+    "cypress-real-events": "^1.13.0",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "formik": "^2.4.6",