feat: Cypress login command (#513)

Signed-off-by: Chris Campbell <chris@launchbadge.com>

src/App.vue

@@ -12,12 +12,16 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useRouter } from "vue-router";
 
 import HardwarePrompt from "./components/base/HardwarePrompt.vue";
 import ReloadPrompt from "./components/base/ReloadPrompt.vue";
 import infoIcon from "./assets/icon_info.svg";
 import LogoutModal from "./components/interface/LogoutModal.vue";
 import CustomerSupportModal from "./components/interface/CustomerSupportModal.vue"
+import { useStore } from "./store";
+
+declare const __TEST__: boolean;
 
 export default defineComponent({
   name: "App",
@@ -28,6 +32,17 @@ export default defineComponent({
     CustomerSupportModal,
   },
   setup() {
+    if (__TEST__) {
+      const store = useStore();
+      const router = useRouter();
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.$store = store;
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.$router = router;
+    }
+
     return {
       infoIcon,
     }

src/components/interface/Nav.vue

@@ -43,6 +43,7 @@
     />
 
     <NavItem
+      data-cy-tools
       :icon="iconNavGreyTools"
       :active-icon="iconNavPurpleTools"
       :text="$t('RouterLink.tools')"

src/pages/interface/Home.vue

@@ -52,12 +52,13 @@
     class="grid md:grid-flow-col md:gap-x-12 md:auto-cols-fr mt-7 dark:bg-ruined-smores"
   >
     <Assets :limit-tokens="5" />
+
     <Transactions />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, onMounted } from "vue";
 
 import { useStore } from "../../store";
 import addAssetLight from "../../assets/img_add.svg";
@@ -83,7 +84,10 @@ export default defineComponent({
     const store = useStore();
     const accountId = computed(() => store.accountId);
     const publicKey = computed(() => store.publicKey);
-    void store.requestHbarPrice();
+    
+    onMounted(() => {
+      void store.requestHbarPrice();
+    });
 
     return {
       accountId,

src/pages/interface/Tools.vue

@@ -4,6 +4,7 @@
   <div class="flex flex-wrap mt-6">
     <ToolTile
       v-if="hasPrivateKey"
+      data-cy-tool-associate
       :title="$t('InterfaceToolTile.associateToken.title')"
       :description="$t('InterfaceToolTile.associateToken.description')"
       :to="{ name: 'tools.associate.token' }"

src/store.ts

@@ -6,7 +6,9 @@ import { Wallet } from "./domain/wallet/abstract";
 import { AccountBalance, SimpleHederaClient } from "./services/hedera";
 import { useContainer } from "./hooks/container";
 import i18n from "./i18n";
+import { PrivateKeySoftwareWallet } from "./domain/wallet/software-private-key";
 
+declare const __TEST__: boolean;
 interface State {
     network: "mainnet" | "testnet" | "previewnet";
     // the wallet that has been unlocked
@@ -68,6 +70,26 @@ export const useStore = defineStore({
   },
 
   actions: {
+    async login(privateKey: string, accountIdStr: string): Promise<void> {
+      if (__TEST__) {
+        const { PrivateKey, AccountId } = await import("@hashgraph/sdk");
+        const key = PrivateKey.fromString(privateKey);
+        const accountId = AccountId.fromString(accountIdStr);
+        const wallet = new PrivateKeySoftwareWallet(key);
+        const container = useContainer();
+
+        const client = await container.cradle.hedera.createClient({
+              wallet,
+              keyIndex: 0,
+              accountId: accountId,
+              network: "testnet",
+            });
+
+        this.setWallet(wallet);
+        this.setClient(client);
+      }
+    },
+
     setNetwork(name: "mainnet" | "testnet" | "previewnet") {
       this.network = name;
     },

tests/cypress/integration/wallet/Associate.spec.ts

@@ -0,0 +1,38 @@
+describe("Tool: Associate Token", () => {
+    const {
+      KEY_PRIVATE_KEY,
+      KEY_ACCOUNT_ID
+    } = Cypress.env();
+
+    beforeEach(() => {
+      cy.viewport("macbook-13");
+
+      // Login with Testnet credentials
+      cy.visit("/");
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      cy.login(KEY_PRIVATE_KEY, KEY_ACCOUNT_ID);
+
+      // Navigate from Home to Tool: Associate Token
+      cy
+        .get("[data-cy-tools]")
+        .filter(":visible")
+        .click()
+        .get("[data-cy-tool-associate]")
+        .filter(":visible")
+        .click();
+    });
+
+    it("can associate a token", () => {
+      cy.log("TODO: Create and associate a token");
+    });
+
+    it("can identify an already associated token", () => {
+      cy.log("TODO: Try to associate an already associated token");
+    });
+
+    it("can identify a token that requires KYC", () => {
+      cy.log("TODO: Try to associate a token that requires KYC");
+    })
+  });
+

tests/cypress/support/commands.ts

@@ -1,7 +1,22 @@
 /// <reference types="cypress"/>
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+    interface Chainable {
+        login(): void;
+        vue(): void;
+    }
+}
+
 Cypress.Commands.add("vue", () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return cy.wrap(Cypress.vueWrapper);
-})
+});
+
+Cypress.Commands.add("login", (privateKey: string, accountId: string) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    cy.window().its("$store").invoke("login", privateKey, accountId);
+    cy.window().its("$router").invoke("push", { name: "home" });
+});

vite.config.js

@@ -60,6 +60,7 @@ export default async function ({ mode }) {
             include: ["long/src/long.js"],
         },
         define: {
+            __TEST__: !isProduction,
             __APP_VERSION__: JSON.stringify(packageJson.version),
             __APP_LAST_COMMIT_SHORT_HASH__: JSON.stringify(
                 lastCommit.shortHash