From 5c496b13eb4f765b088a158c314379cc23016831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 7 Mar 2024 14:45:05 +0100 Subject: [PATCH] oct-1366: rewards calculator test with real res --- client/cypress/e2e/rewardsCalculator.cy.ts | 189 ++++++++++-------- client/cypress/utils/e2e.ts | 4 +- .../EarnRewardsCalculator.tsx | 8 +- 3 files changed, 117 insertions(+), 84 deletions(-) diff --git a/client/cypress/e2e/rewardsCalculator.cy.ts b/client/cypress/e2e/rewardsCalculator.cy.ts index caf26adec4..361153ff90 100644 --- a/client/cypress/e2e/rewardsCalculator.cy.ts +++ b/client/cypress/e2e/rewardsCalculator.cy.ts @@ -1,7 +1,9 @@ -import { mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e'; +import { ETH_USD, mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e'; 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'; +import getFormattedEthValue from 'src/utils/getFormattedEthValue'; +import { parseUnitsBigInt } from 'src/utils/parseUnitsBigInt'; Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDesktop }) => { describe(`rewards calculator: ${device}`, { viewportHeight, viewportWidth }, () => { @@ -38,10 +40,7 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes }); it('calculator fetches rewards values in ETH and USD based on DAYS and GLM fields', () => { - cy.intercept('POST', '/rewards/estimated_budget', { - body: { budget: '4253424657534245' }, - delay: 500, - }).as('postEstimatedRewards'); + cy.intercept('POST', '/rewards/estimated_budget').as('postEstimatedRewards'); cy.get('[data-test=Tooltip__rewardsCalculator__body]').click(); cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( 'be.visible', @@ -50,23 +49,32 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes 'be.visible', ); cy.wait('@postEstimatedRewards'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( - 'not.exist', - ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( - 'not.exist', - ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') - .invoke('val') - .should('eq', '0.0043'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') - .invoke('val') - .should('eq', '8.78'); - cy.intercept('POST', '/rewards/estimated_budget', { - body: { budget: '425342465753424665' }, - delay: 500, - }).as('postEstimatedRewardsGlmValueChange'); + cy.get('@postEstimatedRewards').then( + ({ + response: { + body: { budget }, + }, + }) => { + const rewardsEth = getFormattedEthValue(parseUnitsBigInt(budget, 'wei')).value; + const rewardsUsd = (parseFloat(rewardsEth) * ETH_USD).toFixed(2); + + cy.get( + '[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]', + ).should('not.exist'); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( + 'not.exist', + ); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') + .invoke('val') + .should('eq', rewardsEth); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') + .invoke('val') + .should('eq', rewardsUsd); + }, + ); + + cy.intercept('POST', '/rewards/estimated_budget').as('postEstimatedRewardsGlmValueChange'); cy.get('[data-test=RewardsCalculator__InputText--crypto]').type('500000'); cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( 'be.visible', @@ -75,23 +83,32 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes 'be.visible', ); cy.wait('@postEstimatedRewardsGlmValueChange'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( - 'not.exist', - ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( - 'not.exist', - ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') - .invoke('val') - .should('eq', '0.4253'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') - .invoke('val') - .should('eq', '868.42'); - cy.intercept('POST', '/rewards/estimated_budget', { - body: { budget: '4253424657534246509' }, - delay: 500, - }).as('postEstimatedRewardsDaysValueChange'); + cy.get('@postEstimatedRewardsGlmValueChange').then( + ({ + response: { + body: { budget }, + }, + }) => { + const rewardsEth = getFormattedEthValue(parseUnitsBigInt(budget, 'wei')).value; + const rewardsUsd = (parseFloat(rewardsEth) * ETH_USD).toFixed(2); + + cy.get( + '[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]', + ).should('not.exist'); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( + 'not.exist', + ); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') + .invoke('val') + .should('eq', rewardsEth); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') + .invoke('val') + .should('eq', rewardsUsd); + }, + ); + + cy.intercept('POST', '/rewards/estimated_budget').as('postEstimatedRewardsDaysValueChange'); cy.get('[data-test=RewardsCalculator__InputText--days]').clear().type('900'); cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( 'be.visible', @@ -100,18 +117,30 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes 'be.visible', ); cy.wait('@postEstimatedRewardsDaysValueChange'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]').should( - 'not.exist', - ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( - 'not.exist', + + cy.get('@postEstimatedRewardsDaysValueChange').then( + ({ + response: { + body: { budget }, + }, + }) => { + const rewardsEth = getFormattedEthValue(parseUnitsBigInt(budget, 'wei')).value; + const rewardsUsd = (parseFloat(rewardsEth) * ETH_USD).toFixed(2); + + cy.get( + '[data-test=RewardsCalculator__InputText--estimatedRewards--crypto__Loader]', + ).should('not.exist'); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat__Loader]').should( + 'not.exist', + ); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') + .invoke('val') + .should('eq', rewardsEth); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') + .invoke('val') + .should('eq', rewardsUsd); + }, ); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') - .invoke('val') - .should('eq', '4.2534'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') - .invoke('val') - .should('eq', '8685.06'); }); it('If DAYS or GLM input is empty rewards inputs are empty too', () => { @@ -160,46 +189,48 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes }); it('Max GLM amount is 1000000000', () => { - cy.intercept('POST', '/rewards/estimated_budget', { - body: { budget: '850684931506849269541' }, - delay: 500, - }).as('postEstimatedRewards'); + cy.intercept('POST', '/rewards/estimated_budget').as('postEstimatedRewards'); cy.get('[data-test=Tooltip__rewardsCalculator__body]').click(); cy.get('[data-test=RewardsCalculator__InputText--crypto]').type('1000000000'); cy.wait('@postEstimatedRewards'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') - .invoke('val') - .should('eq', '850.6849'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') - .invoke('val') - .should('eq', '1737022.00'); - - cy.get('[data-test=RewardsCalculator__InputText--crypto]') - .clear() - .type('1000000001') - .should('have.css', 'border-color', 'rgb(255, 97, 87)'); - cy.get('[data-test=RewardsCalculator__InputText--crypto__error]') - .should('be.visible') - .invoke('text') - .should('eq', 'That isn’t a valid amount'); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') - .invoke('val') - .should('eq', ''); - cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') - .invoke('val') - .should('eq', ''); + cy.get('@postEstimatedRewards').then( + ({ + response: { + body: { budget }, + }, + }) => { + const rewardsEth = getFormattedEthValue(parseUnitsBigInt(budget, 'wei')).value; + const rewardsUsd = (parseFloat(rewardsEth) * ETH_USD).toFixed(2); + + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') + .invoke('val') + .should('eq', rewardsEth); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') + .invoke('val') + .should('eq', rewardsUsd); + + cy.get('[data-test=RewardsCalculator__InputText--crypto]') + .clear() + .type('1000000001') + .should('have.css', 'border-color', 'rgb(255, 97, 87)'); + cy.get('[data-test=RewardsCalculator__InputText--crypto__error]') + .should('be.visible') + .invoke('text') + .should('eq', 'That isn’t a valid amount'); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--crypto]') + .invoke('val') + .should('eq', ''); + cy.get('[data-test=RewardsCalculator__InputText--estimatedRewards--fiat]') + .invoke('val') + .should('eq', ''); + }, + ); }); it('Closing the modal successfully cancels the request /estimated_budget', () => { - cy.intercept('POST', '/rewards/estimated_budget', { - body: { budget: '850684931506849269541' }, - // Long enough to never complete. - delay: 5000000, - }).as('postEstimatedRewards'); - cy.window().then(win => { cy.spy(win.console, 'error').as('consoleErrSpy'); }); diff --git a/client/cypress/utils/e2e.ts b/client/cypress/utils/e2e.ts index c7cd606fd4..ddaaf671e7 100644 --- a/client/cypress/utils/e2e.ts +++ b/client/cypress/utils/e2e.ts @@ -6,6 +6,8 @@ import { readContractEpochs } from 'src/hooks/contracts/readContracts'; import Chainable = Cypress.Chainable; +export const ETH_USD = 2041.91; + export const loadersShouldNotExist = (): Chainable => { cy.get('[data-test*=AppLoader]').should('not.exist'); return cy.get('[data-test=MainLayout__Loader]').should('not.exist'); @@ -29,7 +31,7 @@ export const navigateWithCheck = (urlEnter: string): Chainable => { export const mockCoinPricesServer = (): Chainable => { return cy.intercept('GET', '/simple/price?*', { - body: { ethereum: { usd: 2041.91 }, golem: { usd: 0.260878 } }, + body: { ethereum: { usd: ETH_USD }, golem: { usd: 0.260878 } }, statusCode: 200, }); }; diff --git a/client/src/components/Earn/EarnRewardsCalculator/EarnRewardsCalculator.tsx b/client/src/components/Earn/EarnRewardsCalculator/EarnRewardsCalculator.tsx index 643a0a7b17..4f923d5d53 100644 --- a/client/src/components/Earn/EarnRewardsCalculator/EarnRewardsCalculator.tsx +++ b/client/src/components/Earn/EarnRewardsCalculator/EarnRewardsCalculator.tsx @@ -98,10 +98,10 @@ const EarnRewardsCalculator: FC = () => { formik.values.valueCrypto && formik.values.days && calculateRewards ? getFormattedEthValue(parseUnitsBigInt(calculateRewards.budget, 'wei')) : { - fullString: '', - suffix: 'ETH', - value: '', - }; + fullString: '', + suffix: 'ETH', + value: '', + }; const cryptoFiatRatio = cryptoValues?.ethereum[displayCurrency || 'usd'] || 1; const fiat = estimatedFormattedRewardsValue.value