test(dashboard): added browser tests for batch payments (#3831)

* chore:added batch payments

* chore: misc changes in test

* chore: update deps

* chore: misc changes

* chore: remove logs

* chore: update deps

* chore: update deps and added waiting time'

* chore: adding more deps

* chore: exit if user is not funded

* chore: adding response log

* chore: adding load wallet

* chore: linux EOL

apps/dashboard/components/batch-payments/index.tsx

@@ -214,7 +214,7 @@ export default function BatchPayments() {
           >
             {modalDetails.heading}
           </Typography>
-          <p>{modalDetails.message}</p>
+          <p data-testid="batch-payments-modal-message">{modalDetails.message}</p>
         </Sheet>
       </Modal>
 
@@ -250,7 +250,11 @@ export default function BatchPayments() {
                 label="Balance in USD Wallet"
                 value={`$${centsToDollars(paymentDetails.userWalletBalance.USD)} USD`}
               />
-              <Button onClick={processPayments} loading={processPaymentLoading}>
+              <Button
+                data-testid="confirm-batch-payments-btn"
+                onClick={processPayments}
+                loading={processPaymentLoading}
+              >
                 Confirm Payment
               </Button>
             </DetailsCard>

apps/dashboard/components/upload-button.tsx

@@ -99,14 +99,13 @@ export default function FileUpload({
             </SvgIcon>
             {file ? file.name : "Upload a csv file"}
             <input
+              data-testid="csv-upload-input"
               id="file-upload"
               type="file"
               onChange={handleFileChange}
               accept=".csv"
               ref={fileInputRef}
               style={{
-                clip: "rect(0 0 0 0)",
-                clipPath: "inset(50%)",
                 height: "1px",
                 overflow: "hidden",
                 position: "absolute",

apps/dashboard/cypress/e2e/batch-payments/batch-payments.cy.ts

@@ -0,0 +1,61 @@
+import {
+  testData,
+  expectedTransactions,
+  btcPaymentInUSDCurrency,
+} from "../../support/test-data"
+
+describe("Batch payments test", () => {
+  beforeEach(() => {
+    cy.viewport(1920, 1080)
+    cy.setCookie("next-auth.session-token", testData.NEXT_AUTH_SESSION_TOKEN, {
+      secure: true,
+    })
+    cy.visit("/batch-payments")
+  })
+
+  it("Batch Payments Test", () => {
+    cy.get("[data-testid=csv-upload-input]").selectFile("cypress/fixtures/template.csv")
+
+    cy.get("[data-testid=confirm-batch-payments-btn]").should("exist")
+    cy.get("[data-testid=confirm-batch-payments-btn]").should("be.visible")
+    cy.get("[data-testid=confirm-batch-payments-btn]").should("not.be.disabled")
+    cy.get("[data-testid=confirm-batch-payments-btn]").click()
+
+    cy.get("[data-testid=batch-payments-modal-message]").should(
+      "have.text",
+      "Batch Payment Completed",
+    )
+
+    cy.loginAndGetToken(testData.PHONE, testData.CODE).then((token) => {
+      const authToken = token
+      cy.getTransactions(authToken, 4).then((transactions) => {
+        // Check for specific BTC transactions
+        btcPaymentInUSDCurrency.forEach((expectedBtcTransaction) => {
+          const found = transactions.some(
+            (transaction) =>
+              transaction.settlementCurrency ===
+                expectedBtcTransaction.settlementCurrency &&
+              transaction.status === expectedBtcTransaction.status &&
+              transaction.settlementDisplayAmount ===
+                expectedBtcTransaction.settlementDisplayAmount,
+          )
+          expect(found).to.be.true
+        })
+
+        expectedTransactions.forEach((expectedTransaction) => {
+          if (
+            !btcPaymentInUSDCurrency.some(
+              (btcTx) =>
+                btcTx.settlementCurrency === expectedTransaction.settlementCurrency &&
+                btcTx.status === expectedTransaction.status &&
+                btcTx.settlementDisplayAmount ===
+                  expectedTransaction.settlementDisplayAmount,
+            )
+          ) {
+            expect(transactions).to.deep.include(expectedTransaction)
+          }
+        })
+      })
+    })
+  })
+})

apps/dashboard/cypress/e2e/e2e.cy.ts

@@ -1,3 +1,4 @@
 /* eslint-disable import/no-unassigned-import */
 import "./api-keys/api-keys.cy"
 import "./callback/callback.cy"
+import "./batch-payments/batch-payments.cy"

apps/dashboard/cypress/fixtures/template.csv

@@ -0,0 +1,5 @@
+username,amount,currency,wallet,memo
+test_user_a,12,USD,USD,Testing to send 12 USD
+test_user_b,10,USD,USD,Testing to send 10 USD
+test_user_c,5,USD,BTC,Testing to send 5 USD
+test_user_a,100,SATS,BTC,Testing to send 100 SATS

apps/dashboard/cypress/support/commands.ts

@@ -1,40 +1,12 @@
 /// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+import { CORE_URL } from "./test-data"
+
+type Transaction = {
+  settlementAmount: number
+  settlementCurrency: string
+  status: string
+  settlementDisplayAmount: string
+}
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
@@ -43,6 +15,11 @@ declare namespace Cypress {
     getOTP(email: string): Chainable<string>
     requestEmailCode(email: string): Chainable<string>
     flushRedis(): Chainable<void>
+    loginAndGetToken(phone: string, code: string): Chainable<string>
+    getTransactions(
+      authToken: string,
+      numberOfTransactions: number,
+    ): Chainable<Array<Transaction>>
   }
 }
 
@@ -69,3 +46,56 @@ Cypress.Commands.add("flushRedis", () => {
     }
   })
 })
+
+Cypress.Commands.add("loginAndGetToken", (phone, code) => {
+  cy.flushRedis()
+  cy.request({
+    method: "POST",
+    url: `${CORE_URL}/auth/phone/login`,
+    body: {
+      phone,
+      code,
+    },
+  }).then((response) => {
+    expect(response.body).to.have.property("authToken")
+    return response.body.authToken
+  })
+})
+
+Cypress.Commands.add("getTransactions", (authToken, numberOfTransactions) => {
+  cy.request({
+    method: "POST",
+    url: `${CORE_URL}/graphql`,
+    headers: {
+      "Authorization": `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+    body: {
+      query: `
+        query GetFirstTransactions($first: Int!) {
+          me {
+            defaultAccount {
+              transactions(first: $first) {
+                edges {
+                  node {
+                    settlementAmount
+                    settlementCurrency
+                    status
+                    settlementDisplayAmount
+                  }
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        first: numberOfTransactions,
+      },
+    },
+  }).then((response) => {
+    return response.body.data.me.defaultAccount.transactions.edges.map(
+      (edge: { node: Transaction }) => edge.node,
+    )
+  })
+})

apps/dashboard/cypress/support/test-data.ts

@@ -2,4 +2,37 @@ export const testData = {
   NEXT_AUTH_SESSION_TOKEN: Cypress.env("NEXT_AUTH_SESSION_TOKEN"),
   EMAIL: "[email protected]",
   CALLBACK_URL: "https://www.google.com/",
+  PHONE: "+16505554350",
+  CODE: "000000",
 }
+
+export const CORE_URL = "http://localhost:4455"
+
+export const expectedTransactions = [
+  {
+    settlementAmount: -100,
+    settlementCurrency: "BTC",
+    status: "SUCCESS",
+    settlementDisplayAmount: "-0.04",
+  },
+  {
+    settlementAmount: -1000,
+    settlementCurrency: "USD",
+    status: "SUCCESS",
+    settlementDisplayAmount: "-10.00",
+  },
+  {
+    settlementAmount: -1200,
+    settlementCurrency: "USD",
+    status: "SUCCESS",
+    settlementDisplayAmount: "-12.00",
+  },
+]
+
+export const btcPaymentInUSDCurrency = [
+  {
+    settlementCurrency: "BTC",
+    status: "SUCCESS",
+    settlementDisplayAmount: "-5.00",
+  },
+]

dev/BUCK

@@ -87,3 +87,13 @@ sh_binary(
   name = "stoppable-trigger",
   main = "bin/run-stoppable-trigger.sh",
 )
+
+sh_binary(
+  name = "add-test-users-with-usernames",
+  main = "bin/add-test-users-with-usernames.sh",
+)
+
+sh_binary(
+  name = "fund-user",
+  main = "bin/fund-user.sh",
+)

dev/Tiltfile

@@ -61,6 +61,8 @@ local_resource(
         "api-keys",
         "svix",
         "svix-pg",
+        "add-test-users-with-usernames",
+        "fund-user",
     ],
     links = [
         link("http://localhost:3001", "dashboard"),
@@ -162,6 +164,36 @@ local_resource(
   ]
 )
 
+local_resource(
+  name='add-test-users-with-usernames',
+  labels = ['test'],
+  cmd='buck2 run //dev:add-test-users-with-usernames',
+  allow_parallel = True,
+  resource_deps = [
+    "oathkeeper",
+    "kratos",
+    "api",
+  ]
+)
+
+local_resource(
+  name='fund-user',
+  labels = ['test'],
+  cmd='buck2 run //dev:fund-user',
+  allow_parallel = True,
+  resource_deps = [
+    "oathkeeper",
+    "kratos",
+    "api",
+    "init-onchain",
+    "init-test-user",
+    "api-trigger",
+    "stablesats",
+    "price",
+  ]
+)
+
+
 consent_target = "//apps/consent:dev"
 if is_ci:
   consent_target = '//apps/consent:consent'

dev/bin/add-test-users-with-usernames.sh

@@ -31,7 +31,7 @@ echo "Starting main execution"
 
 echo "Logging in user $user_a"
 auth_token_a=$(login_user "${user_a}")
-echo "Auth token for $user_a: $auth_token_a"
+echo "Auth token for $user_a: $auth_token_a"  
 
 echo "Logging in user $user_b"
 auth_token_b=$(login_user "${user_b}")
@@ -45,4 +45,4 @@ update_username "$auth_token_a" "$user_a_username"
 update_username "$auth_token_b" "$user_b_username"
 update_username "$auth_token_c" "$user_c_username"
 
-echo "Username update process completed
+echo "Username update process completed"

dev/bin/fund-user.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+# set -e
+# set -x
+
+echo "Setting up DEV_DIR variable"
+DEV_DIR="$(dirname "$(dirname "$(readlink -f "${BASH_SOURCE[0]}")")")"
+source "${DEV_DIR}/helpers/auth.sh"
+source "${DEV_DIR}/helpers/onchain.sh"
+
+user_phone="+16505554350"
+token="$(login_user "${user_phone}")"
+echo "Fetching wallets for account"
+
+echo "Funding wallets"
+fund_user_onchain "$token" "USD"
+fund_user_onchain "$token" "BTC"

dev/helpers/gql/on-chain-address-create.gql

@@ -0,0 +1,8 @@
+mutation onChainAddressCreate($input: OnChainAddressCreateInput!) {
+  onChainAddressCreate(input: $input) {
+    address
+    errors {
+      message
+    }
+  }
+}