From 014792808d76892eb84fb90c0cd46b8811f7a9c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 28 Nov 2024 21:10:18 +0100 Subject: [PATCH 1/8] oct-2125: metrics e2e --- client/cypress/e2e/_13metrics.cy.ts | 184 ++++++++++++++++++ .../Metrics/MetricsEpoch/MetricsEpoch.tsx | 5 +- .../MetricsEpochDonationsProgressBar.tsx | 2 +- .../MetricsEpochGridFundsUsage.tsx | 5 +- .../MetricsEpochGridTopProjects.tsx | 5 +- .../MetricsEpochGridTotalDonations.tsx | 6 +- .../MetricsEpochGridUnallocatedValue.tsx | 5 +- .../MetricsEpochHeader/MetricsEpochHeader.tsx | 11 +- .../Metrics/MetricsGeneral/MetricsGeneral.tsx | 7 +- .../MetricsSectionHeader.tsx | 4 +- .../NavigationArrows/NavigationArrows.tsx | 9 +- .../shared/NavigationArrows/types.ts | 1 + client/src/views/MetricsView/MetricsView.tsx | 2 +- 13 files changed, 225 insertions(+), 21 deletions(-) create mode 100644 client/cypress/e2e/_13metrics.cy.ts diff --git a/client/cypress/e2e/_13metrics.cy.ts b/client/cypress/e2e/_13metrics.cy.ts new file mode 100644 index 0000000000..f3c5f85c48 --- /dev/null +++ b/client/cypress/e2e/_13metrics.cy.ts @@ -0,0 +1,184 @@ +// 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', () => { + 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', () => { + 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 ', () => { + 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.wait(1000); + 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/src/components/Metrics/MetricsEpoch/MetricsEpoch.tsx b/client/src/components/Metrics/MetricsEpoch/MetricsEpoch.tsx index e2a3a7c926..e7f0a29e0b 100644 --- a/client/src/components/Metrics/MetricsEpoch/MetricsEpoch.tsx +++ b/client/src/components/Metrics/MetricsEpoch/MetricsEpoch.tsx @@ -35,6 +35,7 @@ import useLockedsData from 'hooks/subgraph/useLockedsData'; import styles from './MetricsEpoch.module.scss'; const MetricsEpoch = (): ReactElement => { + const dataTestRoot = 'MetricsEpoch'; const { epoch, lastEpoch } = useMetricsEpoch(); const { isFetching: isFetchingCurrentEpoch } = useCurrentEpoch(); const { isFetching: isFetchingCurrentEpochProps } = useCurrentEpochProps(); @@ -91,9 +92,9 @@ const MetricsEpoch = (): ReactElement => { isFetchingEpochPatrons; return ( -
+
- + +
= ({ totalUserDonationsWithPatronRewards, unusedRewards, }) => { + const dataTestRoot = 'MetricsEpochGridFundsUsage'; const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { epoch } = useMetricsEpoch(); const { data: epochInfo } = useEpochInfo(epoch); @@ -160,7 +161,7 @@ const MetricsEpochGridFundsUsage: FC = ({ return ( = ({
{!isLoading && getValuesToDisplay({ diff --git a/client/src/components/Metrics/MetricsEpoch/MetricsEpochGridTopProjects/MetricsEpochGridTopProjects.tsx b/client/src/components/Metrics/MetricsEpoch/MetricsEpochGridTopProjects/MetricsEpochGridTopProjects.tsx index 7c0ad425e1..7a244f67f5 100644 --- a/client/src/components/Metrics/MetricsEpoch/MetricsEpochGridTopProjects/MetricsEpochGridTopProjects.tsx +++ b/client/src/components/Metrics/MetricsEpoch/MetricsEpochGridTopProjects/MetricsEpochGridTopProjects.tsx @@ -16,6 +16,7 @@ const MetricsEpochGridTopProjects: FC = ({ isLoading, className, }) => { + const dataTestRoot = 'MetricsEpochGridTopProjects'; const { i18n, t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { epoch, lastEpoch } = useMetricsEpoch(); const { isLargeDesktop } = useMediaQuery(); @@ -33,12 +34,12 @@ const MetricsEpochGridTopProjects: FC = ({ return ( = totalUserDonations, className, }) => { + const dataTestRoot = 'MetricsEpochGridTotalDonations'; + const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const getValuesToDisplay = useGetValuesToDisplay(); @@ -28,12 +30,12 @@ const MetricsEpochGridTotalDonations: FC = return ( { + const dataTestRoot = 'MetricsEpochGridUnallocatedValue'; const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { epoch } = useMetricsEpoch(); @@ -31,12 +32,12 @@ const MetricsEpochGridUnallocatedValue: FC { + const dataTestRoot = 'MetricsEpochHeader'; const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { isDesktop } = useMediaQuery(); const { epoch, lastEpoch, setEpoch } = useMetricsEpoch(); @@ -24,18 +25,24 @@ const MetricsEpochHeader = (): ReactElement => { return (
{isCurrentOpenEpoch ? ( -
{t('open')}
+
+ {t('open')} +
) : ( -
{epochDurationLabel}
+
+ {epochDurationLabel} +
)}
setEpoch(epoch + 1)} diff --git a/client/src/components/Metrics/MetricsGeneral/MetricsGeneral.tsx b/client/src/components/Metrics/MetricsGeneral/MetricsGeneral.tsx index 23328544ba..846b55e6c0 100644 --- a/client/src/components/Metrics/MetricsGeneral/MetricsGeneral.tsx +++ b/client/src/components/Metrics/MetricsGeneral/MetricsGeneral.tsx @@ -19,6 +19,7 @@ import useSettingsStore from 'store/settings/store'; import styles from './MetricsGeneral.module.scss'; const MetricsGeneral = (): ReactElement => { + const dataTestRoot = 'MetricsGeneral'; const { t } = useTranslation('translation', { keyPrefix: 'views.metrics' }); const { data: { displayCurrency }, @@ -43,9 +44,9 @@ const MetricsGeneral = (): ReactElement => { isFetchingProjectsEpoch; return ( -
- - +
+ + diff --git a/client/src/components/Metrics/MetricsSectionHeader/MetricsSectionHeader.tsx b/client/src/components/Metrics/MetricsSectionHeader/MetricsSectionHeader.tsx index 241f7e5dd2..b3178328bd 100644 --- a/client/src/components/Metrics/MetricsSectionHeader/MetricsSectionHeader.tsx +++ b/client/src/components/Metrics/MetricsSectionHeader/MetricsSectionHeader.tsx @@ -10,7 +10,9 @@ const MetricsSectionHeader: FC = ({ }) => { return (
-
{title}
+
+ {title} +
{children}
); diff --git a/client/src/components/shared/NavigationArrows/NavigationArrows.tsx b/client/src/components/shared/NavigationArrows/NavigationArrows.tsx index b03daa1d65..8d5bf99659 100644 --- a/client/src/components/shared/NavigationArrows/NavigationArrows.tsx +++ b/client/src/components/shared/NavigationArrows/NavigationArrows.tsx @@ -15,9 +15,10 @@ const NavigationArrows: FC = ({ className, classNameNextButton, classNamePrevButton, + dataTest = 'NavigationArrows', }) => { return ( -
+
= ({ isPrevButtonDisabled && styles.isDisabled, classNamePrevButton, )} + data-test={`${dataTest}__leftArrow`} onClick={() => { if (isPrevButtonDisabled) { return; @@ -32,10 +34,11 @@ const NavigationArrows: FC = ({ onClickPrevButton(); }} > - +
{ if (isNextButtonDisabled) { return; @@ -43,7 +46,7 @@ const NavigationArrows: FC = ({ onClickNextButton(); }} > - +
); diff --git a/client/src/components/shared/NavigationArrows/types.ts b/client/src/components/shared/NavigationArrows/types.ts index 793ff4583e..e518a4b89e 100644 --- a/client/src/components/shared/NavigationArrows/types.ts +++ b/client/src/components/shared/NavigationArrows/types.ts @@ -2,6 +2,7 @@ export default interface NavigationArrowsProps { className?: string; classNameNextButton?: string; classNamePrevButton?: string; + dataTest?: string; isNextButtonDisabled: boolean; isPrevButtonDisabled: boolean; onClickNextButton: () => void; diff --git a/client/src/views/MetricsView/MetricsView.tsx b/client/src/views/MetricsView/MetricsView.tsx index 0f1aadf5e3..c3b9a853b4 100644 --- a/client/src/views/MetricsView/MetricsView.tsx +++ b/client/src/views/MetricsView/MetricsView.tsx @@ -25,7 +25,7 @@ const MetricsView = (): ReactElement => { t('epoch1Info') ) : ( <> - {t('exploreTheData')} + {t('exploreTheData')} From 7d12e8794d8d1037c10673c3bc8784407dbc460f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Fri, 29 Nov 2024 11:40:57 +0100 Subject: [PATCH 2/8] oct-2125: metrics e2e fix --- client/cypress/e2e/_13metrics.cy.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/client/cypress/e2e/_13metrics.cy.ts b/client/cypress/e2e/_13metrics.cy.ts index f3c5f85c48..e7a51fd45c 100644 --- a/client/cypress/e2e/_13metrics.cy.ts +++ b/client/cypress/e2e/_13metrics.cy.ts @@ -95,7 +95,9 @@ Object.values(viewports).forEach( 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__NavigationArrows__rightArrow]').click({ + force: true, + }); cy.get('[data-test=MetricsEpochHeader__title]') .invoke('text') .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window'); @@ -111,9 +113,13 @@ Object.values(viewports).forEach( 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({ + force: true, + }); cy.wait(1000); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click({ + force: true, + }); cy.get('[data-test=MetricsEpochHeader__title]') .invoke('text') .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); @@ -123,7 +129,9 @@ Object.values(viewports).forEach( 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__NavigationArrows__leftArrow]').click({ + force: true, + }); cy.get('[data-test=MetricsEpochHeader__title]') .invoke('text') .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window'); From 69131b93c2c64cc08959ec9cacd6fd7a56fe1978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Wed, 4 Dec 2024 19:48:38 +0000 Subject: [PATCH 3/8] oct-2125: settings e2e test --- client/cypress/e2e/_12settings.cy.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/client/cypress/e2e/_12settings.cy.ts b/client/cypress/e2e/_12settings.cy.ts index 37afd9a90e..3cc30bd187 100644 --- a/client/cypress/e2e/_12settings.cy.ts +++ b/client/cypress/e2e/_12settings.cy.ts @@ -262,7 +262,6 @@ Object.values(viewports).forEach( 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(); From 9f9bb8d7804cf1314a9ce934ca759e113a52d179 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 5 Dec 2024 09:18:12 +0000 Subject: [PATCH 4/8] oct-2125: arrows click without force --- client/cypress/e2e/_13metrics.cy.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/client/cypress/e2e/_13metrics.cy.ts b/client/cypress/e2e/_13metrics.cy.ts index e7a51fd45c..cde3f7bf4d 100644 --- a/client/cypress/e2e/_13metrics.cy.ts +++ b/client/cypress/e2e/_13metrics.cy.ts @@ -95,9 +95,8 @@ Object.values(viewports).forEach( 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({ - force: true, - }); + cy.get('[data-test=Layout__body]').scrollIntoView(); + 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'); @@ -113,13 +112,10 @@ Object.values(viewports).forEach( 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({ - force: true, - }); + cy.get('[data-test=Layout__body]').scrollIntoView(); + cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); cy.wait(1000); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click({ - force: true, - }); + 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'); @@ -129,9 +125,8 @@ Object.values(viewports).forEach( 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({ - force: true, - }); + cy.get('[data-test=Layout__body]').scrollIntoView(); + 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'); From fd991cd26e40ed4fd5209bea6939306a2b3d4b65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 5 Dec 2024 11:07:06 +0000 Subject: [PATCH 5/8] oct-2125: arrows click without force 2 --- client/cypress/e2e/_13metrics.cy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/cypress/e2e/_13metrics.cy.ts b/client/cypress/e2e/_13metrics.cy.ts index cde3f7bf4d..d521052f23 100644 --- a/client/cypress/e2e/_13metrics.cy.ts +++ b/client/cypress/e2e/_13metrics.cy.ts @@ -115,6 +115,7 @@ Object.values(viewports).forEach( cy.get('[data-test=Layout__body]').scrollIntoView(); cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); cy.wait(1000); + cy.get('[data-test=Layout__body]').scrollIntoView(); cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); cy.get('[data-test=MetricsEpochHeader__title]') .invoke('text') From 636b6ed1abca2682b4f501a5b9da638aa2bb8c7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 5 Dec 2024 12:13:19 +0000 Subject: [PATCH 6/8] oct-2125: settings cy update --- client/cypress/e2e/_12settings.cy.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/cypress/e2e/_12settings.cy.ts b/client/cypress/e2e/_12settings.cy.ts index 3cc30bd187..92a98eee35 100644 --- a/client/cypress/e2e/_12settings.cy.ts +++ b/client/cypress/e2e/_12settings.cy.ts @@ -263,6 +263,7 @@ Object.values(viewports).forEach( 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(); From 0c7321833251cd522eaf6350597951113a8e4f1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 5 Dec 2024 14:52:35 +0000 Subject: [PATCH 7/8] oct-2125: metrics cy fix --- client/cypress/e2e/_13metrics.cy.ts | 99 +++++++++++++++-------------- 1 file changed, 51 insertions(+), 48 deletions(-) diff --git a/client/cypress/e2e/_13metrics.cy.ts b/client/cypress/e2e/_13metrics.cy.ts index d521052f23..60d2d9bf05 100644 --- a/client/cypress/e2e/_13metrics.cy.ts +++ b/client/cypress/e2e/_13metrics.cy.ts @@ -65,7 +65,7 @@ Object.values(viewports).forEach( .should('eq', 'uppercase'); }); - it('User is able to change epoch via arrow buttons', () => { + 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]') @@ -85,53 +85,56 @@ Object.values(viewports).forEach( cy.get('[data-test=MetricsEpochHeader__epochDuration]').should('be.visible'); }); - it('Next arrow button is disabled when there is no more next epochs', () => { - 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=Layout__body]').scrollIntoView(); - 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 ', () => { - 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=Layout__body]').scrollIntoView(); - cy.get('[data-test=MetricsEpochHeader__NavigationArrows__leftArrow]').click(); - cy.wait(1000); - cy.get('[data-test=Layout__body]').scrollIntoView(); - 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=Layout__body]').scrollIntoView(); - 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( + '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 = [ From 5679c983ca272bc637cb15946e7b9fbe304d2789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= Date: Thu, 5 Dec 2024 17:59:29 +0000 Subject: [PATCH 8/8] oct-2125: onboarding ToS Accepted fix --- client/cypress/e2e/_08onboardingTOSAccepted.cy.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts b/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts index 15d2775c8b..0c0a467af5 100644 --- a/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts +++ b/client/cypress/e2e/_08onboardingTOSAccepted.cy.ts @@ -82,10 +82,7 @@ Object.values(viewports).forEach( cy.get('[data-test=ModalOnboarding]').should('be.visible'); cy.get('[data-test=ModalOnboarding__Button]').click(); cy.reload(); - // For the unknown reason reloads sometimes cause app to disconnect in E2E env. - cy.disconnectMetamaskWalletFromAllDapps(); - cy.reload(); - connectWalletOnboarding(); + cy.wait(1000); cy.get('[data-test=ModalOnboarding]').should('be.visible'); });