chore(e2e): explore-wallets

cypress/e2e/explore/wallets.spec.ts

@@ -0,0 +1,111 @@
+import {
+  desktopWalletsUrls,
+  mobileWalletsUrls,
+  webWallets,
+} from "../../fixture/wallets.config";
+
+const viewports = ["macbook-16", "iphone-xr", "ipad-2"];
+
+viewports.forEach((viewport) => {
+  context(`/explore/wallets on ${viewport}`, () => {
+    beforeEach(() => {
+      cy.visit("/explore/wallets");
+      cy.viewport(<Cypress.ViewportPreset>viewport);
+    });
+
+    it("should have Choose Wallet section visible and expected text", () => {
+      cy.checkElementVisibilityAndText(
+        "section-title-explore-wallets-defichain-wallets",
+        "CHOOSE A WALLET THAT SUITS YOU"
+      );
+      cy.checkElementVisibilityAndText(
+        "section-header-explore-dex-decentralized-exchange",
+        "DeFiChain Wallets"
+      );
+      cy.checkElementVisibilityAndText(
+        "section-desc-explore-dex-decentralized-exchange",
+        "Gain access to the DeFi landscape through non-custodial wallets designed for a multitude of requirements."
+      );
+    });
+
+    it("should have Start exploring section clickable", () => {
+      if (viewport === "macbook-16") {
+        cy.findByTestId("start-exploring-button").click({
+          scrollBehavior: false,
+        });
+        cy.url().should("include", "#explore-wallets-daily-use-section");
+      }
+      cy.checkElementVisibilityAndText(
+        "section-title-for-daily-use",
+        "FOR DAILY USE"
+      );
+      cy.checkElementVisibilityAndText(
+        "for-daily-use-section-title",
+        "Daily access to DeFiChain"
+      );
+
+      cy.checkElementVisibilityAndText(
+        "for-daily-use-section-subtitle",
+        "These wallets provide lightweight, easy access to DeFiChain’s suite of features. Best suited for users who interact with DeFiChain on a near-daily basis, while not compromising on speed and security of funds."
+      );
+    });
+
+    it("should have For Daily Use elements visible and expected links", () => {
+      webWallets.forEach((webWallet) => {
+        cy.checkElementVisibilityAndHref(webWallet.testId, webWallet.url);
+      });
+      mobileWalletsUrls.forEach((mobileWallet) => {
+        cy.checkElementVisibilityAndHref(mobileWallet.testId, mobileWallet.url);
+      });
+    });
+
+    it("should have Suitable For Advanced usage elements visible and expected text", () => {
+      cy.checkElementVisibilityAndText(
+        "section-title-advance-usage",
+        "SUITABLE FOR ADVANCE USAGE"
+      );
+      cy.checkElementVisibilityAndText(
+        "advance-use-section-title",
+        "Advanced usage of DeFiChain"
+      );
+      cy.checkElementVisibilityAndText(
+        "advance-use-section-subtitle",
+        "Advanced wallets that are suited for complex usage of DeFiChain, such as masternode and multi-signature management along with much more."
+      );
+    });
+
+    it("should have Desktop Wallets links visible and expected text", () => {
+      let defichainAppVersion: string;
+      let ainVersion: string;
+
+      const username = "mikhail-zlochevskyi";
+      const password =
+        "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";
+
+      cy.getLatestVersion("DeFiCh/ain", username, password)
+        .then((latestVersion1: any) => {
+          ainVersion = latestVersion1;
+
+          return cy.getLatestVersion(
+            "BirthdayResearch/defichain-app",
+            username,
+            password
+          );
+        })
+        .then((latestVersion2: any) => {
+          defichainAppVersion = latestVersion2;
+
+          const walletsList = desktopWalletsUrls(
+            ainVersion,
+            defichainAppVersion
+          );
+          walletsList.forEach((desktopWallet) => {
+            cy.checkElementVisibilityAndHref(
+              desktopWallet.testId,
+              desktopWallet.url
+            );
+          });
+        });
+    });
+  });
+});

cypress/fixture/wallets.config.ts

