From 27b420dbb340edb15300baae57a0244fdbc348c4 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Tue, 10 Sep 2024 12:56:44 +0530 Subject: [PATCH 1/3] Handle neg digits prop in Currency component to fix DisplayPrice story crash --- .../src/components/Currency/Currency.test.tsx | 44 ++++++++++++------- .../src/components/Currency/Currency.tsx | 8 +++- 2 files changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/manager/src/components/Currency/Currency.test.tsx b/packages/manager/src/components/Currency/Currency.test.tsx index 0b46d8a8410..b5cfbd02fe0 100644 --- a/packages/manager/src/components/Currency/Currency.test.tsx +++ b/packages/manager/src/components/Currency/Currency.test.tsx @@ -8,69 +8,79 @@ import { Currency } from './Currency'; describe('Currency Component', () => { it('displays a given quantity in USD', () => { const { getByText, rerender } = renderWithTheme(); - getByText('$5.00'); + expect(getByText('$5.00')).toBeVisible(); rerender(); - getByText('$99.99'); + expect(getByText('$99.99')).toBeVisible(); rerender(); - getByText('$0.00'); + expect(getByText('$0.00')).toBeVisible(); }); it('handles negative quantities', () => { const { getByText, rerender } = renderWithTheme(); - getByText('-$5.00'); + expect(getByText('-$5.00')).toBeVisible(); rerender(); - getByText('-$99.99'); + expect(getByText('-$99.99')).toBeVisible(); rerender(); - getByText('-$0.01'); + expect(getByText('-$0.01')).toBeVisible(); }); it('wraps in parentheses', () => { const { getByText, rerender } = renderWithTheme( ); - getByText('($5.00)'); + expect(getByText('($5.00)')).toBeVisible(); rerender(); - getByText('-($5.00)'); + expect(getByText('-($5.00)')).toBeVisible(); rerender(); - getByText('($0.00)'); + expect(getByText('($0.00)')).toBeVisible(); }); it('handles custom number of decimal places', () => { const { getByText, rerender } = renderWithTheme( ); - getByText('$5.000'); + expect(getByText('$5.000')).toBeVisible(); rerender(); - getByText('$99.999'); + expect(getByText('$99.999')).toBeVisible(); rerender(); - getByText('-$5.000'); + expect(getByText('-$5.000')).toBeVisible(); }); it('handles custom default values', () => { const { getByText } = renderWithTheme( ); - getByText(`$${UNKNOWN_PRICE}`); + expect(getByText(`$${UNKNOWN_PRICE}`)).toBeVisible(); }); it('groups by comma', () => { const { getByText, rerender } = renderWithTheme( ); - getByText('$1,000.00'); + expect(getByText('$1,000.00')).toBeVisible(); rerender(); - getByText('$100,000.00'); + expect(getByText('$100,000.00')).toBeVisible(); }); it('displays --.-- when passed in as a quantity', () => { const { getByText } = renderWithTheme(); - getByText('$--.--'); + expect(getByText('$--.--')).toBeVisible(); }); it('applies the passed in data attributes', () => { const { getByTestId } = renderWithTheme( ); - getByTestId('currency-test'); + expect(getByTestId('currency-test')).toBeInTheDocument(); + }); + + it('should display price with default 2 decimal places if decimalPlaces is negative or undefined', () => { + const { getByText, rerender } = renderWithTheme( + + ); + expect(getByText('$99.00')).toBeVisible(); + + rerender(); + expect(getByText('$99.00')).toBeVisible(); }); }); diff --git a/packages/manager/src/components/Currency/Currency.tsx b/packages/manager/src/components/Currency/Currency.tsx index f1ad0259632..5bf4cf71460 100644 --- a/packages/manager/src/components/Currency/Currency.tsx +++ b/packages/manager/src/components/Currency/Currency.tsx @@ -22,11 +22,15 @@ interface CurrencyFormatterProps { } export const Currency = (props: CurrencyFormatterProps) => { - const { dataAttrs, quantity, wrapInParentheses } = props; + const { dataAttrs, decimalPlaces, quantity, wrapInParentheses } = props; + + // Use the default value (2) when decimalPlaces is negative or undefined. + const minimumFractionDigits = + decimalPlaces !== undefined && decimalPlaces >= 0 ? decimalPlaces : 2; const formatter = new Intl.NumberFormat('en-US', { currency: 'USD', - minimumFractionDigits: props.decimalPlaces ?? 2, + minimumFractionDigits, style: 'currency', }); From 7e52de5b42acc588eb73733861ebf7aa7bb22a6c Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Tue, 10 Sep 2024 13:35:39 +0530 Subject: [PATCH 2/3] Added changeset: DisplayPrice story crash when Currency component's minimumFractionDigits is Negative --- packages/manager/.changeset/pr-10913-fixed-1725955539025.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10913-fixed-1725955539025.md diff --git a/packages/manager/.changeset/pr-10913-fixed-1725955539025.md b/packages/manager/.changeset/pr-10913-fixed-1725955539025.md new file mode 100644 index 00000000000..e15ac9838cc --- /dev/null +++ b/packages/manager/.changeset/pr-10913-fixed-1725955539025.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +DisplayPrice story crash when Currency component's minimumFractionDigits is Negative ([#10913](https://github.com/linode/manager/pull/10913)) From e8eca9c8b05c41b78312d4097e0caf18b754f291 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Tue, 10 Sep 2024 13:39:44 +0530 Subject: [PATCH 3/3] Update the changeset file --- packages/manager/.changeset/pr-10913-fixed-1725955539025.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10913-fixed-1725955539025.md b/packages/manager/.changeset/pr-10913-fixed-1725955539025.md index e15ac9838cc..d0db3d09c1d 100644 --- a/packages/manager/.changeset/pr-10913-fixed-1725955539025.md +++ b/packages/manager/.changeset/pr-10913-fixed-1725955539025.md @@ -2,4 +2,4 @@ "@linode/manager": Fixed --- -DisplayPrice story crash when Currency component's minimumFractionDigits is Negative ([#10913](https://github.com/linode/manager/pull/10913)) +DisplayPrice story crash when Currency component's minimumFractionDigits is negative ([#10913](https://github.com/linode/manager/pull/10913))