From f19cf36f66ea88f252bb8a5cc2c1fad1b3d088a1 Mon Sep 17 00:00:00 2001 From: sl Date: Wed, 21 Feb 2024 13:26:36 +0100 Subject: [PATCH] frontend: refactor, fixes bugs, add test cases for `formatNumber` there was previously a bug where it formats negative 3 digits negative number (e.g -100) to become -'100. This PR fixes this as well as adding tests and moved the function to `utils/rates.ts` --- frontends/web/src/components/rates/rates.tsx | 10 ---- .../web/src/routes/account/summary/chart.tsx | 4 +- frontends/web/src/utils/rates.test.tsx | 59 +++++++++++++++++++ frontends/web/src/utils/rates.ts | 27 +++++++++ 4 files changed, 88 insertions(+), 12 deletions(-) create mode 100644 frontends/web/src/utils/rates.test.tsx create mode 100644 frontends/web/src/utils/rates.ts diff --git a/frontends/web/src/components/rates/rates.tsx b/frontends/web/src/components/rates/rates.tsx index 008a2a584d..00b29bc486 100644 --- a/frontends/web/src/components/rates/rates.tsx +++ b/frontends/web/src/components/rates/rates.tsx @@ -47,16 +47,6 @@ export const currenciesWithDisplayName: FiatWithDisplayName[] = [ { currency: 'BTC', displayName: 'Bitcoin' } ]; -export function formatNumber(amount: number, maxDigits: number): string { - let formatted = amount.toFixed(maxDigits); - let position = formatted.indexOf('.') - 3; - while (position > 0) { - formatted = formatted.slice(0, position) + '\'' + formatted.slice(position); - position = position - 3; - } - return formatted; -} - type TProvidedProps = { amount?: IAmount; tableRow?: boolean; diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx index 1ce9073595..2c48d6c5ae 100644 --- a/frontends/web/src/routes/account/summary/chart.tsx +++ b/frontends/web/src/routes/account/summary/chart.tsx @@ -19,12 +19,12 @@ import { Component, createRef, ReactChild } from 'react'; import { ISummary } from '../../../api/account'; import { translate, TranslateProps } from '../../../decorators/translate'; import { Skeleton } from '../../../components/skeleton/skeleton'; -import { formatNumber } from '../../../components/rates/rates'; +import { formatNumber } from '../../../utils/rates'; import { Amount } from '../../../components/amount/amount'; -import styles from './chart.module.css'; import Filters from './filters'; import { getDarkmode } from '../../../components/darkmode/darkmode'; import { TChartDisplay, TChartFiltersProps } from './types'; +import styles from './chart.module.css'; export interface FormattedLineData extends LineData { formattedValue: string; diff --git a/frontends/web/src/utils/rates.test.tsx b/frontends/web/src/utils/rates.test.tsx new file mode 100644 index 0000000000..8513425253 --- /dev/null +++ b/frontends/web/src/utils/rates.test.tsx @@ -0,0 +1,59 @@ +/** + * Copyright 2024 Shift Crypto AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, expect, it } from 'vitest'; +import { formatNumber } from './rates'; + +describe('rates utils', () => { + describe('formatNumber', () => { + it('formats positive number without thousand separator', () => { + expect(formatNumber(532.12, 2)).toBe('532.12'); + }); + + it('formats positive number with thousand separator', () => { + expect(formatNumber(1532.12, 2)).toBe('1\'532.12'); + }); + + it('formats negative number without thousand separator', () => { + expect(formatNumber(-532.12, 2)).toBe('-532.12'); + }); + + it('formats negative number with thousand separator', () => { + expect(formatNumber(-1532.12, 2)).toBe('-1\'532.12'); + }); + + it('handles zero correctly', () => { + expect(formatNumber(0, 2)).toBe('0.00'); + }); + + it('formats number with multiple thousand separators', () => { + expect(formatNumber(1234567.89, 2)).toBe('1\'234\'567.89'); + }); + + it('rounds decimal places correctly', () => { + expect(formatNumber(1234.5678, 2)).toBe('1\'234.57'); + }); + + it('formats negative number close to zero without separator', () => { + expect(formatNumber(-100, 2)).toBe('-100.00'); + }); + + it('formats large negative number with separators', () => { + expect(formatNumber(-123456.789, 3)).toBe('-123\'456.789'); + }); + + }); +}); \ No newline at end of file diff --git a/frontends/web/src/utils/rates.ts b/frontends/web/src/utils/rates.ts new file mode 100644 index 0000000000..6e89e2fe5b --- /dev/null +++ b/frontends/web/src/utils/rates.ts @@ -0,0 +1,27 @@ +/** + * Copyright 2024 Shift Crypto AG + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export function formatNumber(amount: number, maxDigits: number): string { + let formatted = amount.toFixed(maxDigits); + let position = formatted.indexOf('.') - 3; + const start = formatted[0] === '-' ? 1 : 0; + + while (position > start) { + formatted = formatted.slice(0, position) + '\'' + formatted.slice(position); + position -= 3; + } + return formatted; +} \ No newline at end of file