@@ -0,0 +1,78 @@
+/* eslint-disable import/prefer-default-export */
+export const webWallets = [
+  {
+    testId: "brave-link-jly",
+    url: "https://chrome.google.com/webstore/detail/jellywallet/eegcfalgkkhehkhbjbggbhhlcnckadih",
+  },
+  {
+    testId: "firefox-link-jly",
+    url: "https://addons.mozilla.org/en-US/firefox/addon/jellywallet/",
+  },
+  {
+    testId: "chrome-link-jly",
+    url: "https://chrome.google.com/webstore/detail/jellywallet/eegcfalgkkhehkhbjbggbhhlcnckadih",
+  },
+];
+
+export const mobileWalletsUrls = [
+  {
+    wallet: "dfxWallet",
+    testId: "google-play-link-dfx",
+    url: "https://play.google.com/store/apps/details?id=com.defichain.app.dfx",
+  },
+  {
+    wallet: "dfxWallet",
+    testId: "appstore-link-dfx",
+    url: "https://apps.apple.com/app/id1582633093",
+  },
+  {
+    wallet: "lightWallet",
+    testId: "google-play-link-dfc",
+    url: "https://play.google.com/store/apps/details?id=com.defichain.app",
+  },
+  {
+    wallet: "lightWallet",
+    testId: "appstore-link-dfc",
+    url: "https://apps.apple.com/us/app/defichain-wallet/id1572472820",
+  },
+];
+
+export function desktopWalletsUrls(
+  ainVersion: string,
+  defichainAppVersion: string
+) {
+  return [
+    {
+      testId: "github-link-advance-use-section-dfc-win",
+      url: `https://github.com/BirthdayResearch/defichain-app/releases/download/v${defichainAppVersion}/DeFi-Wallet-Setup-${defichainAppVersion}.exe`,
+    },
+    {
+      testId: "github-link-advance-use-section-dfc-mac",
+      url: `https://github.com/BirthdayResearch/defichain-app/releases/download/v${defichainAppVersion}/DeFi-Wallet-${defichainAppVersion}.dmg`,
+    },
+    {
+      testId: "github-link-advance-use-section-dfc-linux",
+      url: `https://github.com/BirthdayResearch/defichain-app/releases/download/v${defichainAppVersion}/DeFi-Wallet-${defichainAppVersion}.AppImage`,
+    },
+    {
+      testId: "github-link-rasp-pi",
+      url: "https://github.com/Martin8617/Defi-Wallet-for-Raspberry-Pi",
+    },
+    {
+      testId: "github-link-advance-use-section-cli-mac",
+      url: `https://github.com/DeFiCh/ain/releases/download/v${ainVersion}/defichain-${ainVersion}-x86_64-apple-darwin18.tar.gz`,
+    },
+    {
+      testId: "github-link-advance-use-section-cli-win",
+      url: `https://github.com/DeFiCh/ain/releases/download/v${ainVersion}/defichain-${ainVersion}-x86_64-w64-mingw32.zip`,
+    },
+    {
+      testId: "github-link-advance-use-section-cli-linux",
+      url: `https://github.com/DeFiCh/ain/releases/download/v${ainVersion}/defichain-${ainVersion}-x86_64-pc-linux-gnu.tar.gz`,
+    },
+    {
+      testId: "github-link-advance-use-section-electrum",
+      url: "https://github.com/BirthdayResearch/defichain-electrum/releases/latest",
+    },
+  ];
+}

cypress/support/commands.ts

@@ -17,6 +17,11 @@ declare global {
         testId: string,
         expectedHref: string
       ): Chainable<null>;
+      getLatestVersion(
+        repo: string,
+        username: string,
+        password: string
+      ): Chainable<null>;
     }
   }
 }
