OCT-2136: Home Video Bar E2E (#601)

## 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/_19rewardsEstimator.cy.ts → client/cypress/e2e/group1/_11rewardsEstimator.cy.ts

@@ -14,7 +14,7 @@ chai.use(chaiColors);
 
 Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isMobile }) => {
   describe(
-    `[AW IS OPEN] Home rewards estimator: ${device}`,
+    `[AW IS CLOSED] Home rewards estimator: ${device}`,
     { viewportHeight, viewportWidth },
     () => {
       before(() => {

client/cypress/e2e/group1/_13uq.cy.ts

@@ -0,0 +1,55 @@
+// 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 }) => {
+  describe(`[AW IS CLOSED] UQ: ${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.home.absolute);
+    });
+
+    it(
+      'Each element of UQ tile is visible and has correct value',
+      { scrollBehavior: false },
+      () => {
+        cy.get('[data-test=HomeGridUQScore]').scrollIntoView({ offset: { left: 0, top: -100 } });
+        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/e2e/group1/_14videoBar.cy.ts

@@ -0,0 +1,171 @@
+// 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,
+  SHOW_HELP_VIDEOS,
+} from 'src/constants/localStorageKeys';
+import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+chai.use(chaiColors);
+
+Object.values(viewports).forEach(
+  ({ device, viewportWidth, viewportHeight, isLargeDesktop, isDesktop, isTablet, isMobile }) => {
+    describe(`[AW IS CLOSED] Video bar: ${device}`, { viewportHeight, viewportWidth }, () => {
+      before(() => {
+        cy.clearLocalStorage();
+      });
+
+      beforeEach(() => {
+        cy.intercept(
+          'https://api.vimeo.com/users/*/albums/*/videos?*',
+
+          {
+            data: [
+              {
+                name: 'How to lock GLM in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544156?h=e362bf71a2',
+              },
+              {
+                name: 'How to allocate rewards in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544104?h=cbb2f84a38',
+              },
+              {
+                name: 'How to withdraw rewards in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544172?h=d9559d5809',
+              },
+              {
+                name: 'How to lock GLM in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544156?h=e362bf71a2',
+              },
+              {
+                name: 'How to allocate rewards in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544104?h=cbb2f84a38',
+              },
+              {
+                name: 'How to withdraw rewards in Octant',
+                player_embed_url: 'https://player.vimeo.com/video/1018544172?h=d9559d5809',
+              },
+            ],
+          },
+        );
+        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);
+      });
+
+      it('User can close video bar', { scrollBehavior: false }, () => {
+        cy.get('[data-test=HomeGridVideoBar]').should('be.visible');
+        cy.get('[data-test=HomeGridVideoBar]').scrollIntoView({ offset: { left: 0, top: -100 } });
+
+        cy.get('[data-test=HomeGridVideoBar__Button]').click();
+        cy.get('[data-test=HomeGridVideoBar]').should('not.exist');
+
+        if (isLargeDesktop || isDesktop) {
+          cy.get('[data-test=LayoutTopBar__settingsButton]').click();
+        } else {
+          cy.get(`[data-test=LayoutNavbar__Button--settings]`).click();
+        }
+
+        cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').scrollIntoView({
+          offset: { left: 0, top: -100 },
+        });
+        cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').should('not.be.checked');
+        cy.getAllLocalStorage().then(() => {
+          expect(localStorage.getItem(SHOW_HELP_VIDEOS)).eq('false');
+        });
+        cy.get('[data-test=SettingsShowHelpVideosBox__InputToggle]').click();
+      });
+
+      if (!isMobile) {
+        it(
+          'User opens video by clicking on video tile (large-desktop, desktop, tablet ->) and close by clicking on overlay or close button ',
+          { scrollBehavior: false },
+          () => {
+            cy.get('[data-test=HomeGridVideoBar]').scrollIntoView({
+              offset: { left: 0, top: -100 },
+            });
+            cy.get('[data-test=VideoTile]').should('exist');
+            cy.get('[data-test=VideoTile]').eq(0).click();
+            cy.wait(500);
+
+            cy.get('[data-test=VideoTile__videoBox]').should('be.visible');
+            cy.get('[data-test=VideoTile__videoBox__videoIframe]').should('be.visible');
+            cy.get('[data-test=VideoTile__videoBox__overlay]').should('exist');
+            cy.get('[data-test=VideoTile__videoBox__overlay]').click({ force: true });
+            cy.wait(500);
+            cy.get('[data-test=VideoTile__videoBox]').should('not.exist');
+            cy.get('[data-test=VideoTile]').eq(0).click();
+            cy.wait(500);
+            cy.get('[data-test=VideoTile__videoBox__closeButton]').should('be.visible');
+            cy.get('[data-testVideoTile__videoBox__closeButtonText]').should('not.exist');
+            cy.get('[data-test=VideoTile__videoBox__closeButton]').realHover();
+            cy.wait(500);
+            cy.get('[data-test=VideoTile__videoBox]').should('be.visible');
+            cy.get('[data-test=VideoTile__videoBox__videoIframe]').should('be.visible');
+            cy.get('[data-test=VideoTile__videoBox__closeButtonText]').should('be.visible');
+            cy.get('[data-test=VideoTile__videoBox__closeButton]').click();
+            cy.wait(500);
+            cy.get('[data-test=VideoTile__videoBox]').should('not.exist');
+          },
+        );
+      }
+
+      it('User can move video box by drag&drop ', { scrollBehavior: false }, () => {
+        cy.get('[data-test=HomeGridVideoBar]').scrollIntoView({ offset: { left: 0, top: -100 } });
+        cy.get('[data-test=VideoTile]').should('exist');
+
+        cy.get('[data-test=VideoTile]').eq(0).should('be.visible');
+        cy.get('[data-test=VideoTile]').then($videoTile => {
+          const { right: pageXStartRight, left: pageXStartLeft } =
+            $videoTile[0].getBoundingClientRect();
+          const difference = isMobile || isTablet ? 280 + 24 : 392 + 24;
+
+          const hidePageXEnd = pageXStartRight - difference;
+          const showPageXEnd = pageXStartLeft + difference;
+
+          cy.get('[data-test=VideoTile]')
+            .eq(0)
+            .trigger('pointerdown', { pageX: pageXStartRight })
+            .trigger('pointermove', {
+              pageX: hidePageXEnd,
+            });
+
+          cy.get('[data-test=VideoTile]').eq(0).should('not.be.visible');
+          cy.get('[data-test=VideoTile]').eq(1).should('be.visible');
+          cy.get('[data-test=VideoTile]')
+            .eq(1)
+            .trigger('pointerdown', { pageX: pageXStartLeft })
+            .trigger('pointermove', {
+              pageX: showPageXEnd,
+            });
+          cy.get('[data-test=VideoTile]').eq(0).should('be.visible');
+        });
+      });
+
+      it('User can move to next/prev video using the arrows ', { scrollBehavior: false }, () => {
+        const leftArrowDataTest = `HomeGridVideoBar__NavigationArrows${isMobile ? '--mobile' : '--nonMobile'}__leftArrow`;
+        const rightArrowDataTest = `HomeGridVideoBar__NavigationArrows${isMobile ? '--mobile' : '--nonMobile'}__rightArrow`;
+        cy.get('[data-test=HomeGridVideoBar]').scrollIntoView({ offset: { left: 0, top: -100 } });
+        cy.get('[data-test=VideoTile]').should('exist');
+        cy.get(`[data-test=${leftArrowDataTest}]`).should('be.visible');
+        cy.get(`[data-test=${leftArrowDataTest}]`).should('be.disabled');
+        cy.get(`[data-test=${rightArrowDataTest}]`).should('be.visible');
+        cy.get(`[data-test=${rightArrowDataTest}]`).should('not.be.disabled');
+        cy.get('[data-test=VideoTile]').eq(0).should('be.visible');
+        cy.get(`[data-test=${rightArrowDataTest}]`).click();
+        cy.get('[data-test=VideoTile]').eq(0).should('not.be.visible');
+        cy.get(`[data-test=${leftArrowDataTest}]`).should('not.be.disabled');
+        cy.get(`[data-test=${leftArrowDataTest}]`).click();
+        cy.get('[data-test=VideoTile]').eq(0).should('be.visible');
+        cy.get(`[data-test=${leftArrowDataTest}]`).should('be.disabled');
+      });
+    });
+  },
+);

client/cypress/e2e/group2/_01metamaskWorkaround.cy.ts

@@ -0,0 +1,8 @@
+// Cypress tests based on framer pass only in case when test tab is active (chrome doesn't block animations).
+// On first test, active tab is MetaMask and on each next active tab is test tab - due to that we had to add this workaround.
+// Only for `synpress run` command
+describe('Workaround for first test (active tab is MetaMask instead of Cypress tab)', () => {
+  it('true', () => {
+    expect(true).to.be.true;
+  });
+});