From 7fc29ef1b5557109eed7cb9f2336b88d9b4fad73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Thu, 2 Jan 2025 15:15:12 +0100 Subject: [PATCH 1/8] test: test suite prototype --- client/cypress/e2e/_17project.cy.ts | 29 +- client/cypress/e2e/_17projects.cy.ts | 373 ++++++++++++++++++ client/cypress/utils/e2e.ts | 15 + .../components/ui/InputSelect/InputSelect.tsx | 2 +- client/src/components/ui/InputSelect/types.ts | 1 + .../ProjectsView/ProjectsView.module.scss | 4 + .../src/views/ProjectsView/ProjectsView.tsx | 9 +- 7 files changed, 408 insertions(+), 25 deletions(-) create mode 100644 client/cypress/e2e/_17projects.cy.ts diff --git a/client/cypress/e2e/_17project.cy.ts b/client/cypress/e2e/_17project.cy.ts index a787fa6d72..130e054528 100644 --- a/client/cypress/e2e/_17project.cy.ts +++ b/client/cypress/e2e/_17project.cy.ts @@ -1,10 +1,11 @@ import { changeMainValueToCryptoToggle, - // changeMainValueToFiat, checkProjectsViewLoaded, connectWallet, mockCoinPricesServer, visitWithLoader, + getHeartedProjectsIndicator, + checkHeartedProjectsIndicator, } from 'cypress/utils/e2e'; import { getNamesOfProjects } from 'cypress/utils/projects'; import viewports from 'cypress/utils/viewports'; @@ -71,13 +72,13 @@ const checkProjectItemElements = (areMiddleSectionsVisible: boolean): Chainable< .filter(':visible'); buttonShare.should('be.visible'); - // buttonShare.click(); - // cy.window().then(win => { - // buttonShare.click(); - // win.navigator.clipboard.readText().then(text => { - // expect(text).to.eq(cy.url()); - // }); - // }); + buttonShare.click(); + cy.window().then(win => { + buttonShare.click(); + win.navigator.clipboard.readText().then(text => { + expect(text).to.eq(cy.url()); + }); + }); projectListItemFirst .get('[data-test=ProjectMilestonesNoResults]') .scrollIntoView() @@ -88,18 +89,6 @@ const checkProjectItemElements = (areMiddleSectionsVisible: boolean): Chainable< .should('eq', 'Nothing to report yet. Check back again soon'); }; -const getHeartedProjectsIndicator = (isNavbarVisible: boolean): Chainable => { - return cy.get( - isNavbarVisible - ? '[data-test=LayoutNavbar__numberOfAllocations]' - : '[data-test=LayoutTopBar__numberOfAllocations]', - ); -}; - -const checkHeartedProjectsIndicator = (isNavbarVisible: boolean, number = 1): Chainable => { - return getHeartedProjectsIndicator(isNavbarVisible).contains(number); -}; - Object.values(viewports).forEach( ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { describe(`[AW IS OPEN] Project: ${device}`, { viewportHeight, viewportWidth }, () => { diff --git a/client/cypress/e2e/_17projects.cy.ts b/client/cypress/e2e/_17projects.cy.ts new file mode 100644 index 0000000000..cdb8af30f0 --- /dev/null +++ b/client/cypress/e2e/_17projects.cy.ts @@ -0,0 +1,373 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { + connectWallet, + mockCoinPricesServer, + visitWithLoader, + checkProjectsViewLoaded, + getHeartedProjectsIndicator, + changeMainValueToCryptoToggle, +} from 'cypress/utils/e2e'; +import { getNamesOfProjects } from 'cypress/utils/projects'; +import viewports from 'cypress/utils/viewports'; +import { + HAS_ONBOARDING_BEEN_CLOSED, + IS_CRYPTO_MAIN_VALUE_DISPLAY, + IS_ONBOARDING_DONE, +} from 'src/constants/localStorageKeys'; +import getMilestones from 'src/constants/milestones'; +import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; +import { ORDER_OPTIONS } from 'src/views/ProjectsView/utils'; + +import Chainable = Cypress.Chainable; + +chai.use(chaiColors); + +// 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; +// }); +// }); +// }); +// }); + +function checkProjectItemElements( + index: number, + name: string, + isPatronMode = false, +): Chainable { + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__imageProfile]') + .should('be.visible'); + cy.get('[data-test^=ProjectsView__ProjectsListItem]') + .eq(index) + .should('be.visible') + .find('[data-test=ProjectsListItem__name]') + .should('be.visible') + .contains(name); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__IntroDescription]') + .should('be.visible'); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .should('be.visible'); + + if (isPatronMode) { + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .should('be.disabled'); + } + + return cy + .get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectRewards]') + .should('be.visible'); +} + +function addProjectToAllocate( + index: number, + numberOfAddedProjects: number, + isNavbarVisible: boolean, +): Chainable { + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__imageProfile]') + .should('be.visible'); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__IntroDescription]') + .should('be.visible'); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .scrollIntoView(); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .click(); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .find('svg') + .find('path') + .then($el => $el.css('fill')) + .should('be.colored', '#FF6157'); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .find('svg') + .find('path') + .then($el => $el.css('stroke')) + .should('be.colored', '#FF6157'); + getHeartedProjectsIndicator(isNavbarVisible).contains(numberOfAddedProjects + 1); + + if (isNavbarVisible) { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); + } else { + visitWithLoader( + ROOT_ROUTES.allocation.absolute, + isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, + ); + cy.get('[data-test=AllocationView]').should('be.visible'); + } + cy.get('[data-test=AllocationItem]').should('have.length', numberOfAddedProjects + 1); + + return isNavbarVisible + ? cy.go('back') + : cy.get('[data-test=AllocationDrawer__closeButton]').click(); +} + +function removeProjectFromAllocate( + numberOfProjects: number, + numberOfAddedProjects: number, + index: number, + isNavbarVisible: boolean, +): Chainable { + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .scrollIntoView(); + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .click(); + if (isNavbarVisible) { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); + } else { + visitWithLoader( + ROOT_ROUTES.allocation.absolute, + isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, + ); + cy.get('[data-test=AllocationView]').should('be.visible'); + } + cy.get('[data-test=AllocationItem]').should('have.length', numberOfAddedProjects - 1); + if (index < numberOfProjects - 1) { + getHeartedProjectsIndicator(isNavbarVisible).contains(numberOfAddedProjects - 1); + } else { + getHeartedProjectsIndicator(isNavbarVisible).should('not.exist'); + } + return cy.go('back'); +} + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { + describe(`projects: ${device}`, { viewportHeight, viewportWidth }, () => { + let projectNames: string[] = []; + + beforeEach(() => { + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + checkProjectsViewLoaded(); + + /** + * This could be done in before hook, but CY wipes the state after each test + * (could be disabled, but creates other problems) + */ + if (projectNames.length === 0) { + projectNames = getNamesOfProjects(); + } + }); + + it('header is visible', () => { + cy.get('[data-test^=ProjectsView__ViewTitle]').should('be.visible'); + }); + + it('user is able to see all the projects in the view', () => { + for (let i = 0; i < projectNames.length; i++) { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).scrollIntoView(); + checkProjectItemElements(i, projectNames[i]); + } + }); + + it('user is able to add & remove the first and the last project to/from allocation, triggering change of the icon, change of the number in navbar', () => { + // This test checks the first and the last elements only to save time. + cy.get('[data-test=Navbar__numberOfAllocations]').should('not.exist'); + + addProjectToAllocate(0, 0, isMobile || isTablet); + addProjectToAllocate(projectNames.length - 1, 1, isMobile || isTablet); + removeProjectFromAllocate(projectNames.length, 2, 0, isMobile || isTablet); + removeProjectFromAllocate( + projectNames.length, + 1, + projectNames.length - 1, + isMobile || isTablet, + ); + }); + + it('user is able to add project to allocation in ProjectsView and remove it from allocation in AllocationView', () => { + cy.get('[data-test=Navbar__numberOfAllocations]').should('not.exist'); + addProjectToAllocate(0, 0, isMobile || isTablet); + + const isNavbarVisible = isMobile || isTablet; + if (isNavbarVisible) { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); + } else { + visitWithLoader( + ROOT_ROUTES.allocation.absolute, + isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, + ); + cy.get('[data-test=AllocationView]').should('be.visible'); + } + + cy.get('[data-test=AllocationItemSkeleton]').should('not.exist'); + cy.get('[data-test=AllocationItem]').then(el => { + const { x } = el[0].getBoundingClientRect(); + cy.get('[data-test=AllocationItem]') + .trigger('pointerdown') + .trigger('pointermove', { pageX: x - 20 }) + .trigger('pointerup', { pageX: x - 40 }); + cy.wait(500); + cy.get('[data-test=AllocationItem__removeButton]').should('be.visible'); + cy.get('[data-test=AllocationItem__removeButton]').click(); + cy.get('[data-test=AllocationItem__removeButton]').should('not.exist'); + cy.get('[data-test=AllocationItem]').should('not.exist'); + cy.get('[data-test=Navbar__numberOfAllocations]').should('not.exist'); + }); + }); + + it('ProjectsTimelineWidgetItem with href opens link when clicked without mouse movement', () => { + const milestones = getMilestones(); + cy.get('[data-test=ProjectsTimelineWidget]').should('be.visible'); + cy.get('[data-test=ProjectsTimelineWidgetItem]').should('have.length', milestones.length); + for (let i = 0; i < milestones.length; i++) { + if (milestones[i].href) { + cy.get('[data-test=ProjectsTimelineWidgetItem]') + .eq(i) + .within(() => { + cy.get('[data-test=ProjectsTimelineWidgetItem__Svg--arrowTopRight]').should( + 'be.visible', + ); + }); + + cy.get('[data-test=ProjectsTimelineWidgetItem]') + .eq(i) + .then(el => { + const { x } = el[0].getBoundingClientRect(); + cy.get('[data-test=ProjectsTimelineWidgetItem]') + .eq(i) + .trigger('mousedown') + .trigger('mouseup', { clientX: x + 10 }); + cy.location('pathname').should('eq', ROOT_ROUTES.projects.absolute); + + cy.get('[data-test=ProjectsTimelineWidgetItem]') + .eq(i) + .trigger('mousedown') + .trigger('mouseup'); + cy.location('pathname').should('not.eq', ROOT_ROUTES.projects.absolute); + }); + } + } + }); + + it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: true)`, () => { + changeMainValueToCryptoToggle(!isMobile && !isTablet, 'crypto'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + cy.get('[data-test=ProjectRewards__currentTotal__number]') + .first() + .invoke('text') + .should('eq', '0 ETH'); + }); + + it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: false)`, () => { + changeMainValueToCryptoToggle(!isMobile && !isTablet, 'fiat'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + + cy.get('[data-test=ProjectRewards__currentTotal__number]') + .first() + .invoke('text') + .should('eq', '$0.00'); + }); + + it('every sorting option is clickable', () => { + // @ts-expect-error I don't want to define entire TFunction here. + const orderOptionsValues = ORDER_OPTIONS((key: string) => {}).map(element => element.value); + orderOptionsValues.forEach(orderOptionsValue => { + cy.get('[data-test=ProjectsView__InputSelect]').click(); + cy.get(`[data-test=ProjectsView__InputSelect__Option--${orderOptionsValue}]`).click(); + }); + }); + + it('search field -- results should show project', () => { + cy.get('[data-test=ProjectsList__InputText]').clear().type(projectNames[0]); + cy.get('[data-test=ProjectsView__ProjectsList]') + .find('[data-test^=ProjectsView__ProjectsListItem]') + .should('have.length', 1); + }); + + it('search field -- no results should show no results image & text', () => { + cy.get('[data-test=ProjectsList__InputText]') + .clear() + .type('there-is-no-way-there-will-ever-be-a-project-with-such-a-name'); + cy.get('[data-test=ProjectsList__noSearchResults]').should('be.visible'); + cy.get('[data-test=ProjectsList__noSearchResults__Img]').should('be.visible'); + }); + }); + + describe(`projects (patron mode): ${device}`, { viewportHeight, viewportWidth }, () => { + let projectNames: string[] = []; + + 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(() => { + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + connectWallet({ isPatronModeEnabled: true }); + checkProjectsViewLoaded(); + /** + * This could be done in before hook, but CY wipes the state after each test + * (could be disabled, but creates other problems) + */ + if (projectNames.length === 0) { + projectNames = getNamesOfProjects(); + } + }); + + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('button "add to allocate" is disabled', () => { + for (let i = 0; i < projectNames.length; i++) { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).scrollIntoView(); + checkProjectItemElements(i, projectNames[i], true); + } + }); + }); + }, +); diff --git a/client/cypress/utils/e2e.ts b/client/cypress/utils/e2e.ts index d1e157e712..2d0960fe01 100644 --- a/client/cypress/utils/e2e.ts +++ b/client/cypress/utils/e2e.ts @@ -132,3 +132,18 @@ export const changeMainValueToCryptoToggle = ( ); }); }; + +export const getHeartedProjectsIndicator = (isNavbarVisible: boolean): Chainable => { + return cy.get( + isNavbarVisible + ? '[data-test=LayoutNavbar__numberOfAllocations]' + : '[data-test=LayoutTopBar__numberOfAllocations]', + ); +}; + +export const checkHeartedProjectsIndicator = ( + isNavbarVisible: boolean, + number = 1, +): Chainable => { + return getHeartedProjectsIndicator(isNavbarVisible).contains(number); +}; diff --git a/client/src/components/ui/InputSelect/InputSelect.tsx b/client/src/components/ui/InputSelect/InputSelect.tsx index 9d3a10e4af..32f87ef186 100644 --- a/client/src/components/ui/InputSelect/InputSelect.tsx +++ b/client/src/components/ui/InputSelect/InputSelect.tsx @@ -134,7 +134,7 @@ const InputSelect: FC = ({
{ e.stopPropagation(); onOptionClick(option); diff --git a/client/src/components/ui/InputSelect/types.ts b/client/src/components/ui/InputSelect/types.ts index 9395d5791c..713a233b3e 100644 --- a/client/src/components/ui/InputSelect/types.ts +++ b/client/src/components/ui/InputSelect/types.ts @@ -1,4 +1,5 @@ export interface Option { + dataTest?: string; label: string; value: string; } diff --git a/client/src/views/ProjectsView/ProjectsView.module.scss b/client/src/views/ProjectsView/ProjectsView.module.scss index c6a8d694e3..ce3e4855cf 100644 --- a/client/src/views/ProjectsView/ProjectsView.module.scss +++ b/client/src/views/ProjectsView/ProjectsView.module.scss @@ -1,5 +1,9 @@ $elementMargin: 1.6rem; +.root { + width: 100%; +} + .viewTitle { border-bottom: 0.1rem solid $color-octant-grey1; margin-bottom: 2.4rem; diff --git a/client/src/views/ProjectsView/ProjectsView.tsx b/client/src/views/ProjectsView/ProjectsView.tsx index cf971f126d..79c5d0b41b 100644 --- a/client/src/views/ProjectsView/ProjectsView.tsx +++ b/client/src/views/ProjectsView/ProjectsView.tsx @@ -211,8 +211,8 @@ const ProjectsView = (): ReactElement => { const orderOptionsTranslated = ORDER_OPTIONS(t); return ( -
- +
+ {t('viewTitle', { epochNumber: isDecisionWindowOpen || @@ -235,6 +235,9 @@ const ProjectsView = (): ReactElement => { /> value === orderOption)} + variant="underselect" onChange={option => setOrderOption(option!.value as OrderOption)} // TODO OCT-1952: settle on when & how randomised order should work. options={ @@ -242,8 +245,6 @@ const ProjectsView = (): ReactElement => { ? orderOptionsTranslated : orderOptionsTranslated.filter(element => element.value !== 'randomized') } - selectedOption={orderOptionsTranslated.find(({ value }) => value === orderOption)} - variant="underselect" />
{searchQuery === '' && !areCurrentEpochsProjectsHiddenOutsideAllocationWindow && ( From 27795457f58c7b5b9ff510ee613da6dbf5587466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Mon, 13 Jan 2025 15:07:01 +0100 Subject: [PATCH 2/8] feat: debug projects suit, add wait --- client/cypress/e2e/_04layoutTopBar.cy.ts | 249 ------ client/cypress/e2e/_05layoutFooter.cy.ts | 173 ---- client/cypress/e2e/_06layoutNavbar.cy.ts | 196 ----- .../e2e/_07onboardingTOSNotAccepted.cy.ts | 109 --- .../e2e/_08onboardingTOSAccepted.cy.ts | 198 ----- client/cypress/e2e/_09connectWallet.cy.ts | 76 -- client/cypress/e2e/_10home.cy.ts | 124 --- client/cypress/e2e/_11settings.cy.ts | 303 ------- client/cypress/e2e/_12homeGLMLock.cy.ts | 308 ------- .../cypress/e2e/_13allocationAWClosed.cy.ts | 168 ---- client/cypress/e2e/_15metrics.cy.ts | 191 ---- client/cypress/e2e/_16allocationAWOpen.cy.ts | 833 ------------------ client/cypress/e2e/_17project.cy.ts | 304 ------- client/cypress/e2e/_17projects.cy.ts | 1 + client/cypress/e2e/_18antisybil.cy.ts | 84 -- client/cypress/e2e/_19rewardsEstimator.cy.ts | 234 ----- client/cypress/e2e/_20languageSelection.cy.ts | 109 --- 17 files changed, 1 insertion(+), 3659 deletions(-) delete mode 100644 client/cypress/e2e/_04layoutTopBar.cy.ts delete mode 100644 client/cypress/e2e/_05layoutFooter.cy.ts delete mode 100644 client/cypress/e2e/_06layoutNavbar.cy.ts delete mode 100644 client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts delete mode 100644 client/cypress/e2e/_08onboardingTOSAccepted.cy.ts delete mode 100644 client/cypress/e2e/_09connectWallet.cy.ts delete mode 100644 client/cypress/e2e/_10home.cy.ts delete mode 100644 client/cypress/e2e/_11settings.cy.ts delete mode 100644 client/cypress/e2e/_12homeGLMLock.cy.ts delete mode 100644 client/cypress/e2e/_13allocationAWClosed.cy.ts delete mode 100644 client/cypress/e2e/_15metrics.cy.ts delete mode 100644 client/cypress/e2e/_16allocationAWOpen.cy.ts delete mode 100644 client/cypress/e2e/_17project.cy.ts delete mode 100644 client/cypress/e2e/_18antisybil.cy.ts delete mode 100644 client/cypress/e2e/_19rewardsEstimator.cy.ts delete mode 100644 client/cypress/e2e/_20languageSelection.cy.ts diff --git a/client/cypress/e2e/_04layoutTopBar.cy.ts b/client/cypress/e2e/_04layoutTopBar.cy.ts deleted file mode 100644 index 3a47521a51..0000000000 --- a/client/cypress/e2e/_04layoutTopBar.cy.ts +++ /dev/null @@ -1,249 +0,0 @@ -// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => { - describe(`[AW IS CLOSED] LayoutTopBar: ${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('Top bar is visible ', () => { - cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); - cy.get('[data-test=LayoutTopBar]').should('be.visible'); - }); - - it('Top bar has grey background', () => { - cy.get('[data-test=Layout__topBarWrapper]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#f8f8f8'); - }); - - it('Octant logo is visible and has correct background colour', () => { - cy.get('[data-test=LayoutTopBar__Logo]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__Logo]').within(() => { - cy.get('path') - .then($el => $el.css('fill')) - .should('be.colored', '#171717'); - }); - }); - - it('Octant testnet indicator not exist', () => { - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').should('not.exist'); - }); - - it('Clicking on Octant logo scrolls view to the top on logo click (Home view)', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.scrollTo(0, 500); - cy.get('[data-test=LayoutTopBar__Logo]').click(); - // waiting for scrolling to finish - cy.wait(2000); - cy.window().then(cyWindow => { - expect(cyWindow.scrollY).to.be.eq(0); - }); - }); - - it('Clicking on Octant logo redirects to Home view (outside Home view)', () => { - if (device === 'large-desktop' || device === 'desktop') { - cy.get('[data-test=LayoutTopBar__link--metrics]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--metrics]`).click(); - } - cy.get('[data-test=MetricsView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__Logo]').click(); - cy.get('[data-test=HomeView]').should('be.visible'); - }); - - if (device !== 'mobile') { - it('Top bar is visible when user scrolls down/up', () => { - // scroll down - cy.scrollTo(0, 500); - cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); - cy.get('[data-test=LayoutTopBar]').should('be.visible'); - // scroll up - cy.scrollTo(0, 250); - cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); - cy.get('[data-test=LayoutTopBar]').should('be.visible'); - }); - } else { - it('Top bar hides when user scrolls down then top bar shows when user scrolls up', () => { - cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); - cy.get('[data-test=LayoutTopBar]').should('be.visible'); - cy.scrollTo(0, 500); - cy.get('[data-test=Layout__topBarWrapper]').should('not.be.visible'); - cy.get('[data-test=LayoutTopBar]').should('not.be.visible'); - cy.scrollTo(0, 250); - cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); - cy.get('[data-test=LayoutTopBar]').should('be.visible'); - }); - } - - if (device === 'large-desktop' || device === 'desktop') { - it('Projects view link is visible and redirects to Projects view after click', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--projects]').click(); - cy.get('[data-test=ProjectsView]').should('be.visible'); - }); - - it('Metrics view link is visible and redirects to Metrics view after click', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--metrics]').click(); - cy.get('[data-test=MetricsView]').should('be.visible'); - }); - - it('Home view link is visible and redirects to Home view after click', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--metrics]').click(); - cy.get('[data-test=MetricsView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--home]').click(); - cy.get('[data-test=HomeView]').should('be.visible'); - }); - - it('Active/Inactive link has proper style', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--home]') - .then($el => $el.css('color')) - .should('be.colored', '#171717'); - cy.get('[data-test=LayoutTopBar__underline--home]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__link--projects]') - .then($el => $el.css('color')) - .should('be.colored', '#cdd1cd'); - cy.get('[data-test=LayoutTopBar__link--metrics]') - .then($el => $el.css('color')) - .should('be.colored', '#cdd1cd'); - }); - } - - it('Epoch info badge is visible', () => { - cy.get('[data-test=LayoutTopBarCalendar]').should('be.visible'); - }); - - it('Connect wallet button is visible', () => { - cy.get('[data-test=LayoutTopBar__Button]').should('be.visible'); - }); - - it('Connect wallet button has proper label', () => { - cy.get('[data-test=LayoutTopBar__Button]') - .invoke('text') - .should('eq', device === 'mobile' ? 'Connect' : 'Connect wallet'); - }); - - if (device === 'large-desktop' || device === 'desktop') { - it('Settings button is visible and has white background', () => { - cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__settingsButton]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ffffff'); - }); - - it('Settings button opens Settings drawer', () => { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - cy.get('[data-test=SettingsDrawer]').should('be.visible'); - }); - - it('Allocation button is visible and has white background', () => { - cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__allocationButton]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ffffff'); - }); - - it('Allocation button opens Allocation drawer', () => { - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - cy.get('[data-test=AllocationDrawer]').should('be.visible'); - }); - } - - describe('[TESTNET]', () => { - beforeEach(() => { - cy.window().then(win => { - // eslint-disable-next-line no-param-reassign - win.isTestnetCypress = true; - // wait for re-render - cy.wait(2500); - }); - }); - - it('Top bar has red background', () => { - cy.get('[data-test=Layout__topBarWrapper]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ffefee'); - }); - - it('Octant logo exists and has correct background colour', () => { - cy.get('[data-test=LayoutTopBar__Logo]').should('exist'); - cy.get('[data-test=LayoutTopBar__Logo]').within(() => { - cy.get('path') - .then($el => $el.css('fill')) - .should('be.colored', '#ff6157'); - }); - }); - - it('Octant testnet indicator is visible, has correct style and text', () => { - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ffefee'); - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]') - .invoke('text') - .should('eq', 'Local'); - }); - - it('Clicking on testnet indicator scrolls view to the top on logo click (Home view)', () => { - cy.get('[data-test=HomeView]').should('be.visible'); - cy.scrollTo(0, 500); - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').click(); - // waiting for scrolling to finish - cy.wait(2000); - cy.window().then(cyWindow => { - expect(cyWindow.scrollY).to.be.eq(0); - }); - }); - - it('Clicking on testnet indicator redirects to Home view (outside Home view)', () => { - if (device === 'large-desktop' || device === 'desktop') { - cy.get('[data-test=LayoutTopBar__link--metrics]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--metrics]`).click(); - } - cy.get('[data-test=MetricsView]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').click(); - cy.get('[data-test=HomeView]').should('be.visible'); - }); - - if (device === 'large-desktop' || device === 'desktop') { - it('Settings button is visible and has red background', () => { - cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__settingsButton]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fffafa'); - }); - - it('Allocation button is visible and has red background', () => { - cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__allocationButton]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fffafa'); - }); - } - }); - }); -}); diff --git a/client/cypress/e2e/_05layoutFooter.cy.ts b/client/cypress/e2e/_05layoutFooter.cy.ts deleted file mode 100644 index 3c39779555..0000000000 --- a/client/cypress/e2e/_05layoutFooter.cy.ts +++ /dev/null @@ -1,173 +0,0 @@ -// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => { - describe(`[AW IS CLOSED] LayoutFooter: ${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('Footer is visible', () => { - cy.get('[data-test=LayoutFooter]').should('be.visible'); - }); - - it('Octant logo is visible', () => { - cy.get('[data-test=LayoutFooter__Logo]').should('be.visible'); - }); - - it('Project info text is visible and has correct text', () => { - cy.get('[data-test=LayoutFooter__projectInfoText]').should('be.visible'); - cy.get('[data-test=LayoutFooter__projectInfoText]') - .invoke('text') - .should('eq', 'Octant is a Golem Foundation project, launched in 2023.'); - }); - - it('Project info text has link to the Golem Foundation website', () => { - cy.get('[data-test=LayoutFooter__projectInfoText__link]').should('be.visible'); - cy.get('[data-test=LayoutFooter__projectInfoText__link]') - .invoke('text') - .should('eq', 'Golem Foundation'); - cy.get('[data-test=LayoutFooter__projectInfoText__link]') - .invoke('attr', 'href') - .should('eq', 'https://golem.foundation/'); - cy.get('[data-test=LayoutFooter__projectInfoText__link]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Website link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--website]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--website]').invoke('text').should('eq', '→ Website'); - cy.get('[data-test=LayoutFooter__link--website]') - .invoke('attr', 'href') - .should('eq', 'https://octant.build/'); - cy.get('[data-test=LayoutFooter__link--website]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Docs link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--docs]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--docs]').invoke('text').should('eq', '→ Docs'); - cy.get('[data-test=LayoutFooter__link--docs]') - .invoke('attr', 'href') - .should('eq', 'https://docs.octant.app/'); - cy.get('[data-test=LayoutFooter__link--docs]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Discord link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--discord]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--discord]').invoke('text').should('eq', '→ Discord'); - cy.get('[data-test=LayoutFooter__link--discord]') - .invoke('attr', 'href') - .should('eq', 'https://discord.gg/octant'); - cy.get('[data-test=LayoutFooter__link--discord]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Farcaster link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--farcaster]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--farcaster]') - .invoke('text') - .should('eq', '→ Farcaster'); - cy.get('[data-test=LayoutFooter__link--farcaster]') - .invoke('attr', 'href') - .should('eq', 'https://warpcast.com/octant'); - cy.get('[data-test=LayoutFooter__link--farcaster]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Privacy policy link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--privacyPolicy]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--privacyPolicy]') - .invoke('text') - .should('eq', '→ Privacy policy'); - cy.get('[data-test=LayoutFooter__link--privacyPolicy]') - .invoke('attr', 'href') - .should('eq', 'https://docs.octant.app/privacy-policy.html'); - cy.get('[data-test=LayoutFooter__link--privacyPolicy]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Terms of use link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--termsOfUse]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--termsOfUse]') - .invoke('text') - .should('eq', '→ Terms of use'); - cy.get('[data-test=LayoutFooter__link--termsOfUse]') - .invoke('attr', 'href') - .should('eq', 'https://docs.octant.app/terms-of-use.html'); - cy.get('[data-test=LayoutFooter__link--termsOfUse]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Newsletter text is visible and has correct value', () => { - cy.get('[data-test=LayoutFooter__newsletterText]').should('be.visible'); - cy.get('[data-test=LayoutFooter__newsletterText]') - .invoke('text') - .should('eq', 'Get PGF news and updates from Octant. No spam, ever'); - }); - - if (device === 'desktop' || device === 'large-desktop') { - it('Blog of use link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--blog]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--blog]').invoke('text').should('eq', '→ Blog'); - cy.get('[data-test=LayoutFooter__link--blog]') - .invoke('attr', 'href') - .should('eq', 'https://blog.octant.build/'); - cy.get('[data-test=LayoutFooter__link--blog]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - - it('Terms of use link is visible, has correct text and attributes', () => { - cy.get('[data-test=LayoutFooter__link--brandAssets]').should('be.visible'); - cy.get('[data-test=LayoutFooter__link--brandAssets]') - .invoke('text') - .should('eq', '→ Brand assets'); - cy.get('[data-test=LayoutFooter__link--brandAssets]') - .invoke('attr', 'href') - .should( - 'eq', - 'https://www.figma.com/community/file/1295533951881708349/octant-brand-assets', - ); - cy.get('[data-test=LayoutFooter__link--brandAssets]') - .invoke('attr', 'target') - .should('eq', '_blank'); - }); - } else { - it('Blog of use link doesn`t exist', () => { - cy.get('[data-test=LayoutFooter__link--blog]').should('not.exist'); - }); - - it('Terms of use link doesn`t exist', () => { - cy.get('[data-test=LayoutFooter__link--brandAssets]').should('not.exist'); - }); - } - }); -}); diff --git a/client/cypress/e2e/_06layoutNavbar.cy.ts b/client/cypress/e2e/_06layoutNavbar.cy.ts deleted file mode 100644 index fef67a5585..0000000000 --- a/client/cypress/e2e/_06layoutNavbar.cy.ts +++ /dev/null @@ -1,196 +0,0 @@ -// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { - describe(`[AW IS CLOSED] LayoutNavbar: ${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); - }); - - if (device === 'large-desktop' || device === 'desktop') { - it('LayoutNavbar doesn`t exist', () => { - cy.get('[data-test=LayoutNavbar]').should('not.exist'); - }); - } else { - it('LayoutNavbar is visible', () => { - cy.get('[data-test=LayoutNavbar]').should('be.visible'); - }); - - it('LayoutNavbar has correct size and style', () => { - cy.get('[data-test=LayoutNavbar]') - .invoke('css', 'height') - .should('eq', isMobile ? '72px' : '104px'); - cy.get('[data-test=LayoutNavbar]') - .invoke('css', 'width') - .should('eq', isMobile ? '342px' : '432px'); - cy.get('[data-test=LayoutNavbar]') - .invoke('css', 'borderRadius') - .should('eq', isMobile ? '32px' : '40px'); - cy.get('[data-test=LayoutNavbar]') - .invoke('css', 'boxShadow') - .should('eq', 'rgba(0, 0, 0, 0.05) 0px 0px 25px 0px'); - }); - - it('Every button is visible in correct order, has right style and props', () => { - const navbarButtons = [ - { - href: '/home', - key: 'home', - text: 'Home', - }, - { - href: '/projects', - key: 'projects', - text: 'Projects', - }, - { - href: '/allocation', - key: 'allocate', - text: 'Allocate', - }, - { - href: '/metrics', - key: 'metrics', - text: 'Metrics', - }, - { - href: '/settings', - key: 'settings', - text: 'Settings', - }, - ]; - - cy.get(`[data-test=LayoutNavbar__buttons]`).children().should('have.length', 5); - cy.get(`[data-test=LayoutNavbar__buttons]`) - .children() - .each((el1, idx1) => { - cy.get(`[data-test=LayoutNavbar__buttons]`).children().eq(idx1).should('be.visible'); - cy.get(`[data-test=LayoutNavbar__buttons]`) - .children() - .eq(idx1) - .invoke('text') - .should('eq', navbarButtons[idx1].text); - cy.get(`[data-test=LayoutNavbar__buttons]`) - .children() - .eq(idx1) - .invoke('attr', 'href') - .should('eq', navbarButtons[idx1].href); - cy.get(`[data-test=LayoutNavbar__buttons]`) - .children() - .eq(idx1) - .invoke('css', 'height') - .should('eq', '72px'); - cy.get(`[data-test=LayoutNavbar__buttons]`) - .children() - .eq(idx1) - .invoke('css', 'width') - .should('eq', '64px'); - - if (idx1 === 0) { - cy.get(`[data-test=LayoutNavbar__Button__Svg--${navbarButtons[idx1].key}]`).within( - () => { - cy.get('path') - .eq(1) - .then($el => $el.css('fill')) - .should('be.colored', '#171717'); - }, - ); - } else { - cy.get(`[data-test=LayoutNavbar__Button__Svg--${navbarButtons[idx1].key}]`).within( - () => { - cy.get('path').each((el2, idx2) => { - cy.get('path') - .eq(idx2) - .then($el => $el.css('stroke')) - .should('be.colored', '#cdd1cd'); - }); - }, - ); - } - }); - }); - - it('Home button redirects to HomeView', () => { - cy.get('[data-test=LayoutNavbar__Button--home]').click(); - cy.get('[data-test=HomeView]').should('be.visible'); - cy.get(`[data-test=LayoutNavbar__Button__Svg--home]`).within(() => { - cy.get('path') - .eq(1) - .then($el => $el.css('fill')) - .should('be.colored', '#171717'); - }); - }); - - it('Projects button redirects to ProjectsView', () => { - cy.get('[data-test=LayoutNavbar__Button--projects]').click(); - cy.get(`[data-test=LayoutNavbar__Button__Svg--projects]`).within(() => { - cy.get('path').each((el, idx) => { - cy.get('path') - .eq(idx) - .then($el => $el.css('stroke')) - .should('be.colored', '#171717'); - }); - }); - cy.get('[data-test=ProjectsView]').should('be.visible'); - }); - - it('Allocate button redirects to AllocationView', () => { - cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); - cy.get(`[data-test=LayoutNavbar__Button__Svg--allocate]`).within(() => { - cy.get('path').each((el, idx) => { - cy.get('path') - .eq(idx) - .then($el => $el.css('stroke')) - .should('be.colored', '#171717'); - }); - }); - cy.get('[data-test=AllocationView]').should('be.visible'); - }); - - it('Metrics button redirects to MetricsView', () => { - cy.get('[data-test=LayoutNavbar__Button--metrics]').click(); - cy.get(`[data-test=LayoutNavbar__Button__Svg--metrics]`).within(() => { - cy.get('path').each((el, idx) => { - cy.get('path') - .eq(idx) - .then($el => $el.css('stroke')) - .should('be.colored', '#171717'); - }); - }); - cy.get('[data-test=MetricsView]').should('be.visible'); - }); - - it('Settings button redirects to SettingsView', () => { - cy.get('[data-test=LayoutNavbar__Button--settings]').click(); - cy.get(`[data-test=LayoutNavbar__Button__Svg--settings]`).within(() => { - cy.get('path').each((el, idx) => { - cy.get('path') - .eq(idx) - .then($el => $el.css('stroke')) - .should('be.colored', '#171717'); - }); - }); - cy.get('[data-test=SettingsView]').should('be.visible'); - }); - } - }); -}); diff --git a/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts b/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts deleted file mode 100644 index e30b974ccd..0000000000 --- a/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts +++ /dev/null @@ -1,109 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { - beforeSetup, - checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px, - checkChangeStepsByClickingEdgeOfTheScreenUpTo25px, - checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px, - checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px, - checkChangeStepsWithArrowKeys, - checkCurrentElement, - checkProgressStepperSlimIsCurrentAndClickNext, - connectWalletOnboarding, -} from 'cypress/utils/onboarding'; -import viewports from 'cypress/utils/viewports'; -import { QUERY_KEYS } from 'src/api/queryKeys'; -import { - getStepsDecisionWindowClosed, - getStepsDecisionWindowOpen, -} from 'src/hooks/helpers/useOnboardingSteps/steps'; - -chai.use(chaiColors); - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isMobile }, index, arr) => { - describe( - `[AW IS CLOSED] Onboarding (TOS not accepted): ${device}`, - { viewportHeight, viewportWidth }, - () => { - before(() => { - beforeSetup(); - }); - - beforeEach(() => { - connectWalletOnboarding(); - }); - - after(() => { - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('onboarding TOS step should be first and active', () => { - checkCurrentElement(0, true); - cy.get('[data-test=ModalOnboardingTOS]').should('be.visible'); - }); - - it('user is not able to click through entire onboarding flow', () => { - cy.window().then(win => { - const isDecisionWindowOpen = win.clientReactQuery.getQueryData( - QUERY_KEYS.isDecisionWindowOpen, - ); - - const onboardingSteps = isDecisionWindowOpen - ? getStepsDecisionWindowOpen('2', '16 Jan') - : getStepsDecisionWindowClosed('2', '16 Jan'); - - for (let i = 1; i < onboardingSteps.length; i++) { - checkProgressStepperSlimIsCurrentAndClickNext(i, i === 1); - } - }); - }); - - it('user is not able to close the modal by clicking button in the top-right', () => { - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.get('[data-test=ModalOnboarding__Button]').click({ force: true }); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - }); - - it('renders every time page is refreshed', () => { - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - }); - - it('user cannot change steps with arrow keys (left, right)', () => { - checkChangeStepsWithArrowKeys(false); - }); - - it('user cannot change steps by clicking the edge of the screen (up to 25px from each edge)', () => { - checkChangeStepsByClickingEdgeOfTheScreenUpTo25px(false, isMobile); - }); - - it('user cannot change steps by clicking the edge of the screen (more than 25px from each edge)', () => { - checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px(false, isMobile); - }); - - it('user cannot change steps by swiping on screen (difference more than or equal 5px)', () => { - checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px(false); - }); - - it('user cannot change steps by swiping on screen (difference less than 5px)', () => { - checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(false); - }); - - if (index === arr.length - 1) { - it('TOS acceptance changes onboarding step to next step and allows the user to close the modal by clicking button in the top-right', () => { - checkCurrentElement(0, true); - cy.get('[data-test=TOS_InputCheckbox]').check(); - cy.switchToMetamaskNotification(); - cy.confirmMetamaskSignatureRequest(); - checkCurrentElement(1, true); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - }); - } - }, - ); - }, -); diff --git a/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts b/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts deleted file mode 100644 index c4c861e67e..0000000000 --- a/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts +++ /dev/null @@ -1,198 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { - beforeSetup, - checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px, - checkChangeStepsByClickingEdgeOfTheScreenUpTo25px, - checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px, - checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px, - checkChangeStepsWithArrowKeys, - checkProgressStepperSlimIsCurrentAndClickNext, - connectWalletOnboarding, -} from 'cypress/utils/onboarding'; -import viewports from 'cypress/utils/viewports'; -import { QUERY_KEYS } from 'src/api/queryKeys'; -import { HAS_ONBOARDING_BEEN_CLOSED, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys'; -import { - getStepsDecisionWindowClosed, - getStepsDecisionWindowOpen, -} from 'src/hooks/helpers/useOnboardingSteps/steps'; - -chai.use(chaiColors); - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isMobile, isDesktop, isLargeDesktop }) => { - describe( - `[AW IS CLOSED] onboarding (TOS accepted): ${device}`, - { viewportHeight, viewportWidth }, - () => { - before(() => { - beforeSetup(); - }); - - beforeEach(() => { - cy.clearLocalStorage(); - connectWalletOnboarding(); - }); - - after(() => { - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('user is able to click through entire onboarding flow', () => { - cy.window().then(win => { - const isDecisionWindowOpen = win.clientReactQuery.getQueryData( - QUERY_KEYS.isDecisionWindowOpen, - ); - - const onboardingSteps = isDecisionWindowOpen - ? getStepsDecisionWindowOpen('2', '16 Jan') - : getStepsDecisionWindowClosed('2', '16 Jan'); - - for (let i = 1; i < onboardingSteps.length - 1; i++) { - checkProgressStepperSlimIsCurrentAndClickNext(i); - } - - cy.get('[data-test=ModalOnboarding__ProgressStepperSlim__element]') - .eq(onboardingSteps.length - 1) - .click(); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - cy.get('[data-test=HomeView]').should('be.visible'); - }); - }); - - it('user is able to close the modal by clicking button in the top-right', () => { - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - cy.get('[data-test=HomeView]').should('be.visible'); - }); - - it('renders every time page is refreshed when "Always show Allocate onboarding" option is checked', () => { - cy.wait(2000); - cy.get('[data-test=ModalOnboarding__Button]').click(); - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - } - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').check().should('be.checked'); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.reload(); - cy.wait(1000); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - }); - - it('renders only once when "Always show Allocate onboarding" option is not checked', () => { - cy.wait(2000); - cy.get('[data-test=ModalOnboarding__Button]').click(); - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - } - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - }); - - it('user can change steps with arrow keys (left, right)', () => { - checkChangeStepsWithArrowKeys(true); - }); - - it('user can change steps by clicking the edge of the screen (up to 25px from each edge)', () => { - checkChangeStepsByClickingEdgeOfTheScreenUpTo25px(true, isMobile); - }); - - // TODO will be unskipped in https://github.com/golemfoundation/octant/pull/624. - // eslint-disable-next-line - it('user cannot change steps by clicking the edge of the screen (more than 25px from each edge)', () => { - checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px(true, isMobile); - }); - - it('user can change steps by swiping on screen (difference more than or equal 5px)', () => { - checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px(true); - }); - - it('user cannot change steps by swiping on screen (difference less than 5px)', () => { - checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(true); - }); - - it('user cannot change steps by swiping on screen (difference less than 5px)', () => { - checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(true); - }); - - it('user is able to close the onboarding, and after page reload, onboarding does not show up again', () => { - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - }); - - it('Onboarding stepper is visible after closing onboarding modal without going to the last step', () => { - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=OnboardingStepper]').should('be.visible'); - }); - - it('Onboarding stepper opens onboarding modal', () => { - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - cy.get('[data-test=OnboardingStepper]').click(); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - }); - - it(`Onboarding stepper is not visible if "${IS_ONBOARDING_DONE}" is set to "true"`, () => { - localStorage.setItem(IS_ONBOARDING_DONE, 'true'); - localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - cy.get('[data-test=OnboardingStepper]').should('not.exist'); - }); - - if (isDesktop) { - it(`Onboarding stepper has tooltip`, () => { - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=OnboardingStepper]').trigger('mouseover'); - cy.get('[data-test=OnboardingStepper__Tooltip__content]').should('be.visible'); - cy.get('[data-test=OnboardingStepper__Tooltip__content]') - .invoke('text') - .should('eq', 'Reopen onboarding'); - }); - } - - it('Onboarding stepper has right amount of steps and highlights correct amount of passed steps', () => { - const onboardingSteps = getStepsDecisionWindowClosed('2', '16 Jan'); - - cy.get('[data-test=ModalOnboarding__Button]').click(); - - cy.get(`[data-test*=OnboardingStepper__circle]`).should( - 'have.length', - onboardingSteps.length, - ); - - for (let i = 0; i < onboardingSteps.length - 1; i++) { - cy.get(`[data-test=OnboardingStepper__circle--${i}]`) - .then($el => $el.css('stroke')) - .should('be.colored', i > 0 ? '#ffffff' : '#2d9b87'); - } - cy.get('[data-test=OnboardingStepper]').click(); - checkProgressStepperSlimIsCurrentAndClickNext(1); - cy.get('[data-test=ModalOnboarding__Button]').click(); - for (let i = 0; i < onboardingSteps.length - 1; i++) { - cy.get(`[data-test=OnboardingStepper__circle--${i}]`) - .then($el => $el.css('stroke')) - .should('be.colored', i > 1 ? '#ffffff' : '#2d9b87'); - } - cy.get('[data-test=OnboardingStepper]').click(); - checkProgressStepperSlimIsCurrentAndClickNext(2); - cy.get('[data-test=ModalOnboarding__Button]').click(); - cy.get('[data-test=OnboardingStepper]').should('not.exist'); - }); - }, - ); - }, -); diff --git a/client/cypress/e2e/_09connectWallet.cy.ts b/client/cypress/e2e/_09connectWallet.cy.ts deleted file mode 100644 index 153a0585fb..0000000000 --- a/client/cypress/e2e/_09connectWallet.cy.ts +++ /dev/null @@ -1,76 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { connectWallet, visitWithLoader } from 'cypress/utils/e2e'; -import { beforeSetup } from 'cypress/utils/onboarding'; -import viewports from 'cypress/utils/viewports'; -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 }) => { - describe(`[AW IS CLOSED] Connect wallet: ${device}`, { viewportHeight, viewportWidth }, () => { - before(() => { - beforeSetup(); - cy.clearLocalStorage(); - }); - - beforeEach(() => { - 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); - }); - - after(() => { - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('Connect wallet button opens Connect wallet Modal', () => { - cy.get('[data-test=LayoutTopBar__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalLayoutConnectWallet]').should('be.visible'); - }); - - it('Close button in top-right corner is visible and closes Connect wallet Modal when clicked', () => { - cy.get('[data-test=LayoutTopBar__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalLayoutConnectWallet__Button]').should('be.visible'); - cy.get('[data-test=ModalLayoutConnectWallet__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); - }); - - it('Connect wallet Modal has overflow which closes Connect wallet Modal when clicked', () => { - cy.get('[data-test=LayoutTopBar__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalLayoutConnectWallet__overflow]').should('exist'); - cy.get('[data-test=ModalLayoutConnectWallet__overflow]').click({ force: true }); - cy.wait(500); - cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); - }); - - it('Connect wallet Modal shows "WalletConnect" and "Browser wallet" options when wallet with "injected" id is detected.', () => { - cy.get('[data-test=LayoutTopBar__Button]').click(); - cy.wait(500); - cy.get('[data-test=ConnectWallet__BoxRounded--browserWallet]').should('be.visible'); - cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').should('be.visible'); - }); - - it('Clicking on "WalletConnect" option, opens WalletConnect modal', () => { - cy.get('[data-test=LayoutTopBar__Button]').click(); - cy.wait(500); - cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').click(); - }); - - it('Clicking on "Browser wallet" option connects with MetaMask wallet', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.get('[data-test=LayoutTopBar__Button]').should('contain.text', '0x'); - }); - }); -}); diff --git a/client/cypress/e2e/_10home.cy.ts b/client/cypress/e2e/_10home.cy.ts deleted file mode 100644 index 735b360073..0000000000 --- a/client/cypress/e2e/_10home.cy.ts +++ /dev/null @@ -1,124 +0,0 @@ -// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { - describe(`[AW IS CLOSED] Home: ${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('Home view title is visible (each viewport)', () => { - cy.get('[data-test=HomeView__title]').should('be.visible'); - }); - - it('Home rewards section is visible (each viewport)', () => { - cy.get('[data-test=HomeRewards]').should('be.visible'); - }); - - it('"Rewards rate" label has tooltip with correct text', () => { - cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').should('be.visible'); - if (isMobile || isTablet) { - cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').click(); - } else { - cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').trigger('mouseover'); - } - - cy.get('[data-test=HomeRewards__Tooltip--rewardsRate__content]').should('exist'); - cy.get('[data-test=HomeRewards__Tooltip--rewardsRate__content]') - .invoke('text') - .should( - 'eq', - 'Rewards rate is the percentage of your locked GLM you earn as rewards per epoch', - ); - }); - - it('HomeGrid tiles are visible in correct order ', () => { - cy.get('[data-test=HomeGrid]') - .children() - .should('have.length', isMobile ? 8 : 10); - cy.get('[data-test=HomeGrid]').children().eq(0).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(0) - .invoke('data', 'test') - .should('eq', 'HomeGridCurrentGlmLock'); - cy.get('[data-test=HomeGrid]').children().eq(1).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(1) - .invoke('data', 'test') - .should('eq', 'HomeGridDonations'); - cy.get('[data-test=HomeGrid]').children().eq(2).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(2) - .invoke('data', 'test') - .should('eq', 'HomeGridPersonalAllocation'); - cy.get('[data-test=HomeGrid]').children().eq(3).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(3) - .invoke('data', 'test') - .should('eq', 'HomeGridUQScore'); - cy.get('[data-test=HomeGrid]').children().eq(4).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(4) - .invoke('data', 'test') - .should('eq', isMobile ? 'HomeGridVideoBar' : 'HomeGrid__divider--1'); - cy.get('[data-test=HomeGrid]').children().eq(5).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(5) - .invoke('data', 'test') - .should('eq', isMobile ? 'HomeGridTransactions' : 'HomeGridVideoBar'); - cy.get('[data-test=HomeGrid]').children().eq(6).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(6) - .invoke('data', 'test') - .should('eq', isMobile ? 'HomeGridRewardsEstimator' : 'HomeGrid__divider--2'); - cy.get('[data-test=HomeGrid]').children().eq(7).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(7) - .invoke('data', 'test') - .should('eq', isMobile ? 'HomeGridEpochResults' : 'HomeGridTransactions'); - if (!isMobile) { - cy.get('[data-test=HomeGrid]').children().eq(8).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(8) - .invoke('data', 'test') - .should('eq', 'HomeGridRewardsEstimator'); - cy.get('[data-test=HomeGrid]').children().eq(9).should('be.visible'); - cy.get('[data-test=HomeGrid]') - .children() - .eq(9) - .invoke('data', 'test') - .should('eq', 'HomeGridEpochResults'); - } - }); - }); - }, -); diff --git a/client/cypress/e2e/_11settings.cy.ts b/client/cypress/e2e/_11settings.cy.ts deleted file mode 100644 index 8a826997cf..0000000000 --- a/client/cypress/e2e/_11settings.cy.ts +++ /dev/null @@ -1,303 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { - checkLocationWithLoader, - connectWallet, - mockCoinPricesServer, - visitWithLoader, -} from 'cypress/utils/e2e'; -import { beforeSetup } from 'cypress/utils/onboarding'; -import viewports from 'cypress/utils/viewports'; -import { DISPLAY_CURRENCIES, FIAT_CURRENCIES_SYMBOLS } from 'src/constants/currencies'; -import { - DISPLAY_CURRENCY, - HAS_ONBOARDING_BEEN_CLOSED, - IS_CRYPTO_MAIN_VALUE_DISPLAY, - IS_ONBOARDING_ALWAYS_VISIBLE, - IS_ONBOARDING_DONE, - SHOW_HELP_VIDEOS, -} 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] Settings: ${device}`, { viewportHeight, viewportWidth }, () => { - before(() => { - cy.clearLocalStorage(); - beforeSetup(); - }); - - 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.settings.absolute, - isLargeDesktop || isDesktop ? ROOT_ROUTES.home.absolute : ROOT_ROUTES.settings.absolute, - ); - }); - - if (isLargeDesktop || isDesktop) { - it('Settings render as a drawer', () => { - cy.get('[data-test=SettingsDrawer]').should('be.visible'); - cy.get('[data-test=SettingsView]').should('not.exist'); - }); - - it('if user resize viewport from large-desktop/desktop to tablet/mobile settings drawer will hide and current view will change to Settings view.', () => { - cy.wait(1000); - // mobile - cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight); - cy.get('[data-test=SettingsDrawer]').should('not.exist'); - cy.get('[data-test=SettingsView]').should('be.visible'); - cy.location('pathname').should('eq', ROOT_ROUTES.settings.absolute); - // tablet - cy.viewport(viewports.tablet.viewportWidth, viewports.tablet.viewportHeight); - cy.get('[data-test=SettingsDrawer]').should('not.exist'); - cy.get('[data-test=SettingsView]').should('be.visible'); - cy.location('pathname').should('eq', ROOT_ROUTES.settings.absolute); - }); - - it('If user resize viewport from large-desktop/desktop to tablet/mobile when settings drawer was open and then change view and resize again to large/desktop settings 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(); - 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=SettingsDrawer]').should('not.exist'); - - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - cy.get('[data-test=SettingsDrawer]').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=SettingsDrawer]').should('not.exist'); - }); - } else { - it('Settings render as a independent view', () => { - cy.get('[data-test=SettingsDrawer]').should('not.exist'); - cy.get('[data-test=SettingsView]').should('be.visible'); - }); - - it('if user resize viewport from tablet/mobile to large-desktop/desktop settings view will change to the last opened or Home view and Settings drawer will be visible.', () => { - cy.wait(1000); - // desktop - cy.viewport(viewports.desktop.viewportWidth, viewports.desktop.viewportHeight); - cy.get('[data-test=SettingsDrawer]').should('be.visible'); - cy.get('[data-test=SettingsView]').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=SettingsDrawer]').should('be.visible'); - cy.get('[data-test=SettingsView]').should('not.exist'); - cy.location('pathname').should('eq', ROOT_ROUTES.home.absolute); - }); - } - - it('Settings title is visible and has correct text', () => { - const dataTestRoot = isLargeDesktop || isDesktop ? 'Settings' : 'SettingsView'; - cy.get(`[data-test=${dataTestRoot}__title]`).should('be.visible'); - cy.get(`[data-test=${dataTestRoot}__title]`).invoke('text').should('eq', 'Settings'); - }); - - it('Octant info tile is visible', () => { - cy.get('[data-test=SettingsMainInfoBox]').should('be.visible'); - }); - - it('"Use ETH as main value display" tile is visible', () => { - cy.get('[data-test=SettingsCryptoMainValueBox]').should('be.visible'); - }); - - it('"Choose a display currency" tile is visible', () => { - cy.get('[data-test=SettingsCurrencyBox]').should('be.visible'); - }); - - it('"Show help videos" tile is visible', () => { - cy.get('[data-test=SettingsShowHelpVideosBox]').should('be.visible'); - }); - - it('"Always show onboarding" tile is visible', () => { - cy.get('[data-test=SettingsShowOnboardingBox]').should('be.visible'); - }); - - it(`"Use ETH as main value display" option is checked by default`, () => { - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); - }); - }); - - it('Default currency is "usd"', () => { - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(DISPLAY_CURRENCY)).eq('"usd"'); - }); - cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency__SingleValue]') - .invoke('text') - .should('eq', 'USD'); - }); - - it(`"Show help videos" option is checked by default`, () => { - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); - }); - }); - - it(`"Always show onboarding" option is not checked by default`, () => { - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('false'); - }); - }); - - it('"Use ETH as main value display" option toggle works', () => { - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check({ force: true }); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); - }); - - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('not.be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('false'); - }); - - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); - }); - }); - - it('"Choose a display currency" option works', () => { - for (let i = 0; i < DISPLAY_CURRENCIES.length - 1; i++) { - const displayCurrency = DISPLAY_CURRENCIES[i]; - const displayCurrencyToUppercase = displayCurrency.toUpperCase(); - const nextDisplayCurrency = - i < DISPLAY_CURRENCIES.length - 1 ? DISPLAY_CURRENCIES[i + 1] : undefined; - - cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency__SingleValue]').contains( - displayCurrencyToUppercase, - ); - if (!isLargeDesktop && !isDesktop) { - cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); - checkLocationWithLoader(ROOT_ROUTES.home.absolute); - } - - if (FIAT_CURRENCIES_SYMBOLS[displayCurrency]) { - cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]').contains( - FIAT_CURRENCIES_SYMBOLS[displayCurrency], - ); - } else { - cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]').contains( - displayCurrencyToUppercase, - ); - } - - if (!isLargeDesktop && !isDesktop) { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - checkLocationWithLoader(ROOT_ROUTES.settings.absolute); - } - cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency]').click(); - cy.get( - `[data-test=SettingsCurrencyBox__InputSelect--currency__Option--${nextDisplayCurrency}]`, - ).click(); - } - }); - - it('"Show help videos" option toggle works', () => { - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').check({ force: true }); - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); - }); - - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('not.be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('false'); - }); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=HomeGridVideoBar]').should('not.exist'); - } else { - cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); - cy.get('[data-test=HomeGridVideoBar]').should('not.exist'); - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - } - - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); - }); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=HomeGridVideoBar]').should('be.visible'); - } else { - cy.get(`[data-test=LayoutNavbar__Button--home]`).click({ force: true }); - cy.get('[data-test=HomeGridVideoBar]').should('be.visible'); - } - }); - - it('"Always show onboarding" option toggle works', () => { - connectWallet({ isPatronModeEnabled: false }); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click({ force: true }); - } - - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').check({ force: true }); - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('true'); - }); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('be.visible'); - cy.get('[data-test=ModalOnboarding__Button]').click(); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - } - - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('false'); - }); - cy.reload(); - cy.get('[data-test=ModalOnboarding]').should('not.exist'); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - } - - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').click({ force: true }); - cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('be.checked'); - cy.getAllLocalStorage().then(() => { - expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('true'); - }); - - cy.disconnectMetamaskWalletFromAllDapps(); - }); - }); - }, -); diff --git a/client/cypress/e2e/_12homeGLMLock.cy.ts b/client/cypress/e2e/_12homeGLMLock.cy.ts deleted file mode 100644 index 2a3de67326..0000000000 --- a/client/cypress/e2e/_12homeGLMLock.cy.ts +++ /dev/null @@ -1,308 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { connectWallet, GLM_USD, 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 }, idx) => { - describe(`[AW IS CLOSED] HomeGlmLock: ${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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.home.absolute); - }); - - it('Title is visible and has correct text', { scrollBehavior: false }, () => { - cy.get('[data-test=HomeGridCurrentGlmLock__title]').should('be.visible'); - cy.get('[data-test=HomeGridCurrentGlmLock__title]') - .invoke('text') - .should('eq', 'Current GLM lock'); - }); - - it('Main value is 0 (GLM/$) when wallet isn`t connected ', { scrollBehavior: false }, () => { - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') - .invoke('text') - .should('eq', '0 GLM'); - cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]') - .invoke('text') - .should('eq', '$0.00'); - }); - - it( - 'Effective value is 0 (GLM/$) when wallet isn`t connected ', - { scrollBehavior: false }, - () => { - cy.get('[data-test=HomeGridCurrentGlmLock__Section--effective__DoubleValue__primary]') - .invoke('text') - .should('eq', '0 GLM'); - cy.get('[data-test=HomeGridCurrentGlmLock__Section--effective__DoubleValue__secondary]') - .invoke('text') - .should('eq', '$0.00'); - }, - ); - - it('Effective label has a tooltip with correct text', { scrollBehavior: false }, () => { - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=TooltipEffectiveLockedBalance]').trigger('mouseover'); - } else { - cy.get('[data-test=TooltipEffectiveLockedBalance]').click(); - } - - cy.get('[data-test=TooltipEffectiveLockedBalance__content]').should('be.visible'); - cy.get('[data-test=TooltipEffectiveLockedBalance__content]') - .invoke('text') - .should( - 'eq', - 'Effective lock (EL) is the part of your locked GLM that is currently earning rewards. Lock more & EL increases proportionally to epoch time remaining. Unlock GLM & that amount is removed from EL for the epoch. Note that if EL falls below 100, no rewards will be calculated.', - ); - }); - - it( - 'Button has "Lock GLM" text and is disabled when wallet isn`t connected', - { scrollBehavior: false }, - () => { - cy.get('[data-test=HomeGridCurrentGlmLock__Button]').should('be.disabled'); - cy.get('[data-test=HomeGridCurrentGlmLock__Button]') - .invoke('text') - .should('eq', 'Lock GLM'); - }, - ); - - it('User is able to close Lock/Unlock GLM Modal', { scrollBehavior: false }, () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); - cy.get('[data-test=ModalLockGlm__overflow]').should('exist'); - cy.get('[data-test=ModalLockGlm]').should('be.visible'); - cy.get('[data-test=ModalLockGlm__overflow]').click({ force: true }); - cy.get('[data-test=ModalLockGlm]').should('not.exist'); - cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); - cy.get('[data-test=ModalLockGlm]').should('be.visible'); - cy.get('[data-test=ModalLockGlm__Button]').click(); - cy.get('[data-test=ModalLockGlm]').should('not.exist'); - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('Wallet connected: Lock 1000 GLM', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeView]').scrollIntoView(); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]').should( - 'not.exist', - ); - cy.wait(1000); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') - .invoke('text') - .then(text => { - const amountToLock = 1000; - const lockedGlms = parseInt(text, 10); - - cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); - cy.get('[data-test=InputsCryptoFiat__InputText--crypto]') - .clear() - .type(`${amountToLock}`); - cy.get('[data-test=LockGlmTabs__Button]').should('have.text', 'Lock'); - cy.wait(5000); - cy.get('[data-test=LockGlmTabs__Button]').click(); - cy.get('[data-test=LockGlmTabs__Button]').should( - 'have.text', - 'Waiting for confirmation', - ); - cy.confirmMetamaskPermissionToSpend({ - spendLimit: '99999999999999999999', - }); - // Workaround for two notifications during first transaction. - // 1. Allow the third party to spend TKN from your current balance. - // 2. Confirm permission to spend - if (Cypress.env('CI') === 'true' && idx === 0) { - cy.wait(5000); - cy.confirmMetamaskPermissionToSpend({ - spendLimit: '99999999999999999999', - }); - } - cy.get('[data-test=LockGlmTabs__Button]', { timeout: 180000 }).should( - 'have.text', - 'Close', - ); - cy.get('[data-test=LockGlmNotification--success]').should('be.visible'); - cy.get('[data-test=LockGlmTabs__Button]').click(); - cy.wait(5000); - cy.get('[data-test=HomeView]').scrollIntoView(); - cy.get( - '[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]', - ).should('not.exist'); - cy.wait(1000); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]', { - timeout: 60000, - }) - .invoke('text') - .then(nextText => { - const lockedGlmsAfterLock = parseInt(nextText, 10); - expect(lockedGlms + amountToLock).to.be.eq(lockedGlmsAfterLock); - }); - cy.get('[data-test=TransactionsListItem__title]') - .first() - .should('have.text', 'Locked GLM'); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') - .first() - .should('have.text', `${amountToLock} GLM`); - cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') - .first() - .should('have.text', `$${(amountToLock * GLM_USD).toFixed(2)}`); - - cy.get('[data-test=TransactionsListItem]').first().click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') - .invoke('text') - .should('eq', `${amountToLock} GLM`); - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') - .invoke('text') - .should('eq', `$${(amountToLock * GLM_USD).toFixed(2)}`); - - cy.get('[data-test=ModalTransactionDetails__Button]').click(); - cy.get('[data-test=ModalTransactionDetails]').should('not.exist'); - }); - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('Wallet connected: Unlock 1 GLM', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeView]').scrollIntoView(); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]').should( - 'not.exist', - ); - cy.wait(1000); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') - .invoke('text') - .then(text => { - const amountToUnlock = 1; - const lockedGlms = parseInt(text, 10); - - cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); - cy.get('[data-test=LockGlmTabs__tab--1]').click(); - cy.get('[data-test=InputsCryptoFiat__InputText--crypto]') - .clear() - .type(`${amountToUnlock}`); - cy.get('[data-test=LockGlmTabs__Button]').should('have.text', 'Unlock'); - cy.get('[data-test=LockGlmTabs__Button]').click(); - cy.get('[data-test=LockGlmTabs__Button]').should( - 'have.text', - 'Waiting for confirmation', - ); - cy.confirmMetamaskPermissionToSpend({ - spendLimit: '99999999999999999999', - }); - cy.get('[data-test=LockGlmTabs__Button]', { timeout: 60000 }).should( - 'have.text', - 'Close', - ); - cy.get('[data-test=LockGlmNotification--success]').should('be.visible'); - cy.get('[data-test=LockGlmTabs__Button]').click(); - cy.wait(5000); - cy.get('[data-test=HomeView]').scrollIntoView(); - cy.get( - '[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]', - ).should('not.exist'); - cy.wait(1000); - cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]', { - timeout: 60000, - }) - .invoke('text') - .then(nextText => { - const lockedGlmsAfterUnlock = parseInt(nextText, 10); - expect(lockedGlms - amountToUnlock).to.be.eq(lockedGlmsAfterUnlock); - }); - cy.get('[data-test=TransactionsListItem__title]') - .first() - .should('have.text', 'Unlocked GLM'); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') - .first() - .should('have.text', `${amountToUnlock} GLM`); - cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') - .first() - .should('have.text', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); - - cy.get('[data-test=TransactionsListItem]').first().click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') - .invoke('text') - .should('eq', `${amountToUnlock} GLM`); - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') - .invoke('text') - .should('eq', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); - - cy.get('[data-test=ModalTransactionDetails__Button]').click(); - cy.get('[data-test=ModalTransactionDetails]').should('not.exist'); - - // Change main value to FIAT - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').uncheck(); - cy.get('[data-test=SettingsDrawer__closeButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').uncheck(); - cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); - } - - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') - .first() - .should('have.text', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); - cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') - .first() - .should('have.text', `${amountToUnlock} GLM`); - - cy.get('[data-test=TransactionsListItem]').first().click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') - .invoke('text') - .should('eq', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); - cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') - .invoke('text') - .should('eq', `${amountToUnlock} GLM`); - - cy.get('[data-test=ModalTransactionDetails__Button]').click(); - - // Change main value to ETH - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check(); - cy.get('[data-test=SettingsDrawer__closeButton]').click(); - } else { - cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); - cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check(); - cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); - } - }); - cy.disconnectMetamaskWalletFromAllDapps(); - }); - }); - }, -); diff --git a/client/cypress/e2e/_13allocationAWClosed.cy.ts b/client/cypress/e2e/_13allocationAWClosed.cy.ts deleted file mode 100644 index 306e4f8cb4..0000000000 --- a/client/cypress/e2e/_13allocationAWClosed.cy.ts +++ /dev/null @@ -1,168 +0,0 @@ -// 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.', () => { - cy.wait(1000); - // 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.', () => { - cy.wait(1000); - // 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.', () => { - cy.wait(1000); - // 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.wait(1000); - cy.get('[data-test=AllocationItem]').should('have.length', 3); - cy.wait(1000); - 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 - 120, - }) - .trigger('pointerup', { - pageX: allocationItemLeft - 200, - }); - - cy.wait(1000); - 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__Button--reset]').should('be.visible'); - cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); - }); - - it('User can`t confirm allocation', () => { - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.visible'); - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); - }); - }); - }, -); diff --git a/client/cypress/e2e/_15metrics.cy.ts b/client/cypress/e2e/_15metrics.cy.ts deleted file mode 100644 index 60d2d9bf05..0000000000 --- a/client/cypress/e2e/_15metrics.cy.ts +++ /dev/null @@ -1,191 +0,0 @@ -// 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, isMobile, isTablet }) => { - describe(`[AW IS OPEN] Metrics: ${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.metrics.absolute); - }); - - it('Metrics title is visible and has correct text', () => { - cy.get('[data-test=MetricsView__title]').should('be.visible'); - cy.get('[data-test=MetricsView__title]').invoke('text').should('eq', 'Explore the data'); - }); - - it('"Epoch" secion is visible', () => { - cy.get('[data-test=MetricsEpoch]').should('be.visible'); - }); - - it('"General" secion is visible', () => { - cy.get('[data-test=MetricsGeneral]').should('be.visible'); - }); - - it('"Epoch" section title is visible and has correct text', () => { - cy.get('[data-test=MetricsEpochHeader__title]').should('be.visible'); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); - }); - - it('"General" section title is visible and has correct text', () => { - cy.get('[data-test=MetricsGeneral__header__title]').should('be.visible'); - cy.get('[data-test=MetricsGeneral__header__title]') - .invoke('text') - .should('eq', 'General metrics'); - }); - - it('"Epoch" section title has "OPEN" badge when AW is open', () => { - cy.get('[data-test=MetricsEpochHeader__openBadge]').should('be.visible'); - cy.get('[data-test=MetricsEpochHeader__openBadge]').invoke('text').should('eq', 'Open'); - cy.get('[data-test=MetricsEpochHeader__openBadge]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#2d9b87'); - cy.get('[data-test=MetricsEpochHeader__openBadge]') - .then($el => $el.css('textTransform')) - .should('eq', 'uppercase'); - }); - - it('User is able to change epoch via arrow buttons', { scrollBehavior: false }, () => { - cy.get('[data-test=MetricsEpochHeader__NavigationArrows]').should('be.visible'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E2 Allocation' : 'Epoch 2 Allocation Window'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); - }); - - it('"Epoch" section title has epoch dates range when epoch is past', () => { - cy.get('[data-test=MetricsEpochHeader__openBadge]').should('be.visible'); - cy.get('[data-test=MetricsEpochHeader__epochDuration]').should('not.exist'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__openBadge]').should('not.exist'); - cy.get('[data-test=MetricsEpochHeader__epochDuration]').should('be.visible'); - }); - - it( - 'Next arrow button is disabled when there is no more next epochs', - { scrollBehavior: false }, - () => { - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fafafa'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrowSvg] path') - .then($el => $el.css('fill')) - .should('be.colored', '#ebebeb'); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); - }, - ); - - it( - 'Prev arrow button is disabled when there is no more prev epochs ', - { scrollBehavior: false }, - () => { - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fafafa'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrowSvg] path') - .then($el => $el.css('fill')) - .should('be.colored', '#9ea39e'); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fafafa'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrowSvg] path') - .then($el => $el.css('fill')) - .should('be.colored', '#ebebeb'); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.get('[data-test=MetricsEpochHeader__title]') - .invoke('text') - .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); - }, - ); - - it('All tiles in "Epoch" section are visible in correct order', () => { - const metricsEpochGridTilesDataTest = [ - 'MetricsEpochGridTopProjects', - 'MetricsEpochGridFundsUsage', - 'MetricsEpochGridTotalUsers', - 'MetricsEpochGridPatrons', - 'MetricsEpochGridRewardsUnused', - 'MetricsEpochGridUnallocatedValue', - 'MetricsEpochGridTotalDonations', - 'MetricsEpochGridTotalMatchingFund', - 'MetricsEpochGridCurrentDonors', - 'MetricsEpochGridAverageLeverage', - 'MetricsEpochGridDonationsVsMatching', - 'MetricsEpochGridDonationsVsPersonalAllocations', - ]; - - cy.get('[data-test=MetricsEpoch__MetricsGrid]') - .children() - .should('have.length', metricsEpochGridTilesDataTest.length); - - for (let i = 0; i < metricsEpochGridTilesDataTest.length; i++) { - cy.get('[data-test=MetricsEpoch__MetricsGrid]') - .children() - .eq(i) - .invoke('data', 'test') - .should('eq', metricsEpochGridTilesDataTest[i]); - } - }); - - it('All tiles in "General" section are visible in correct order', () => { - const metricsGeneralGridTilesDataTest = [ - 'MetricsGeneralGridCumulativeGlmLocked', - 'MetricsGeneralGridWalletsWithGlmLocked', - 'MetricsGeneralGridTotalGlmLockedAndTotalSupply', - 'MetricsGeneralGridTotalProjects', - 'MetricsGeneralGridTotalEthStaked', - ]; - - cy.get('[data-test=MetricsGeneral__MetricsGrid]') - .children() - .should('have.length', metricsGeneralGridTilesDataTest.length); - - for (let i = 0; i < metricsGeneralGridTilesDataTest.length; i++) { - cy.get('[data-test=MetricsGeneral__MetricsGrid]') - .children() - .eq(i) - .invoke('data', 'test') - .should('eq', metricsGeneralGridTilesDataTest[i]); - } - }); - }); - }, -); diff --git a/client/cypress/e2e/_16allocationAWOpen.cy.ts b/client/cypress/e2e/_16allocationAWOpen.cy.ts deleted file mode 100644 index cd80fee2ae..0000000000 --- a/client/cypress/e2e/_16allocationAWOpen.cy.ts +++ /dev/null @@ -1,833 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { connectWallet, 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_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop }, idx) => { - describe(`[AW IS OPEN] Allocation: ${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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.home.absolute); - }); - - // TODO: Run for all devices after OCT-2283 (https://linear.app/golemfoundation/issue/OCT-2283/personal-allocation-arent-available-to-withdraw-in-pr-e2e-environment) - if (idx === 0) { - it('User doesn`t have personal rewards, can`t witdraw and can check pending tooltip', () => { - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]').should('be.disabled'); - cy.get('[data-test=HomeGridPersonalAllocation__Button]') - .invoke('text') - .should('eq', 'Withdraw to wallet'); - - cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').should('be.visible'); - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').trigger('mouseover'); - } else { - cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').click(); - } - - cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip__content]').should( - 'exist', - ); - - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]') - .invoke('text') - .should('eq', 'Withdraw to wallet'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); - cy.wait(1000); - cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); - cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); - cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); - cy.get('[data-test=ModalWithdrawEth__Button]').click(); - cy.wait(1000); - cy.get('[data-test=ModalWithdrawEth]').should('not.exist'); - }); - } - - it('User with UQ score below 15 can allocate rewards to projects, ModalAllocationLowUqScore is shown to them', () => { - connectWallet({ isPatronModeEnabled: false, isUQScoreBelow15: true }); - cy.wait(5000); - if (isLargeDesktop || isDesktop) { - 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__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '3'); - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - } else { - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '3'); - cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); - } - - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Confirm'); - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').then($thumb => { - const { left: thumbLeft } = $thumb[0].getBoundingClientRect(); - const pageXStart = thumbLeft; - const pageXEnd = viewportWidth - 20; // px - - cy.get('[data-test=AllocationSliderBox__Slider__thumb]') - .trigger('mousedown', { pageX: pageXStart }) - .trigger('mousemove', { pageX: pageXEnd }) - .trigger('mouseup', { pageX: pageXEnd }); - - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('not.eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=AllocationItem__InputText]').each(el => { - expect(parseFloat(`${el.val()}`)).to.be.gt(0); - }); - - // reset - cy.get('[data-test=AllocationNavigation__Button--reset]').click(); - - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.get('[data-test=AllocationItem__InputText]').each(el => { - expect(parseFloat(`${el.val()}`)).to.be.eq(0); - }); - - cy.get('[data-test=AllocationSliderBox__Slider__thumb]') - .trigger('mousedown', { pageX: pageXStart }) - .trigger('mousemove', { pageX: pageXEnd }) - .trigger('mouseup', { pageX: pageXEnd }); - - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('not.eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=AllocationItem__InputText]').each(el => { - expect(parseFloat(`${el.val()}`)).to.be.gt(0); - }); - - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Confirm'); - cy.get('[data-test=AllocationNavigation__Button--cta]').click(); - cy.get('[data-test=ModalAllocationLowUqScore]').should('be.visible'); - cy.get('[data-test=AllocationLowUqScore__InputCheckbox]').check(); - cy.get('[data-test=AllocationLowUqScore__Button--cta]').click(); - cy.get('[data-test=ModalAllocationLowUqScore]').should('not.exist'); - cy.wait(500); - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Waiting'); - cy.confirmMetamaskDataSignatureRequest(); - cy.wait(1000); - cy.get('[data-test=AllocationSummary]').should('exist'); - cy.get('[data-test=AllocationSummaryProject]').should('have.length', 3); - cy.wait(1000); - cy.get('[data-test=AllocationSummary__totalDonated]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__totalDonated]').should('be.visible'); - cy.get('[data-test=AllocationSummary__totalDonated__value--loading]').should('not.exist'); - cy.get('[data-test=AllocationSummary__totalDonated__value]').then($totalDonated => { - expect(parseFloat(`${$totalDonated.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.get('[data-test=AllocationSummary__matchFunding]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__matchFunding]').should('be.visible'); - cy.get('[data-test=AllocationSummary__matchFunding__value--loading]').should('not.exist'); - cy.get('[data-test=AllocationSummary__matchFunding__value]').then($matchFunding => { - expect(parseFloat(`${$matchFunding.text()}`.replace('<', ''))).to.be.gt(0); - }); - cy.get('[data-test=AllocationSummary__totalImpact]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__totalImpact]').should('be.visible'); - cy.get('[data-test=AllocationSummary__totalImpact__value]').then($totalImpact => { - expect(parseFloat(`${$totalImpact.text()}`.replace('<', ''))).to.be.gt(0); - }); - cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').scrollIntoView(); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Edit'); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=AllocationDrawer__closeButton]').click(); - cy.get('[data-test=LayoutTopBar__link--home]').click(); - } else { - cy.get('[data-test=LayoutNavbar__Button--home]').click(); - } - cy.wait(1000); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]') - .invoke('text') - .should('eq', '3'); - - cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); - cy.get('[data-test=HomeGridDonations__Button--edit]').should('be.visible'); - cy.get('[data-test=DonationsList]').should('be.visible'); - cy.get('[data-test=DonationsList__item]').should('have.length', 3); - cy.get('[data-test=DonationsList__item__value]').each($donationListItemValue => { - expect(parseFloat(`${$donationListItemValue.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.get('[data-test=TransactionsListItem__title]') - .eq(0) - .invoke('text') - .should('eq', 'Allocated rewards'); - - cy.get('[data-test=TransactionsListItem__title]').eq(0).click(); - cy.wait(1000); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') - .invoke('text') - .should('eq', 'Projects (3)'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should( - 'be.visible', - ); - cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); - - cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should( - 'be.visible', - ); - cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); - cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); - cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 3); - }); - }); - - it('User can edit allocation and allocate everything to personal', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]') - .invoke('text') - .should('eq', '3'); - - cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); - cy.get('[data-test=HomeGridDonations__Button--edit]').should('be.visible'); - cy.get('[data-test=DonationsList]').should('be.visible'); - cy.get('[data-test=DonationsList__item]').should('have.length', 3); - - cy.get('[data-test=TransactionsListItem__title]') - .eq(0) - .invoke('text') - .should('eq', 'Allocated rewards'); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '3'); - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - } else { - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '3'); - cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); - } - cy.wait(1000); - - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); - cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); - cy.get('[data-test=AllocationSummary]').should('exist'); - cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); - - cy.get('[data-test=AllocationNavigation__Button--reset]') - .invoke('text') - .should('eq', 'Reset'); - cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--cta]').invoke('text').should('eq', 'Edit'); - cy.get('[data-test=AllocationNavigation__Button--cta]').click(); - - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').scrollIntoView(); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); - cy.get('[data-test=AllocationRewardsBox]').scrollIntoView(); - cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); - cy.get('[data-test=AllocationSummary]').should('not.exist'); - cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); - - cy.get('[data-test=AllocationSliderBox__section--0]').click(); - cy.wait(500); - cy.get('[data-test=ModalAllocationValuesEdit]').should('be.visible'); - cy.get('[data-test=AllocationInputs__InputText--crypto]').clear().type('0'); - cy.get('[data-test=AllocationInputs__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalAllocationValuesEdit]').should('not.exist'); - - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Confirm'); - cy.get('[data-test=AllocationNavigation__Button--cta]').click(); - cy.wait(500); - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Waiting'); - cy.confirmMetamaskDataSignatureRequest(); - cy.wait(1000); - - cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); - cy.get('[data-test=AllocationSummary]').should('not.exist'); - cy.get('[data-test=AllocationSummary__personalRewardBox]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__personalRewardBox]').should('be.visible'); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=AllocationDrawer__closeButton]').click(); - } else { - cy.get('[data-test=LayoutNavbar__Button--home]').click(); - } - cy.wait(1000); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]') - .invoke('text') - .should('eq', '0'); - cy.get('[data-test=DonationsList]').should('not.exist'); - cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('be.visible'); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('not.exist'); - } else { - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('not.exist'); - } - - cy.get('[data-test=TransactionsListItem__title]') - .eq(0) - .invoke('text') - .should('eq', 'Personal allocation'); - - cy.wait(1000); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); - cy.get('[data-test=TransactionsListItem]').eq(0).click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') - .invoke('text') - .should('not.eq', '0 ETH'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should('not.exist'); - cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); - - cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('not.exist'); - cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); - cy.get('[data-tes2st=TransactionDetailsAllocation__projects]').should('not.exist'); - }); - - it('User can edit allocation by clicking on `Edit` button in Donations tile (HomeView) and allocate 50% to Personal and 50% to four projects', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - if (isLargeDesktop || isDesktop) { - 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(); - cy.get('[data-test=ProjectsListItem__ButtonAddToAllocate]').eq(3).click(); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '4'); - cy.get('[data-test=LayoutTopBar__link--home]').click(); - } else { - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '4'); - cy.get('[data-test=LayoutNavbar__Button--home]').click(); - } - - cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]') - .invoke('text') - .should('eq', '0'); - cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__Button--edit]').click(); - - cy.wait(1000); - cy.get('[data-test=AllocationSliderBox]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox__section__value--0]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=AllocationSliderBox__section__value--1]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.wait(5000); - - cy.get('[data-test=AllocationItem]').should('have.length', 4); - cy.get('[data-test=AllocationItem__InputText]').each(el => { - expect(parseFloat(`${el.val()}`)).to.be.eq(0); - }); - - cy.get('[data-test=AllocationSliderBox__section--1]').click(); - cy.wait(500); - cy.get('[data-test=ModalAllocationValuesEdit]').should('be.visible'); - cy.get('[data-test=AllocationInputs__InputText--percentage]').clear().type('50'); - cy.get('[data-test=AllocationInputs__Button]').click(); - cy.wait(500); - cy.get('[data-test=ModalAllocationValuesEdit]').should('not.exist'); - - cy.get('[data-test=AllocationItem__InputText]').each(el => { - expect(parseFloat(`${el.val()}`)).to.be.gt(0); - }); - - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Confirm'); - cy.get('[data-test=AllocationNavigation__Button--cta]').click(); - cy.wait(500); - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Waiting'); - cy.confirmMetamaskDataSignatureRequest(); - cy.wait(1000); - cy.get('[data-test=AllocationSummary]').should('exist'); - cy.get('[data-test=AllocationSummaryProject]').should('have.length', 4); - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=AllocationDrawer__closeButton]').click(); - } else { - cy.get('[data-test=LayoutNavbar__Button--home]').click(); - } - cy.wait(1000); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); - cy.get('[data-test=HomeGridDonations__numberOfAllocations]') - .invoke('text') - .should('eq', '4'); - - cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); - cy.get('[data-test=DonationsList]').should('be.visible'); - cy.get('[data-test=DonationsList__item]').should('have.length', 4); - cy.get('[data-test=DonationsList__item__value]').each($donationListItemValue => { - expect(parseFloat(`${$donationListItemValue.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.wait(2500); - cy.get('[data-test=TransactionsListItem__title]') - .eq(0) - .invoke('text') - .should('eq', 'Allocated rewards'); - - cy.wait(1000); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); - cy.get('[data-test=TransactionsListItem]').eq(0).click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') - .invoke('text') - .should('not.eq', '0 ETH'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') - .invoke('text') - .should('eq', 'Projects (4)'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); - cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); - cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); - cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 4); - }); - - it('User has pending personal rewards', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]') - .invoke('text') - .should('eq', 'Withdraw to wallet'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); - cy.wait(1000); - cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); - cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); - cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); - }); - }); - - 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('move time to closed AW', () => { - setupAndMoveToPlayground(); - - cy.window().then(async win => { - moveTime(win, 'decisionWindowClosed').then(() => { - cy.get('[data-test=PlaygroundView]').should('be.visible'); - const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData( - QUERY_KEYS.isDecisionWindowOpen, - ); - expect(isDecisionWindowOpenAfter).to.be.false; - }); - }); - }); - }); - - describe( - `[AW IS CLOSED] After allocation: ${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(() => { - mockCoinPricesServer(); - localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); - localStorage.setItem(IS_ONBOARDING_DONE, 'true'); - localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.home.absolute); - }); - - it('Donations tile shows donations history and the last transaction is the last user allocation', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=TransactionsListItem__DoubleValue__DoubleValueSkeleton]').should( - 'not.exist', - ); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); - - cy.get('[data-test=HomeGridDonations__title]') - .invoke('text') - .should('eq', 'Donation history'); - cy.get('[data-test=DonationsList__item]').should('have.length.gte', 4); - - cy.get('[data-test=TransactionsListItem__title]') - .eq(0) - .invoke('text') - .should('eq', 'Allocated rewards'); - - cy.wait(1000); - cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); - cy.get('[data-test=TransactionsListItem]').eq(0).click(); - cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') - .invoke('text') - .should('not.eq', '0 ETH'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') - .invoke('text') - .should('eq', 'Projects (4)'); - cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should( - 'be.visible', - ); - cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should( - 'be.visible', - ); - cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('not.exist'); - cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); - cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); - cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); - cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 4); - }); - - it('Allocation summary is visible and allocation action buttons are disabled', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - if (isLargeDesktop || isDesktop) { - cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('not.exist'); - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - } else { - cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('not.exist'); - cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); - } - - cy.wait(1000); - - cy.get('[data-test=AllocationRewardsBox]').scrollIntoView(); - cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); - cy.get('[data-test=AllocationSliderBox]').should('not.exist'); - - cy.get('[data-test=AllocationSummary]').should('exist'); - cy.get('[data-test=AllocationSummaryProject]').should('have.length', 4); - cy.wait(1000); - cy.get('[data-test=AllocationSummary__totalDonated]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__totalDonated]').should('be.visible'); - cy.get('[data-test=AllocationSummary__totalDonated__value--loading]').should('not.exist'); - cy.get('[data-test=AllocationSummary__totalDonated__value]').then($totalDonated => { - expect(parseFloat(`${$totalDonated.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.get('[data-test=AllocationSummary__matchFunding]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__matchFunding]').should('be.visible'); - cy.get('[data-test=AllocationSummary__matchFunding__value--loading]').should('not.exist'); - cy.get('[data-test=AllocationSummary__matchFunding__value]').then($matchFunding => { - expect(parseFloat(`${$matchFunding.text()}`.replace('<', ''))).to.be.gt(0); - }); - cy.get('[data-test=AllocationSummary__totalImpact]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__totalImpact]').should('be.visible'); - cy.get('[data-test=AllocationSummary__totalImpact__value]').then($totalImpact => { - expect(parseFloat(`${$totalImpact.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.get('[data-test=AllocationSummary__personalRewardBox]').scrollIntoView(); - cy.get('[data-test=AllocationSummary__personalRewardBox]').should('be.visible'); - cy.get('[data-test=AllocationSummary__personalReward--loading]').should('not.exist'); - cy.get('[data-test=AllocationSummary__personalReward]').then($personalReward => { - expect(parseFloat(`${$personalReward.text()}`.replace('<', ''))).to.be.gt(0); - }); - - cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--reset]') - .invoke('text') - .should('eq', 'Reset'); - - cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); - cy.get('[data-test=AllocationNavigation__Button--cta]') - .invoke('text') - .should('eq', 'Edit'); - }); - - it('User has pending personal rewards', () => { - connectWallet({ isPatronModeEnabled: false }); - cy.wait(5000); - - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - .invoke('text') - .should('eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - .invoke('text') - .should('not.eq', '0 ETH'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]') - .invoke('text') - .should('eq', 'Withdraw to wallet'); - - cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); - cy.wait(1000); - cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); - cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); - cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); - }); - }, - ); - - describe('move time - AW IS OPEN', () => { - 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('move time to the next open AW', () => { - setupAndMoveToPlayground(); - - cy.window().then(async win => { - moveTime(win, 'nextEpochDecisionWindowOpen').then(() => { - cy.get('[data-test=PlaygroundView]').should('be.visible'); - const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData( - QUERY_KEYS.isDecisionWindowOpen, - ); - expect(isDecisionWindowOpenAfter).to.be.true; - }); - }); - }); - }); - - // TODO: To do after OCT-2283 (https://linear.app/golemfoundation/issue/OCT-2283/personal-allocation-arent-available-to-withdraw-in-pr-e2e-environment) - // describe(`[AW IS OPEN] After allocation: ${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(() => { - // mockCoinPricesServer(); - // localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); - // localStorage.setItem(IS_ONBOARDING_DONE, 'true'); - // localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - // visitWithLoader(ROOT_ROUTES.home.absolute); - // }); - - // it('User has personal rewards, can withdraw rewards to wallet and the last transaction is "Withdrawn funds"', () => { - // connectWallet({ isPatronModeEnabled: false }); - // cy.wait(5000); - - // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); - // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - // .invoke('text') - // .should('not.eq', '0 ETH'); - - // cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - // cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - // .invoke('text') - // .should('eq', '0 ETH'); - - // cy.get('[data-test=HomeGridPersonalAllocation__Button]') - // .invoke('text') - // .should('eq', 'Withdraw to wallet'); - - // cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); - - // cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); - // cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); - // cy.get('[data-test=WithdrawEth__Section--amount__DoubleValueSkeleton]').should('not.exist'); - // cy.get('[data-test=WithdrawEth__Section--estGasPrice__DoubleValueSkeleton]').should( - // 'not.exist', - // ); - // cy.get('[data-test=WithdrawEth__Button]').click(); - // cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); - // cy.get('[data-test=WithdrawEth__Button]') - // .invoke('text') - // .should('eq', 'Waiting for confirmation'); - - // cy.confirmMetamaskTransaction({ gasConfig: 'aggressive' }); - // cy.wait(2500); - - // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__DoubleValueSkeleton]').should( - // 'not.exist', - // ); - // cy.get('[data-test=HomeGridPersonalAllocation--pending__DoubleValueSkeleton]').should( - // 'not.exist', - // ); - - // cy.wait(1000); - - // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); - // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') - // .invoke('text') - // .should('eq', '0 ETH'); - - // cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); - // cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') - // .invoke('text') - // .should('eq', '0 ETH'); - - // cy.get('[data-test=TransactionsListItem__title]') - // .eq(0) - // .invoke('text') - // .should('eq', 'Withdrawn funds'); - - // cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); - // cy.wait(1000); - // cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); - // cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); - // cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); - // }); - // }); - }, -); diff --git a/client/cypress/e2e/_17project.cy.ts b/client/cypress/e2e/_17project.cy.ts deleted file mode 100644 index 15e99a9181..0000000000 --- a/client/cypress/e2e/_17project.cy.ts +++ /dev/null @@ -1,304 +0,0 @@ -import { - changeMainValueToCryptoToggle, - // changeMainValueToFiat, - checkProjectsViewLoaded, - connectWallet, - mockCoinPricesServer, - visitWithLoader, -} from 'cypress/utils/e2e'; -import { getNamesOfProjects } from 'cypress/utils/projects'; -import viewports from 'cypress/utils/viewports'; -import { - HAS_ONBOARDING_BEEN_CLOSED, - IS_CRYPTO_MAIN_VALUE_DISPLAY, - IS_ONBOARDING_ALWAYS_VISIBLE, - IS_ONBOARDING_DONE, -} from 'src/constants/localStorageKeys'; -import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -import Chainable = Cypress.Chainable; - -const getButtonAddToAllocate = (): Chainable => { - const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); - - return projectListItemFirst - .find('[data-test=ProjectListItemHeader__ButtonAddToAllocate]') - .filter(':visible'); -}; - -const checkProjectItemElements = (areMiddleSectionsVisible: boolean): Chainable => { - cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); - cy.wait(2000); - const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); - projectListItemFirst.get('[data-test=ProjectListItemHeader__Img]').should('be.visible'); - projectListItemFirst.get('[data-test=ProjectListItemHeader__name]').should('be.visible'); - getButtonAddToAllocate().should('be.visible'); - projectListItemFirst - .get('[data-test=ProjectListItemHeader__ButtonAddToAllocate]') - .should('be.visible'); - projectListItemFirst.get('[data-test=ProjectListItem__Description]').should('be.visible'); - projectListItemFirst.get('[data-test=ProjectRewards__currentTotal__label]').should('be.visible'); - - if (areMiddleSectionsVisible) { - projectListItemFirst - .get('[data-test=ProjectRewards__donationsToDisplay__label]') - .should('be.visible'); - projectListItemFirst - .get('[data-test=ProjectRewards__matchFunding__label]') - .should('be.visible'); - } - - projectListItemFirst.get('[data-test=ProjectRewards__donors]').should('be.visible'); - - if (areMiddleSectionsVisible) { - projectListItemFirst.get('[data-test=ProjectRewards__donors]').click(); - } else { - projectListItemFirst.get('[data-test=ProjectRewards__Button--donors]').click(); - } - cy.get('[data-test^=ModalFullDonorsList').should('be.visible'); - cy.get('[data-test^=ModalFullDonorsList__Button').click(); - cy.get('[data-test^=ModalFullDonorsList').should('not.exist'); - - // There are two in DOM, one needs to be visible. - projectListItemFirst - .get('[data-test=ProjectListItemButtonsWebsiteAndShare__websiteLink]') - .filter(':visible') - .should('be.visible'); - - // There are two in DOM, one needs to be visible. - const buttonShare = projectListItemFirst - .get('[data-test=ProjectListItemButtonsWebsiteAndShare__Tooltip]') - .filter(':visible'); - - buttonShare.should('be.visible'); - // buttonShare.click(); - // cy.window().then(win => { - // buttonShare.click(); - // win.navigator.clipboard.readText().then(text => { - // expect(text).to.eq(cy.url()); - // }); - // }); - cy.get('[data-test=ProjectMilestones]') - .first() - .find('[data-test=ProjectMilestonesNoResults]') - .scrollIntoView() - .should('be.visible'); - return cy - .get('[data-test=ProjectMilestones]') - .first() - .find('[data-test=ProjectMilestonesNoResults__header]') - .invoke('text') - .should('eq', 'Nothing to report yet. Check back again soon'); -}; - -const getHeartedProjectsIndicator = (isNavbarVisible: boolean): Chainable => { - return cy.get( - isNavbarVisible - ? '[data-test=LayoutNavbar__numberOfAllocations]' - : '[data-test=LayoutTopBar__numberOfAllocations]', - ); -}; - -const checkHeartedProjectsIndicator = (isNavbarVisible: boolean, number = 1): Chainable => { - return getHeartedProjectsIndicator(isNavbarVisible).contains(number); -}; - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { - describe(`[AW IS OPEN] Project: ${device}`, { viewportHeight, viewportWidth }, () => { - const projectNames: string[] = []; - - 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.projects.absolute); - cy.wait(2000); - - // checkProjectsViewLoaded(); - - /** - * This could be done in before hook, but CY wipes the state after each test - * (could be disabled, but creates other problems) - */ - // if (projectNames.length === 0) { - // projectNames = getNamesOfProjects(); - // } - }); - - it('entering project view directly renders content', () => { - cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); - cy.reload(); - const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); - projectListItemFirst.get('[data-test=ProjectListItemHeader__Img]').should('be.visible'); - projectListItemFirst.get('[data-test=ProjectListItemHeader__name]').should('be.visible'); - }); - - it('entering project view renders all its elements', () => { - checkProjectItemElements(!isMobile && !isTablet); - }); - - it('entering project view renders all its elements with fallback IPFS provider', () => { - cy.intercept('GET', '**/ipfs/**', req => { - if (req.url.includes('infura')) { - req.destroy(); - } - }); - - checkProjectItemElements(!isMobile && !isTablet); - }); - - it('entering project view allows to add it to allocation and remove, triggering change of the icon, change of the number in navbar', () => { - cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); - - getButtonAddToAllocate().click(); - checkHeartedProjectsIndicator(isMobile || isTablet); - getButtonAddToAllocate().click(); - getHeartedProjectsIndicator(isMobile || isTablet).should('not.exist'); - }); - - it('Entering project view allows scroll only to the last project', () => { - cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); - - for (let i = 0; i < projectNames.length; i++) { - cy.get('[data-test=ProjectListItem]').should( - 'have.length.greaterThan', - i === projectNames.length - 1 ? projectNames.length - 1 : i, - ); - cy.get('[data-test=ProjectListItemHeader__name]') - .eq(i) - .scrollIntoView({ offset: { left: 0, top: -150 } }) - .should('be.visible'); - cy.get('[data-test=ProjectMilestones]') - .eq(i) - .scrollIntoView({ offset: { left: 0, top: 100 } }) - .should('be.visible'); - } - }); - - it('"Back to top" button is displayed if the user has scrolled past the start of the final project description', () => { - cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); - - for (let i = 0; i < projectNames.length - 1; i++) { - cy.get('[data-test=ProjectMilestones]') - .eq(i) - .scrollIntoView({ offset: { left: 0, top: 100 } }); - - if (i === projectNames.length - 1) { - cy.get('[data-test=ProjectBackToTopButton__Button]').should('be.visible'); - } - } - }); - - it('Clicking on "Back to top" button scrolls to the top of view (first project is visible)', () => { - cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); - - for (let i = 0; i < projectNames.length - 1; i++) { - cy.get('[data-test=ProjectMilestones]') - .eq(i) - .scrollIntoView({ offset: { left: 0, top: 100 } }); - - if (i === projectNames.length - 1) { - cy.get('[data-test=ProjectBackToTopButton__Button]').click(); - cy.get('[data-test=ProjectListItem]').eq(0).should('be.visible'); - } - } - }); - - it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: true)`, () => { - changeMainValueToCryptoToggle(!isMobile && !isTablet, 'crypto'); - visitWithLoader(ROOT_ROUTES.projects.absolute); - cy.wait(2000); - cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); - cy.get('[data-test=ProjectRewards__currentTotal__number]') - .first() - .invoke('text') - .should('eq', '0 ETH'); - }); - - it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: false)`, () => { - changeMainValueToCryptoToggle(!isMobile && !isTablet, 'fiat'); - visitWithLoader(ROOT_ROUTES.projects.absolute); - cy.wait(2000); - cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); - cy.get('[data-test=ProjectRewards__currentTotal__number]') - .first() - .invoke('text') - .should('eq', '$0.00'); - }); - }); - - describe(`projects (IPFS failure): ${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', '**/ipfs/**', req => { - req.destroy(); - }); - - mockCoinPricesServer(); - localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); - localStorage.setItem(IS_ONBOARDING_DONE, 'true'); - localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.projects.absolute); - cy.wait(2000); - }); - - it('entering project view shows Toast with info about IPFS failure when all providers fail', () => { - cy.get('[data-test=Toast--ipfsMessage').should('be.visible'); - }); - }); - - describe(`project (patron mode): ${device}`, { viewportHeight, viewportWidth }, () => { - let projectNames: string[] = []; - - 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(() => { - mockCoinPricesServer(); - localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); - localStorage.setItem(IS_ONBOARDING_DONE, 'true'); - localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.projects.absolute); - cy.wait(2000); - connectWallet({ isPatronModeEnabled: true }); - checkProjectsViewLoaded(); - - /** - * This could be done in before hook, but CY wipes the state after each test - * (could be disabled, but creates other problems) - */ - if (projectNames.length === 0) { - projectNames = getNamesOfProjects(); - } - }); - - after(() => { - cy.disconnectMetamaskWalletFromAllDapps(); - }); - - it('button "add to allocate" is disabled', () => { - for (let i = 0; i < projectNames.length; i++) { - cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).click(); - getButtonAddToAllocate().should('be.visible').should('be.disabled'); - cy.go('back'); - } - }); - }); - }, -); diff --git a/client/cypress/e2e/_17projects.cy.ts b/client/cypress/e2e/_17projects.cy.ts index cdb8af30f0..ec156143af 100644 --- a/client/cypress/e2e/_17projects.cy.ts +++ b/client/cypress/e2e/_17projects.cy.ts @@ -202,6 +202,7 @@ Object.values(viewports).forEach( for (let i = 0; i < projectNames.length; i++) { cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).scrollIntoView(); checkProjectItemElements(i, projectNames[i]); + cy.wait(500); } }); diff --git a/client/cypress/e2e/_18antisybil.cy.ts b/client/cypress/e2e/_18antisybil.cy.ts deleted file mode 100644 index 26c1be69ba..0000000000 --- a/client/cypress/e2e/_18antisybil.cy.ts +++ /dev/null @@ -1,84 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { connectWallet, 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 }) => { - describe(`[AW IS OPEN] Antisybil: ${device}`, { viewportHeight, viewportWidth }, () => { - before(() => { - cy.clearLocalStorage(); - - /** - * 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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - visitWithLoader(ROOT_ROUTES.home.absolute); - }); - - it('Sybil user has to accept "no matching fund" rule to close the modal and not to see it anymore. Sybil user sees a badge with `Sybil account` info.', () => { - connectWallet({ isPatronModeEnabled: false, isSybil: true }); - cy.wait(5000); - - cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); - cy.get('[data-test=ModalTimeoutListPresence__overflow]').should('exist'); - cy.get('[data-test=ModalTimeoutListPresence__overflow]').click({ force: true }); - cy.wait(500); - cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); - cy.reload(); - cy.wait(1000); - cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); - cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('not.be.checked'); - cy.get('[data-test=ModalTimeoutListPresence__Button--form]').should('not.be.disabled'); - cy.get('[data-test=ModalTimeoutListPresence__Button--form]') - .invoke('attr', 'href') - .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus'); - cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('be.disabled'); - cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').check(); - cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('be.checked'); - cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('not.be.disabled'); - cy.get('[data-test=ModalTimeoutListPresence__Button--close]').click(); - cy.wait(500); - cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist'); - cy.get('[data-test=HomeGridUQScore]').scrollIntoView(); - cy.get('[data-test=HomeGridUQScoreAddresses]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#fffbf2'); - cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel]').should('be.visible'); - cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#f6c54b'); - cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]') - .invoke('text') - .should('eq', 'Sybil account'); - cy.get('[data-test=HomeGridUQScore__Button--form]').should('be.visible'); - cy.get('[data-test=HomeGridUQScore__Button--form]') - .invoke('text') - .should('eq', 'Want to dispute sybil status? Please use this form'); - cy.get('[data-test=HomeGridUQScore__Button--form]') - .invoke('attr', 'href') - .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus'); - cy.reload(); - cy.wait(1000); - cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist'); - }); - }); -}); diff --git a/client/cypress/e2e/_19rewardsEstimator.cy.ts b/client/cypress/e2e/_19rewardsEstimator.cy.ts deleted file mode 100644 index e0f19ec162..0000000000 --- a/client/cypress/e2e/_19rewardsEstimator.cy.ts +++ /dev/null @@ -1,234 +0,0 @@ -// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { - describe( - `[AW IS OPEN] Home rewards estimator: ${device}`, - { viewportHeight, viewportWidth }, - () => { - before(() => { - cy.clearLocalStorage(); - }); - - beforeEach(() => { - mockCoinPricesServer(); - cy.intercept('POST', '/rewards/estimated_budget', req => { - const budgetBase = 1522070616415; // 1 GLM | 1 epoch - const matchedFundingBase = 26329686088561; // 1 GLM | 1 epoch - const { glmAmount: glmAmountWei, numberOfEpochs } = req.body; - const glm = glmAmountWei / 1000000000000000000; - - if (glm < 100) { - req.reply({ - budget: '0', - matchedFunding: '0', - }); - return; - } - - req.reply({ - budget: `${budgetBase * glm * numberOfEpochs}`, - matchedFunding: `${matchedFundingBase * glm * numberOfEpochs}`, - }); - }); - - 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('Rewards estimator by default shows estimation for 5000 GLM and 90 days with UQ15+', () => { - cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should('be.checked'); - cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]') - .invoke('val') - .should('eq', '5000'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__label]') - .invoke('text') - .should('eq', 'Lock for 1 epoch'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--1]') - .then($el => $el.css('color')) - .should('be.colored', '#171717'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--1]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ebebeb'); - - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0.0076 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '0.1316 ETH'); - }); - - it('Rewards estimator shows 0 ETH rewards and match funding for GLM amount under 100', () => { - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('100'); - - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0.0002 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '0.0026 ETH'); - - cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('99'); - - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '0 ETH'); - - if (isMobile) { - cy.get('[data-test=HomeGridTransactions]').scrollIntoView({ - offset: { left: 0, top: 100 }, - }); - } - cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').uncheck({ - scrollBehavior: isMobile ? false : 'top', - }); - cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should( - 'not.be.checked', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '0 ETH'); - }); - - it('User can change amount of GLM, DAYS and value of UQ15+ toggle', () => { - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('100000'); - - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0.1522 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '2.633 ETH'); - - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__option--2]').click(); - - cy.wait(500); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--1]') - .then($el => $el.css('color')) - .should('be.colored', '#cdd1cd'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--1]').should( - 'not.exist', - ); - - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__label]') - .invoke('text') - .should('eq', 'Lock for 2 epochs'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--2]') - .then($el => $el.css('color')) - .should('be.colored', '#171717'); - cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--2]') - .then($el => $el.css('backgroundColor')) - .should('be.colored', '#ebebeb'); - - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( - 'not.exist', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( - 'be.visible', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0.3044 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '5.2659 ETH'); - - if (isMobile) { - cy.get('[data-test=HomeGridTransactions]').scrollIntoView({ - offset: { left: 0, top: 100 }, - }); - } - cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').uncheck({ - scrollBehavior: isMobile ? false : 'top', - }); - - cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should( - 'not.be.checked', - ); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') - .invoke('text') - .should('eq', '0.3044 ETH'); - cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') - .invoke('text') - .should('eq', '0.5266 ETH'); - }); - // - }, - ); -}); diff --git a/client/cypress/e2e/_20languageSelection.cy.ts b/client/cypress/e2e/_20languageSelection.cy.ts deleted file mode 100644 index 26a93103e1..0000000000 --- a/client/cypress/e2e/_20languageSelection.cy.ts +++ /dev/null @@ -1,109 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import chaiColors from 'chai-colors'; - -import { checkLocationWithLoader, 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 { languageKey } from 'src/i18n/languages'; -import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; - -chai.use(chaiColors); - -Object.values(viewports).forEach( - ({ device, viewportWidth, viewportHeight, isDesktop, isLargeDesktop }) => { - const isDesktopSize = isDesktop || isLargeDesktop; - - describe( - `[AW IS CLOSED] Language selection: ${device}`, - { viewportHeight, viewportWidth }, - () => { - before(() => { - cy.clearLocalStorage(); - - /** - * 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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); - }); - - it(`shows LayoutTopBar__Button label in ${languageKey.esEs} when window.navigator.language indicates ${languageKey.esEs}`, () => { - visitWithLoader(ROOT_ROUTES.projects.absolute, ROOT_ROUTES.projects.absolute, { - onBeforeLoad(win) { - // DOES NOT WORK - // Uncaught TypeError: Cannot assign to read only property - // 'language' of object '[object Navigator]' - // win.navigator.language = 'es-ES' - - // instead we need to define a property like this - Object.defineProperty(win.navigator, 'language', { - value: languageKey.esEs, - }); - }, - }); - cy.contains( - '[data-test=LayoutTopBar__Button]', - isDesktopSize ? 'Conectar billetera' : 'Conectar', - ).should('be.visible'); - }); - - it('"Language" option works', () => { - visitWithLoader( - ROOT_ROUTES.settings.absolute, - isLargeDesktop || isDesktop ? ROOT_ROUTES.home.absolute : ROOT_ROUTES.settings.absolute, - ); - - if (isDesktopSize) { - cy.get('[data-test=SettingsDrawer]').should('be.visible'); - } else { - checkLocationWithLoader(ROOT_ROUTES.settings.absolute); - } - cy.get('[data-test=SettingsLanguageSelectorBox__InputSelect]').click(); - cy.get( - `[data-test=SettingsLanguageSelectorBox__InputSelect__Option--${languageKey.enEn}]`, - ).click(); - - if (isDesktopSize) { - cy.get('[data-test=SettingsDrawer__closeButton]').click(); - } - - cy.contains( - '[data-test=LayoutTopBar__Button]', - isDesktopSize ? 'Connect wallet' : 'Connect', - ).should('be.visible'); - - if (isDesktopSize) { - cy.get('[data-test=LayoutTopBar__settingsButton]').click(); - } - - cy.get('[data-test=SettingsLanguageSelectorBox__InputSelect]').click(); - cy.get( - `[data-test=SettingsLanguageSelectorBox__InputSelect__Option--${languageKey.esEs}]`, - ).click(); - - if (isDesktopSize) { - cy.get('[data-test=SettingsDrawer__closeButton]').click(); - } - - cy.contains( - '[data-test=LayoutTopBar__Button]', - isDesktopSize ? 'Conectar billetera' : 'Conectar', - ).should('be.visible'); - }); - }, - ); - }, -); From 3ae2f7485edc0f6a81b4a0634775d772c7f95da9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Mon, 13 Jan 2025 23:01:01 +0100 Subject: [PATCH 3/8] fix: get the new projects order each time --- client/cypress/e2e/_17projects.cy.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/client/cypress/e2e/_17projects.cy.ts b/client/cypress/e2e/_17projects.cy.ts index ec156143af..32c855a765 100644 --- a/client/cypress/e2e/_17projects.cy.ts +++ b/client/cypress/e2e/_17projects.cy.ts @@ -187,11 +187,11 @@ Object.values(viewports).forEach( /** * This could be done in before hook, but CY wipes the state after each test - * (could be disabled, but creates other problems) + * (could be disabled, but creates other problems). + * + * Needs to be done for each test, because each has different default "random" order for projects. */ - if (projectNames.length === 0) { - projectNames = getNamesOfProjects(); - } + projectNames = getNamesOfProjects(); }); it('header is visible', () => { @@ -202,7 +202,6 @@ Object.values(viewports).forEach( for (let i = 0; i < projectNames.length; i++) { cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).scrollIntoView(); checkProjectItemElements(i, projectNames[i]); - cy.wait(500); } }); From 5effaa21d9a18f724705675c6fe7d2accaaaeb61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Tue, 14 Jan 2025 10:42:29 +0100 Subject: [PATCH 4/8] fix: projects test suit apparently fixed, rest of them readded --- client/cypress/e2e/_04layoutTopBar.cy.ts | 249 +++++ client/cypress/e2e/_05layoutFooter.cy.ts | 167 ++++ client/cypress/e2e/_06layoutNavbar.cy.ts | 196 ++++ .../e2e/_07onboardingTOSNotAccepted.cy.ts | 109 +++ .../e2e/_08onboardingTOSAccepted.cy.ts | 196 ++++ client/cypress/e2e/_09connectWallet.cy.ts | 76 ++ client/cypress/e2e/_10home.cy.ts | 124 +++ client/cypress/e2e/_11settings.cy.ts | 303 +++++++ client/cypress/e2e/_12homeGLMLock.cy.ts | 308 +++++++ .../cypress/e2e/_13allocationAWClosed.cy.ts | 168 ++++ client/cypress/e2e/_15metrics.cy.ts | 191 ++++ client/cypress/e2e/_16allocationAWOpen.cy.ts | 858 ++++++++++++++++++ client/cypress/e2e/_17project.cy.ts | 304 +++++++ client/cypress/e2e/_18antisybil.cy.ts | 84 ++ client/cypress/e2e/_19rewardsEstimator.cy.ts | 234 +++++ client/cypress/e2e/_20languageSelection.cy.ts | 109 +++ .../{_17projects.cy.ts => _21projects.cy.ts} | 99 +- .../ProjectsSearchResults.tsx | 10 +- .../src/hooks/queries/useSearchedProjects.ts | 23 +- .../src/views/ProjectsView/ProjectsView.tsx | 4 +- 20 files changed, 3724 insertions(+), 88 deletions(-) create mode 100644 client/cypress/e2e/_04layoutTopBar.cy.ts create mode 100644 client/cypress/e2e/_05layoutFooter.cy.ts create mode 100644 client/cypress/e2e/_06layoutNavbar.cy.ts create mode 100644 client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts create mode 100644 client/cypress/e2e/_08onboardingTOSAccepted.cy.ts create mode 100644 client/cypress/e2e/_09connectWallet.cy.ts create mode 100644 client/cypress/e2e/_10home.cy.ts create mode 100644 client/cypress/e2e/_11settings.cy.ts create mode 100644 client/cypress/e2e/_12homeGLMLock.cy.ts create mode 100644 client/cypress/e2e/_13allocationAWClosed.cy.ts create mode 100644 client/cypress/e2e/_15metrics.cy.ts create mode 100644 client/cypress/e2e/_16allocationAWOpen.cy.ts create mode 100644 client/cypress/e2e/_17project.cy.ts create mode 100644 client/cypress/e2e/_18antisybil.cy.ts create mode 100644 client/cypress/e2e/_19rewardsEstimator.cy.ts create mode 100644 client/cypress/e2e/_20languageSelection.cy.ts rename client/cypress/e2e/{_17projects.cy.ts => _21projects.cy.ts} (80%) diff --git a/client/cypress/e2e/_04layoutTopBar.cy.ts b/client/cypress/e2e/_04layoutTopBar.cy.ts new file mode 100644 index 0000000000..3a47521a51 --- /dev/null +++ b/client/cypress/e2e/_04layoutTopBar.cy.ts @@ -0,0 +1,249 @@ +// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => { + describe(`[AW IS CLOSED] LayoutTopBar: ${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('Top bar is visible ', () => { + cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); + cy.get('[data-test=LayoutTopBar]').should('be.visible'); + }); + + it('Top bar has grey background', () => { + cy.get('[data-test=Layout__topBarWrapper]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#f8f8f8'); + }); + + it('Octant logo is visible and has correct background colour', () => { + cy.get('[data-test=LayoutTopBar__Logo]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__Logo]').within(() => { + cy.get('path') + .then($el => $el.css('fill')) + .should('be.colored', '#171717'); + }); + }); + + it('Octant testnet indicator not exist', () => { + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').should('not.exist'); + }); + + it('Clicking on Octant logo scrolls view to the top on logo click (Home view)', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.scrollTo(0, 500); + cy.get('[data-test=LayoutTopBar__Logo]').click(); + // waiting for scrolling to finish + cy.wait(2000); + cy.window().then(cyWindow => { + expect(cyWindow.scrollY).to.be.eq(0); + }); + }); + + it('Clicking on Octant logo redirects to Home view (outside Home view)', () => { + if (device === 'large-desktop' || device === 'desktop') { + cy.get('[data-test=LayoutTopBar__link--metrics]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--metrics]`).click(); + } + cy.get('[data-test=MetricsView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__Logo]').click(); + cy.get('[data-test=HomeView]').should('be.visible'); + }); + + if (device !== 'mobile') { + it('Top bar is visible when user scrolls down/up', () => { + // scroll down + cy.scrollTo(0, 500); + cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); + cy.get('[data-test=LayoutTopBar]').should('be.visible'); + // scroll up + cy.scrollTo(0, 250); + cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); + cy.get('[data-test=LayoutTopBar]').should('be.visible'); + }); + } else { + it('Top bar hides when user scrolls down then top bar shows when user scrolls up', () => { + cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); + cy.get('[data-test=LayoutTopBar]').should('be.visible'); + cy.scrollTo(0, 500); + cy.get('[data-test=Layout__topBarWrapper]').should('not.be.visible'); + cy.get('[data-test=LayoutTopBar]').should('not.be.visible'); + cy.scrollTo(0, 250); + cy.get('[data-test=Layout__topBarWrapper]').should('be.visible'); + cy.get('[data-test=LayoutTopBar]').should('be.visible'); + }); + } + + if (device === 'large-desktop' || device === 'desktop') { + it('Projects view link is visible and redirects to Projects view after click', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--projects]').click(); + cy.get('[data-test=ProjectsView]').should('be.visible'); + }); + + it('Metrics view link is visible and redirects to Metrics view after click', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--metrics]').click(); + cy.get('[data-test=MetricsView]').should('be.visible'); + }); + + it('Home view link is visible and redirects to Home view after click', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--metrics]').click(); + cy.get('[data-test=MetricsView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--home]').click(); + cy.get('[data-test=HomeView]').should('be.visible'); + }); + + it('Active/Inactive link has proper style', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--home]') + .then($el => $el.css('color')) + .should('be.colored', '#171717'); + cy.get('[data-test=LayoutTopBar__underline--home]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__link--projects]') + .then($el => $el.css('color')) + .should('be.colored', '#cdd1cd'); + cy.get('[data-test=LayoutTopBar__link--metrics]') + .then($el => $el.css('color')) + .should('be.colored', '#cdd1cd'); + }); + } + + it('Epoch info badge is visible', () => { + cy.get('[data-test=LayoutTopBarCalendar]').should('be.visible'); + }); + + it('Connect wallet button is visible', () => { + cy.get('[data-test=LayoutTopBar__Button]').should('be.visible'); + }); + + it('Connect wallet button has proper label', () => { + cy.get('[data-test=LayoutTopBar__Button]') + .invoke('text') + .should('eq', device === 'mobile' ? 'Connect' : 'Connect wallet'); + }); + + if (device === 'large-desktop' || device === 'desktop') { + it('Settings button is visible and has white background', () => { + cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__settingsButton]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ffffff'); + }); + + it('Settings button opens Settings drawer', () => { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + cy.get('[data-test=SettingsDrawer]').should('be.visible'); + }); + + it('Allocation button is visible and has white background', () => { + cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__allocationButton]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ffffff'); + }); + + it('Allocation button opens Allocation drawer', () => { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); + }); + } + + describe('[TESTNET]', () => { + beforeEach(() => { + cy.window().then(win => { + // eslint-disable-next-line no-param-reassign + win.isTestnetCypress = true; + // wait for re-render + cy.wait(2500); + }); + }); + + it('Top bar has red background', () => { + cy.get('[data-test=Layout__topBarWrapper]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ffefee'); + }); + + it('Octant logo exists and has correct background colour', () => { + cy.get('[data-test=LayoutTopBar__Logo]').should('exist'); + cy.get('[data-test=LayoutTopBar__Logo]').within(() => { + cy.get('path') + .then($el => $el.css('fill')) + .should('be.colored', '#ff6157'); + }); + }); + + it('Octant testnet indicator is visible, has correct style and text', () => { + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ffefee'); + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]') + .invoke('text') + .should('eq', 'Local'); + }); + + it('Clicking on testnet indicator scrolls view to the top on logo click (Home view)', () => { + cy.get('[data-test=HomeView]').should('be.visible'); + cy.scrollTo(0, 500); + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').click(); + // waiting for scrolling to finish + cy.wait(2000); + cy.window().then(cyWindow => { + expect(cyWindow.scrollY).to.be.eq(0); + }); + }); + + it('Clicking on testnet indicator redirects to Home view (outside Home view)', () => { + if (device === 'large-desktop' || device === 'desktop') { + cy.get('[data-test=LayoutTopBar__link--metrics]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--metrics]`).click(); + } + cy.get('[data-test=MetricsView]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__Logo__testnetIndicator]').click(); + cy.get('[data-test=HomeView]').should('be.visible'); + }); + + if (device === 'large-desktop' || device === 'desktop') { + it('Settings button is visible and has red background', () => { + cy.get('[data-test=LayoutTopBar__settingsButton]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__settingsButton]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fffafa'); + }); + + it('Allocation button is visible and has red background', () => { + cy.get('[data-test=LayoutTopBar__allocationButton]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__allocationButton]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fffafa'); + }); + } + }); + }); +}); diff --git a/client/cypress/e2e/_05layoutFooter.cy.ts b/client/cypress/e2e/_05layoutFooter.cy.ts new file mode 100644 index 0000000000..9f9cbfcc1f --- /dev/null +++ b/client/cypress/e2e/_05layoutFooter.cy.ts @@ -0,0 +1,167 @@ +// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { + describe(`[AW IS CLOSED] LayoutFooter: ${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('Footer is visible', () => { + cy.get('[data-test=LayoutFooter]').should('be.visible'); + }); + + it('Octant logo is visible', () => { + cy.get('[data-test=LayoutFooter__Logo]').should('be.visible'); + }); + + it('Project info text is visible and has correct text', () => { + cy.get('[data-test=LayoutFooter__projectInfoText]').should('be.visible'); + cy.get('[data-test=LayoutFooter__projectInfoText]') + .invoke('text') + .should('eq', 'Octant is a Golem Foundation project, launched in 2023.'); + }); + + it('Project info text has link to the Golem Foundation website', () => { + cy.get('[data-test=LayoutFooter__projectInfoText__link]').should('be.visible'); + cy.get('[data-test=LayoutFooter__projectInfoText__link]') + .invoke('text') + .should('eq', 'Golem Foundation'); + cy.get('[data-test=LayoutFooter__projectInfoText__link]') + .invoke('attr', 'href') + .should('eq', 'https://golem.foundation/'); + cy.get('[data-test=LayoutFooter__projectInfoText__link]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Website link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--website]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--website]').invoke('text').should('eq', '→ Website'); + cy.get('[data-test=LayoutFooter__link--website]') + .invoke('attr', 'href') + .should('eq', 'https://octant.build/'); + cy.get('[data-test=LayoutFooter__link--website]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Docs link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--docs]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--docs]').invoke('text').should('eq', '→ Docs'); + cy.get('[data-test=LayoutFooter__link--docs]') + .invoke('attr', 'href') + .should('eq', 'https://docs.octant.app/'); + cy.get('[data-test=LayoutFooter__link--docs]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Blog link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--blog]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--blog]').invoke('text').should('eq', '→ Blog'); + cy.get('[data-test=LayoutFooter__link--blog]') + .invoke('attr', 'href') + .should('eq', 'https://blog.octant.build/'); + cy.get('[data-test=LayoutFooter__link--blog]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Brand assets link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--brandAssets]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--brandAssets]') + .invoke('text') + .should('eq', isMobile ? '→ Brand' : '→ Brand assets'); + cy.get('[data-test=LayoutFooter__link--brandAssets]') + .invoke('attr', 'href') + .should( + 'eq', + 'https://www.figma.com/community/file/1295533951881708349/octant-brand-assets', + ); + cy.get('[data-test=LayoutFooter__link--brandAssets]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Privacy policy link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--privacyPolicy]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--privacyPolicy]') + .invoke('text') + .should('eq', '→ Privacy policy'); + cy.get('[data-test=LayoutFooter__link--privacyPolicy]') + .invoke('attr', 'href') + .should('eq', 'https://docs.octant.app/privacy-policy.html'); + cy.get('[data-test=LayoutFooter__link--privacyPolicy]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Terms of use link is visible, has correct text and attributes', () => { + cy.get('[data-test=LayoutFooter__link--termsOfUse]').should('be.visible'); + cy.get('[data-test=LayoutFooter__link--termsOfUse]') + .invoke('text') + .should('eq', '→ Terms of use'); + cy.get('[data-test=LayoutFooter__link--termsOfUse]') + .invoke('attr', 'href') + .should('eq', 'https://docs.octant.app/terms-of-use.html'); + cy.get('[data-test=LayoutFooter__link--termsOfUse]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Newsletter text is visible and has correct value', () => { + cy.get('[data-test=LayoutFooter__newsletterText]').should('be.visible'); + cy.get('[data-test=LayoutFooter__newsletterText]') + .invoke('text') + .should('eq', 'Get PGF news and updates from Octant. No spam, ever'); + }); + + it('X link is visible and has correct attributes', () => { + cy.get('[data-test=LayoutFooter__Button--x]').should('be.visible'); + cy.get('[data-test=LayoutFooter__Button--x]') + .invoke('attr', 'href') + .should('eq', 'https://x.com/OctantApp'); + cy.get('[data-test=LayoutFooter__Button--x]').invoke('attr', 'target').should('eq', '_blank'); + }); + + it('Farcaster link is visible and has correct attributes', () => { + cy.get('[data-test=LayoutFooter__Button--farcaster]').should('be.visible'); + cy.get('[data-test=LayoutFooter__Button--farcaster]') + .invoke('attr', 'href') + .should('eq', 'https://warpcast.com/octant'); + cy.get('[data-test=LayoutFooter__Button--farcaster]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + + it('Discord link is visible and has correct attributes', () => { + cy.get('[data-test=LayoutFooter__Button--discord]').should('be.visible'); + cy.get('[data-test=LayoutFooter__Button--discord]') + .invoke('attr', 'href') + .should('eq', 'https://discord.gg/octant'); + cy.get('[data-test=LayoutFooter__Button--discord]') + .invoke('attr', 'target') + .should('eq', '_blank'); + }); + }); +}); diff --git a/client/cypress/e2e/_06layoutNavbar.cy.ts b/client/cypress/e2e/_06layoutNavbar.cy.ts new file mode 100644 index 0000000000..fef67a5585 --- /dev/null +++ b/client/cypress/e2e/_06layoutNavbar.cy.ts @@ -0,0 +1,196 @@ +// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { + describe(`[AW IS CLOSED] LayoutNavbar: ${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); + }); + + if (device === 'large-desktop' || device === 'desktop') { + it('LayoutNavbar doesn`t exist', () => { + cy.get('[data-test=LayoutNavbar]').should('not.exist'); + }); + } else { + it('LayoutNavbar is visible', () => { + cy.get('[data-test=LayoutNavbar]').should('be.visible'); + }); + + it('LayoutNavbar has correct size and style', () => { + cy.get('[data-test=LayoutNavbar]') + .invoke('css', 'height') + .should('eq', isMobile ? '72px' : '104px'); + cy.get('[data-test=LayoutNavbar]') + .invoke('css', 'width') + .should('eq', isMobile ? '342px' : '432px'); + cy.get('[data-test=LayoutNavbar]') + .invoke('css', 'borderRadius') + .should('eq', isMobile ? '32px' : '40px'); + cy.get('[data-test=LayoutNavbar]') + .invoke('css', 'boxShadow') + .should('eq', 'rgba(0, 0, 0, 0.05) 0px 0px 25px 0px'); + }); + + it('Every button is visible in correct order, has right style and props', () => { + const navbarButtons = [ + { + href: '/home', + key: 'home', + text: 'Home', + }, + { + href: '/projects', + key: 'projects', + text: 'Projects', + }, + { + href: '/allocation', + key: 'allocate', + text: 'Allocate', + }, + { + href: '/metrics', + key: 'metrics', + text: 'Metrics', + }, + { + href: '/settings', + key: 'settings', + text: 'Settings', + }, + ]; + + cy.get(`[data-test=LayoutNavbar__buttons]`).children().should('have.length', 5); + cy.get(`[data-test=LayoutNavbar__buttons]`) + .children() + .each((el1, idx1) => { + cy.get(`[data-test=LayoutNavbar__buttons]`).children().eq(idx1).should('be.visible'); + cy.get(`[data-test=LayoutNavbar__buttons]`) + .children() + .eq(idx1) + .invoke('text') + .should('eq', navbarButtons[idx1].text); + cy.get(`[data-test=LayoutNavbar__buttons]`) + .children() + .eq(idx1) + .invoke('attr', 'href') + .should('eq', navbarButtons[idx1].href); + cy.get(`[data-test=LayoutNavbar__buttons]`) + .children() + .eq(idx1) + .invoke('css', 'height') + .should('eq', '72px'); + cy.get(`[data-test=LayoutNavbar__buttons]`) + .children() + .eq(idx1) + .invoke('css', 'width') + .should('eq', '64px'); + + if (idx1 === 0) { + cy.get(`[data-test=LayoutNavbar__Button__Svg--${navbarButtons[idx1].key}]`).within( + () => { + cy.get('path') + .eq(1) + .then($el => $el.css('fill')) + .should('be.colored', '#171717'); + }, + ); + } else { + cy.get(`[data-test=LayoutNavbar__Button__Svg--${navbarButtons[idx1].key}]`).within( + () => { + cy.get('path').each((el2, idx2) => { + cy.get('path') + .eq(idx2) + .then($el => $el.css('stroke')) + .should('be.colored', '#cdd1cd'); + }); + }, + ); + } + }); + }); + + it('Home button redirects to HomeView', () => { + cy.get('[data-test=LayoutNavbar__Button--home]').click(); + cy.get('[data-test=HomeView]').should('be.visible'); + cy.get(`[data-test=LayoutNavbar__Button__Svg--home]`).within(() => { + cy.get('path') + .eq(1) + .then($el => $el.css('fill')) + .should('be.colored', '#171717'); + }); + }); + + it('Projects button redirects to ProjectsView', () => { + cy.get('[data-test=LayoutNavbar__Button--projects]').click(); + cy.get(`[data-test=LayoutNavbar__Button__Svg--projects]`).within(() => { + cy.get('path').each((el, idx) => { + cy.get('path') + .eq(idx) + .then($el => $el.css('stroke')) + .should('be.colored', '#171717'); + }); + }); + cy.get('[data-test=ProjectsView]').should('be.visible'); + }); + + it('Allocate button redirects to AllocationView', () => { + cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); + cy.get(`[data-test=LayoutNavbar__Button__Svg--allocate]`).within(() => { + cy.get('path').each((el, idx) => { + cy.get('path') + .eq(idx) + .then($el => $el.css('stroke')) + .should('be.colored', '#171717'); + }); + }); + cy.get('[data-test=AllocationView]').should('be.visible'); + }); + + it('Metrics button redirects to MetricsView', () => { + cy.get('[data-test=LayoutNavbar__Button--metrics]').click(); + cy.get(`[data-test=LayoutNavbar__Button__Svg--metrics]`).within(() => { + cy.get('path').each((el, idx) => { + cy.get('path') + .eq(idx) + .then($el => $el.css('stroke')) + .should('be.colored', '#171717'); + }); + }); + cy.get('[data-test=MetricsView]').should('be.visible'); + }); + + it('Settings button redirects to SettingsView', () => { + cy.get('[data-test=LayoutNavbar__Button--settings]').click(); + cy.get(`[data-test=LayoutNavbar__Button__Svg--settings]`).within(() => { + cy.get('path').each((el, idx) => { + cy.get('path') + .eq(idx) + .then($el => $el.css('stroke')) + .should('be.colored', '#171717'); + }); + }); + cy.get('[data-test=SettingsView]').should('be.visible'); + }); + } + }); +}); diff --git a/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts b/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts new file mode 100644 index 0000000000..baf2de9871 --- /dev/null +++ b/client/cypress/e2e/_07onboardingTOSNotAccepted.cy.ts @@ -0,0 +1,109 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { + beforeSetup, + checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px, + checkChangeStepsByClickingEdgeOfTheScreenUpTo25px, + checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px, + checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px, + checkChangeStepsWithArrowKeys, + checkCurrentElement, + checkProgressStepperSlimIsCurrentAndClickNext, + connectWalletOnboarding, +} from 'cypress/utils/onboarding'; +import viewports from 'cypress/utils/viewports'; +import { QUERY_KEYS } from 'src/api/queryKeys'; +import { + getStepsDecisionWindowClosed, + getStepsDecisionWindowOpen, +} from 'src/hooks/helpers/useOnboardingSteps/steps'; + +chai.use(chaiColors); + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isMobile, isTablet }, index, arr) => { + describe( + `[AW IS CLOSED] Onboarding (TOS not accepted): ${device}`, + { viewportHeight, viewportWidth }, + () => { + before(() => { + beforeSetup(); + }); + + beforeEach(() => { + connectWalletOnboarding(); + }); + + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('onboarding TOS step should be first and active', () => { + checkCurrentElement(0, true); + cy.get('[data-test=ModalOnboardingTOS]').should('be.visible'); + }); + + it('user is not able to click through entire onboarding flow', () => { + cy.window().then(win => { + const isDecisionWindowOpen = win.clientReactQuery.getQueryData( + QUERY_KEYS.isDecisionWindowOpen, + ); + + const onboardingSteps = isDecisionWindowOpen + ? getStepsDecisionWindowOpen('2', '16 Jan') + : getStepsDecisionWindowClosed('2', '16 Jan'); + + for (let i = 1; i < onboardingSteps.length; i++) { + checkProgressStepperSlimIsCurrentAndClickNext(i, i === 1); + } + }); + }); + + it('user is not able to close the modal by clicking button in the top-right', () => { + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.get('[data-test=ModalOnboarding__Button]').click({ force: true }); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + }); + + it('renders every time page is refreshed', () => { + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + }); + + it('user cannot change steps with arrow keys (left, right)', () => { + checkChangeStepsWithArrowKeys(false); + }); + + it('user cannot change steps by clicking the edge of the screen (up to 25px from each edge)', () => { + checkChangeStepsByClickingEdgeOfTheScreenUpTo25px(false, isMobile || isTablet); + }); + + it('user cannot change steps by clicking the edge of the screen (more than 25px from each edge)', () => { + checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px(false, isMobile || isTablet); + }); + + it('user cannot change steps by swiping on screen (difference more than or equal 5px)', () => { + checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px(false); + }); + + it('user cannot change steps by swiping on screen (difference less than 5px)', () => { + checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(false); + }); + + if (index === arr.length - 1) { + it('TOS acceptance changes onboarding step to next step and allows the user to close the modal by clicking button in the top-right', () => { + checkCurrentElement(0, true); + cy.get('[data-test=TOS_InputCheckbox]').check(); + cy.switchToMetamaskNotification(); + cy.confirmMetamaskSignatureRequest(); + checkCurrentElement(1, true); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + }); + } + }, + ); + }, +); diff --git a/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts b/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts new file mode 100644 index 0000000000..5c87d733fb --- /dev/null +++ b/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts @@ -0,0 +1,196 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { + beforeSetup, + checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px, + checkChangeStepsByClickingEdgeOfTheScreenUpTo25px, + checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px, + checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px, + checkChangeStepsWithArrowKeys, + checkProgressStepperSlimIsCurrentAndClickNext, + connectWalletOnboarding, +} from 'cypress/utils/onboarding'; +import viewports from 'cypress/utils/viewports'; +import { QUERY_KEYS } from 'src/api/queryKeys'; +import { HAS_ONBOARDING_BEEN_CLOSED, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys'; +import { + getStepsDecisionWindowClosed, + getStepsDecisionWindowOpen, +} from 'src/hooks/helpers/useOnboardingSteps/steps'; + +chai.use(chaiColors); + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isMobile, isTablet, isDesktop, isLargeDesktop }) => { + describe( + `[AW IS CLOSED] onboarding (TOS accepted): ${device}`, + { viewportHeight, viewportWidth }, + () => { + before(() => { + beforeSetup(); + }); + + beforeEach(() => { + cy.clearLocalStorage(); + connectWalletOnboarding(); + }); + + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('user is able to click through entire onboarding flow', () => { + cy.window().then(win => { + const isDecisionWindowOpen = win.clientReactQuery.getQueryData( + QUERY_KEYS.isDecisionWindowOpen, + ); + + const onboardingSteps = isDecisionWindowOpen + ? getStepsDecisionWindowOpen('2', '16 Jan') + : getStepsDecisionWindowClosed('2', '16 Jan'); + + for (let i = 1; i < onboardingSteps.length - 1; i++) { + checkProgressStepperSlimIsCurrentAndClickNext(i); + } + + cy.get('[data-test=ModalOnboarding__ProgressStepperSlim__element]') + .eq(onboardingSteps.length - 1) + .click(); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + cy.get('[data-test=HomeView]').should('be.visible'); + }); + }); + + it('user is able to close the modal by clicking button in the top-right', () => { + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + cy.get('[data-test=HomeView]').should('be.visible'); + }); + + it('renders every time page is refreshed when "Always show Allocate onboarding" option is checked', () => { + cy.wait(2000); + cy.get('[data-test=ModalOnboarding__Button]').click(); + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + } + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').check().should('be.checked'); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.reload(); + cy.wait(1000); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + }); + + it('renders only once when "Always show Allocate onboarding" option is not checked', () => { + cy.wait(2000); + cy.get('[data-test=ModalOnboarding__Button]').click(); + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + } + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + }); + + it('user can change steps with arrow keys (left, right)', () => { + checkChangeStepsWithArrowKeys(true); + }); + + it('user can change steps by clicking the edge of the screen (up to 25px from each edge)', () => { + checkChangeStepsByClickingEdgeOfTheScreenUpTo25px(true, isMobile || isTablet); + }); + + it('user cannot change steps by clicking the edge of the screen (more than 25px from each edge)', () => { + checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px(true, isMobile || isTablet); + }); + + it('user can change steps by swiping on screen (difference more than or equal 5px)', () => { + checkChangeStepsBySwipingOnScreenDifferenceMoreThanOrEqual5px(true); + }); + + it('user cannot change steps by swiping on screen (difference less than 5px)', () => { + checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(true); + }); + + it('user cannot change steps by swiping on screen (difference less than 5px)', () => { + checkChangeStepsBySwipingOnScreenDifferenceLessThanl5px(true); + }); + + it('user is able to close the onboarding, and after page reload, onboarding does not show up again', () => { + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + }); + + it('Onboarding stepper is visible after closing onboarding modal without going to the last step', () => { + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=OnboardingStepper]').should('be.visible'); + }); + + it('Onboarding stepper opens onboarding modal', () => { + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + cy.get('[data-test=OnboardingStepper]').click(); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + }); + + it(`Onboarding stepper is not visible if "${IS_ONBOARDING_DONE}" is set to "true"`, () => { + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + cy.get('[data-test=OnboardingStepper]').should('not.exist'); + }); + + if (isDesktop) { + it(`Onboarding stepper has tooltip`, () => { + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=OnboardingStepper]').trigger('mouseover'); + cy.get('[data-test=OnboardingStepper__Tooltip__content]').should('be.visible'); + cy.get('[data-test=OnboardingStepper__Tooltip__content]') + .invoke('text') + .should('eq', 'Reopen onboarding'); + }); + } + + it('Onboarding stepper has right amount of steps and highlights correct amount of passed steps', () => { + const onboardingSteps = getStepsDecisionWindowClosed('2', '16 Jan'); + + cy.get('[data-test=ModalOnboarding__Button]').click(); + + cy.get(`[data-test*=OnboardingStepper__circle]`).should( + 'have.length', + onboardingSteps.length, + ); + + for (let i = 0; i < onboardingSteps.length - 1; i++) { + cy.get(`[data-test=OnboardingStepper__circle--${i}]`) + .then($el => $el.css('stroke')) + .should('be.colored', i > 0 ? '#ffffff' : '#2d9b87'); + } + cy.get('[data-test=OnboardingStepper]').click(); + checkProgressStepperSlimIsCurrentAndClickNext(1); + cy.get('[data-test=ModalOnboarding__Button]').click(); + for (let i = 0; i < onboardingSteps.length - 1; i++) { + cy.get(`[data-test=OnboardingStepper__circle--${i}]`) + .then($el => $el.css('stroke')) + .should('be.colored', i > 1 ? '#ffffff' : '#2d9b87'); + } + cy.get('[data-test=OnboardingStepper]').click(); + checkProgressStepperSlimIsCurrentAndClickNext(2); + cy.get('[data-test=ModalOnboarding__Button]').click(); + cy.get('[data-test=OnboardingStepper]').should('not.exist'); + }); + }, + ); + }, +); diff --git a/client/cypress/e2e/_09connectWallet.cy.ts b/client/cypress/e2e/_09connectWallet.cy.ts new file mode 100644 index 0000000000..153a0585fb --- /dev/null +++ b/client/cypress/e2e/_09connectWallet.cy.ts @@ -0,0 +1,76 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { connectWallet, visitWithLoader } from 'cypress/utils/e2e'; +import { beforeSetup } from 'cypress/utils/onboarding'; +import viewports from 'cypress/utils/viewports'; +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 }) => { + describe(`[AW IS CLOSED] Connect wallet: ${device}`, { viewportHeight, viewportWidth }, () => { + before(() => { + beforeSetup(); + cy.clearLocalStorage(); + }); + + beforeEach(() => { + 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); + }); + + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('Connect wallet button opens Connect wallet Modal', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('be.visible'); + }); + + it('Close button in top-right corner is visible and closes Connect wallet Modal when clicked', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet__Button]').should('be.visible'); + cy.get('[data-test=ModalLayoutConnectWallet__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); + }); + + it('Connect wallet Modal has overflow which closes Connect wallet Modal when clicked', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet__overflow]').should('exist'); + cy.get('[data-test=ModalLayoutConnectWallet__overflow]').click({ force: true }); + cy.wait(500); + cy.get('[data-test=ModalLayoutConnectWallet]').should('not.exist'); + }); + + it('Connect wallet Modal shows "WalletConnect" and "Browser wallet" options when wallet with "injected" id is detected.', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ConnectWallet__BoxRounded--browserWallet]').should('be.visible'); + cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').should('be.visible'); + }); + + it('Clicking on "WalletConnect" option, opens WalletConnect modal', () => { + cy.get('[data-test=LayoutTopBar__Button]').click(); + cy.wait(500); + cy.get('[data-test=ConnectWallet__BoxRounded--walletConnect]').click(); + }); + + it('Clicking on "Browser wallet" option connects with MetaMask wallet', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.get('[data-test=LayoutTopBar__Button]').should('contain.text', '0x'); + }); + }); +}); diff --git a/client/cypress/e2e/_10home.cy.ts b/client/cypress/e2e/_10home.cy.ts new file mode 100644 index 0000000000..735b360073 --- /dev/null +++ b/client/cypress/e2e/_10home.cy.ts @@ -0,0 +1,124 @@ +// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { + describe(`[AW IS CLOSED] Home: ${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('Home view title is visible (each viewport)', () => { + cy.get('[data-test=HomeView__title]').should('be.visible'); + }); + + it('Home rewards section is visible (each viewport)', () => { + cy.get('[data-test=HomeRewards]').should('be.visible'); + }); + + it('"Rewards rate" label has tooltip with correct text', () => { + cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').should('be.visible'); + if (isMobile || isTablet) { + cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').click(); + } else { + cy.get('[data-test=HomeRewards__Tooltip--rewardsRate]').trigger('mouseover'); + } + + cy.get('[data-test=HomeRewards__Tooltip--rewardsRate__content]').should('exist'); + cy.get('[data-test=HomeRewards__Tooltip--rewardsRate__content]') + .invoke('text') + .should( + 'eq', + 'Rewards rate is the percentage of your locked GLM you earn as rewards per epoch', + ); + }); + + it('HomeGrid tiles are visible in correct order ', () => { + cy.get('[data-test=HomeGrid]') + .children() + .should('have.length', isMobile ? 8 : 10); + cy.get('[data-test=HomeGrid]').children().eq(0).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(0) + .invoke('data', 'test') + .should('eq', 'HomeGridCurrentGlmLock'); + cy.get('[data-test=HomeGrid]').children().eq(1).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(1) + .invoke('data', 'test') + .should('eq', 'HomeGridDonations'); + cy.get('[data-test=HomeGrid]').children().eq(2).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(2) + .invoke('data', 'test') + .should('eq', 'HomeGridPersonalAllocation'); + cy.get('[data-test=HomeGrid]').children().eq(3).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(3) + .invoke('data', 'test') + .should('eq', 'HomeGridUQScore'); + cy.get('[data-test=HomeGrid]').children().eq(4).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(4) + .invoke('data', 'test') + .should('eq', isMobile ? 'HomeGridVideoBar' : 'HomeGrid__divider--1'); + cy.get('[data-test=HomeGrid]').children().eq(5).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(5) + .invoke('data', 'test') + .should('eq', isMobile ? 'HomeGridTransactions' : 'HomeGridVideoBar'); + cy.get('[data-test=HomeGrid]').children().eq(6).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(6) + .invoke('data', 'test') + .should('eq', isMobile ? 'HomeGridRewardsEstimator' : 'HomeGrid__divider--2'); + cy.get('[data-test=HomeGrid]').children().eq(7).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(7) + .invoke('data', 'test') + .should('eq', isMobile ? 'HomeGridEpochResults' : 'HomeGridTransactions'); + if (!isMobile) { + cy.get('[data-test=HomeGrid]').children().eq(8).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(8) + .invoke('data', 'test') + .should('eq', 'HomeGridRewardsEstimator'); + cy.get('[data-test=HomeGrid]').children().eq(9).should('be.visible'); + cy.get('[data-test=HomeGrid]') + .children() + .eq(9) + .invoke('data', 'test') + .should('eq', 'HomeGridEpochResults'); + } + }); + }); + }, +); diff --git a/client/cypress/e2e/_11settings.cy.ts b/client/cypress/e2e/_11settings.cy.ts new file mode 100644 index 0000000000..8a826997cf --- /dev/null +++ b/client/cypress/e2e/_11settings.cy.ts @@ -0,0 +1,303 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { + checkLocationWithLoader, + connectWallet, + mockCoinPricesServer, + visitWithLoader, +} from 'cypress/utils/e2e'; +import { beforeSetup } from 'cypress/utils/onboarding'; +import viewports from 'cypress/utils/viewports'; +import { DISPLAY_CURRENCIES, FIAT_CURRENCIES_SYMBOLS } from 'src/constants/currencies'; +import { + DISPLAY_CURRENCY, + HAS_ONBOARDING_BEEN_CLOSED, + IS_CRYPTO_MAIN_VALUE_DISPLAY, + IS_ONBOARDING_ALWAYS_VISIBLE, + IS_ONBOARDING_DONE, + SHOW_HELP_VIDEOS, +} 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] Settings: ${device}`, { viewportHeight, viewportWidth }, () => { + before(() => { + cy.clearLocalStorage(); + beforeSetup(); + }); + + 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.settings.absolute, + isLargeDesktop || isDesktop ? ROOT_ROUTES.home.absolute : ROOT_ROUTES.settings.absolute, + ); + }); + + if (isLargeDesktop || isDesktop) { + it('Settings render as a drawer', () => { + cy.get('[data-test=SettingsDrawer]').should('be.visible'); + cy.get('[data-test=SettingsView]').should('not.exist'); + }); + + it('if user resize viewport from large-desktop/desktop to tablet/mobile settings drawer will hide and current view will change to Settings view.', () => { + cy.wait(1000); + // mobile + cy.viewport(viewports.mobile.viewportWidth, viewports.mobile.viewportHeight); + cy.get('[data-test=SettingsDrawer]').should('not.exist'); + cy.get('[data-test=SettingsView]').should('be.visible'); + cy.location('pathname').should('eq', ROOT_ROUTES.settings.absolute); + // tablet + cy.viewport(viewports.tablet.viewportWidth, viewports.tablet.viewportHeight); + cy.get('[data-test=SettingsDrawer]').should('not.exist'); + cy.get('[data-test=SettingsView]').should('be.visible'); + cy.location('pathname').should('eq', ROOT_ROUTES.settings.absolute); + }); + + it('If user resize viewport from large-desktop/desktop to tablet/mobile when settings drawer was open and then change view and resize again to large/desktop settings 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(); + 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=SettingsDrawer]').should('not.exist'); + + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + cy.get('[data-test=SettingsDrawer]').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=SettingsDrawer]').should('not.exist'); + }); + } else { + it('Settings render as a independent view', () => { + cy.get('[data-test=SettingsDrawer]').should('not.exist'); + cy.get('[data-test=SettingsView]').should('be.visible'); + }); + + it('if user resize viewport from tablet/mobile to large-desktop/desktop settings view will change to the last opened or Home view and Settings drawer will be visible.', () => { + cy.wait(1000); + // desktop + cy.viewport(viewports.desktop.viewportWidth, viewports.desktop.viewportHeight); + cy.get('[data-test=SettingsDrawer]').should('be.visible'); + cy.get('[data-test=SettingsView]').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=SettingsDrawer]').should('be.visible'); + cy.get('[data-test=SettingsView]').should('not.exist'); + cy.location('pathname').should('eq', ROOT_ROUTES.home.absolute); + }); + } + + it('Settings title is visible and has correct text', () => { + const dataTestRoot = isLargeDesktop || isDesktop ? 'Settings' : 'SettingsView'; + cy.get(`[data-test=${dataTestRoot}__title]`).should('be.visible'); + cy.get(`[data-test=${dataTestRoot}__title]`).invoke('text').should('eq', 'Settings'); + }); + + it('Octant info tile is visible', () => { + cy.get('[data-test=SettingsMainInfoBox]').should('be.visible'); + }); + + it('"Use ETH as main value display" tile is visible', () => { + cy.get('[data-test=SettingsCryptoMainValueBox]').should('be.visible'); + }); + + it('"Choose a display currency" tile is visible', () => { + cy.get('[data-test=SettingsCurrencyBox]').should('be.visible'); + }); + + it('"Show help videos" tile is visible', () => { + cy.get('[data-test=SettingsShowHelpVideosBox]').should('be.visible'); + }); + + it('"Always show onboarding" tile is visible', () => { + cy.get('[data-test=SettingsShowOnboardingBox]').should('be.visible'); + }); + + it(`"Use ETH as main value display" option is checked by default`, () => { + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); + }); + }); + + it('Default currency is "usd"', () => { + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(DISPLAY_CURRENCY)).eq('"usd"'); + }); + cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency__SingleValue]') + .invoke('text') + .should('eq', 'USD'); + }); + + it(`"Show help videos" option is checked by default`, () => { + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); + }); + }); + + it(`"Always show onboarding" option is not checked by default`, () => { + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('false'); + }); + }); + + it('"Use ETH as main value display" option toggle works', () => { + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check({ force: true }); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); + }); + + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('not.be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('false'); + }); + + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_CRYPTO_MAIN_VALUE_DISPLAY)).eq('true'); + }); + }); + + it('"Choose a display currency" option works', () => { + for (let i = 0; i < DISPLAY_CURRENCIES.length - 1; i++) { + const displayCurrency = DISPLAY_CURRENCIES[i]; + const displayCurrencyToUppercase = displayCurrency.toUpperCase(); + const nextDisplayCurrency = + i < DISPLAY_CURRENCIES.length - 1 ? DISPLAY_CURRENCIES[i + 1] : undefined; + + cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency__SingleValue]').contains( + displayCurrencyToUppercase, + ); + if (!isLargeDesktop && !isDesktop) { + cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); + checkLocationWithLoader(ROOT_ROUTES.home.absolute); + } + + if (FIAT_CURRENCIES_SYMBOLS[displayCurrency]) { + cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]').contains( + FIAT_CURRENCIES_SYMBOLS[displayCurrency], + ); + } else { + cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]').contains( + displayCurrencyToUppercase, + ); + } + + if (!isLargeDesktop && !isDesktop) { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + checkLocationWithLoader(ROOT_ROUTES.settings.absolute); + } + cy.get('[data-test=SettingsCurrencyBox__InputSelect--currency]').click(); + cy.get( + `[data-test=SettingsCurrencyBox__InputSelect--currency__Option--${nextDisplayCurrency}]`, + ).click(); + } + }); + + it('"Show help videos" option toggle works', () => { + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').check({ force: true }); + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); + }); + + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('not.be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('false'); + }); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=HomeGridVideoBar]').should('not.exist'); + } else { + cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); + cy.get('[data-test=HomeGridVideoBar]').should('not.exist'); + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + } + + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('true'); + }); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=HomeGridVideoBar]').should('be.visible'); + } else { + cy.get(`[data-test=LayoutNavbar__Button--home]`).click({ force: true }); + cy.get('[data-test=HomeGridVideoBar]').should('be.visible'); + } + }); + + it('"Always show onboarding" option toggle works', () => { + connectWallet({ isPatronModeEnabled: false }); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click({ force: true }); + } + + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').check({ force: true }); + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('true'); + }); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('be.visible'); + cy.get('[data-test=ModalOnboarding__Button]').click(); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + } + + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('not.be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('false'); + }); + cy.reload(); + cy.get('[data-test=ModalOnboarding]').should('not.exist'); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + } + + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').click({ force: true }); + cy.get('[data-test=SettingsShowOnboardingBox__InputToggle]').should('be.checked'); + cy.getAllLocalStorage().then(() => { + expect(localStorage.getItem(IS_ONBOARDING_ALWAYS_VISIBLE)).eq('true'); + }); + + cy.disconnectMetamaskWalletFromAllDapps(); + }); + }); + }, +); diff --git a/client/cypress/e2e/_12homeGLMLock.cy.ts b/client/cypress/e2e/_12homeGLMLock.cy.ts new file mode 100644 index 0000000000..2a3de67326 --- /dev/null +++ b/client/cypress/e2e/_12homeGLMLock.cy.ts @@ -0,0 +1,308 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { connectWallet, GLM_USD, 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 }, idx) => { + describe(`[AW IS CLOSED] HomeGlmLock: ${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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.home.absolute); + }); + + it('Title is visible and has correct text', { scrollBehavior: false }, () => { + cy.get('[data-test=HomeGridCurrentGlmLock__title]').should('be.visible'); + cy.get('[data-test=HomeGridCurrentGlmLock__title]') + .invoke('text') + .should('eq', 'Current GLM lock'); + }); + + it('Main value is 0 (GLM/$) when wallet isn`t connected ', { scrollBehavior: false }, () => { + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') + .invoke('text') + .should('eq', '0 GLM'); + cy.get('[data-test=HomeGridCurrentGlmLock--current__secondary]') + .invoke('text') + .should('eq', '$0.00'); + }); + + it( + 'Effective value is 0 (GLM/$) when wallet isn`t connected ', + { scrollBehavior: false }, + () => { + cy.get('[data-test=HomeGridCurrentGlmLock__Section--effective__DoubleValue__primary]') + .invoke('text') + .should('eq', '0 GLM'); + cy.get('[data-test=HomeGridCurrentGlmLock__Section--effective__DoubleValue__secondary]') + .invoke('text') + .should('eq', '$0.00'); + }, + ); + + it('Effective label has a tooltip with correct text', { scrollBehavior: false }, () => { + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=TooltipEffectiveLockedBalance]').trigger('mouseover'); + } else { + cy.get('[data-test=TooltipEffectiveLockedBalance]').click(); + } + + cy.get('[data-test=TooltipEffectiveLockedBalance__content]').should('be.visible'); + cy.get('[data-test=TooltipEffectiveLockedBalance__content]') + .invoke('text') + .should( + 'eq', + 'Effective lock (EL) is the part of your locked GLM that is currently earning rewards. Lock more & EL increases proportionally to epoch time remaining. Unlock GLM & that amount is removed from EL for the epoch. Note that if EL falls below 100, no rewards will be calculated.', + ); + }); + + it( + 'Button has "Lock GLM" text and is disabled when wallet isn`t connected', + { scrollBehavior: false }, + () => { + cy.get('[data-test=HomeGridCurrentGlmLock__Button]').should('be.disabled'); + cy.get('[data-test=HomeGridCurrentGlmLock__Button]') + .invoke('text') + .should('eq', 'Lock GLM'); + }, + ); + + it('User is able to close Lock/Unlock GLM Modal', { scrollBehavior: false }, () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); + cy.get('[data-test=ModalLockGlm__overflow]').should('exist'); + cy.get('[data-test=ModalLockGlm]').should('be.visible'); + cy.get('[data-test=ModalLockGlm__overflow]').click({ force: true }); + cy.get('[data-test=ModalLockGlm]').should('not.exist'); + cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); + cy.get('[data-test=ModalLockGlm]').should('be.visible'); + cy.get('[data-test=ModalLockGlm__Button]').click(); + cy.get('[data-test=ModalLockGlm]').should('not.exist'); + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('Wallet connected: Lock 1000 GLM', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeView]').scrollIntoView(); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]').should( + 'not.exist', + ); + cy.wait(1000); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') + .invoke('text') + .then(text => { + const amountToLock = 1000; + const lockedGlms = parseInt(text, 10); + + cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); + cy.get('[data-test=InputsCryptoFiat__InputText--crypto]') + .clear() + .type(`${amountToLock}`); + cy.get('[data-test=LockGlmTabs__Button]').should('have.text', 'Lock'); + cy.wait(5000); + cy.get('[data-test=LockGlmTabs__Button]').click(); + cy.get('[data-test=LockGlmTabs__Button]').should( + 'have.text', + 'Waiting for confirmation', + ); + cy.confirmMetamaskPermissionToSpend({ + spendLimit: '99999999999999999999', + }); + // Workaround for two notifications during first transaction. + // 1. Allow the third party to spend TKN from your current balance. + // 2. Confirm permission to spend + if (Cypress.env('CI') === 'true' && idx === 0) { + cy.wait(5000); + cy.confirmMetamaskPermissionToSpend({ + spendLimit: '99999999999999999999', + }); + } + cy.get('[data-test=LockGlmTabs__Button]', { timeout: 180000 }).should( + 'have.text', + 'Close', + ); + cy.get('[data-test=LockGlmNotification--success]').should('be.visible'); + cy.get('[data-test=LockGlmTabs__Button]').click(); + cy.wait(5000); + cy.get('[data-test=HomeView]').scrollIntoView(); + cy.get( + '[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]', + ).should('not.exist'); + cy.wait(1000); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]', { + timeout: 60000, + }) + .invoke('text') + .then(nextText => { + const lockedGlmsAfterLock = parseInt(nextText, 10); + expect(lockedGlms + amountToLock).to.be.eq(lockedGlmsAfterLock); + }); + cy.get('[data-test=TransactionsListItem__title]') + .first() + .should('have.text', 'Locked GLM'); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') + .first() + .should('have.text', `${amountToLock} GLM`); + cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') + .first() + .should('have.text', `$${(amountToLock * GLM_USD).toFixed(2)}`); + + cy.get('[data-test=TransactionsListItem]').first().click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') + .invoke('text') + .should('eq', `${amountToLock} GLM`); + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') + .invoke('text') + .should('eq', `$${(amountToLock * GLM_USD).toFixed(2)}`); + + cy.get('[data-test=ModalTransactionDetails__Button]').click(); + cy.get('[data-test=ModalTransactionDetails]').should('not.exist'); + }); + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('Wallet connected: Unlock 1 GLM', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeView]').scrollIntoView(); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]').should( + 'not.exist', + ); + cy.wait(1000); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]') + .invoke('text') + .then(text => { + const amountToUnlock = 1; + const lockedGlms = parseInt(text, 10); + + cy.get('[data-test=HomeGridCurrentGlmLock__Button]').click(); + cy.get('[data-test=LockGlmTabs__tab--1]').click(); + cy.get('[data-test=InputsCryptoFiat__InputText--crypto]') + .clear() + .type(`${amountToUnlock}`); + cy.get('[data-test=LockGlmTabs__Button]').should('have.text', 'Unlock'); + cy.get('[data-test=LockGlmTabs__Button]').click(); + cy.get('[data-test=LockGlmTabs__Button]').should( + 'have.text', + 'Waiting for confirmation', + ); + cy.confirmMetamaskPermissionToSpend({ + spendLimit: '99999999999999999999', + }); + cy.get('[data-test=LockGlmTabs__Button]', { timeout: 60000 }).should( + 'have.text', + 'Close', + ); + cy.get('[data-test=LockGlmNotification--success]').should('be.visible'); + cy.get('[data-test=LockGlmTabs__Button]').click(); + cy.wait(5000); + cy.get('[data-test=HomeView]').scrollIntoView(); + cy.get( + '[data-test=HomeGridCurrentGlmLock--current__primary__DoubleValueSkeleton]', + ).should('not.exist'); + cy.wait(1000); + cy.get('[data-test=HomeGridCurrentGlmLock--current__primary]', { + timeout: 60000, + }) + .invoke('text') + .then(nextText => { + const lockedGlmsAfterUnlock = parseInt(nextText, 10); + expect(lockedGlms - amountToUnlock).to.be.eq(lockedGlmsAfterUnlock); + }); + cy.get('[data-test=TransactionsListItem__title]') + .first() + .should('have.text', 'Unlocked GLM'); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') + .first() + .should('have.text', `${amountToUnlock} GLM`); + cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') + .first() + .should('have.text', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); + + cy.get('[data-test=TransactionsListItem]').first().click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') + .invoke('text') + .should('eq', `${amountToUnlock} GLM`); + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') + .invoke('text') + .should('eq', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); + + cy.get('[data-test=ModalTransactionDetails__Button]').click(); + cy.get('[data-test=ModalTransactionDetails]').should('not.exist'); + + // Change main value to FIAT + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').uncheck(); + cy.get('[data-test=SettingsDrawer__closeButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').uncheck(); + cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); + } + + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]') + .first() + .should('have.text', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); + cy.get('[data-test=TransactionsListItem__DoubleValue__secondary]') + .first() + .should('have.text', `${amountToUnlock} GLM`); + + cy.get('[data-test=TransactionsListItem]').first().click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__primary]') + .invoke('text') + .should('eq', `$${(amountToUnlock * GLM_USD).toFixed(2)}`); + cy.get('[data-test=TransactionDetailsRest__amount__DoubleValue__secondary]') + .invoke('text') + .should('eq', `${amountToUnlock} GLM`); + + cy.get('[data-test=ModalTransactionDetails__Button]').click(); + + // Change main value to ETH + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check(); + cy.get('[data-test=SettingsDrawer__closeButton]').click(); + } else { + cy.get(`[data-test=LayoutNavbar__Button--settings]`).click(); + cy.get('[data-test=SettingsCryptoMainValueBox__InputToggle]').check(); + cy.get(`[data-test=LayoutNavbar__Button--home]`).click(); + } + }); + cy.disconnectMetamaskWalletFromAllDapps(); + }); + }); + }, +); diff --git a/client/cypress/e2e/_13allocationAWClosed.cy.ts b/client/cypress/e2e/_13allocationAWClosed.cy.ts new file mode 100644 index 0000000000..306e4f8cb4 --- /dev/null +++ b/client/cypress/e2e/_13allocationAWClosed.cy.ts @@ -0,0 +1,168 @@ +// 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.', () => { + cy.wait(1000); + // 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.', () => { + cy.wait(1000); + // 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.', () => { + cy.wait(1000); + // 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.wait(1000); + cy.get('[data-test=AllocationItem]').should('have.length', 3); + cy.wait(1000); + 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 - 120, + }) + .trigger('pointerup', { + pageX: allocationItemLeft - 200, + }); + + cy.wait(1000); + 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__Button--reset]').should('be.visible'); + cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); + }); + + it('User can`t confirm allocation', () => { + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.visible'); + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); + }); + }); + }, +); diff --git a/client/cypress/e2e/_15metrics.cy.ts b/client/cypress/e2e/_15metrics.cy.ts new file mode 100644 index 0000000000..60d2d9bf05 --- /dev/null +++ b/client/cypress/e2e/_15metrics.cy.ts @@ -0,0 +1,191 @@ +// 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, isMobile, isTablet }) => { + describe(`[AW IS OPEN] Metrics: ${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.metrics.absolute); + }); + + it('Metrics title is visible and has correct text', () => { + cy.get('[data-test=MetricsView__title]').should('be.visible'); + cy.get('[data-test=MetricsView__title]').invoke('text').should('eq', 'Explore the data'); + }); + + it('"Epoch" secion is visible', () => { + cy.get('[data-test=MetricsEpoch]').should('be.visible'); + }); + + it('"General" secion is visible', () => { + cy.get('[data-test=MetricsGeneral]').should('be.visible'); + }); + + it('"Epoch" section title is visible and has correct text', () => { + cy.get('[data-test=MetricsEpochHeader__title]').should('be.visible'); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); + }); + + it('"General" section title is visible and has correct text', () => { + cy.get('[data-test=MetricsGeneral__header__title]').should('be.visible'); + cy.get('[data-test=MetricsGeneral__header__title]') + .invoke('text') + .should('eq', 'General metrics'); + }); + + it('"Epoch" section title has "OPEN" badge when AW is open', () => { + cy.get('[data-test=MetricsEpochHeader__openBadge]').should('be.visible'); + cy.get('[data-test=MetricsEpochHeader__openBadge]').invoke('text').should('eq', 'Open'); + cy.get('[data-test=MetricsEpochHeader__openBadge]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#2d9b87'); + cy.get('[data-test=MetricsEpochHeader__openBadge]') + .then($el => $el.css('textTransform')) + .should('eq', 'uppercase'); + }); + + it('User is able to change epoch via arrow buttons', { scrollBehavior: false }, () => { + cy.get('[data-test=MetricsEpochHeader__NavigationArrows]').should('be.visible'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E2 Allocation' : 'Epoch 2 Allocation Window'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); + }); + + it('"Epoch" section title has epoch dates range when epoch is past', () => { + cy.get('[data-test=MetricsEpochHeader__openBadge]').should('be.visible'); + cy.get('[data-test=MetricsEpochHeader__epochDuration]').should('not.exist'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__openBadge]').should('not.exist'); + cy.get('[data-test=MetricsEpochHeader__epochDuration]').should('be.visible'); + }); + + it( + 'Next arrow button is disabled when there is no more next epochs', + { scrollBehavior: false }, + () => { + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fafafa'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrowSvg] path') + .then($el => $el.css('fill')) + .should('be.colored', '#ebebeb'); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__rightArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); + }, + ); + + it( + 'Prev arrow button is disabled when there is no more prev epochs ', + { scrollBehavior: false }, + () => { + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fafafa'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrowSvg] path') + .then($el => $el.css('fill')) + .should('be.colored', '#9ea39e'); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fafafa'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrowSvg] path') + .then($el => $el.css('fill')) + .should('be.colored', '#ebebeb'); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__title]') + .invoke('text') + .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); + }, + ); + + it('All tiles in "Epoch" section are visible in correct order', () => { + const metricsEpochGridTilesDataTest = [ + 'MetricsEpochGridTopProjects', + 'MetricsEpochGridFundsUsage', + 'MetricsEpochGridTotalUsers', + 'MetricsEpochGridPatrons', + 'MetricsEpochGridRewardsUnused', + 'MetricsEpochGridUnallocatedValue', + 'MetricsEpochGridTotalDonations', + 'MetricsEpochGridTotalMatchingFund', + 'MetricsEpochGridCurrentDonors', + 'MetricsEpochGridAverageLeverage', + 'MetricsEpochGridDonationsVsMatching', + 'MetricsEpochGridDonationsVsPersonalAllocations', + ]; + + cy.get('[data-test=MetricsEpoch__MetricsGrid]') + .children() + .should('have.length', metricsEpochGridTilesDataTest.length); + + for (let i = 0; i < metricsEpochGridTilesDataTest.length; i++) { + cy.get('[data-test=MetricsEpoch__MetricsGrid]') + .children() + .eq(i) + .invoke('data', 'test') + .should('eq', metricsEpochGridTilesDataTest[i]); + } + }); + + it('All tiles in "General" section are visible in correct order', () => { + const metricsGeneralGridTilesDataTest = [ + 'MetricsGeneralGridCumulativeGlmLocked', + 'MetricsGeneralGridWalletsWithGlmLocked', + 'MetricsGeneralGridTotalGlmLockedAndTotalSupply', + 'MetricsGeneralGridTotalProjects', + 'MetricsGeneralGridTotalEthStaked', + ]; + + cy.get('[data-test=MetricsGeneral__MetricsGrid]') + .children() + .should('have.length', metricsGeneralGridTilesDataTest.length); + + for (let i = 0; i < metricsGeneralGridTilesDataTest.length; i++) { + cy.get('[data-test=MetricsGeneral__MetricsGrid]') + .children() + .eq(i) + .invoke('data', 'test') + .should('eq', metricsGeneralGridTilesDataTest[i]); + } + }); + }); + }, +); diff --git a/client/cypress/e2e/_16allocationAWOpen.cy.ts b/client/cypress/e2e/_16allocationAWOpen.cy.ts new file mode 100644 index 0000000000..3169dd0ebe --- /dev/null +++ b/client/cypress/e2e/_16allocationAWOpen.cy.ts @@ -0,0 +1,858 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { connectWallet, 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_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop, isMobile }, idx) => { + describe(`[AW IS OPEN] Allocation: ${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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.home.absolute); + }); + + // TODO: Run for all devices after OCT-2283 (https://linear.app/golemfoundation/issue/OCT-2283/personal-allocation-arent-available-to-withdraw-in-pr-e2e-environment) + if (idx === 0) { + it('User doesn`t have personal rewards, can`t witdraw and can check pending tooltip', () => { + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]').should('be.disabled'); + cy.get('[data-test=HomeGridPersonalAllocation__Button]') + .invoke('text') + .should('eq', 'Withdraw to wallet'); + + cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').should('be.visible'); + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').trigger('mouseover'); + } else { + cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip]').click(); + } + + cy.get('[data-test=HomeGridPersonalAllocation--pending__Tooltip__content]').should( + 'exist', + ); + + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]') + .invoke('text') + .should('eq', 'Withdraw to wallet'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); + cy.wait(1000); + cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); + cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); + cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); + cy.get('[data-test=ModalWithdrawEth__Button]').click(); + cy.wait(1000); + cy.get('[data-test=ModalWithdrawEth]').should('not.exist'); + }); + } + + it('User with UQ score below 15 can allocate rewards to projects, ModalAllocationLowUqScore is shown to them', () => { + connectWallet({ isPatronModeEnabled: false, isUQScoreBelow15: true }); + cy.wait(5000); + if (isLargeDesktop || isDesktop) { + 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__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '3'); + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + } else { + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '3'); + cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); + } + + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Confirm'); + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').then($thumb => { + const { left: thumbLeft } = $thumb[0].getBoundingClientRect(); + const pageXStart = thumbLeft; + const pageXEnd = viewportWidth - 20; // px + + cy.get('[data-test=AllocationSliderBox__Slider__thumb]') + .trigger('mousedown', { pageX: pageXStart }) + .trigger('mousemove', { pageX: pageXEnd }) + .trigger('mouseup', { pageX: pageXEnd }); + + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('not.eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=AllocationItem__InputText]').each(el => { + expect(parseFloat(`${el.val()}`)).to.be.gt(0); + }); + + // reset + cy.get('[data-test=AllocationNavigation__Button--reset]').click(); + + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.get('[data-test=AllocationItem__InputText]').each(el => { + expect(parseFloat(`${el.val()}`)).to.be.eq(0); + }); + + cy.get('[data-test=AllocationSliderBox__Slider__thumb]') + .trigger('mousedown', { pageX: pageXStart }) + .trigger('mousemove', { pageX: pageXEnd }) + .trigger('mouseup', { pageX: pageXEnd }); + + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('not.eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=AllocationItem__InputText]').each(el => { + expect(parseFloat(`${el.val()}`)).to.be.gt(0); + }); + + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Confirm'); + cy.get('[data-test=AllocationNavigation__Button--cta]').click(); + cy.get('[data-test=ModalAllocationLowUqScore]').should('be.visible'); + cy.get('[data-test=AllocationLowUqScore__InputCheckbox]').check(); + cy.get('[data-test=AllocationLowUqScore__Button--cta]').click(); + cy.get('[data-test=ModalAllocationLowUqScore]').should('not.exist'); + cy.wait(500); + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Waiting'); + cy.confirmMetamaskDataSignatureRequest(); + cy.wait(1000); + cy.get('[data-test=AllocationSummary]').should('exist'); + cy.get('[data-test=AllocationSummaryProject]').should('have.length', 3); + cy.wait(1000); + cy.get('[data-test=AllocationSummary__totalDonated]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__totalDonated]').should('be.visible'); + cy.get('[data-test=AllocationSummary__totalDonated__value--loading]').should('not.exist'); + cy.get('[data-test=AllocationSummary__totalDonated__value]').then($totalDonated => { + expect(parseFloat(`${$totalDonated.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.get('[data-test=AllocationSummary__matchFunding]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__matchFunding]').should('be.visible'); + cy.get('[data-test=AllocationSummary__matchFunding__value--loading]').should('not.exist'); + cy.get('[data-test=AllocationSummary__matchFunding__value]').then($matchFunding => { + expect(parseFloat(`${$matchFunding.text()}`.replace('<', ''))).to.be.gt(0); + }); + cy.get('[data-test=AllocationSummary__totalImpact]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__totalImpact]').should('be.visible'); + cy.get('[data-test=AllocationSummary__totalImpact__value]').then($totalImpact => { + expect(parseFloat(`${$totalImpact.text()}`.replace('<', ''))).to.be.gt(0); + }); + cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').scrollIntoView(); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Edit'); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=AllocationDrawer__closeButton]').click(); + cy.get('[data-test=LayoutTopBar__link--home]').click(); + } else { + cy.get('[data-test=LayoutNavbar__Button--home]').click(); + } + cy.wait(1000); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]') + .invoke('text') + .should('eq', '3'); + + cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); + cy.get('[data-test=HomeGridDonations__Button--edit]').should('be.visible'); + cy.get('[data-test=DonationsList]').should('be.visible'); + cy.get('[data-test=DonationsList__item]').should('have.length', 3); + cy.get('[data-test=DonationsList__item__value]').each($donationListItemValue => { + expect(parseFloat(`${$donationListItemValue.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.get('[data-test=TransactionsListItem__title]') + .eq(0) + .invoke('text') + .should('eq', 'Allocated rewards'); + + cy.get('[data-test=TransactionsListItem__title]').eq(0).click(); + cy.wait(1000); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') + .invoke('text') + .should('eq', 'Projects (3)'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should( + 'be.visible', + ); + cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); + + cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should( + 'be.visible', + ); + cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); + cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); + cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 3); + }); + }); + + it('User can edit allocation and allocate everything to personal', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]') + .invoke('text') + .should('eq', '3'); + + cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); + cy.get('[data-test=HomeGridDonations__Button--edit]').should('be.visible'); + cy.get('[data-test=DonationsList]').should('be.visible'); + cy.get('[data-test=DonationsList__item]').should('have.length', 3); + + cy.get('[data-test=TransactionsListItem__title]') + .eq(0) + .invoke('text') + .should('eq', 'Allocated rewards'); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '3'); + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + } else { + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '3'); + cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); + } + cy.wait(1000); + + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); + cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); + cy.get('[data-test=AllocationSummary]').should('exist'); + cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); + + cy.get('[data-test=AllocationNavigation__Button--reset]') + .invoke('text') + .should('eq', 'Reset'); + cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--cta]').invoke('text').should('eq', 'Edit'); + cy.get('[data-test=AllocationNavigation__Button--cta]').click(); + + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').scrollIntoView(); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); + cy.get('[data-test=AllocationRewardsBox]').scrollIntoView(); + cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); + cy.get('[data-test=AllocationSummary]').should('not.exist'); + cy.get('[data-test=AllocationSummary__personalRewardBox]').should('not.exist'); + + cy.get('[data-test=AllocationSliderBox__section--0]').click(); + cy.wait(500); + cy.get('[data-test=ModalAllocationValuesEdit]').should('be.visible'); + cy.get('[data-test=AllocationInputs__InputText--crypto]').clear().type('0'); + cy.get('[data-test=AllocationInputs__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalAllocationValuesEdit]').should('not.exist'); + + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Confirm'); + cy.get('[data-test=AllocationNavigation__Button--cta]').click(); + cy.wait(500); + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Waiting'); + cy.confirmMetamaskDataSignatureRequest(); + cy.wait(1000); + + cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('not.be.visible'); + cy.get('[data-test=AllocationSummary]').should('not.exist'); + cy.get('[data-test=AllocationSummary__personalRewardBox]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__personalRewardBox]').should('be.visible'); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=AllocationDrawer__closeButton]').click(); + } else { + cy.get('[data-test=LayoutNavbar__Button--home]').click(); + } + cy.wait(1000); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]') + .invoke('text') + .should('eq', '0'); + cy.get('[data-test=DonationsList]').should('not.exist'); + cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('be.visible'); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('not.exist'); + } else { + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('not.exist'); + } + + cy.get('[data-test=TransactionsListItem__title]') + .eq(0) + .invoke('text') + .should('eq', 'Personal allocation'); + + cy.wait(1000); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); + cy.get('[data-test=TransactionsListItem]').eq(0).click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') + .invoke('text') + .should('not.eq', '0 ETH'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should('not.exist'); + cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); + + cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('not.exist'); + cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); + cy.get('[data-tes2st=TransactionDetailsAllocation__projects]').should('not.exist'); + }); + + it('User can edit allocation by clicking on `Edit` button in Donations tile (HomeView) and allocate 50% to Personal and 50% to four projects', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + if (isLargeDesktop || isDesktop) { + 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(); + cy.get('[data-test=ProjectsListItem__ButtonAddToAllocate]').eq(3).click(); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').invoke('text').should('eq', '4'); + cy.get('[data-test=LayoutTopBar__link--home]').click(); + } else { + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').invoke('text').should('eq', '4'); + cy.get('[data-test=LayoutNavbar__Button--home]').click(); + } + + cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]') + .invoke('text') + .should('eq', '0'); + cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__Button--edit]').click(); + + cy.wait(1000); + cy.get('[data-test=AllocationSliderBox]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox__Slider__thumb]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox__section__value--0]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=AllocationSliderBox__section__value--1]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.wait(5000); + + cy.get('[data-test=AllocationItem]').should('have.length', 4); + cy.get('[data-test=AllocationItem__InputText]').each(el => { + expect(parseFloat(`${el.val()}`)).to.be.eq(0); + }); + + cy.get('[data-test=AllocationSliderBox__section--1]').click(); + cy.wait(500); + cy.get('[data-test=ModalAllocationValuesEdit]').should('be.visible'); + cy.get('[data-test=AllocationInputs__InputText--percentage]').clear().type('50'); + cy.get('[data-test=AllocationInputs__Button]').click(); + cy.wait(500); + cy.get('[data-test=ModalAllocationValuesEdit]').should('not.exist'); + + cy.get('[data-test=AllocationItem__InputText]').each(el => { + expect(parseFloat(`${el.val()}`)).to.be.gt(0); + }); + + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Confirm'); + cy.get('[data-test=AllocationNavigation__Button--cta]').click(); + cy.wait(500); + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Waiting'); + cy.confirmMetamaskDataSignatureRequest(); + cy.wait(1000); + cy.get('[data-test=AllocationSummary]').should('exist'); + cy.get('[data-test=AllocationSummaryProject]').should('have.length', 4); + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=AllocationDrawer__closeButton]').click(); + } else { + cy.get('[data-test=LayoutNavbar__Button--home]').click(); + } + cy.wait(1000); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]').should('be.visible'); + cy.get('[data-test=HomeGridDonations__numberOfAllocations]') + .invoke('text') + .should('eq', '4'); + + cy.get('[data-test=HomeGridDonations__noDonationsYet]').should('not.exist'); + cy.get('[data-test=DonationsList]').should('be.visible'); + cy.get('[data-test=DonationsList__item]').should('have.length', 4); + cy.get('[data-test=DonationsList__item__value]').each($donationListItemValue => { + expect(parseFloat(`${$donationListItemValue.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.wait(2500); + cy.get('[data-test=TransactionsListItem__title]') + .eq(0) + .invoke('text') + .should('eq', 'Allocated rewards'); + + cy.wait(1000); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); + cy.get('[data-test=TransactionsListItem]').eq(0).click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') + .invoke('text') + .should('not.eq', '0 ETH'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') + .invoke('text') + .should('eq', 'Projects (4)'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should('not.exist'); + cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); + cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); + cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 4); + }); + + it('User has pending personal rewards', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]') + .invoke('text') + .should('eq', 'Withdraw to wallet'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); + cy.wait(1000); + cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); + cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); + cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); + }); + + it('Epoch results graph shows donated projects', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=EpochResults__Img--headphonesGirl]').should('not.exist'); + cy.get('[data-test=EpochResultsDetails]').should('be.visible'); + cy.get('[data-test=EpochResultsDetails__loading]').should('not.exist'); + cy.get('[data-test=EpochResultsBar]').should('have.length', 4); + + if (isMobile) { + cy.get('[data-test=EpochResultsBar]').eq(0).click(); + } else { + cy.get('[data-test=EpochResultsBar]').eq(0).trigger('mouseover'); + } + + cy.get('[data-test=EpochResultsBar__projectLogo]').should('be.visible'); + cy.get('[data-test=EpochResultsDetails__projectName]').should('be.visible'); + cy.get('[data-test=EpochResultsDetails__donations]').should('be.visible'); + cy.get('[data-test=EpochResultsDetails__matching]').should('be.visible'); + cy.get('[data-test=EpochResultsDetails__total]').should('be.visible'); + if (!isMobile) { + cy.get('[data-test=EpochResultsDetails__Button--visitProject]').should('be.visible'); + } + }); + }); + + 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('move time to closed AW', () => { + setupAndMoveToPlayground(); + + cy.window().then(async win => { + moveTime(win, 'decisionWindowClosed').then(() => { + cy.get('[data-test=PlaygroundView]').should('be.visible'); + const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData( + QUERY_KEYS.isDecisionWindowOpen, + ); + expect(isDecisionWindowOpenAfter).to.be.false; + }); + }); + }); + }); + + describe( + `[AW IS CLOSED] After allocation: ${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(() => { + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.home.absolute); + }); + + it('Donations tile shows donations history and the last transaction is the last user allocation', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=TransactionsListItem__DoubleValue__DoubleValueSkeleton]').should( + 'not.exist', + ); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); + + cy.get('[data-test=HomeGridDonations__title]') + .invoke('text') + .should('eq', 'Donation history'); + cy.get('[data-test=DonationsList__item]').should('have.length.gte', 4); + + cy.get('[data-test=TransactionsListItem__title]') + .eq(0) + .invoke('text') + .should('eq', 'Allocated rewards'); + + cy.wait(1000); + cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist'); + cy.get('[data-test=TransactionsListItem]').eq(0).click(); + cy.get('[data-test=ModalTransactionDetails]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]') + .invoke('text') + .should('not.eq', '0 ETH'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects__label]') + .invoke('text') + .should('eq', 'Projects (4)'); + cy.get('[data-test=TransactionDetailsAllocation__allocationProjects]').should( + 'be.visible', + ); + cy.get('[data-test=TransactionDetailsAllocation__finalMatchFunding]').should( + 'be.visible', + ); + cy.get('[data-test=TransactionDetailsAllocation__estimatedLeverage]').should('not.exist'); + cy.get('[data-test=TransactionDetailsAllocation__projects]').scrollIntoView(); + cy.get('[data-test=TransactionDetailsAllocation__projects]').should('be.visible'); + cy.get('[data-test=TransactionDetailsAllocation__when]').should('be.visible'); + cy.get('[data-test=ProjectAllocationDetailRow]').should('have.length', 4); + }); + + it('Allocation summary is visible and allocation action buttons are disabled', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + if (isLargeDesktop || isDesktop) { + cy.get('[data-test=LayoutTopBar__numberOfAllocations]').should('not.exist'); + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + } else { + cy.get('[data-test=LayoutNavbar__numberOfAllocations]').should('not.exist'); + cy.get('[data-test=LayoutNavbar__Button--allocate]').click(); + } + + cy.wait(1000); + + cy.get('[data-test=AllocationRewardsBox]').scrollIntoView(); + cy.get('[data-test=AllocationRewardsBox]').should('be.visible'); + cy.get('[data-test=AllocationSliderBox]').should('not.exist'); + + cy.get('[data-test=AllocationSummary]').should('exist'); + cy.get('[data-test=AllocationSummaryProject]').should('have.length', 4); + cy.wait(1000); + cy.get('[data-test=AllocationSummary__totalDonated]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__totalDonated]').should('be.visible'); + cy.get('[data-test=AllocationSummary__totalDonated__value--loading]').should('not.exist'); + cy.get('[data-test=AllocationSummary__totalDonated__value]').then($totalDonated => { + expect(parseFloat(`${$totalDonated.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.get('[data-test=AllocationSummary__matchFunding]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__matchFunding]').should('be.visible'); + cy.get('[data-test=AllocationSummary__matchFunding__value--loading]').should('not.exist'); + cy.get('[data-test=AllocationSummary__matchFunding__value]').then($matchFunding => { + expect(parseFloat(`${$matchFunding.text()}`.replace('<', ''))).to.be.gt(0); + }); + cy.get('[data-test=AllocationSummary__totalImpact]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__totalImpact]').should('be.visible'); + cy.get('[data-test=AllocationSummary__totalImpact__value]').then($totalImpact => { + expect(parseFloat(`${$totalImpact.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.get('[data-test=AllocationSummary__personalRewardBox]').scrollIntoView(); + cy.get('[data-test=AllocationSummary__personalRewardBox]').should('be.visible'); + cy.get('[data-test=AllocationSummary__personalReward--loading]').should('not.exist'); + cy.get('[data-test=AllocationSummary__personalReward]').then($personalReward => { + expect(parseFloat(`${$personalReward.text()}`.replace('<', ''))).to.be.gt(0); + }); + + cy.get('[data-test=AllocationNavigation__Button--reset]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--reset]') + .invoke('text') + .should('eq', 'Reset'); + + cy.get('[data-test=AllocationNavigation__Button--cta]').should('be.disabled'); + cy.get('[data-test=AllocationNavigation__Button--cta]') + .invoke('text') + .should('eq', 'Edit'); + }); + + it('User has pending personal rewards', () => { + connectWallet({ isPatronModeEnabled: false }); + cy.wait(5000); + + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + .invoke('text') + .should('eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + .invoke('text') + .should('not.eq', '0 ETH'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]') + .invoke('text') + .should('eq', 'Withdraw to wallet'); + + cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); + cy.wait(1000); + cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); + cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); + cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); + }); + }, + ); + + describe('move time - AW IS OPEN', () => { + 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('move time to the next open AW', () => { + setupAndMoveToPlayground(); + + cy.window().then(async win => { + moveTime(win, 'nextEpochDecisionWindowOpen').then(() => { + cy.get('[data-test=PlaygroundView]').should('be.visible'); + const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData( + QUERY_KEYS.isDecisionWindowOpen, + ); + expect(isDecisionWindowOpenAfter).to.be.true; + }); + }); + }); + }); + + // TODO: To do after OCT-2283 (https://linear.app/golemfoundation/issue/OCT-2283/personal-allocation-arent-available-to-withdraw-in-pr-e2e-environment) + // describe(`[AW IS OPEN] After allocation: ${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(() => { + // mockCoinPricesServer(); + // localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + // localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + // localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + // visitWithLoader(ROOT_ROUTES.home.absolute); + // }); + + // it('User has personal rewards, can withdraw rewards to wallet and the last transaction is "Withdrawn funds"', () => { + // connectWallet({ isPatronModeEnabled: false }); + // cy.wait(5000); + + // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); + // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + // .invoke('text') + // .should('not.eq', '0 ETH'); + + // cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + // cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + // .invoke('text') + // .should('eq', '0 ETH'); + + // cy.get('[data-test=HomeGridPersonalAllocation__Button]') + // .invoke('text') + // .should('eq', 'Withdraw to wallet'); + + // cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); + + // cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); + // cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); + // cy.get('[data-test=WithdrawEth__Section--amount__DoubleValueSkeleton]').should('not.exist'); + // cy.get('[data-test=WithdrawEth__Section--estGasPrice__DoubleValueSkeleton]').should( + // 'not.exist', + // ); + // cy.get('[data-test=WithdrawEth__Button]').click(); + // cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); + // cy.get('[data-test=WithdrawEth__Button]') + // .invoke('text') + // .should('eq', 'Waiting for confirmation'); + + // cy.confirmMetamaskTransaction({ gasConfig: 'aggressive' }); + // cy.wait(2500); + + // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__DoubleValueSkeleton]').should( + // 'not.exist', + // ); + // cy.get('[data-test=HomeGridPersonalAllocation--pending__DoubleValueSkeleton]').should( + // 'not.exist', + // ); + + // cy.wait(1000); + + // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current]').should('be.visible'); + // cy.get('[data-test=HomeGridPersonalAllocation__DoubleValue--current__primary]') + // .invoke('text') + // .should('eq', '0 ETH'); + + // cy.get('[data-test=HomeGridPersonalAllocation__Section--pending]').should('be.visible'); + // cy.get('[data-test=HomeGridPersonalAllocation--pending__primary]') + // .invoke('text') + // .should('eq', '0 ETH'); + + // cy.get('[data-test=TransactionsListItem__title]') + // .eq(0) + // .invoke('text') + // .should('eq', 'Withdrawn funds'); + + // cy.get('[data-test=HomeGridPersonalAllocation__Button]').click(); + // cy.wait(1000); + // cy.get('[data-test=ModalWithdrawEth]').should('be.visible'); + // cy.get('[data-test=WithdrawEth__Button]').invoke('text').should('eq', 'Withdraw all'); + // cy.get('[data-test=WithdrawEth__Button]').should('be.disabled'); + // }); + // }); + }, +); diff --git a/client/cypress/e2e/_17project.cy.ts b/client/cypress/e2e/_17project.cy.ts new file mode 100644 index 0000000000..15e99a9181 --- /dev/null +++ b/client/cypress/e2e/_17project.cy.ts @@ -0,0 +1,304 @@ +import { + changeMainValueToCryptoToggle, + // changeMainValueToFiat, + checkProjectsViewLoaded, + connectWallet, + mockCoinPricesServer, + visitWithLoader, +} from 'cypress/utils/e2e'; +import { getNamesOfProjects } from 'cypress/utils/projects'; +import viewports from 'cypress/utils/viewports'; +import { + HAS_ONBOARDING_BEEN_CLOSED, + IS_CRYPTO_MAIN_VALUE_DISPLAY, + IS_ONBOARDING_ALWAYS_VISIBLE, + IS_ONBOARDING_DONE, +} from 'src/constants/localStorageKeys'; +import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +import Chainable = Cypress.Chainable; + +const getButtonAddToAllocate = (): Chainable => { + const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); + + return projectListItemFirst + .find('[data-test=ProjectListItemHeader__ButtonAddToAllocate]') + .filter(':visible'); +}; + +const checkProjectItemElements = (areMiddleSectionsVisible: boolean): Chainable => { + cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); + cy.wait(2000); + const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); + projectListItemFirst.get('[data-test=ProjectListItemHeader__Img]').should('be.visible'); + projectListItemFirst.get('[data-test=ProjectListItemHeader__name]').should('be.visible'); + getButtonAddToAllocate().should('be.visible'); + projectListItemFirst + .get('[data-test=ProjectListItemHeader__ButtonAddToAllocate]') + .should('be.visible'); + projectListItemFirst.get('[data-test=ProjectListItem__Description]').should('be.visible'); + projectListItemFirst.get('[data-test=ProjectRewards__currentTotal__label]').should('be.visible'); + + if (areMiddleSectionsVisible) { + projectListItemFirst + .get('[data-test=ProjectRewards__donationsToDisplay__label]') + .should('be.visible'); + projectListItemFirst + .get('[data-test=ProjectRewards__matchFunding__label]') + .should('be.visible'); + } + + projectListItemFirst.get('[data-test=ProjectRewards__donors]').should('be.visible'); + + if (areMiddleSectionsVisible) { + projectListItemFirst.get('[data-test=ProjectRewards__donors]').click(); + } else { + projectListItemFirst.get('[data-test=ProjectRewards__Button--donors]').click(); + } + cy.get('[data-test^=ModalFullDonorsList').should('be.visible'); + cy.get('[data-test^=ModalFullDonorsList__Button').click(); + cy.get('[data-test^=ModalFullDonorsList').should('not.exist'); + + // There are two in DOM, one needs to be visible. + projectListItemFirst + .get('[data-test=ProjectListItemButtonsWebsiteAndShare__websiteLink]') + .filter(':visible') + .should('be.visible'); + + // There are two in DOM, one needs to be visible. + const buttonShare = projectListItemFirst + .get('[data-test=ProjectListItemButtonsWebsiteAndShare__Tooltip]') + .filter(':visible'); + + buttonShare.should('be.visible'); + // buttonShare.click(); + // cy.window().then(win => { + // buttonShare.click(); + // win.navigator.clipboard.readText().then(text => { + // expect(text).to.eq(cy.url()); + // }); + // }); + cy.get('[data-test=ProjectMilestones]') + .first() + .find('[data-test=ProjectMilestonesNoResults]') + .scrollIntoView() + .should('be.visible'); + return cy + .get('[data-test=ProjectMilestones]') + .first() + .find('[data-test=ProjectMilestonesNoResults__header]') + .invoke('text') + .should('eq', 'Nothing to report yet. Check back again soon'); +}; + +const getHeartedProjectsIndicator = (isNavbarVisible: boolean): Chainable => { + return cy.get( + isNavbarVisible + ? '[data-test=LayoutNavbar__numberOfAllocations]' + : '[data-test=LayoutTopBar__numberOfAllocations]', + ); +}; + +const checkHeartedProjectsIndicator = (isNavbarVisible: boolean, number = 1): Chainable => { + return getHeartedProjectsIndicator(isNavbarVisible).contains(number); +}; + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isMobile, isTablet }) => { + describe(`[AW IS OPEN] Project: ${device}`, { viewportHeight, viewportWidth }, () => { + const projectNames: string[] = []; + + 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.projects.absolute); + cy.wait(2000); + + // checkProjectsViewLoaded(); + + /** + * This could be done in before hook, but CY wipes the state after each test + * (could be disabled, but creates other problems) + */ + // if (projectNames.length === 0) { + // projectNames = getNamesOfProjects(); + // } + }); + + it('entering project view directly renders content', () => { + cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); + cy.reload(); + const projectListItemFirst = cy.get('[data-test=ProjectListItem').first(); + projectListItemFirst.get('[data-test=ProjectListItemHeader__Img]').should('be.visible'); + projectListItemFirst.get('[data-test=ProjectListItemHeader__name]').should('be.visible'); + }); + + it('entering project view renders all its elements', () => { + checkProjectItemElements(!isMobile && !isTablet); + }); + + it('entering project view renders all its elements with fallback IPFS provider', () => { + cy.intercept('GET', '**/ipfs/**', req => { + if (req.url.includes('infura')) { + req.destroy(); + } + }); + + checkProjectItemElements(!isMobile && !isTablet); + }); + + it('entering project view allows to add it to allocation and remove, triggering change of the icon, change of the number in navbar', () => { + cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); + + getButtonAddToAllocate().click(); + checkHeartedProjectsIndicator(isMobile || isTablet); + getButtonAddToAllocate().click(); + getHeartedProjectsIndicator(isMobile || isTablet).should('not.exist'); + }); + + it('Entering project view allows scroll only to the last project', () => { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); + + for (let i = 0; i < projectNames.length; i++) { + cy.get('[data-test=ProjectListItem]').should( + 'have.length.greaterThan', + i === projectNames.length - 1 ? projectNames.length - 1 : i, + ); + cy.get('[data-test=ProjectListItemHeader__name]') + .eq(i) + .scrollIntoView({ offset: { left: 0, top: -150 } }) + .should('be.visible'); + cy.get('[data-test=ProjectMilestones]') + .eq(i) + .scrollIntoView({ offset: { left: 0, top: 100 } }) + .should('be.visible'); + } + }); + + it('"Back to top" button is displayed if the user has scrolled past the start of the final project description', () => { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); + + for (let i = 0; i < projectNames.length - 1; i++) { + cy.get('[data-test=ProjectMilestones]') + .eq(i) + .scrollIntoView({ offset: { left: 0, top: 100 } }); + + if (i === projectNames.length - 1) { + cy.get('[data-test=ProjectBackToTopButton__Button]').should('be.visible'); + } + } + }); + + it('Clicking on "Back to top" button scrolls to the top of view (first project is visible)', () => { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').first().click(); + + for (let i = 0; i < projectNames.length - 1; i++) { + cy.get('[data-test=ProjectMilestones]') + .eq(i) + .scrollIntoView({ offset: { left: 0, top: 100 } }); + + if (i === projectNames.length - 1) { + cy.get('[data-test=ProjectBackToTopButton__Button]').click(); + cy.get('[data-test=ProjectListItem]').eq(0).should('be.visible'); + } + } + }); + + it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: true)`, () => { + changeMainValueToCryptoToggle(!isMobile && !isTablet, 'crypto'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + cy.wait(2000); + cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); + cy.get('[data-test=ProjectRewards__currentTotal__number]') + .first() + .invoke('text') + .should('eq', '0 ETH'); + }); + + it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: false)`, () => { + changeMainValueToCryptoToggle(!isMobile && !isTablet, 'fiat'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + cy.wait(2000); + cy.get('[data-test^=ProjectsView__ProjectsListItem').first().click(); + cy.get('[data-test=ProjectRewards__currentTotal__number]') + .first() + .invoke('text') + .should('eq', '$0.00'); + }); + }); + + describe(`projects (IPFS failure): ${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', '**/ipfs/**', req => { + req.destroy(); + }); + + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + cy.wait(2000); + }); + + it('entering project view shows Toast with info about IPFS failure when all providers fail', () => { + cy.get('[data-test=Toast--ipfsMessage').should('be.visible'); + }); + }); + + describe(`project (patron mode): ${device}`, { viewportHeight, viewportWidth }, () => { + let projectNames: string[] = []; + + 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(() => { + mockCoinPricesServer(); + localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false'); + localStorage.setItem(IS_ONBOARDING_DONE, 'true'); + localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.projects.absolute); + cy.wait(2000); + connectWallet({ isPatronModeEnabled: true }); + checkProjectsViewLoaded(); + + /** + * This could be done in before hook, but CY wipes the state after each test + * (could be disabled, but creates other problems) + */ + if (projectNames.length === 0) { + projectNames = getNamesOfProjects(); + } + }); + + after(() => { + cy.disconnectMetamaskWalletFromAllDapps(); + }); + + it('button "add to allocate" is disabled', () => { + for (let i = 0; i < projectNames.length; i++) { + cy.get('[data-test^=ProjectsView__ProjectsListItem]').eq(i).click(); + getButtonAddToAllocate().should('be.visible').should('be.disabled'); + cy.go('back'); + } + }); + }); + }, +); diff --git a/client/cypress/e2e/_18antisybil.cy.ts b/client/cypress/e2e/_18antisybil.cy.ts new file mode 100644 index 0000000000..26c1be69ba --- /dev/null +++ b/client/cypress/e2e/_18antisybil.cy.ts @@ -0,0 +1,84 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { connectWallet, 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 }) => { + describe(`[AW IS OPEN] Antisybil: ${device}`, { viewportHeight, viewportWidth }, () => { + before(() => { + cy.clearLocalStorage(); + + /** + * 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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + visitWithLoader(ROOT_ROUTES.home.absolute); + }); + + it('Sybil user has to accept "no matching fund" rule to close the modal and not to see it anymore. Sybil user sees a badge with `Sybil account` info.', () => { + connectWallet({ isPatronModeEnabled: false, isSybil: true }); + cy.wait(5000); + + cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); + cy.get('[data-test=ModalTimeoutListPresence__overflow]').should('exist'); + cy.get('[data-test=ModalTimeoutListPresence__overflow]').click({ force: true }); + cy.wait(500); + cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); + cy.reload(); + cy.wait(1000); + cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible'); + cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('not.be.checked'); + cy.get('[data-test=ModalTimeoutListPresence__Button--form]').should('not.be.disabled'); + cy.get('[data-test=ModalTimeoutListPresence__Button--form]') + .invoke('attr', 'href') + .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus'); + cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('be.disabled'); + cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').check(); + cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('be.checked'); + cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('not.be.disabled'); + cy.get('[data-test=ModalTimeoutListPresence__Button--close]').click(); + cy.wait(500); + cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist'); + cy.get('[data-test=HomeGridUQScore]').scrollIntoView(); + cy.get('[data-test=HomeGridUQScoreAddresses]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#fffbf2'); + cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel]').should('be.visible'); + cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#f6c54b'); + cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]') + .invoke('text') + .should('eq', 'Sybil account'); + cy.get('[data-test=HomeGridUQScore__Button--form]').should('be.visible'); + cy.get('[data-test=HomeGridUQScore__Button--form]') + .invoke('text') + .should('eq', 'Want to dispute sybil status? Please use this form'); + cy.get('[data-test=HomeGridUQScore__Button--form]') + .invoke('attr', 'href') + .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus'); + cy.reload(); + cy.wait(1000); + cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist'); + }); + }); +}); diff --git a/client/cypress/e2e/_19rewardsEstimator.cy.ts b/client/cypress/e2e/_19rewardsEstimator.cy.ts new file mode 100644 index 0000000000..e0f19ec162 --- /dev/null +++ b/client/cypress/e2e/_19rewardsEstimator.cy.ts @@ -0,0 +1,234 @@ +// 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, ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => { + describe( + `[AW IS OPEN] Home rewards estimator: ${device}`, + { viewportHeight, viewportWidth }, + () => { + before(() => { + cy.clearLocalStorage(); + }); + + beforeEach(() => { + mockCoinPricesServer(); + cy.intercept('POST', '/rewards/estimated_budget', req => { + const budgetBase = 1522070616415; // 1 GLM | 1 epoch + const matchedFundingBase = 26329686088561; // 1 GLM | 1 epoch + const { glmAmount: glmAmountWei, numberOfEpochs } = req.body; + const glm = glmAmountWei / 1000000000000000000; + + if (glm < 100) { + req.reply({ + budget: '0', + matchedFunding: '0', + }); + return; + } + + req.reply({ + budget: `${budgetBase * glm * numberOfEpochs}`, + matchedFunding: `${matchedFundingBase * glm * numberOfEpochs}`, + }); + }); + + 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('Rewards estimator by default shows estimation for 5000 GLM and 90 days with UQ15+', () => { + cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should('be.checked'); + cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]') + .invoke('val') + .should('eq', '5000'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__label]') + .invoke('text') + .should('eq', 'Lock for 1 epoch'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--1]') + .then($el => $el.css('color')) + .should('be.colored', '#171717'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--1]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ebebeb'); + + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0.0076 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '0.1316 ETH'); + }); + + it('Rewards estimator shows 0 ETH rewards and match funding for GLM amount under 100', () => { + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('100'); + + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0.0002 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '0.0026 ETH'); + + cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('99'); + + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '0 ETH'); + + if (isMobile) { + cy.get('[data-test=HomeGridTransactions]').scrollIntoView({ + offset: { left: 0, top: 100 }, + }); + } + cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').uncheck({ + scrollBehavior: isMobile ? false : 'top', + }); + cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should( + 'not.be.checked', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '0 ETH'); + }); + + it('User can change amount of GLM, DAYS and value of UQ15+ toggle', () => { + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimator__InputText--glm]').clear().type('100000'); + + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0.1522 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '2.633 ETH'); + + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__option--2]').click(); + + cy.wait(500); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--1]') + .then($el => $el.css('color')) + .should('be.colored', '#cdd1cd'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--1]').should( + 'not.exist', + ); + + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__label]') + .invoke('text') + .should('eq', 'Lock for 2 epochs'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionLabel--2]') + .then($el => $el.css('color')) + .should('be.colored', '#171717'); + cy.get('[data-test=HomeGridRewardsEstimatorEpochDaysSelector__optionBackground--2]') + .then($el => $el.css('backgroundColor')) + .should('be.colored', '#ebebeb'); + + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding--loading]').should( + 'not.exist', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]').should( + 'be.visible', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]').should('be.visible'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0.3044 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '5.2659 ETH'); + + if (isMobile) { + cy.get('[data-test=HomeGridTransactions]').scrollIntoView({ + offset: { left: 0, top: 100 }, + }); + } + cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').uncheck({ + scrollBehavior: isMobile ? false : 'top', + }); + + cy.get('[data-test=HomeGridRewardsEstimatorUqSelector__InputToggle]').should( + 'not.be.checked', + ); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__estimatedRewards]') + .invoke('text') + .should('eq', '0.3044 ETH'); + cy.get('[data-test=HomeGridRewardsEstimatorEstimates__matchFunding]') + .invoke('text') + .should('eq', '0.5266 ETH'); + }); + // + }, + ); +}); diff --git a/client/cypress/e2e/_20languageSelection.cy.ts b/client/cypress/e2e/_20languageSelection.cy.ts new file mode 100644 index 0000000000..26a93103e1 --- /dev/null +++ b/client/cypress/e2e/_20languageSelection.cy.ts @@ -0,0 +1,109 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import chaiColors from 'chai-colors'; + +import { checkLocationWithLoader, 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 { languageKey } from 'src/i18n/languages'; +import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; + +chai.use(chaiColors); + +Object.values(viewports).forEach( + ({ device, viewportWidth, viewportHeight, isDesktop, isLargeDesktop }) => { + const isDesktopSize = isDesktop || isLargeDesktop; + + describe( + `[AW IS CLOSED] Language selection: ${device}`, + { viewportHeight, viewportWidth }, + () => { + before(() => { + cy.clearLocalStorage(); + + /** + * 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(HAS_ONBOARDING_BEEN_CLOSED, 'true'); + }); + + it(`shows LayoutTopBar__Button label in ${languageKey.esEs} when window.navigator.language indicates ${languageKey.esEs}`, () => { + visitWithLoader(ROOT_ROUTES.projects.absolute, ROOT_ROUTES.projects.absolute, { + onBeforeLoad(win) { + // DOES NOT WORK + // Uncaught TypeError: Cannot assign to read only property + // 'language' of object '[object Navigator]' + // win.navigator.language = 'es-ES' + + // instead we need to define a property like this + Object.defineProperty(win.navigator, 'language', { + value: languageKey.esEs, + }); + }, + }); + cy.contains( + '[data-test=LayoutTopBar__Button]', + isDesktopSize ? 'Conectar billetera' : 'Conectar', + ).should('be.visible'); + }); + + it('"Language" option works', () => { + visitWithLoader( + ROOT_ROUTES.settings.absolute, + isLargeDesktop || isDesktop ? ROOT_ROUTES.home.absolute : ROOT_ROUTES.settings.absolute, + ); + + if (isDesktopSize) { + cy.get('[data-test=SettingsDrawer]').should('be.visible'); + } else { + checkLocationWithLoader(ROOT_ROUTES.settings.absolute); + } + cy.get('[data-test=SettingsLanguageSelectorBox__InputSelect]').click(); + cy.get( + `[data-test=SettingsLanguageSelectorBox__InputSelect__Option--${languageKey.enEn}]`, + ).click(); + + if (isDesktopSize) { + cy.get('[data-test=SettingsDrawer__closeButton]').click(); + } + + cy.contains( + '[data-test=LayoutTopBar__Button]', + isDesktopSize ? 'Connect wallet' : 'Connect', + ).should('be.visible'); + + if (isDesktopSize) { + cy.get('[data-test=LayoutTopBar__settingsButton]').click(); + } + + cy.get('[data-test=SettingsLanguageSelectorBox__InputSelect]').click(); + cy.get( + `[data-test=SettingsLanguageSelectorBox__InputSelect__Option--${languageKey.esEs}]`, + ).click(); + + if (isDesktopSize) { + cy.get('[data-test=SettingsDrawer__closeButton]').click(); + } + + cy.contains( + '[data-test=LayoutTopBar__Button]', + isDesktopSize ? 'Conectar billetera' : 'Conectar', + ).should('be.visible'); + }); + }, + ); + }, +); diff --git a/client/cypress/e2e/_17projects.cy.ts b/client/cypress/e2e/_21projects.cy.ts similarity index 80% rename from client/cypress/e2e/_17projects.cy.ts rename to client/cypress/e2e/_21projects.cy.ts index 32c855a765..4bc91503f1 100644 --- a/client/cypress/e2e/_17projects.cy.ts +++ b/client/cypress/e2e/_21projects.cy.ts @@ -16,7 +16,6 @@ import { IS_CRYPTO_MAIN_VALUE_DISPLAY, IS_ONBOARDING_DONE, } from 'src/constants/localStorageKeys'; -import getMilestones from 'src/constants/milestones'; import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes'; import { ORDER_OPTIONS } from 'src/views/ProjectsView/utils'; @@ -24,30 +23,6 @@ import Chainable = Cypress.Chainable; chai.use(chaiColors); -// 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; -// }); -// }); -// }); -// }); - function checkProjectItemElements( index: number, name: string, @@ -124,14 +99,14 @@ function addProjectToAllocate( getHeartedProjectsIndicator(isNavbarVisible).contains(numberOfAddedProjects + 1); if (isNavbarVisible) { - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - cy.get('[data-test=AllocationDrawer]').should('be.visible'); - } else { visitWithLoader( ROOT_ROUTES.allocation.absolute, isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, ); cy.get('[data-test=AllocationView]').should('be.visible'); + } else { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); } cy.get('[data-test=AllocationItem]').should('have.length', numberOfAddedProjects + 1); @@ -155,14 +130,14 @@ function removeProjectFromAllocate( .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') .click(); if (isNavbarVisible) { - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - cy.get('[data-test=AllocationDrawer]').should('be.visible'); - } else { visitWithLoader( ROOT_ROUTES.allocation.absolute, isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, ); cy.get('[data-test=AllocationView]').should('be.visible'); + } else { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); } cy.get('[data-test=AllocationItem]').should('have.length', numberOfAddedProjects - 1); if (index < numberOfProjects - 1) { @@ -170,7 +145,10 @@ function removeProjectFromAllocate( } else { getHeartedProjectsIndicator(isNavbarVisible).should('not.exist'); } - return cy.go('back'); + + return isNavbarVisible + ? cy.go('back') + : cy.get('[data-test=AllocationDrawer__closeButton]').click(); } Object.values(viewports).forEach( @@ -226,14 +204,14 @@ Object.values(viewports).forEach( const isNavbarVisible = isMobile || isTablet; if (isNavbarVisible) { - cy.get('[data-test=LayoutTopBar__allocationButton]').click(); - cy.get('[data-test=AllocationDrawer]').should('be.visible'); - } else { visitWithLoader( ROOT_ROUTES.allocation.absolute, isNavbarVisible ? ROOT_ROUTES.allocation.absolute : ROOT_ROUTES.home.absolute, ); cy.get('[data-test=AllocationView]').should('be.visible'); + } else { + cy.get('[data-test=LayoutTopBar__allocationButton]').click(); + cy.get('[data-test=AllocationDrawer]').should('be.visible'); } cy.get('[data-test=AllocationItemSkeleton]').should('not.exist'); @@ -252,40 +230,6 @@ Object.values(viewports).forEach( }); }); - it('ProjectsTimelineWidgetItem with href opens link when clicked without mouse movement', () => { - const milestones = getMilestones(); - cy.get('[data-test=ProjectsTimelineWidget]').should('be.visible'); - cy.get('[data-test=ProjectsTimelineWidgetItem]').should('have.length', milestones.length); - for (let i = 0; i < milestones.length; i++) { - if (milestones[i].href) { - cy.get('[data-test=ProjectsTimelineWidgetItem]') - .eq(i) - .within(() => { - cy.get('[data-test=ProjectsTimelineWidgetItem__Svg--arrowTopRight]').should( - 'be.visible', - ); - }); - - cy.get('[data-test=ProjectsTimelineWidgetItem]') - .eq(i) - .then(el => { - const { x } = el[0].getBoundingClientRect(); - cy.get('[data-test=ProjectsTimelineWidgetItem]') - .eq(i) - .trigger('mousedown') - .trigger('mouseup', { clientX: x + 10 }); - cy.location('pathname').should('eq', ROOT_ROUTES.projects.absolute); - - cy.get('[data-test=ProjectsTimelineWidgetItem]') - .eq(i) - .trigger('mousedown') - .trigger('mouseup'); - cy.location('pathname').should('not.eq', ROOT_ROUTES.projects.absolute); - }); - } - } - }); - it(`shows current total (${IS_CRYPTO_MAIN_VALUE_DISPLAY}: true)`, () => { changeMainValueToCryptoToggle(!isMobile && !isTablet, 'crypto'); visitWithLoader(ROOT_ROUTES.projects.absolute); @@ -316,17 +260,15 @@ Object.values(viewports).forEach( it('search field -- results should show project', () => { cy.get('[data-test=ProjectsList__InputText]').clear().type(projectNames[0]); - cy.get('[data-test=ProjectsView__ProjectsList]') - .find('[data-test^=ProjectsView__ProjectsListItem]') - .should('have.length', 1); + cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length', 1); }); it('search field -- no results should show no results image & text', () => { cy.get('[data-test=ProjectsList__InputText]') .clear() .type('there-is-no-way-there-will-ever-be-a-project-with-such-a-name'); - cy.get('[data-test=ProjectsList__noSearchResults]').should('be.visible'); - cy.get('[data-test=ProjectsList__noSearchResults__Img]').should('be.visible'); + cy.get('[data-test=ProjectsSearchResults__noSearchResults]').should('be.visible'); + cy.get('[data-test=ProjectsSearchResults__noSearchResults__Img]').should('be.visible'); }); }); @@ -349,13 +291,14 @@ Object.values(viewports).forEach( visitWithLoader(ROOT_ROUTES.projects.absolute); connectWallet({ isPatronModeEnabled: true }); checkProjectsViewLoaded(); + /** * This could be done in before hook, but CY wipes the state after each test - * (could be disabled, but creates other problems) + * (could be disabled, but creates other problems). + * + * Needs to be done for each test, because each has different default "random" order for projects. */ - if (projectNames.length === 0) { - projectNames = getNamesOfProjects(); - } + projectNames = getNamesOfProjects(); }); after(() => { diff --git a/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx b/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx index e683a62e65..bc61f61a94 100644 --- a/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx +++ b/client/src/components/Projects/ProjectsSearchResults/ProjectsSearchResults.tsx @@ -40,12 +40,12 @@ const ProjectsSearchResults: FC = ({ }; return ( -
+
{projectsIpfsWithRewardsAndEpochs.length === 0 && !isLoading && ( -
+
{t('noSearchResults')} @@ -62,8 +62,8 @@ const ProjectsSearchResults: FC = ({ key={`${projectIpfsWithRewards.address}--${projectIpfsWithRewards.epoch}`} dataTest={ projectIpfsWithRewards.epoch - ? `ProjectsView__ProjectsListItem--archive--${index}` - : `ProjectsView__ProjectsListItem--${index}` + ? `ProjectsSearchResults__ProjectsListItem--archive--${index}` + : `ProjectsSearchResults__ProjectsListItem--${index}` } epoch={epochNumberToFetchData} projectIpfsWithRewards={projectIpfsWithRewards} diff --git a/client/src/hooks/queries/useSearchedProjects.ts b/client/src/hooks/queries/useSearchedProjects.ts index 0bac36b27b..357ca58d16 100644 --- a/client/src/hooks/queries/useSearchedProjects.ts +++ b/client/src/hooks/queries/useSearchedProjects.ts @@ -1,4 +1,5 @@ import { UseQueryResult, useQuery } from '@tanstack/react-query'; +import uniqWith from 'lodash/uniqWith'; import { apiGetProjectsSearch } from 'api/calls/projects'; import { QUERY_KEYS } from 'api/queryKeys'; @@ -26,10 +27,26 @@ export default function useSearchedProjects( ), // No point in strigifying params, they will just flood the memory. queryKey: QUERY_KEYS.searchResults, - select: data => - data.projectsDetails.map(element => ({ + select: data => { + const dataWithEpochNumber = data.projectsDetails.map(element => ({ ...element, epoch: Number(element.epoch), - })), + })); + + /** + * Because of the bug, BE sometimes returns the same + * name, address & epoch combination multiple times. + * + * Please check e.g. + * GET https://backend.mainnet.octant.app/projects/details?epochs=1,2,3,4,5,6,7&searchPhrases=Open,Source,Observer + * + * Hence the requirement to check uniqueness. + * + * More context: https://chat.wildland.dev/wildland/pl/gghcfgjndjyjieei8axn3opdeh + */ + return uniqWith(dataWithEpochNumber, (elementA, elementB) => { + return elementA.address === elementB.address && elementA.epoch === elementB.epoch; + }); + }, }); } diff --git a/client/src/views/ProjectsView/ProjectsView.tsx b/client/src/views/ProjectsView/ProjectsView.tsx index ae0f7539c6..8c40575ee0 100644 --- a/client/src/views/ProjectsView/ProjectsView.tsx +++ b/client/src/views/ProjectsView/ProjectsView.tsx @@ -236,8 +236,6 @@ const ProjectsView = (): ReactElement => { value === orderOption)} - variant="belowselect" onChange={option => setOrderOption(option!.value as OrderOption)} // TODO OCT-1952: settle on when & how randomised order should work. options={ @@ -245,6 +243,8 @@ const ProjectsView = (): ReactElement => { ? orderOptionsTranslated : orderOptionsTranslated.filter(element => element.value !== 'randomized') } + selectedOption={orderOptionsTranslated.find(({ value }) => value === orderOption)} + variant="belowselect" />
{searchQuery === '' && !areCurrentEpochsProjectsHiddenOutsideAllocationWindow && ( From e8b303d54ea15c1c195277f29740f0ef98b409a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Tue, 14 Jan 2025 15:29:39 +0100 Subject: [PATCH 5/8] fix: search & patron scenario --- client/cypress/e2e/_21projects.cy.ts | 30 +++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/client/cypress/e2e/_21projects.cy.ts b/client/cypress/e2e/_21projects.cy.ts index 4bc91503f1..3940b2a313 100644 --- a/client/cypress/e2e/_21projects.cy.ts +++ b/client/cypress/e2e/_21projects.cy.ts @@ -11,6 +11,7 @@ import { } from 'cypress/utils/e2e'; import { getNamesOfProjects } from 'cypress/utils/projects'; import viewports from 'cypress/utils/viewports'; +import { QUERY_KEYS } from 'src/api/queryKeys'; import { HAS_ONBOARDING_BEEN_CLOSED, IS_CRYPTO_MAIN_VALUE_DISPLAY, @@ -51,7 +52,12 @@ function checkProjectItemElements( cy.get('[data-test^=ProjectsView__ProjectsListItem') .eq(index) .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') - .should('be.disabled'); + .should('not.be.visible'); + } else { + cy.get('[data-test^=ProjectsView__ProjectsListItem') + .eq(index) + .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') + .should('be.visible'); } return cy @@ -259,8 +265,24 @@ Object.values(viewports).forEach( }); it('search field -- results should show project', () => { - cy.get('[data-test=ProjectsList__InputText]').clear().type(projectNames[0]); - cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length', 1); + cy.window().then(win => { + const { currentEpoch } = win.clientReactQuery.getQueryData(QUERY_KEYS.currentEpoch); + + /** + * There may be two projects with the same part of their name. + * eg. "Ethereum A" and "Ethereum B" projects. + * + * In order to make sure only one is returned, we look for project name with only one word. + */ + const projectNameOneWord = projectNames.find( + projectName => projectName.split(' ').length === 1, + ); + + cy.get('[data-test=ProjectsList__InputText]') + .clear() + .type(`${projectNameOneWord} Epoch ${currentEpoch - 1}`); + cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length', 1); + }); }); it('search field -- no results should show no results image & text', () => { @@ -276,6 +298,8 @@ Object.values(viewports).forEach( let projectNames: string[] = []; before(() => { + cy.clearLocalStorage(); + /** * Global Metamask setup done by Synpress is not always done. * Since Synpress needs to have valid provider to fetch the data from contracts, From f4916a22d844dd5a758067ca3f3047dc9d0018ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Wed, 15 Jan 2025 12:45:12 +0100 Subject: [PATCH 6/8] fix: project search results assertion --- client/cypress/e2e/_21projects.cy.ts | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/client/cypress/e2e/_21projects.cy.ts b/client/cypress/e2e/_21projects.cy.ts index 3940b2a313..f02144861f 100644 --- a/client/cypress/e2e/_21projects.cy.ts +++ b/client/cypress/e2e/_21projects.cy.ts @@ -52,7 +52,7 @@ function checkProjectItemElements( cy.get('[data-test^=ProjectsView__ProjectsListItem') .eq(index) .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') - .should('not.be.visible'); + .should('not.exist'); } else { cy.get('[data-test^=ProjectsView__ProjectsListItem') .eq(index) @@ -269,19 +269,23 @@ Object.values(viewports).forEach( const { currentEpoch } = win.clientReactQuery.getQueryData(QUERY_KEYS.currentEpoch); /** - * There may be two projects with the same part of their name. - * eg. "Ethereum A" and "Ethereum B" projects. + * We search for projectn name having "a" letter inside. * - * In order to make sure only one is returned, we look for project name with only one word. + * Initially we implemented getting here actual name from the current epoch list, + * but BE requires migrations to be done to have results available. + * + * These migrations do not happen automatically when epoch is changed, + * and epochs do not change in the BE at all actually. + * + * When we move time in E2E we move them in contracts only. + * + * Assumption here is that any project in current epoch will have "a" letter in their name, + * which is very likely. */ - const projectNameOneWord = projectNames.find( - projectName => projectName.split(' ').length === 1, - ); - cy.get('[data-test=ProjectsList__InputText]') .clear() - .type(`${projectNameOneWord} Epoch ${currentEpoch - 1}`); - cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length', 1); + .type(`a Epoch ${currentEpoch - 1}`); + cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length.gt', 1); }); }); From 7e0ce742b76a5008798e06f1c441c40ba89aef78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Wed, 15 Jan 2025 16:50:14 +0100 Subject: [PATCH 7/8] fix: search & button add to allocate for patrons --- client/cypress/e2e/_21projects.cy.ts | 45 +++++++++++----------------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/client/cypress/e2e/_21projects.cy.ts b/client/cypress/e2e/_21projects.cy.ts index f02144861f..6a767b1b62 100644 --- a/client/cypress/e2e/_21projects.cy.ts +++ b/client/cypress/e2e/_21projects.cy.ts @@ -11,7 +11,6 @@ import { } from 'cypress/utils/e2e'; import { getNamesOfProjects } from 'cypress/utils/projects'; import viewports from 'cypress/utils/viewports'; -import { QUERY_KEYS } from 'src/api/queryKeys'; import { HAS_ONBOARDING_BEEN_CLOSED, IS_CRYPTO_MAIN_VALUE_DISPLAY, @@ -43,10 +42,6 @@ function checkProjectItemElements( .eq(index) .find('[data-test=ProjectsListItem__IntroDescription]') .should('be.visible'); - cy.get('[data-test^=ProjectsView__ProjectsListItem') - .eq(index) - .find('[data-test=ProjectsListItem__ButtonAddToAllocate]') - .should('be.visible'); if (isPatronMode) { cy.get('[data-test^=ProjectsView__ProjectsListItem') @@ -265,28 +260,24 @@ Object.values(viewports).forEach( }); it('search field -- results should show project', () => { - cy.window().then(win => { - const { currentEpoch } = win.clientReactQuery.getQueryData(QUERY_KEYS.currentEpoch); - - /** - * We search for projectn name having "a" letter inside. - * - * Initially we implemented getting here actual name from the current epoch list, - * but BE requires migrations to be done to have results available. - * - * These migrations do not happen automatically when epoch is changed, - * and epochs do not change in the BE at all actually. - * - * When we move time in E2E we move them in contracts only. - * - * Assumption here is that any project in current epoch will have "a" letter in their name, - * which is very likely. - */ - cy.get('[data-test=ProjectsList__InputText]') - .clear() - .type(`a Epoch ${currentEpoch - 1}`); - cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length.gt', 1); - }); + /** + * We search for projects name having "a" letter inside and from Epoch 1. + * + * Initially we implemented getting here actual name from the current epoch list, + * but BE requires migrations to be done to have results available. + * + * These migrations do not happen automatically when epoch is changed, + * and epochs do not change in the BE at all actually. + * + * When we move time in E2E we move them in contracts only. + * + * Assumption here is that any project in current epoch will have "a" letter in their name, + * which is very likely. + */ + cy.get('[data-test=ProjectsList__InputText]') + .clear() + .type(`a Epoch 1`); + cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length.gt', 1); }); it('search field -- no results should show no results image & text', () => { From cecd563818c06bf6840053b399af17c6597ee1db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= Date: Wed, 15 Jan 2025 21:27:20 +0100 Subject: [PATCH 8/8] fix: animation wait for InputSelect --- client/cypress/e2e/_21projects.cy.ts | 9 ++++++--- client/src/components/ui/InputSelect/InputSelect.tsx | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/cypress/e2e/_21projects.cy.ts b/client/cypress/e2e/_21projects.cy.ts index 6a767b1b62..6cb938b234 100644 --- a/client/cypress/e2e/_21projects.cy.ts +++ b/client/cypress/e2e/_21projects.cy.ts @@ -11,6 +11,7 @@ import { } from 'cypress/utils/e2e'; import { getNamesOfProjects } from 'cypress/utils/projects'; import viewports from 'cypress/utils/viewports'; +import { durationOfTransitionMobile } from 'src/components/ui/InputSelect/InputSelect'; import { HAS_ONBOARDING_BEEN_CLOSED, IS_CRYPTO_MAIN_VALUE_DISPLAY, @@ -255,7 +256,11 @@ Object.values(viewports).forEach( const orderOptionsValues = ORDER_OPTIONS((key: string) => {}).map(element => element.value); orderOptionsValues.forEach(orderOptionsValue => { cy.get('[data-test=ProjectsView__InputSelect]').click(); + // Wait for animation to show / hide menu & overflow. + cy.wait(durationOfTransitionMobile * 1000 * 2); cy.get(`[data-test=ProjectsView__InputSelect__Option--${orderOptionsValue}]`).click(); + // Wait for animation to show / hide menu & overflow. + cy.wait(durationOfTransitionMobile * 1000 * 2); }); }); @@ -274,9 +279,7 @@ Object.values(viewports).forEach( * Assumption here is that any project in current epoch will have "a" letter in their name, * which is very likely. */ - cy.get('[data-test=ProjectsList__InputText]') - .clear() - .type(`a Epoch 1`); + cy.get('[data-test=ProjectsList__InputText]').clear().type(`a Epoch 1`); cy.get('[data-test^=ProjectsSearchResults__ProjectsListItem]').should('have.length.gt', 1); }); diff --git a/client/src/components/ui/InputSelect/InputSelect.tsx b/client/src/components/ui/InputSelect/InputSelect.tsx index ac88038eac..4f88579ff0 100644 --- a/client/src/components/ui/InputSelect/InputSelect.tsx +++ b/client/src/components/ui/InputSelect/InputSelect.tsx @@ -12,7 +12,7 @@ import styles from './InputSelect.module.scss'; import InputSelectProps, { Option } from './types'; const durationOfTransitionDesktop = 0; -const durationOfTransitionMobile = 0.3; +export const durationOfTransitionMobile = 0.3; const InputSelect: FC = ({ className,