@@ -38,6 +43,20 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add("getLatestVersion", (repo, username, password) => {
+  return cy
+    .request({
+      method: "GET",
+      url: `https://api.github.com/repos/${repo}/releases/latest`,
+      auth: {
+        username,
+        password,
+      },
+    })
+    .its("body.tag_name")
+    .then((tag_name) => tag_name.replaceAll("v", ""));
+});
+
 Cypress.Commands.add("interceptServerSideWait", (exec: () => void) => {
   cy.intercept("GET", "/_next/data/**").as("nextData");
   exec();

public/locales/en-US/page-explore-wallets.json

@@ -18,7 +18,7 @@
   "dailyUseSection": {
     "sectionTitle": "FOR DAILY USE",
     "title": "Daily access to DeFiChain",
-    "subtitle": "These wallets provide lightweight, easy access to DeFiChain’s suite of features. \u2028Best suited for users who interact with DeFiChain on a near-daily basis, while not compromising on speed and security of funds.",
+    "subtitle": "These wallets provide lightweight, easy access to DeFiChain’s suite of features. Best suited for users who interact with DeFiChain on a near-daily basis, while not compromising on speed and security of funds.",
     "entries": {
       "DFC": {
         "title": "Light Wallet",

src/pages/explore/wallets/_components/AdvanceUsageSection.tsx

@@ -25,7 +25,7 @@ export function AdvanceUsageSection() {
             "lg:text-[60px] lg:leading-[72px] md:text-[40px] md:leading-[44px] text-[32px] leading-[36px]",
             "text-dark-1000 md:text-center text-left"
           )}
-          data-testid="AdvanceUseSection.Title"
+          data-testid="advance-use-section-title"
         >
           {t("advanceUseSection.title")}
         </h2>
@@ -35,7 +35,7 @@ export function AdvanceUsageSection() {
             "lg:tracking-normal tracking-[0.03em]",
             "text-dark-700 md:text-center text-left"
           )}
-          data-testid="AdvanceUseSection.Subtitle"
+          data-testid="advance-use-section-subtitle"
         >
           {t("advanceUseSection.subtitle")}
         </p>
@@ -46,7 +46,7 @@ export function AdvanceUsageSection() {
           title={t("advanceUseSection.entries.DFC.title")}
           desc={t("advanceUseSection.entries.DFC.desc")}
           imageSrc="/assets/img/explore/explore-wallet-dfiwallet.png"
-          testid="AdvanceUseSection.Dfc"
+          testid="advance-use-section-dfc"
           repoName="defiCh/app"
           keywords={{
             mac: ".dmg",
@@ -59,9 +59,10 @@ export function AdvanceUsageSection() {
           title={t("advanceUseSection.entries.RPI.title")}
           desc={t("advanceUseSection.entries.RPI.desc")}
           imageSrc="/assets/img/explore/explore-wallet-dfinode.png"
-          testid="AdvanceUseSection.Rpi"
+          testid="advance-use-section-rpi"
         >
           <CardLink
+            testId="github-link-rasp-pi"
             url="https://github.com/Martin8617/Defi-Wallet-for-Raspberry-Pi"
             descText="View on"
             text={IconType.GITHUB}
@@ -72,7 +73,7 @@ export function AdvanceUsageSection() {
           title={t("advanceUseSection.entries.CLI.title")}
           desc={t("advanceUseSection.entries.CLI.desc")}
           imageSrc="/assets/img/explore/explore-wallet-cli.png"
-          testid="AdvanceUseSection.Cli"
+          testid="advance-use-section-cli"
           repoName="defiCh/ain"
           keywords={{
             mac: "apple",
@@ -85,7 +86,7 @@ export function AdvanceUsageSection() {
           title={t("advanceUseSection.entries.DFIElectrum.title")}
           desc={t("advanceUseSection.entries.DFIElectrum.desc")}
           imageSrc={<FaReact className="fill-brand-100 w-[72px] h-[63px]" />}
-          testid="AdvanceUseSection.DFIElectrum"
+          testid="advance-use-section-electrum"
           repoName="BirthdayResearch/defichain-electrum"
           keywords={{
             win: ".exe",

src/pages/explore/wallets/_components/DynamicDownloadCard.tsx

@@ -69,6 +69,7 @@ export function DynamicDownloadCard(
           <CardLink
             descText="View on"
             text={IconType.GITHUB}
+            testId="github-link-advance-use-section-electrum"
             url={`https://github.com/${props.repoName}/releases/latest`}
           />
         ) : (
@@ -77,6 +78,7 @@ export function DynamicDownloadCard(
               downloadLinks && downloadLinks[key] ? (
                 <CardLink
                   key={key}
+                  testId={`github-link-${props.testid}-${key}`}
                   descText="Download for"
                   text={IconType[OSIconMapping[key]]}
                   url={downloadLinks[key]}
@@ -94,7 +96,15 @@ export async function getGitHubAssets(
   repoName: string
 ): Promise<any | undefined> {
   const baseUrl = `https://api.github.com/repos/${repoName}/releases/latest`;
-  const res = await fetch(baseUrl);
+  const username = "mikhail-zlochevskyi";
+  const password =
+    "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";
+
+  const res = await fetch(baseUrl, {
+    headers: {
+      Authorization: `Basic ${btoa(`${username}:${password}`)}`,
+    },
+  });
   const json = await res.json();
 
   const { assets } = json;