test(pay): add 'pay invoice test' (#4008)

* test(pay): add 'send payment to invoice test'

* chore: update tilt deps

* chore: added success-icon in test

* chore: added wait

* chore: chaining

* fix: buck env

* chore: update deps

apps/pay/BUCK

@@ -77,7 +77,10 @@ next_build(
     name = "build-ci",
     srcs = [":src"],
     build_env = {
-        "NEXT_PUBLIC_CORE_GQL_URL": "http://localhost:4455/graphql"
+        "CORE_GQL_URL_INTRANET": "http://localhost:4455/graphql",
+        "NEXT_PUBLIC_CORE_GQL_URL": "http://localhost:4455/graphql",
+        "NEXT_PUBLIC_CORE_GQL_WEB_SOCKET_URL": "ws://localhost:4455/graphqlws",
+        "NEXT_PUBLIC_PAY_DOMAIN": "localhost:3002",
     }
 )
 

apps/pay/components/PaymentOutcome/index.tsx

@@ -95,6 +95,7 @@ function PaymentOutcome({ paymentRequest, paymentAmount, dispatch }: Props) {
         <div className={styles.container}>
           <div aria-labelledby="Payment successful">
             <Image
+              data-testid="success-icon"
               src="/icons/success-icon.svg"
               alt="success icon"
               width="104"

apps/pay/cypress/e2e/point-of-sale.cy.ts

@@ -1,3 +1,5 @@
+import { testData } from "../support/test-config"
+
 const username = "test_user_a"
 const cashRegisterUrl = `/${username}?amount=0&sats=0&unit=CENT&memo=&display=USD&currency=BTC`
 describe("Point of Sale", () => {
@@ -54,4 +56,50 @@ describe("Point of Sale", () => {
     cy.get("[data-testid=qrcode-container]").as("qrcodeContainer")
     cy.get("@qrcodeContainer").find("canvas").should("exist")
   })
+
+  it("should create and pay an invoice", () => {
+    cy.visit(cashRegisterUrl)
+    cy.get("button[data-testid=digit-1-btn]").click()
+    cy.get("button[data-testid=digit-0-btn]").click()
+    cy.get("button[data-testid=pay-btn]").click()
+
+    cy.get("[data-testid=copy-btn]").should("exist")
+    cy.get("[data-testid=share-lbl]").should("exist")
+    cy.get("[data-testid=qrcode-container]").should("exist")
+    cy.get("[data-testid=qrcode-container]").as("qrcodeContainer")
+    cy.get("@qrcodeContainer").find("canvas").should("exist")
+    cy.get("[data-testid=copy-btn]").should("exist").click()
+
+    cy.window()
+      .then((win) => {
+        win.focus()
+        return win.navigator.clipboard.readText()
+      })
+      .then((text) => {
+        const paymentRequest = text
+        cy.log("Payment Request:", paymentRequest)
+
+        cy.loginAndGetToken(testData.PHONE, testData.CODE).then((token) => {
+          const authToken = token
+          cy.log("authToken", authToken)
+
+          cy.fetchMe(authToken).then((response) => {
+            const walletId = response.body.data.me.defaultAccount.defaultWalletId
+            cy.log("Wallet ID:", walletId)
+
+            cy.sendInvoicePayment(paymentRequest, walletId, authToken)
+              .then((paymentResponse) => {
+                expect(paymentResponse.body.data.lnInvoicePaymentSend.status).to.equal(
+                  "SUCCESS",
+                )
+              })
+              .then(() => {
+                cy.wait(3000)
+                cy.get("[data-testid=success-icon]").should("exist")
+                cy.get("[data-testid=success-icon]").should("be.visible")
+              })
+          })
+        })
+      })
+  })
 })

apps/pay/cypress/support/commands.ts

@@ -34,4 +34,95 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    flushRedis(): Chainable<void>
+    loginAndGetToken(phone: string, code: string): Chainable<string>
+    graphqlOperation(query: string, variables?: Record<string, unknown>, token: string)
+    fetchMe(token: string)
+    sendInvoicePayment(paymentRequest: string, walletId: string, token: string)
+  }
+}
+
+Cypress.Commands.add("flushRedis", () => {
+  const command = `docker exec galoy-dev-redis-1 redis-cli FLUSHALL`
+  cy.exec(command).then((result) => {
+    if (result.code === 0) {
+      cy.log("Redis FLUSHALL executed successfully")
+    } else {
+      throw new Error("Failed to execute FLUSHALL on Redis")
+    }
+  })
+})
+
+Cypress.Commands.add("loginAndGetToken", (phone, code) => {
+  cy.flushRedis()
+  cy.request({
+    method: "POST",
+    url: "http://localhost:4455/auth/phone/login",
+    body: {
+      phone,
+      code,
+    },
+  }).then((response) => {
+    expect(response.body).to.have.property("authToken")
+    return response.body.authToken
+  })
+})
+
+Cypress.Commands.add("graphqlOperation", (query, variables = {}, token) => {
+  return cy.request({
+    method: "POST",
+    url: "http://localhost:4455/graphql",
+    body: {
+      query,
+      variables,
+    },
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  })
+})
+
+Cypress.Commands.add("fetchMe", (token) => {
+  const query = `
+    query Me {
+      me {
+        id
+        defaultAccount {
+          defaultWalletId
+          displayCurrency
+          id
+          level
+        }
+      }
+    }
+  `
+  return cy.graphqlOperation(query, {}, token)
+})
+
+Cypress.Commands.add("sendInvoicePayment", (paymentRequest, walletId, token) => {
+  const mutation = `
+    mutation LnInvoicePaymentSend($input: LnInvoicePaymentInput!) {
+      lnInvoicePaymentSend(input: $input) {
+        errors {
+          code
+          message
+          path
+        }
+        status
+      }
+    }
+  `
+  const variables = {
+    input: {
+      paymentRequest,
+      walletId,
+    },
+  }
+  return cy.graphqlOperation(mutation, variables, token)
+})

apps/pay/cypress/support/e2e.ts

@@ -15,7 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 // eslint-disable-next-line import/no-unassigned-import
-// import "./commands"
+import "./commands"
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

apps/pay/cypress/support/test-config.ts

@@ -1 +1,4 @@
-export const testData = {}
+export const testData = {
+  PHONE: "+16505554350",
+  CODE: "000000",
+}

dev/Tiltfile

@@ -112,6 +112,7 @@ local_resource(
     allow_parallel = True,
     resource_deps = [
         "api",
+        "api-ws-server"
     ],
     links = [
         link("http://localhost:3002", "pay"),
@@ -240,6 +241,7 @@ local_resource(
     "api",
     "pay",
     "add-test-users-with-usernames",
+    "fund-user",
   ],
 )