Yaki-cypress-tests

app/glove-test.ts

@@ -0,0 +1,55 @@
+import './style.css';
+import { web3Accounts, web3Enable, web3FromSource } from '@polkadot/extension-dapp';
+import { ApiPromise, WsProvider } from '@polkadot/api';
+import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
+import { APP_NAME } from '@/lib/consts';
+
+const ROCOCO_WS_PROVIDER = 'wss://rococo-rpc.polkadot.io';
+let injectedAccounts: InjectedAccountWithMeta[] = [];
+
+if (typeof window !== 'undefined') {
+  document
+    .querySelector<HTMLButtonElement>('#hero-connect-accounts')!
+    .addEventListener('click', async () => {
+      // returns an array of all the injected sources
+      // (this needs to be called first, before other requests)
+      const allInjected = await web3Enable('example-dapp');
+      const allAccounts = await web3Accounts();
+      console.log('glove-test', { allInjected, allAccounts });
+    });
+}
+
+// document.querySelector<HTMLButtonElement>('#send-tx')!.addEventListener('click', async () => {
+//   const provider = new WsProvider(ROCOCO_WS_PROVIDER);
+//   const api = await ApiPromise.create({ provider });
+
+//   // Initialise the provider to connect to the local node
+//   const account = injectedAccounts[0];
+
+//   if (injectedAccounts.length === 0) {
+//     console.error('No injected account');
+//     return;
+//   }
+
+//   const amount = document.querySelector<HTMLInputElement>('#amount-input')?.value;
+
+//   const transferExtrinsic = api.tx.balances.transferKeepAlive(account.address, amount);
+//   const injector = await web3FromSource(account.meta.source);
+
+//   transferExtrinsic
+//     .signAndSend(account.address, { signer: injector.signer }, ({ events, txHash, status }) => {
+//       document.querySelector<HTMLDivElement>('#tx-hash')!.innerHTML = txHash.toString();
+
+//       if (status.isInBlock) {
+//         events.forEach(({ event: { method, section } }) => {
+//           const li = document.createElement('li');
+//           li.innerHTML = `${ section }.${ method }`;
+//           document.querySelector<HTMLPreElement>('#tx-events')!.appendChild(li);
+//         });
+//       }
+//     })
+//     .catch((error: any) => {
+//       document.querySelector<HTMLDivElement>('#tx-error')!.innerHTML = error;
+//       console.log(':( transaction failed', error);
+//     });
+// });

app/layout.tsx

@@ -18,6 +18,8 @@ import dynamic from 'next/dynamic';
 import AccountSelector from '@/components/account-selector';
 import VoteHistory from '@/components/vote-history';
 import VerifyVote from '@/components/verify-vote';
+import GloveTest from '@/components/__tests__/e2e/glove-test';
+import Script from 'next/script';
 // import ConfirmVote from '@/components/confirm-vote';
 
 interface LayoutProps {
@@ -76,6 +78,9 @@ export default function Layout({ children }: LayoutProps) {
                   </div>
                   <Footer />
                 </div>
+                {/* TODO: cypress-polkadot-wallet does not work in our repo for somem reason */}
+                <GloveTest />
+                {/* <Script src="./app/glove-test.ts" defer></Script> */}
               </SnackbarProvider>
             </AccountProvider>
           </DialogProvider>

components/__tests__/e2e/glove-test.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { web3Accounts, web3Enable, web3FromSource } from '@polkadot/extension-dapp';
+import { useAccounts } from '@/lib/providers/account';
+import { APP_NAME } from '@/lib/consts';
+
+const ROCOCO_WS_PROVIDER = 'wss://rococo-rpc.polkadot.io';
+
+const GloveTest = () => {
+  const [error, setError] = useState('');
+  const { setAccounts, accounts } = useAccounts();
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const button = document.querySelector<HTMLButtonElement>('#hero-connect-accounts');
+      if (!button) {
+        console.error('Button #hero-connect-accounts not found');
+        return;
+      }
+
+      const connectAccountsHandler = async () => {
+        try {
+          const allInjected = await web3Enable('example-dapp');
+          if (allInjected.length === 0) {
+            console.log('Connection rejected', allInjected);
+            setError('Connection rejected');
+          } else {
+            const allAccounts = await web3Accounts();
+            console.log('web3Accounts', allAccounts);
+            setAccounts(allAccounts);
+          }
+        } catch (err) {
+          console.error('An error occurred while connecting accounts', err);
+          setError('An error occurred while connecting accounts');
+        }
+      };
+
+      button.addEventListener('click', connectAccountsHandler);
+
+      return () => {
+        button.removeEventListener('click', connectAccountsHandler);
+      };
+    }
+  }, []);
+
+  return (
+    <div></div>
+  );
+};
+
+export default GloveTest;

components/account-box.tsx

