OCT-2132: Home UQ E2E

client/cypress/e2e/_15metrics.cy.ts

@@ -98,10 +98,6 @@ 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__title]')
-            .invoke('text')
-            .should('eq', isMobile || isTablet ? 'E3 Allocation' : 'Epoch 3 Allocation Window');
         },
       );
 
@@ -129,10 +125,6 @@ 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__title]')
-            .invoke('text')
-            .should('eq', isMobile || isTablet ? 'E1 Allocation' : 'Epoch 1 Allocation Window');
         },
       );
 

client/cypress/e2e/_22uq.cy.ts

@@ -0,0 +1,58 @@
+// 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] UQ: ${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);
+      connectWallet({ isPatronModeEnabled: false });
+    });
+
+    it('Each element of UQ tile is visible and has correct value', () => {
+      cy.get('[data-test=HomeGridUQScore__Button--whatIsThis]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScore__Button--whatIsThis]').click();
+      cy.wait(500);
+      cy.get('[data-test=ModalCalculatingYourUniqueness]').should('be.visible');
+      cy.get('[data-test=ModalCalculatingYourUniqueness__ProgressStepperSlim__element]').should(
+        'have.length',
+        3,
+      );
+      cy.get('[data-test=ModalCalculatingYourUniqueness__Button]').click();
+      cy.wait(500);
+      cy.get('[data-test=ModalCalculatingYourUniqueness]').should('not.exist');
+      cy.get('[data-test=HomeGridUQScoreAddresses]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScore__Button--scoreTooLow]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScore__Button--scoreTooLow]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://passport.gitcoin.co/#/octant/');
+      cy.get('[data-test=HomeGridUQScore__Button--recalculate]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScore__Button--delegate]').should('be.visible');
+    });
+  });
+});

client/cypress/utils/onboarding.ts

@@ -80,7 +80,7 @@ export const checkChangeStepsByClickingEdgeOfTheScreenUpTo25px = (
   isMobileOrTablet = false,
 ): void => {
   checkCurrentElement(0, true);
-
+  cy.wait(500);
   cy.get('[data-test=ModalOnboarding]').then(element => {
     const leftEdgeX = element.offsetParent()?.offset()?.left || 0;
     const rightEdgeX = (leftEdgeX as number) + element.innerWidth()!;
@@ -109,7 +109,7 @@ export const checkChangeStepsByClickingEdgeOfTheScreenMoreThan25px = (
   isMobileOrTablet = false,
 ): void => {
   checkCurrentElement(0, true);
-
+  cy.wait(500);
   cy.get('[data-test=ModalOnboarding]').then(element => {
     const leftEdgeX = element.offsetParent()?.offset()?.left || 0;
     const rightEdgeX = (leftEdgeX as number) + element.innerWidth()!;

client/src/components/Home/HomeGridUQScore/HomeGridUQScore.tsx

@@ -249,6 +249,7 @@ const HomeGridUQScore: FC<HomeGridUQScoreProps> = ({ className }) => {
         titleSuffix={
           <Button
             className={styles.titleSuffix}
+            dataTest="HomeGridUQScore__Button--whatIsThis"
             isButtonScalingUpOnHover={false}
             label={t('whatIsThis')}
             onClick={() => setIsCalculatingYourUniquenessModalOpen(true)}
@@ -272,6 +273,7 @@ const HomeGridUQScore: FC<HomeGridUQScoreProps> = ({ className }) => {
           ) : (
             <Button
               className={styles.furtherActions}
+              dataTest="HomeGridUQScore__Button--scoreTooLow"
               href={GITCOIN_PASSPORT_CUSTOM_OCTANT_DASHBOARD}
               label={t('scoreTooLow')}
               variant="link6"
@@ -280,6 +282,7 @@ const HomeGridUQScore: FC<HomeGridUQScoreProps> = ({ className }) => {
           <div className={styles.buttonsWrapper}>
             <Button
               className={styles.button}
+              dataTest="HomeGridUQScore__Button--recalculate"
               isDisabled={isRecalculateButtonDisabled}
               isHigh
               onClick={() => setIsRecalculatingScoreModalOpen(true)}
@@ -289,6 +292,7 @@ const HomeGridUQScore: FC<HomeGridUQScoreProps> = ({ className }) => {
             </Button>
             <Button
               className={styles.button}
+              dataTest="HomeGridUQScore__Button--delegate"
               isDisabled={isDelegateButtonDisabled}
               isHigh
               onClick={() => {