From 8010178ba3d9b1f6083a3b306ae1da534b644514 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Fri, 27 Dec 2024 13:51:06 +0100
Subject: [PATCH 1/2] oct-2135: epoch results graph e2e

---
 client/cypress/e2e/_16allocationAWOpen.cy.ts  | 27 ++++++++++++++++++-
 .../EpochResults/EpochResults.tsx             |  8 ++++--
 .../EpochResultsBar/EpochResultsBar.tsx       |  2 ++
 .../EpochResultsDetails.tsx                   | 14 ++++++----
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/client/cypress/e2e/_16allocationAWOpen.cy.ts b/client/cypress/e2e/_16allocationAWOpen.cy.ts
index cd80fee2ae..b55126af6f 100644
--- a/client/cypress/e2e/_16allocationAWOpen.cy.ts
+++ b/client/cypress/e2e/_16allocationAWOpen.cy.ts
@@ -15,7 +15,7 @@ import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
 chai.use(chaiColors);
 
 Object.values(viewports).forEach(
-  ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop }, idx) => {
+  ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop, isMobile }, idx) => {
     describe(`[AW IS OPEN] Allocation: ${device}`, { viewportHeight, viewportWidth }, () => {
       before(() => {
         /**
@@ -541,6 +541,31 @@ Object.values(viewports).forEach(
         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', 2);
+
+        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', () => {
diff --git a/client/src/components/Home/HomeGridEpochResults/EpochResults/EpochResults.tsx b/client/src/components/Home/HomeGridEpochResults/EpochResults/EpochResults.tsx
index 2108f1d253..e8233feeb0 100644
--- a/client/src/components/Home/HomeGridEpochResults/EpochResults/EpochResults.tsx
+++ b/client/src/components/Home/HomeGridEpochResults/EpochResults/EpochResults.tsx
@@ -173,7 +173,7 @@ const EpochResults: FC<EpochResultsProps> = ({
   }, [isLoading]);
 
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-test="EpochResults">
       <div
         ref={graphContainerRef}
         className={cx(styles.graphContainer, isLoading && styles.isLoading)}
@@ -198,7 +198,11 @@ const EpochResults: FC<EpochResultsProps> = ({
         }}
       >
         {isLoading ? (
-          <Img className={styles.image} src="/images/headphones_girl.webp" />
+          <Img
+            className={styles.image}
+            data-test="EpochResults__Img--headphonesGirl"
+            src="/images/headphones_girl.webp"
+          />
         ) : (
           <div className={styles.barsContainer}>
             {projects.map(({ address, matchedRewards, donations, profileImageSmall }) => (
diff --git a/client/src/components/Home/HomeGridEpochResults/EpochResultsBar/EpochResultsBar.tsx b/client/src/components/Home/HomeGridEpochResults/EpochResultsBar/EpochResultsBar.tsx
index 8152ea0c2a..2a98bf3d02 100644
--- a/client/src/components/Home/HomeGridEpochResults/EpochResultsBar/EpochResultsBar.tsx
+++ b/client/src/components/Home/HomeGridEpochResults/EpochResultsBar/EpochResultsBar.tsx
@@ -52,6 +52,7 @@ const EpochResultsBar: FC<EpochResultsBarProps> = ({
     <motion.div
       ref={ref}
       className={cx(styles.root, topBarHeightPercentage && styles.hasValue)}
+      data-test="EpochResultsBar"
       id={EPOCH_RESULTS_BAR_ID}
       onClick={e => {
         e.stopPropagation();
@@ -79,6 +80,7 @@ const EpochResultsBar: FC<EpochResultsBarProps> = ({
               scale: 1,
             }}
             className={styles.projectLogo}
+            data-test="EpochResultsBar__projectLogo"
             exit={{
               opacity: 0,
               scale: 0.5,
diff --git a/client/src/components/Home/HomeGridEpochResults/EpochResultsDetails/EpochResultsDetails.tsx b/client/src/components/Home/HomeGridEpochResults/EpochResultsDetails/EpochResultsDetails.tsx
index 3192b3b334..daabdfd847 100644
--- a/client/src/components/Home/HomeGridEpochResults/EpochResultsDetails/EpochResultsDetails.tsx
+++ b/client/src/components/Home/HomeGridEpochResults/EpochResultsDetails/EpochResultsDetails.tsx
@@ -104,6 +104,7 @@ const EpochResultsDetails: FC<EpochResultsDetailsProps> = ({
     <div
       ref={ref}
       className={styles.root}
+      data-test="EpochResultsDetails"
       onMouseDown={e => {
         if (!isScrollable) {
           return;
@@ -152,7 +153,7 @@ const EpochResultsDetails: FC<EpochResultsDetailsProps> = ({
       }}
     >
       {isLoading && (
-        <div className={styles.loading}>
+        <div className={styles.loading} data-test="EpochResultsDetails__loading">
           {t('loadingChartData')}
           {[...Array(dots).keys()].map(key => (
             <span key={`dot__${key}`}>.</span>
@@ -170,18 +171,20 @@ const EpochResultsDetails: FC<EpochResultsDetailsProps> = ({
       )}
       {!isScrollInfoVisible && details && (
         <>
-          <div className={styles.projectName}>{details.name}</div>
-          <div className={styles.donations}>
+          <div className={styles.projectName} data-test="EpochResultsDetails__projectName">
+            {details.name}
+          </div>
+          <div className={styles.donations} data-test="EpochResultsDetails__donations">
             {isMobile ? t('donationsShort') : i18n.t('common.donations')}
             {isMobile ? '' : ' '}
             {donationsToDisplay}
           </div>
-          <div className={styles.matching}>
+          <div className={styles.matching} data-test="EpochResultsDetails__matching">
             {isMobile ? t('matchingShort') : i18n.t('common.matching')}
             {isMobile ? '' : ' '}
             {matchingToDisplay}
           </div>
-          <div className={styles.total}>
+          <div className={styles.total} data-test="EpochResultsDetails__total">
             {isMobile ? t('totalShort') : i18n.t('common.total')}
             {isMobile ? '' : ' '}
             {totalToDisplay}
@@ -189,6 +192,7 @@ const EpochResultsDetails: FC<EpochResultsDetailsProps> = ({
           {!isMobile && (
             <Button
               className={styles.link}
+              dataTest="EpochResultsDetails__Button--visitProject"
               isDisabled
               onMouseOver={e => e.stopPropagation()}
               variant="link"

From a4857e1bc1cbae3c684b6339aab9e3efc86c3be7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Fri, 27 Dec 2024 13:52:19 +0100
Subject: [PATCH 2/2] oct-2135: e2e update

---
 client/cypress/e2e/_16allocationAWOpen.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/cypress/e2e/_16allocationAWOpen.cy.ts b/client/cypress/e2e/_16allocationAWOpen.cy.ts
index b55126af6f..3169dd0ebe 100644
--- a/client/cypress/e2e/_16allocationAWOpen.cy.ts
+++ b/client/cypress/e2e/_16allocationAWOpen.cy.ts
@@ -549,7 +549,7 @@ Object.values(viewports).forEach(
         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', 2);
+        cy.get('[data-test=EpochResultsBar]').should('have.length', 4);
 
         if (isMobile) {
           cy.get('[data-test=EpochResultsBar]').eq(0).click();