test: new end to end tests (#9)

* test: adding end to end test for login and send pay txn flow

* refactor: fixing algoexplorer url handling

* refactor: adding gitattributes; improving e2e test

* chore: adding playwright plugin

* chore: fixing typo

* chore: addressing pr comments

Author: aorumbayev

template_content/.gitattributes

@@ -0,0 +1 @@
+* text=lf

template_content/src/App.tsx

@@ -58,7 +58,7 @@ export default function App() {
                 </button>
 
                 {activeAddress && (
-                  <button className="btn m-2" onClick={toggleDemoModal}>
+                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
                     Transactions Demo
                   </button>
                 )}

template_content/src/components/Account.tsx

@@ -10,7 +10,9 @@ const Account = () => {
       <a
         className="text-xl"
         target="_blank"
-        href={`https://${algoConfig.network == 'mainnet' ? '' : `${algoConfig.network}.`}algoexplorer.io/address/${activeAddress}`}
+        href={`https://${
+          ['mainnet', ''].includes(algoConfig.network.toLowerCase()) ? '' : `${algoConfig.network.toLowerCase()}.`
+        }algoexplorer.io/address/${activeAddress}`}
       >
         Address: {ellipseAddress(activeAddress)}
       </a>

template_content/src/components/ConnectWallet.tsx.jinja

@@ -44,6 +44,7 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
 
         <div className="modal-action {% if use_daisy_ui == false -%}grid{% endif -%}">
           <button
+            data-test-id="close-wallet-modal"
             className="btn"
             onClick={() => {
               closeModal()
@@ -54,6 +55,7 @@ const ConnectWallet = ({ openModal, closeModal }: ConnectWalletInterface) => {
           {activeAddress && (
             <button
               className="btn btn-warning"
+              data-test-id="logout"
               onClick={() => {
                 providers?.find((p) => p.isActive)?.disconnect()
               }}

template_content/src/components/Transact.tsx.jinja

@@ -67,6 +67,7 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
         <br />
         <input
           type="text"
+          data-test-id="receiver-address"
           placeholder="Provide wallet address"
           className="input input-bordered w-full"
           value={receiverAddress}
@@ -78,7 +79,11 @@ const Transact = ({ openModal, setModalState }: TransactInterface) => {
           <button className="btn" onClick={() => setModalState(!openModal)}>
             Close
           </button>
-          <button className={`btn ${receiverAddress.length === 58 ? '' : 'btn-disabled'} lo`} onClick={handleSubmitAlgo}>
+          <button
+            data-test-id="send-algo"
+            className={`btn ${receiverAddress.length === 58 ? '' : 'btn-disabled'} lo`}
+            onClick={handleSubmitAlgo}
+          >
             {loading ? <span className="loading loading-spinner" /> : 'Send 1 Algo'}
           </button>
         </div>

template_content/{% if ide_vscode %}.vscode{% endif %}/extensions.json.jinja

@@ -1,12 +1,18 @@
 {
   "recommendations": [
     "EditorConfig.EditorConfig",
-    "dotenv.dotenv-vscode"
+    "dotenv.dotenv-vscode",
     {% if use_eslint_prettier -%}
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
     "krysenlo.vite-plugin-eslint-problemmatcher",
     {% endif -%}
+    {% if use_playwright -%}
+    "ms-playwright.playwright",
+    {% endif -%}
+    {% if use_jest -%}
+    "Orta.vscode-jest",
+    {% endif -%}
     {% if use_tailwind -%}
     "bradlc.vscode-tailwindcss",
     "csstools.postcss",

template_content/{% if use_playwright %}playwright.config.ts{% endif %}.jinja

@@ -43,11 +43,6 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',

template_content/{% if use_playwright %}tests{% endif %}/example.spec.ts

@@ -1,14 +1,38 @@
-import { test, expect } from '@playwright/test'
+import { randomAccount } from '@algorandfoundation/algokit-utils'
+import { expect, test } from '@playwright/test'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('http://localhost:5173/')
 })
 
 test('has title', async ({ page }) => {
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Algorand front-end template/)
+  await expect(page).toHaveTitle('AlgoKit React Template')
 })
 
 test('get started link', async ({ page }) => {
   await expect(page.getByTestId('getting-started')).toHaveText('Getting started')
 })
+
+test('authentication and dummy payment transaction', async ({ page }) => {
+  page.on('dialog', async (dialog) => {
+    dialog.message() === 'KMD password' ? await dialog.accept() : await dialog.dismiss()
+  })
+
+  // 1. Must be able to connect to a KMD wallet provider
+  await page.getByTestId('connect-wallet').click()
+  await page.getByTestId('kmd-connect').click()
+  await page.getByTestId('close-wallet-modal').click()
+
+  // 2. Must be able to send a dummy payment transaction
+  await page.getByTestId('transactions-demo').click()
+
+  const dummyAccount = randomAccount()
+  await page.getByTestId('receiver-address').fill(dummyAccount.addr)
+  await page.getByTestId('send-algo').click()
+
+  // 3. Must be able to see a notification that the transaction was sent
+  const notification = await page.getByText('Transaction sent:')
+  await notification.waitFor()
+  expect(notification).toBeTruthy()
+})

tests_generated/test_all_default_parameters_off/.gitattributes

@@ -0,0 +1 @@
+* text=lf

tests_generated/test_all_default_parameters_off/src/App.tsx

@@ -58,7 +58,7 @@ export default function App() {
                 </button>
 
                 {activeAddress && (
-                  <button className="btn m-2" onClick={toggleDemoModal}>
+                  <button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
                     Transactions Demo
                   </button>
                 )}