Skip to content

Commit

Permalink
OCT-1481 CY: AllocationItem (#100)
Browse files Browse the repository at this point in the history
  • Loading branch information
aziolek authored Apr 12, 2024
1 parent 5c376f0 commit b53701b
Show file tree
Hide file tree
Showing 26 changed files with 678 additions and 56 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import axios from 'axios';

import { mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e';
import { QUERY_KEYS } from 'src/api/queryKeys';
import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
import env from 'src/env';
import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
Expand All @@ -21,13 +22,25 @@ describe('Make pending snapshot', () => {
mockCoinPricesServer();
localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
localStorage.setItem(IS_ONBOARDING_DONE, 'true');
visitWithLoader(ROOT_ROUTES.earn.absolute);
visitWithLoader(ROOT_ROUTES.playground.absolute);
});

it('make pending snapshot', () => {
cy.window().then(async () => {
await axios.post(`${env.serverEndpoint}snapshots/pending`);
cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
cy.window().then(async win => {
const isDecisionWindowOpen = win.clientReactQuery.getQueryData(
QUERY_KEYS.isDecisionWindowOpen,
);

if (!isDecisionWindowOpen) {
expect(true).to.be.true;
return;
}

cy.wrap(null).then(() => {
axios.post(`${env.serverEndpoint}snapshots/pending`).then(() => {
cy.get('[data-test=SyncView]', { timeout: 60000 }).should('not.exist');
});
});
});
});
});
108 changes: 108 additions & 0 deletions client/cypress/e2e/allocationItemWindowClosed.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import {
connectWallet,
visitWithLoader,
mockCoinPricesServer,
navigateWithCheck,
} from 'cypress/utils/e2e';
import { moveTime, setupAndMoveToPlayground } from 'cypress/utils/moveTime';
import viewports from 'cypress/utils/viewports';
import { QUERY_KEYS } from 'src/api/queryKeys';
import {
ALLOCATION_ITEMS_KEY,
IS_ONBOARDING_ALWAYS_VISIBLE,
IS_ONBOARDING_DONE,
} from 'src/constants/localStorageKeys';
import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';

describe('allocation (allocation window closed)', () => {
describe('move time', () => {
before(() => {
/**
* Global Metamask setup done by Synpress is not always done.
* Since Synpress needs to have valid provider to fetch the data from contracts,
* setupMetamask is required in each test suite.
*/
cy.setupMetamask();
});

it('allocation window is closed, when it is not, move time', () => {
setupAndMoveToPlayground();

cy.window().then(async win => {
moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
cy.get('[data-test=PlaygroundView]').should('be.visible');
const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData(
QUERY_KEYS.isDecisionWindowOpen,
);
expect(isDecisionWindowOpenAfter).to.be.false;
});
});
});
});

Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDesktop }) => {
describe(`test cases: ${device}`, { viewportHeight, viewportWidth }, () => {
before(() => {
/**
* Global Metamask setup done by Synpress is not always done.
* Since Synpress needs to have valid provider to fetch the data from contracts,
* setupMetamask is required in each test suite.
*/
cy.setupMetamask();
});

beforeEach(() => {
cy.disconnectMetamaskWalletFromAllDapps();
mockCoinPricesServer();
localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
localStorage.setItem(IS_ONBOARDING_DONE, 'true');
localStorage.setItem(ALLOCATION_ITEMS_KEY, '[]');
visitWithLoader(ROOT_ROUTES.projects.absolute);

cy.get('[data-test^=ProjectItemSkeleton').should('not.exist');
cy.get('[data-test^=ProjectsView__ProjectsListItem]')
.eq(0)
.should('be.visible')
.find('[data-test=ProjectsListItem__name]')
.then($text => {
cy.wrap($text.text()).as('projectName');
});

cy.get('[data-test^=ProjectsView__ProjectsListItem')
.eq(0)
.find('[data-test=ProjectsListItem__ButtonAddToAllocate]')
.click();
navigateWithCheck(ROOT_ROUTES.allocation.absolute);
});

it('AllocationItem shows all the elements', () => {
connectWallet(true, false);
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__name]')
.then($allocationItemName => {
cy.get('@projectName').then(projectName => {
expect(projectName).to.eq($allocationItemName.text());
});
});

cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__imageProfile]')
.should(isDesktop ? 'be.visible' : 'not.be.visible');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItemRewards]')
.contains(isDesktop ? 'Threshold data unavailable' : 'No threshold data');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.should('be.disabled');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText__suffix]')
.contains('GWEI');
});
});
});
});
139 changes: 139 additions & 0 deletions client/cypress/e2e/allocationItemWindowOpen.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import chaiColors from 'chai-colors';

import {
visitWithLoader,
mockCoinPricesServer,
navigateWithCheck,
connectWallet,
} from 'cypress/utils/e2e';
import { moveTime, setupAndMoveToPlayground } from 'cypress/utils/moveTime';
import viewports from 'cypress/utils/viewports';
import { QUERY_KEYS } from 'src/api/queryKeys';
import {
ALLOCATION_ITEMS_KEY,
IS_ONBOARDING_ALWAYS_VISIBLE,
IS_ONBOARDING_DONE,
} from 'src/constants/localStorageKeys';
import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';

chai.use(chaiColors);

const budget = '10000000000'; // 10 GWEI.

