From 20b98d40839101a7a8ca95bd9df5b104f31cc72a Mon Sep 17 00:00:00 2001 From: Gauri Rajesh Date: Mon, 3 Nov 2025 16:22:53 -0500 Subject: [PATCH 1/5] initial component design --- .../donations/DonationSummary.spec.tsx | 0 .../components/donations/DonationSummary.tsx | 45 +++++++++++++++++++ apps/frontend/src/containers/root.tsx | 8 +++- apps/frontend/src/styles.css | 40 +++++++++++++++++ 4 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 apps/frontend/src/components/donations/DonationSummary.spec.tsx create mode 100644 apps/frontend/src/components/donations/DonationSummary.tsx diff --git a/apps/frontend/src/components/donations/DonationSummary.spec.tsx b/apps/frontend/src/components/donations/DonationSummary.spec.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/frontend/src/components/donations/DonationSummary.tsx b/apps/frontend/src/components/donations/DonationSummary.tsx new file mode 100644 index 0000000..ea5283b --- /dev/null +++ b/apps/frontend/src/components/donations/DonationSummary.tsx @@ -0,0 +1,45 @@ +import { useState } from 'react'; + +interface DonationSummaryData { + baseAmount: number; + feeRate?: number; + fixedFee?: number; +} + +export const DonationSummary: React.FC = ({ + baseAmount, + feeRate = 2.9, + fixedFee = 0.3, +}) => { + const [fee, setFee] = useState(false); + const [amount, setAmount] = useState(Number(baseAmount.toFixed(2))); + + return ( + <> +
+ +
{ + if (fee) { + setAmount(Number(baseAmount.toFixed(2))); + } + // fee is applied + else { + const fee = (baseAmount * feeRate) / 100 + fixedFee; + setAmount(Number((baseAmount + fee).toFixed(2))); + } + setFee(!fee); + }} + > +
+
+
+ + ${Number(feeRate.toFixed(2))} transaction fee + +
+
+ + ); +}; diff --git a/apps/frontend/src/containers/root.tsx b/apps/frontend/src/containers/root.tsx index 05c220d..78a4c42 100644 --- a/apps/frontend/src/containers/root.tsx +++ b/apps/frontend/src/containers/root.tsx @@ -1,5 +1,11 @@ +import { DonationSummary } from '@components/donations/DonationSummary'; + const Root: React.FC = () => { - return <>Welcome to scaffolding!; + return ( + <> + + + ); }; export default Root; diff --git a/apps/frontend/src/styles.css b/apps/frontend/src/styles.css index 90d4ee0..ae96b3f 100644 --- a/apps/frontend/src/styles.css +++ b/apps/frontend/src/styles.css @@ -1 +1,41 @@ /* You can add global styles to this file, and also import other style files */ +.toggle-container { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + user-select: none; +} + +.toggle-slider { + width: 50px; + height: 25px; + background-color: #ccc; + border-radius: 25px; + position: relative; + transition: background-color 0.3s ease; +} + +.toggle-slider.on { + background-color: #4caf50; +} + +.toggle-circle { + width: 21px; + height: 21px; + background-color: white; + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + transition: transform 0.3s ease; +} + +.toggle-slider.on .toggle-circle { + transform: translateX(25px); +} + +.toggle-label { + font-size: 14px; + font-weight: bold; +} From 60a08b0512e492f51c89f4f296e209a8700d2bfc Mon Sep 17 00:00:00 2001 From: Gauri Rajesh Date: Sat, 8 Nov 2025 03:16:31 -0500 Subject: [PATCH 2/5] testing and fixing component design --- apps/backend/src/payments/payments.module.ts | 6 +- .../donations/DonationSummary.spec.tsx | 0 .../components/donations/DonationSummary.tsx | 45 --------- .../src/containers/donations/DonationForm.tsx | 2 + .../donations/DonationSummary.spec.tsx | 92 +++++++++++++++++++ .../containers/donations/DonationSummary.tsx | 62 +++++++++++++ .../src/containers/donations/donations.css | 68 ++++++++++++++ apps/frontend/src/containers/root.tsx | 12 ++- apps/frontend/src/styles.css | 40 -------- 9 files changed, 237 insertions(+), 90 deletions(-) delete mode 100644 apps/frontend/src/components/donations/DonationSummary.spec.tsx delete mode 100644 apps/frontend/src/components/donations/DonationSummary.tsx create mode 100644 apps/frontend/src/containers/donations/DonationSummary.spec.tsx create mode 100644 apps/frontend/src/containers/donations/DonationSummary.tsx diff --git a/apps/backend/src/payments/payments.module.ts b/apps/backend/src/payments/payments.module.ts index 42223c1..4e127fb 100644 --- a/apps/backend/src/payments/payments.module.ts +++ b/apps/backend/src/payments/payments.module.ts @@ -10,13 +10,13 @@ import { PaymentsService } from './payments.service'; provide: 'STRIPE_CLIENT', useFactory: (configService: ConfigService) => { return new Stripe(configService.get('STRIPE_SECRET_KEY'), { - apiVersion: '2025-09-30.clover', + apiVersion: '2025-10-29.clover', }); }, inject: [ConfigService], }, - PaymentsService + PaymentsService, ], exports: [PaymentsService], }) -export class PaymentsModule {} \ No newline at end of file +export class PaymentsModule {} diff --git a/apps/frontend/src/components/donations/DonationSummary.spec.tsx b/apps/frontend/src/components/donations/DonationSummary.spec.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/apps/frontend/src/components/donations/DonationSummary.tsx b/apps/frontend/src/components/donations/DonationSummary.tsx deleted file mode 100644 index ea5283b..0000000 --- a/apps/frontend/src/components/donations/DonationSummary.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useState } from 'react'; - -interface DonationSummaryData { - baseAmount: number; - feeRate?: number; - fixedFee?: number; -} - -export const DonationSummary: React.FC = ({ - baseAmount, - feeRate = 2.9, - fixedFee = 0.3, -}) => { - const [fee, setFee] = useState(false); - const [amount, setAmount] = useState(Number(baseAmount.toFixed(2))); - - return ( - <> -
- -
{ - if (fee) { - setAmount(Number(baseAmount.toFixed(2))); - } - // fee is applied - else { - const fee = (baseAmount * feeRate) / 100 + fixedFee; - setAmount(Number((baseAmount + fee).toFixed(2))); - } - setFee(!fee); - }} - > -
-
-
- - ${Number(feeRate.toFixed(2))} transaction fee - -
-
- - ); -}; diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx index 3bf6427..f05558d 100644 --- a/apps/frontend/src/containers/donations/DonationForm.tsx +++ b/apps/frontend/src/containers/donations/DonationForm.tsx @@ -4,6 +4,7 @@ import apiClient, { } from '../../api/apiClient'; import React, { useState, FormEvent } from 'react'; import './donations.css'; +import { DonationSummary } from './DonationSummary'; type RecurringInterval = 'weekly' | 'bimonthly' | 'monthly' | 'quarterly'; @@ -381,6 +382,7 @@ export const DonationForm: React.FC = ({ + ); }; diff --git a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx new file mode 100644 index 0000000..957a08f --- /dev/null +++ b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx @@ -0,0 +1,92 @@ +/** @vitest-environment jsdom */ +import { describe, it, expect, beforeEach, vi } from 'vitest'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { DonationSummary } from './DonationSummary'; +import { DONATION_FEE_RATE, DONATION_FIXED_FEE } from './DonationSummary'; + +describe('DonationSummary Component', () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + // unit tests for fee calculation + + // fee calculation with default values + it('calculates the fee with default values', () => { + const baseAmount = Math.random() * 10; + const feeTotal = ( + (baseAmount * DONATION_FEE_RATE) / 100 + + DONATION_FIXED_FEE + ).toFixed(2); + render(); + expect( + screen.queryByText( + new RegExp( + `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`, + ), + ), + ).not.toBeNull(); + }); + + // fee calculation with custom values + it('calculates the fee with default values', () => { + const baseAmount = Math.random() * 10; + const feeRate = Math.random() * 10; + const fixedFee = Math.random() * 10; + const feeTotal = ((baseAmount * feeRate) / 100 + fixedFee).toFixed(2); + render( + , + ); + expect( + screen.queryByText( + new RegExp( + `Add \\$${feeTotal} to cover transaction fees and tip the fundraising platform to help keep it`, + ), + ), + ).not.toBeNull(); + }); + + // donation total calculation does not include fee when initially rendered + it('calculates total donation amount without fee when initially rendered', async () => { + const baseAmount = Math.random() * 10; + + // initial rendering does not include fee in total donation calculation + render(); + expect( + screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)), + ).not.toBeNull(); + }); + + // donation total calculation includes fee when toggle activated + it('calculates total donation amount with fee when toggle activated', async () => { + const baseAmount = Math.random() * 10; + const feeTotal = + (baseAmount * DONATION_FEE_RATE) / 100 + DONATION_FIXED_FEE; + render(); + + // activate fee toggle + const feeToggle = screen.getAllByTestId('fee-toggle'); + fireEvent.click(feeToggle[0]); + + // donation total calculation should include fee + expect( + screen.queryByText( + new RegExp(`\\$${(baseAmount).toFixed(2)}`), + ), + ).not.toBeNull(); + + // donation total calculation should include fee + fireEvent.click(feeToggle[0]); + + // donation total calculation should include fee + expect( + screen.queryByText( + new RegExp(`\\$${(baseAmount).toFixed(2)}`), + ), + ).not.toBeNull(); + }); +}); \ No newline at end of file diff --git a/apps/frontend/src/containers/donations/DonationSummary.tsx b/apps/frontend/src/containers/donations/DonationSummary.tsx new file mode 100644 index 0000000..09e0df1 --- /dev/null +++ b/apps/frontend/src/containers/donations/DonationSummary.tsx @@ -0,0 +1,62 @@ +import { useState } from 'react'; +import './donations.css'; + +interface DonationSummaryData { + baseAmount: number; + feeRate?: number; + fixedFee?: number; +} + +export const DONATION_FEE_RATE = 2.9; +export const DONATION_FIXED_FEE = 0.3; + +export const DonationSummary: React.FC = ({ + baseAmount, + feeRate, + fixedFee, +}) => { + const [feeApplied, setFeeApplied] = useState(false); + const [amount, setAmount] = useState(baseAmount); + + const rate = feeRate ?? DONATION_FEE_RATE; + const fee = fixedFee ?? DONATION_FIXED_FEE; + const feeTotal = (baseAmount * rate) / 100 + fee; + + return ( +
+
+ Total: ${amount.toFixed(2)} +
+
{ + if (feeApplied) { + setAmount(baseAmount); + } + // fee is applied + else { + setAmount(baseAmount + feeTotal); + } + setFeeApplied(!feeApplied); + }} + > +
+
+
+ + Add ${feeTotal.toFixed(2)} to cover transaction fees and tip the + fundraising platform to help keep it{' '} + + free for nonprofits. + + +
+
+ ); +}; diff --git a/apps/frontend/src/containers/donations/donations.css b/apps/frontend/src/containers/donations/donations.css index be45fcf..ec6c78e 100644 --- a/apps/frontend/src/containers/donations/donations.css +++ b/apps/frontend/src/containers/donations/donations.css @@ -89,3 +89,71 @@ .required { color: #d93025; } + +.toggle-container { + display: flex; + align-items: center; + gap: 0.6rem; + cursor: pointer; + user-select: none; + flex-wrap: wrap; + justify-content: center; +} + +.toggle-slider { + position: relative; + flex-shrink: 0; + width: 30px; + height: 18px; + background-color: #ccc; + border-radius: 9999px; + transition: + background-color 0.3s ease, + transform 0.3s ease; + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2); +} + +.toggle-slider.on { + background-color: #2a7a73; +} + +.toggle-circle { + position: absolute; + top: 50%; + left: 4px; + width: 40%; + height: 70%; + background-color: white; + border-radius: 50%; + transform: translateY(-50%); + transition: + left 0.3s ease, + transform 0.3s ease; +} + +.toggle-slider.on .toggle-circle { + left: 55%; +} + +.toggle-label { + font-size: 0.8rem; + color: #333; + line-height: 1.4; + text-align: left; + max-width: 320px; +} + +.donation-summary { + font-size: 14px; + margin: 0 auto; + font-family: sans-serif; + display: flex; + flex-direction: column; + flex-wrap: wrap; + text-align: center; + border: 1px solid #ddd; + border-radius: 8px; + padding: 0.75rem; + margin-top: 1rem; + margin-bottom: 1rem; +} diff --git a/apps/frontend/src/containers/root.tsx b/apps/frontend/src/containers/root.tsx index 78a4c42..1f62113 100644 --- a/apps/frontend/src/containers/root.tsx +++ b/apps/frontend/src/containers/root.tsx @@ -1,9 +1,17 @@ -import { DonationSummary } from '@components/donations/DonationSummary'; +import { DonationSummary } from '@containers/donations/DonationSummary'; +import { DonationForm } from './donations/DonationForm'; const Root: React.FC = () => { return ( <> - + ); }; diff --git a/apps/frontend/src/styles.css b/apps/frontend/src/styles.css index ae96b3f..90d4ee0 100644 --- a/apps/frontend/src/styles.css +++ b/apps/frontend/src/styles.css @@ -1,41 +1 @@ /* You can add global styles to this file, and also import other style files */ -.toggle-container { - display: flex; - align-items: center; - gap: 10px; - cursor: pointer; - user-select: none; -} - -.toggle-slider { - width: 50px; - height: 25px; - background-color: #ccc; - border-radius: 25px; - position: relative; - transition: background-color 0.3s ease; -} - -.toggle-slider.on { - background-color: #4caf50; -} - -.toggle-circle { - width: 21px; - height: 21px; - background-color: white; - border-radius: 50%; - position: absolute; - top: 2px; - left: 2px; - transition: transform 0.3s ease; -} - -.toggle-slider.on .toggle-circle { - transform: translateX(25px); -} - -.toggle-label { - font-size: 14px; - font-weight: bold; -} From 4f4675f675cd9028fd11c6f0278b46d0fe8f37d2 Mon Sep 17 00:00:00 2001 From: Gauri Rajesh Date: Sat, 8 Nov 2025 12:53:49 -0500 Subject: [PATCH 3/5] testing fee toggle component --- .../src/containers/donations/DonationForm.tsx | 2 +- .../src/containers/donations/DonationSummary.spec.tsx | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/apps/frontend/src/containers/donations/DonationForm.tsx b/apps/frontend/src/containers/donations/DonationForm.tsx index f05558d..a8631e1 100644 --- a/apps/frontend/src/containers/donations/DonationForm.tsx +++ b/apps/frontend/src/containers/donations/DonationForm.tsx @@ -378,11 +378,11 @@ export const DonationForm: React.FC = ({ Show dedication message publicly + - ); }; diff --git a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx index 957a08f..eb86328 100644 --- a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx +++ b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx @@ -75,18 +75,15 @@ describe('DonationSummary Component', () => { // donation total calculation should include fee expect( screen.queryByText( - new RegExp(`\\$${(baseAmount).toFixed(2)}`), + new RegExp(`\\$${(baseAmount + feeTotal).toFixed(2)}`), ), ).not.toBeNull(); - // donation total calculation should include fee fireEvent.click(feeToggle[0]); - // donation total calculation should include fee + // donation total calculation should not include fee expect( - screen.queryByText( - new RegExp(`\\$${(baseAmount).toFixed(2)}`), - ), + screen.queryByText(new RegExp(`\\$${baseAmount.toFixed(2)}`)), ).not.toBeNull(); }); -}); \ No newline at end of file +}); From ae76fd4f337c4601dee77cbb1e1702fa2ba7a2ad Mon Sep 17 00:00:00 2001 From: thaninbew Date: Sun, 9 Nov 2025 22:44:22 -0500 Subject: [PATCH 4/5] fix: install dependencies and change vite.config suffix --- apps/frontend/project.json | 2 +- .../{vite.config.ts => vite.config.mts} | 0 package.json | 1 + yarn.lock | 59 ++++++++++++++++++- 4 files changed, 59 insertions(+), 3 deletions(-) rename apps/frontend/{vite.config.ts => vite.config.mts} (100%) diff --git a/apps/frontend/project.json b/apps/frontend/project.json index a732b97..40241a1 100644 --- a/apps/frontend/project.json +++ b/apps/frontend/project.json @@ -10,7 +10,7 @@ "defaultConfiguration": "production", "options": { "outputPath": "dist/apps/frontend", - "configFile": "apps/frontend/vite.config.ts" + "configFile": "apps/frontend/vite.config.mts" }, "configurations": { "development": { diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.mts similarity index 100% rename from apps/frontend/vite.config.ts rename to apps/frontend/vite.config.mts diff --git a/package.json b/package.json index 2589e88..08f0e9b 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "@nx/react": "22.0.2", "@nx/vite": "22.0.2", "@nx/webpack": "22.0.2", + "@testing-library/dom": "^10.4.1", "@testing-library/react": "16.1.0", "@types/jest": "30.0.0", "@types/node": "^20.19.0", diff --git a/yarn.lock b/yarn.lock index 7014637..ef76d7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -500,7 +500,7 @@ dependencies: tslib "^2.3.1" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.27.1": +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.27.1": version "7.27.1" resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz" integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg== @@ -4186,6 +4186,20 @@ dependencies: tslib "^2.8.0" +"@testing-library/dom@^10.4.1": + version "10.4.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.1.tgz#d444f8a889e9a46e9a3b4f3b88e0fcb3efb6cf95" + integrity sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/runtime" "^7.12.5" + "@types/aria-query" "^5.0.1" + aria-query "5.3.0" + dom-accessibility-api "^0.5.9" + lz-string "^1.5.0" + picocolors "1.1.1" + pretty-format "^27.0.2" + "@testing-library/react@16.1.0": version "16.1.0" resolved "https://registry.npmjs.org/@testing-library/react/-/react-16.1.0.tgz" @@ -4237,6 +4251,11 @@ dependencies: tslib "^2.4.0" +"@types/aria-query@^5.0.1": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708" + integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw== + "@types/babel__core@^7.20.5": version "7.20.5" resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz" @@ -5274,6 +5293,13 @@ argparse@^2.0.1: resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz" integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== +aria-query@5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e" + integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A== + dependencies: + dequal "^2.0.3" + aria-query@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz" @@ -6940,6 +6966,11 @@ depd@~1.1.2: resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz" integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ== +dequal@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be" + integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA== + destroy@1.2.0, destroy@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz" @@ -7006,6 +7037,11 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-accessibility-api@^0.5.9: + version "0.5.16" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453" + integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg== + dom-serializer@^1.0.1: version "1.4.1" resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz" @@ -10827,6 +10863,11 @@ luxon@^3.2.1: resolved "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz" integrity sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew== +lz-string@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" + integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ== + macos-release@^2.5.0: version "2.5.1" resolved "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz" @@ -11889,7 +11930,7 @@ pgpass@1.0.5: dependencies: split2 "^4.1.0" -picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1: +picocolors@1.1.1, picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -12513,6 +12554,15 @@ pretty-format@30.2.0, pretty-format@^30.0.0: ansi-styles "^5.2.0" react-is "^18.3.1" +pretty-format@^27.0.2: + version "27.5.1" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" + integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-format@^29.7.0: version "29.7.0" resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz" @@ -12683,6 +12733,11 @@ react-is@^16.13.1: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^17.0.1: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + react-is@^18.0.0, react-is@^18.3.1: version "18.3.1" resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz" From 122a85cb7f5bd2f52543b9f69bccfa1ffefb208b Mon Sep 17 00:00:00 2001 From: thaninbew Date: Sun, 23 Nov 2025 19:12:25 -0500 Subject: [PATCH 5/5] fix: tests - cleanup DOM before --- .../src/containers/donations/DonationSummary.spec.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx index eb86328..f7ca76c 100644 --- a/apps/frontend/src/containers/donations/DonationSummary.spec.tsx +++ b/apps/frontend/src/containers/donations/DonationSummary.spec.tsx @@ -1,6 +1,6 @@ /** @vitest-environment jsdom */ -import { describe, it, expect, beforeEach, vi } from 'vitest'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'; +import { render, screen, fireEvent, cleanup } from '@testing-library/react'; import { DonationSummary } from './DonationSummary'; import { DONATION_FEE_RATE, DONATION_FIXED_FEE } from './DonationSummary'; @@ -9,6 +9,10 @@ describe('DonationSummary Component', () => { vi.clearAllMocks(); }); + afterEach(() => { + cleanup(); + }); + // unit tests for fee calculation // fee calculation with default values