From f39fa8d9e02bb89a17301ebe30b4443ecdd1312a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Wed, 4 Dec 2024 19:52:50 +0000 Subject: [PATCH 1/2] oct-2124: allocation AW closed e2e --- client/cypress/e2e/_15closeAW.cy.ts | 27 +++ .../cypress/e2e/_16allocationAWClosed.cy.ts | 160 ++++++++++++++++++ .../src/components/Allocation/Allocation.tsx | 6 +- .../AllocationItem/AllocationItem.tsx | 1 + .../AllocationNavigation.tsx | 5 +- .../AllocationRewardsBox.tsx | 15 +- 6 files changed, 209 insertions(+), 5 deletions(-) create mode 100644 client/cypress/e2e/_15closeAW.cy.ts create mode 100644 client/cypress/e2e/_16allocationAWClosed.cy.ts diff --git a/client/cypress/e2e/_15closeAW.cy.ts b/client/cypress/e2e/_15closeAW.cy.ts new file mode 100644 index 0000000000..b0ac93f3cb --- /dev/null +++ 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 new file mode 100644 index 0000000000..10e99db7d2 --- /dev/null +++ b/client/cypress/e2e/_16allocationAWClosed.cy.ts @@ -0,0 +1,160 @@ +// 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', () => { + cy.get('[data-test=Allocation__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 index e0682910ea..94d0b4ff8b 100644 --- a/client/src/components/Allocation/Allocation.tsx +++ b/client/src/components/Allocation/Allocation.tsx @@ -614,7 +614,11 @@ const Allocation: FC = ({ dataTest }) => { /> )} {!allocations.length && currentView === 'edit' && ( -
+
{isEmptyStateImageVisible && ( )} diff --git a/client/src/components/Allocation/AllocationItem/AllocationItem.tsx b/client/src/components/Allocation/AllocationItem/AllocationItem.tsx index b2f94e6e75..c665df67b5 100644 --- a/client/src/components/Allocation/AllocationItem/AllocationItem.tsx +++ b/client/src/components/Allocation/AllocationItem/AllocationItem.tsx @@ -253,6 +253,7 @@ const AllocationItem: FC = ({ )} = ({ onResetValues, isWaitingForAllMultisigSignatures, }) => { + const dataTestRoot = 'AllocationNavigation'; const { i18n, t } = useTranslation('translation', { keyPrefix: 'components.dedicated.allocationNavigation', }); @@ -83,15 +84,17 @@ const AllocationNavigation: FC = ({ }, []); return ( -
+