Merge pull request #643 from nachikamod/fix/nk-bdd-create-wallet

fix(bdd): create new wallet

Author: dadiorchen

CHANGELOG.md

@@ -32,6 +32,27 @@ git clone https://github.com/Greenstand/treetracker-wallet-app.git
 cd treetracker-wallet-app && yarn install
 ```
 
+### 🔧 **Environment Variables**
+```bash
+# Setup environment (first time only)
+
+# For backend user api and bdds
+cp apps/user/.env.example apps/user/.dev.env
+# → Edit .dev.env with your configuration
+
+# For web development and bdd
+cp apps/web/.env.example apps/user/.env
+# → Edit .env with your configuration
+
+# For keycloak package e2e testing
+cp packages/keycloak/.env.example packages/keycloak/.env
+# → Edit .env with your configuration
+
+# For wallet package e2e testing
+cp packages/wallet/.env.example packages/wallet/.env
+# → Edit .env with your configuration
+```
+
 ### 🏃‍♂️ Start Development
 
 #### Option 1: Quick Web Development

README.md

@@ -22,16 +22,11 @@ Feature: Create wallet
     Then I should see text "Wallet name already exists"
 
 
-  @discovery
-  Scenario: As a user, I can create a new wallet (but has problem)
+  @web
+  Scenario: As a user, I can create a new wallet
     #Given test@greenstand.org is registered in the system
     Given I am on the login page
     And I login with an account
     And I am on the wallet page
     When I create a new wallet
-    Then I noticed that I can click the create button, and the pop-up dialog disappear but nothing happens, no new wallet shows up, and in the devtool network panel, there are 404 error shown below:
-    #http://localhost:3000/wallets
-    #Request Method
-    #POST
-    #Status Code 404 Not Found
-
+    Then I should see my new wallet in the list of wallets

apps/bdd/features/create-wallet.feature

@@ -16,6 +16,11 @@
 import { Given, When, Then } from "@wdio/cucumber-framework";
 import { expect, $ } from "@wdio/globals";
 
+// State object to share data between steps
+const stepState: Record<string, string> = {
+  walletName: "", // We need unique walletName for each test, so we use a global state object to share the walletName between steps
+};
+
 // Map page names to routes
 const routes: Record<string, string> = {
   login: "login",
@@ -83,7 +88,13 @@ Then(
 );
 
 Then(/^I should see my new wallet in the list of wallets$/, async () => {
-  await expect($(".wallet-list")).toBeDisplayed();
+  await expect($("[data-test=wallet-list]")).toBeDisplayed();
+  const walletItemSelector = `[data-test=wallet-item-name-${stepState.walletName}]`;
+  // Wait for the wallet item to be displayed assuming API latency
+  await $(walletItemSelector).waitForDisplayed({
+    timeout: 3000,
+    timeoutMsg: `Wallet item with name "${stepState.walletName}" did not appear in the list`,
+  });
 });
 
 // ============================================================================
@@ -180,8 +191,16 @@ When("I login with an account", async () => {
 });
 
 When("I create a new wallet", async () => {
+  const ts = Date.now();
+  stepState.walletName = `wallet${ts}`;
   await $("[data-test=wallet-create-open]").click();
-  await $('[data-test="wallet-create-name"] input').setValue("wallet1");
+  // Wallet creation drawer takes some time to open, so we wait for the input to be displayed
+  await $('[data-test="wallet-create-name"] input').waitForDisplayed({
+    timeout: 3000,
+  });
+  await $('[data-test="wallet-create-name"] input').setValue(
+    stepState.walletName,
+  );
   await $('[data-test="wallet-create-description"] input').setValue("desc");
   await $('[data-test="wallet-create-submit"]').click();
 });

apps/bdd/features/step-definitions/steps.ts

@@ -14,6 +14,7 @@
     "test:web:headless": "cross-env wdio run ./wdio.web.conf.ts --headless",
     "test:web:login": "cross-env wdio run ./wdio.web.conf.ts --spec ./features/login.feature",
     "test:web:register": "cross-env wdio run ./wdio.web.conf.ts --spec ./features/register.feature",
+    "test:web:wallet": "cross-env wdio run ./wdio.web.conf.ts --spec ./features/create-wallet.feature",
     "test:web:debug": "cross-env wdio run ./wdio.debug.conf.ts --logLevel debug",
     "test:update-driver": "yarn add -D chromedriver@latest",
     "report:cucumber": "node scripts/generate-cucumber-report.js",

apps/bdd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "user",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "greenstand-wallet-app-api",
   "author": "",
   "private": true,

apps/user/package.json

@@ -1,15 +1,2 @@
-
-NEXT_PUBLIC_WALLET_APP_API=http://localhost:8080
-
-
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
-
-# this is for the keycloak API 
-KEYCLOAK_REALM = treetracker
-
-KEYCLOAK_BASE_URL = https://dev-k8s.treetracker.org/keycloak
-
-KEYCLOAK_CLIENT_SECRET =
-
-KEYCLOAK_CLIENT_ID = wallet-app-user-dev-svc
-
+NEXT_PUBLIC_WALLET_APP_API = http://localhost:8080
+NEXT_PUBLIC_TREETRACKER_API = # Get from slack

apps/web/.env.example

@@ -20,9 +20,12 @@ export default function WalletItem({
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center",
-      }}>
+      }}
+    >
       <Box>
-        <Typography variant="body2">{name}</Typography>
+        <Typography variant="body2" data-test={`wallet-item-name-${name}`}>
+          {name}
+        </Typography>
         <Typography variant="body2" color="text.secondary">
           {created_at}
         </Typography>

apps/web/src/components/WalletItem.tsx

@@ -43,6 +43,7 @@
     "bdd:e2e:local": "yarn workspace @treetracker/bdd run test:local",
     "bdd:e2e:login": "yarn workspace @treetracker/bdd run  test:login",
     "bdd:e2e:register": "yarn workspace @treetracker/bdd run  test:register",
+    "bdd:e2e:wallet": "yarn workspace @treetracker/bdd run test:web:wallet",
     "bdd:e2e:debug": "yarn workspace @treetracker/bdd test:debug",
     "bdd:e2e:update-driver": "yarn workspace @treetracker/bdd run  test:update-driver",
     "bdd:report": "yarn workspace @treetracker/bdd  run report:cucumber",

package.json

@@ -1,6 +1,6 @@
 import axios, { isAxiosError } from "axios";
 import { Wallet } from "../types/wallet";
-import { TREETRACKER_API, WALLET_API_KEY } from "../utils/config";
+import { TREETRACKER_API } from "../utils/config";
 
 async function createWallet(walletData: Wallet, token: string) {
   try {
@@ -12,7 +12,6 @@ async function createWallet(walletData: Wallet, token: string) {
       },
       {
         headers: {
-          "treetracker-api-key": WALLET_API_KEY,
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },