OCT-2135: Home Epoch Results Graph E2E (#608)

## Description

## Definition of Done

1. [ ] If required, the desciption of your change is added to the [QA
changelog](https://www.notion.so/octantapp/Changelog-for-the-QA-d96fa3b411cf488bb1d8d9a598d88281)
2. [ ] Acceptance criteria are met.
3. [ ] PR is manually tested before the merge by developer(s).
    - [ ] Happy path is manually checked.
4. [ ] PR is manually tested by QA when their assistance is required
(1).
- [ ] Octant Areas & Test Cases are checked for impact and updated if
required (2).
5. [ ] Unit tests are added unless there is a reason to omit them.
6. [ ] Automated tests are added when required.
7. [ ] The code is merged.
8. [ ] Tech documentation is added / updated, reviewed and approved
(including mandatory approval by a code owner, should such exist for
changed files).
    - [ ] BE: Swagger documentation is updated.
9. [ ] When required by QA:
    - [ ] Deployed to the relevant environment.
    - [ ] Passed system tests.

---

(1) Developer(s) in coordination with QA decide whether it's required.
For small tickets introducing small changes QA assistance is most
probably not required.

(2) [Octant Areas & Test
Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).

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', 4);
+
+        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', () => {

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 }) => (

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,

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,25 +171,28 @@ 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}
           </div>
           {!isMobile && (
             <Button
               className={styles.link}
+              dataTest="EpochResultsDetails__Button--visitProject"
               isDisabled
               onMouseOver={e => e.stopPropagation()}
               variant="link"