From ed3fbc4a156131511396a3617eb60795a7091193 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Wed, 4 Sep 2024 22:24:01 +0700
Subject: [PATCH] fix: adjust trailing slash for API call in frontend

---
 components/account/home/PaymentsTable.vue |  2 +-
 store/index.ts                            | 10 +++++-----
 store/payments/cards.ts                   |  8 ++++----
 store/payments/crypto.ts                  |  2 +-
 store/payments/paypal.ts                  |  8 ++++----
 tests/e2e/specs/pages/signup.spec.cy.ts   |  2 +-
 tests/mocks/handlers.ts                   | 18 +++++++++---------
 tests/unit/utils/api.nuxt.spec.ts         |  4 ++--
 8 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/components/account/home/PaymentsTable.vue b/components/account/home/PaymentsTable.vue
index 34ec48cb..7936d970 100644
--- a/components/account/home/PaymentsTable.vue
+++ b/components/account/home/PaymentsTable.vue
@@ -80,7 +80,7 @@ const payments = computed(() => {
 
       <template #item.actions="{ row }">
         <ButtonLink
-          :to="`/webapi/download/receipt/${row.identifier}`"
+          :to="`/webapi/download/receipt/${row.identifier}/`"
           color="primary"
           external
         >
diff --git a/store/index.ts b/store/index.ts
index 85d9b87d..4410cfea 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -283,7 +283,7 @@ export const useMainStore = defineStore('main', () => {
 
     try {
       const response = await fetchWithCsrf<ActionResultResponse>(
-        `/webapi/subscription/${subscription.identifier}`,
+        `/webapi/subscription/${subscription.identifier}/`,
         {
           method: 'DELETE',
         },
@@ -327,7 +327,7 @@ export const useMainStore = defineStore('main', () => {
   const checkout = async (plan: number): Promise<Result<CardCheckout>> => {
     try {
       const response = await fetchWithCsrf<CardCheckoutResponse>(
-        `/webapi/checkout/card/${plan}`,
+        `/webapi/checkout/card/${plan}/`,
         {
           method: 'GET',
         },
@@ -352,7 +352,7 @@ export const useMainStore = defineStore('main', () => {
   ): Promise<Result<true, PaymentError>> => {
     try {
       const response = await fetchWithCsrf<ActionResultResponse>(
-        '/webapi/payment/btr',
+        '/webapi/payment/btr/',
         {
           body: request,
           method: 'POST',
@@ -396,7 +396,7 @@ export const useMainStore = defineStore('main', () => {
   ): Promise<Result<CryptoPayment, PaymentError>> => {
     try {
       const response = await fetchWithCsrf<CryptoPaymentResponse>(
-        '/webapi/payment/crypto',
+        '/webapi/payment/crypto/',
         {
           body: convertKeys(
             {
@@ -444,7 +444,7 @@ export const useMainStore = defineStore('main', () => {
   ): Promise<Result<PendingCryptoPayment>> => {
     try {
       const response = await fetchWithCsrf<PendingCryptoPaymentResponse>(
-        '/webapi/payment/pending',
+        '/webapi/payment/pending/',
         {
           params: convertKeys({ subscriptionId }, false, false),
         },
diff --git a/store/payments/cards.ts b/store/payments/cards.ts
index 9c548a22..13bbbd8b 100644
--- a/store/payments/cards.ts
+++ b/store/payments/cards.ts
@@ -18,7 +18,7 @@ export const usePaymentCardsStore = defineStore('payments/cards', () => {
   const getCard = async (): Promise<void> => {
     try {
       const response = await fetchWithCsrf<SavedCardResponse>(
-        '/webapi/payment/btr/cards',
+        '/webapi/payment/btr/cards/',
         {
           method: 'GET',
         },
@@ -34,7 +34,7 @@ export const usePaymentCardsStore = defineStore('payments/cards', () => {
   const addCard = async (request: CreateCardRequest): Promise<string> => {
     try {
       const response = await fetchWithCsrf<SavedCard>(
-        '/webapi/payment/btr/cards',
+        '/webapi/payment/btr/cards/',
         {
           body: request,
           method: 'POST',
@@ -52,7 +52,7 @@ export const usePaymentCardsStore = defineStore('payments/cards', () => {
   const deleteCard = async (token: string): Promise<void> => {
     try {
       await fetchWithCsrf<ApiResponse<boolean>>(
-        '/webapi/payment/btr/cards',
+        '/webapi/payment/btr/cards/',
         {
           body: { paymentToken: token },
           method: 'DELETE',
@@ -68,7 +68,7 @@ export const usePaymentCardsStore = defineStore('payments/cards', () => {
   const createCardNonce = async (request: CreateCardNonceRequest): Promise<string> => {
     try {
       const response = await fetchWithCsrf<CreateCardNonceResponse>(
-        '/webapi/payment/btr/cards/nonce',
+        '/webapi/payment/btr/cards/nonce/',
         {
           body: request,
           method: 'POST',
diff --git a/store/payments/crypto.ts b/store/payments/crypto.ts
index 976498b3..c52b5aeb 100644
--- a/store/payments/crypto.ts
+++ b/store/payments/crypto.ts
@@ -12,7 +12,7 @@ export const usePaymentCryptoStore = defineStore('payments/crypto', () => {
   const fetchPaymentAssets = async (): Promise<void> => {
     set(paymentAssetsLoading, true);
     try {
-      const response = await fetchWithCsrf<PaymentAssetResponse>('/webapi/payment/crypto/options', {
+      const response = await fetchWithCsrf<PaymentAssetResponse>('/webapi/payment/crypto/options/', {
         method: 'GET',
       });
       set(paymentAssets, PaymentAssetResponse.parse(response));
diff --git a/store/payments/paypal.ts b/store/payments/paypal.ts
index 04f88e0a..04964320 100644
--- a/store/payments/paypal.ts
+++ b/store/payments/paypal.ts
@@ -18,7 +18,7 @@ export const usePaymentPaypalStore = defineStore('payments/paypal', () => {
   const getPaypal = async (): Promise<void> => {
     try {
       const response = await fetchWithCsrf<SavedPaypalResponse>(
-        '/webapi/payment/btr/paypal',
+        '/webapi/payment/btr/paypal/',
         {
           method: 'GET',
         },
@@ -34,7 +34,7 @@ export const usePaymentPaypalStore = defineStore('payments/paypal', () => {
   const addPaypal = async (request: VaultPaypalRequest): Promise<string> => {
     try {
       const response = await fetchWithCsrf<SavedPaypalAccount>(
-        '/webapi/payment/btr/paypal',
+        '/webapi/payment/btr/paypal/',
         {
           body: request,
           method: 'POST',
@@ -52,7 +52,7 @@ export const usePaymentPaypalStore = defineStore('payments/paypal', () => {
   const deletePaypal = async (token: string): Promise<void> => {
     try {
       await fetchWithCsrf<ApiResponse<boolean>>(
-        '/webapi/payment/btr/paypal',
+        '/webapi/payment/btr/paypal/',
         {
           body: { paymentToken: token },
           method: 'DELETE',
@@ -68,7 +68,7 @@ export const usePaymentPaypalStore = defineStore('payments/paypal', () => {
   const createPaypalNonce = async (request: CreatePaypalNonceRequest): Promise<string> => {
     try {
       const response = await fetchWithCsrf<CreatePaypalNonceResponse>(
-        '/webapi/payment/btr/paypal/nonce',
+        '/webapi/payment/btr/paypal/nonce/',
         {
           body: request,
           method: 'POST',
diff --git a/tests/e2e/specs/pages/signup.spec.cy.ts b/tests/e2e/specs/pages/signup.spec.cy.ts
index 00c502f3..82bd78a8 100644
--- a/tests/e2e/specs/pages/signup.spec.cy.ts
+++ b/tests/e2e/specs/pages/signup.spec.cy.ts
@@ -4,7 +4,7 @@ describe('signup test', () => {
   });
 
   beforeEach(() => {
-    cy.intercept('/webapi/countries', {
+    cy.intercept('/webapi/countries/', {
       body: {
         result: [{ code: 'CT', name: 'Country' }],
       },
diff --git a/tests/mocks/handlers.ts b/tests/mocks/handlers.ts
index 2f2a4eb3..27ba5efe 100644
--- a/tests/mocks/handlers.ts
+++ b/tests/mocks/handlers.ts
@@ -3,32 +3,32 @@ import { HttpResponse, http } from 'msw';
 const { BACKEND_URL } = import.meta.env;
 
 export const handlers = [
-  http.options(`${BACKEND_URL}/webapi/csrf`, () => HttpResponse.json({}, {
+  http.options(`${BACKEND_URL}/webapi/csrf/`, () => HttpResponse.json({}, {
     headers: {
       'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
       'Access-Control-Allow-Origin': '*',
     },
   })),
-  http.options(`${BACKEND_URL}/webapi/countries`, () => HttpResponse.json({}, {
+  http.options(`${BACKEND_URL}/webapi/countries/`, () => HttpResponse.json({}, {
     headers: {
       'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
       'Access-Control-Allow-Origin': '*',
     },
   })),
-  http.options(`${BACKEND_URL}/webapi/login`, () => HttpResponse.json({}, {
+  http.options(`${BACKEND_URL}/webapi/login/`, () => HttpResponse.json({}, {
     headers: {
       'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
       'Access-Control-Allow-Origin': '*',
 
     },
   })),
-  http.options(`${BACKEND_URL}/webapi/account`, () => HttpResponse.json({}, {
+  http.options(`${BACKEND_URL}/webapi/account/`, () => HttpResponse.json({}, {
     headers: {
       'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
       'Access-Control-Allow-Origin': '*',
     },
   })),
-  http.get(`${BACKEND_URL}/webapi/csrf`, () =>
+  http.get(`${BACKEND_URL}/webapi/csrf/`, () =>
     HttpResponse.json(
       {
         message: 'CSRF cookie set',
@@ -39,16 +39,16 @@ export const handlers = [
         },
       },
     )),
-  http.post(`${BACKEND_URL}/webapi/login`, () =>
+  http.post(`${BACKEND_URL}/webapi/login/`, () =>
     HttpResponse.json({ message: 'success' })),
-  http.get(`${BACKEND_URL}/webapi/countries`, () =>
+  http.get(`${BACKEND_URL}/webapi/countries/`, () =>
     HttpResponse.json({
       message: 'it works!',
       result: [{ code: 'CT', name: 'Country' }],
     })),
-  http.get(`${BACKEND_URL}/webapi/countries`, () =>
+  http.get(`${BACKEND_URL}/webapi/countries/`, () =>
     HttpResponse.json({ message: 'it works!!', result: [] })),
-  http.get(`${BACKEND_URL}/webapi/account`, () =>
+  http.get(`${BACKEND_URL}/webapi/account/`, () =>
     HttpResponse.json(
       { message: 'fail', result: [] },
       {
diff --git a/tests/unit/utils/api.nuxt.spec.ts b/tests/unit/utils/api.nuxt.spec.ts
index 90b75a89..c357db55 100644
--- a/tests/unit/utils/api.nuxt.spec.ts
+++ b/tests/unit/utils/api.nuxt.spec.ts
@@ -16,7 +16,7 @@ describe('api utilities', () => {
 
   it('fetchWithCsrf: fetch countries runs correctly', async () => {
     await expect(
-      fetchWithCsrf<ApiResponse<Country[]>>(`/webapi/countries`),
+      fetchWithCsrf<ApiResponse<Country[]>>(`/webapi/countries/`),
     ).resolves.toMatchObject(
       expect.objectContaining({
         result: [{ code: 'CT', name: 'Country' }],
@@ -30,7 +30,7 @@ describe('api utilities', () => {
   it('fetchWithCsrf: fetch account info with 401 error', async () => {
     mockNuxtImport('navigateTo', () => vi.fn());
     await expect(
-      fetchWithCsrf<ApiResponse<Account>>(`/webapi/account`),
+      fetchWithCsrf<ApiResponse<Account>>(`/webapi/account/`),
     ).rejects.toThrowError(/401/);
     expect(logout).toBeCalled();
     expect(logout).toHaveBeenCalledOnce();