describe('allocation (allocation window open)', () => {
describe('move time', () => {
before(() => {
/**
* Global Metamask setup done by Synpress is not always done.
* Since Synpress needs to have valid provider to fetch the data from contracts,
* setupMetamask is required in each test suite.
*/
cy.setupMetamask();
});

it('allocation window is open, when it is not, move time', () => {
setupAndMoveToPlayground();

cy.window().then(async win => {
moveTime(win, 'nextEpochDecisionWindowOpen').then(() => {
const isDecisionWindowOpenAfter = win.clientReactQuery.getQueryData(
QUERY_KEYS.isDecisionWindowOpen,
);
expect(isDecisionWindowOpenAfter).to.be.true;
});
});
});
});

Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDesktop }) => {
describe(`test cases: ${device}`, { viewportHeight, viewportWidth }, () => {
before(() => {
/**
* Global Metamask setup done by Synpress is not always done.
* Since Synpress needs to have valid provider to fetch the data from contracts,
* setupMetamask is required in each test suite.
*/
cy.setupMetamask();
});

beforeEach(() => {
cy.intercept('GET', '/rewards/budget/*/epoch/*', { body: { budget } });
cy.disconnectMetamaskWalletFromAllDapps();
mockCoinPricesServer();
localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
localStorage.setItem(IS_ONBOARDING_DONE, 'true');
localStorage.setItem(ALLOCATION_ITEMS_KEY, '[]');
visitWithLoader(ROOT_ROUTES.projects.absolute);
connectWallet(true, false);

cy.get('[data-test^=ProjectItemSkeleton').should('not.exist');
cy.get('[data-test^=ProjectsView__ProjectsListItem]')
.eq(0)
.should('be.visible')
.find('[data-test=ProjectsListItem__name]')
.then($text => {
cy.wrap($text.text()).as('projectName');
});

cy.get('[data-test^=ProjectsView__ProjectsListItem')
.eq(0)
.find('[data-test=ProjectsListItem__ButtonAddToAllocate]')
.click();
navigateWithCheck(ROOT_ROUTES.allocation.absolute);
cy.get('[data-test=AllocationItemSkeleton]').should('not.exist');
});

it('AllocationItem shows all the elements', () => {
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__name]')
.then($allocationItemName => {
cy.get('@projectName').then(projectName => {
expect(projectName).to.eq($allocationItemName.text());
});
});
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__imageProfile]')
.should(isDesktop ? 'be.visible' : 'not.be.visible');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.should('be.enabled');
});

it('AllocationItem__InputText correctly changes background color on focus', () => {
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.focus();
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.should('have.focus');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.should('have.css', 'background-color')
.and('be.colored', '#f1faf8');
});

it('AllocationItem__InputText correctly changes background color on error', () => {
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText__suffix]')
.contains('GWEI');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.type('99');
cy.get('[data-test=AllocationItem]')
.eq(0)
.find('[data-test=AllocationItem__InputText]')
.should('have.css', 'background-color')
.and('be.colored', '#f1faf8');
});
});
});
});
5 changes: 3 additions & 2 deletions client/cypress/e2e/earn.cy.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { visitWithLoader, mockCoinPricesServer, moveEpoch } from 'cypress/utils/e2e';
import { visitWithLoader, mockCoinPricesServer } from 'cypress/utils/e2e';
import { moveTime } from 'cypress/utils/moveTime';
import viewports from 'cypress/utils/viewports';
import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
Expand Down Expand Up @@ -248,7 +249,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
}).should('not.exist');
cy.window().then(async win => {
cy.wrap(null).then(() => {
return moveEpoch(win).then(() => {
return moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]', {
timeout: 60000,
})
Expand Down
5 changes: 3 additions & 2 deletions client/cypress/e2e/projectsArchive.cy.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { checkLocationWithLoader, moveEpoch, visitWithLoader } from 'cypress/utils/e2e';
import { checkLocationWithLoader, visitWithLoader } from 'cypress/utils/e2e';
import { moveTime } from 'cypress/utils/moveTime';
import viewports from 'cypress/utils/viewports';
import { QUERY_KEYS } from 'src/api/queryKeys';
import { IS_ONBOARDING_ALWAYS_VISIBLE, IS_ONBOARDING_DONE } from 'src/constants/localStorageKeys';
Expand All @@ -23,7 +24,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) =>
);

cy.wrap(null).then(() => {
return moveEpoch(win).then(() => {
return moveTime(win, 'nextEpochDecisionWindowClosed').then(() => {
const currentEpochAfter = Number(
win.clientReactQuery.getQueryData(QUERY_KEYS.currentEpoch),
);
Expand Down
4 changes: 3 additions & 1 deletion client/cypress/support/e2e.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ declare namespace Cypress {
interface ApplicationWindow {
// Importing QueryClient breaks <reference types="cypress" /> making these types not visible.
clientReactQuery: any;
mutateAsyncMoveEpoch: () => Promise<void>;
mutateAsyncMakeSnapshot: (type: 'pending' | 'finalized') => Promise<void>;
mutateAsyncMoveToDecisionWindowClosed: () => Promise<void>;
mutateAsyncMoveToDecisionWindowOpen: () => Promise<void>;
}
}
32 changes: 0 additions & 32 deletions client/cypress/utils/e2e.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import axios from 'axios';

import { navigationTabs } from 'src/constants/navigationTabs/navigationTabs';
import env from 'src/env';

import Chainable = Cypress.Chainable;

Expand Down Expand Up @@ -49,32 +46,3 @@ export const connectWallet = (
cy.switchToMetamaskNotification();
return cy.acceptMetamaskAccess();
};

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

0 comments on commit b53701b

Please sign in to comment.