@@ -53,7 +53,7 @@ export default function AccountBox({ account }: AccountBoxParams) {
       <div className="mt-1" onClick={handleIdenticonClick}>
         <Identicon value={account?.address} size={32} theme="substrate" />
       </div>
-      <div onClick={handleSetAccount} className="cursor-glove">
+      <div id={account.address} onClick={handleSetAccount} className="cursor-glove">
         <div className="text-xs">{shorten(account?.meta.name ?? '')}</div>
         <div className="text-sm">{shorten(account?.address)}</div>
       </div>

components/connect-wallet.tsx

@@ -11,7 +11,7 @@ import Cookies from "js-cookie";
 import { InjectedExtension } from "@polkadot/extension-inject/types";
 import { WalletNameEnum } from "@/lib/types";
 
-export default function ConnectWallet() {
+export default function ConnectWallet({ id = 'connect-accounts' }: { id?: string; }) {
   const { setOpenExtensions } = useDialog();
   const { selectedAccount: activeAccount, setAccounts, setExtensions, extensions, selectedExtension } = useAccounts();
   const [currentAddress, setCurrentAddress] = useState<string | null>(null);
@@ -55,12 +55,13 @@ export default function ConnectWallet() {
 
   return (
     <div className="flex items-center justify-center">
-      {currentAddress ? <Button onClick={handleOpenChange} variant="outline" className="px-4 py-2 rounded-md">
+      {currentAddress ? <Button id={id} onClick={handleOpenChange} variant="outline" className="px-4 py-2 rounded-md">
         <div className="flex items-center">
           {currentAddress && <Identicon value={currentAddress} size={32} theme="substrate" />}
           <span className="ml-2">{activeAccount?.meta?.name ?? ''}</span>
         </div>
       </Button> : <Button
+        id={id}
         onClick={handleOpenChange}
         className="px-8 py-3 rounded-md text-md font-medium bg-primary/90 text-primary-foreground hover:bg-primary focus:outline-none focus:ring-2 focus:ring-primary/50 active:bg-primary/80 transition-colors sm:px-12">
         Connect Wallet

components/login.tsx

@@ -12,7 +12,7 @@ export default function Login() {
             Glove is an open-source confidential voting solution for Kusama OpenGov.
           </p>
         </div>
-        <ConnectWallet />
+        <ConnectWallet id="hero-connect-accounts" />
       </div>
     </div>
   );

components/nav.tsx

@@ -58,7 +58,7 @@ export default function Nav() {
   const Links = () => {
     return (
       <div className="flex flex-col md:flex-row sm:justify-center space-y-4 md:space-y-0 md:space-x-4">
-        <ConnectWallet />
+        <ConnectWallet id="nav-connect-accounts" />
         <Button onClick={viewDocs} variant="outline" className="px-4 py-2 rounded-md">
           Docs
         </Button>

components/wallet.tsx

@@ -12,7 +12,7 @@ import { ComponentTestProps } from '@/lib/types';
 
 const config = extensionConfig.supported || [];
 
-export default function Wallet({ wallet, isTest, callbackTest }: { wallet: InjectedExtension; } & ComponentTestProps) {
+export default function Wallet({ wallet, isTest, callbackTest, id }: { wallet: InjectedExtension; id: string; } & ComponentTestProps) {
   const { setAccounts, setSelectedExtension: setActiveWallet, selectedExtension: activeWallet } = useAccounts();
   const [iconSrc, setIconSrc] = useState<string>('');
 
@@ -42,7 +42,7 @@ export default function Wallet({ wallet, isTest, callbackTest }: { wallet: Injec
   };
 
   return (
-    <div data-testid={wallet.name} onClick={walletClickHandler} className={`p-3 flex flex-col items-center justify-center`}>
+    <div id={`wallet-${ id }`} data-testid={id} onClick={walletClickHandler} className={`p-3 flex flex-col items-center justify-center`}>
       <div className="flex flex-col items-center justify-center cursor-glove opacity-60 hover:opacity-100">
         <div className='flex items-center justify-center'>
           {iconSrc && <Image width={45} height={45} src={iconSrc} alt='wallet icon' />}

components/wallets.tsx

@@ -28,11 +28,11 @@ export default function Wallets({ defaultValue }: { defaultValue?: any; }) {
       <div className={`flex flex-row items-start justify-center gap-4 mb-3`}>
         {!!accountState && !!accountState.extensions && accountState.extensions.length > 0 && accountState.extensions.map((wallet: InjectedExtension) => (
           <div key={wallet.name} className={`${ accountState.selectedExtension?.name === wallet.name ? 'border-2 border-primary bg-primary/10 rounded-lg' : 'border-2 border-transparent' }`}>
-            <Wallet key={wallet.name} wallet={wallet} />
+            <Wallet key={wallet.name} wallet={wallet} id={wallet.name} />
           </div>
         ))}
       </div>
-      <div className="overflow-y-scroll max-h-[300px] relative border rounded-lg px-3 py-2 bg-black/20">
+      <div id="all-accounts" className="overflow-y-scroll max-h-[300px] relative border rounded-lg px-3 py-2 bg-black/20">
         {!!accountState && !!accountState.accounts && accountState.accounts.length > 0 ?
           accountState.accounts.map(({ address, meta }) => (
             <div ref={activeAccount && activeAccount.address === address ? activeAccountRef : null} key={address} className={`my-1 ${ activeAccount?.address === address ? 'border-2 border-accent bg-accent/20 rounded-lg' : 'border-2 border-transparent' }`}>

cypress.config.ts

@@ -1,14 +1,8 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
-  video: true,
-  screenshotsFolder: "cypress/screenshots",
-  videosFolder: "cypress/videos",
-  fixturesFolder: "cypress/fixtures",
-
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
     },
   },
 });