diff --git a/packages/react/src/progress/root/ProgressRoot.test.tsx b/packages/react/src/progress/root/ProgressRoot.test.tsx index a3d39ac7f7..0adc3fa984 100644 --- a/packages/react/src/progress/root/ProgressRoot.test.tsx +++ b/packages/react/src/progress/root/ProgressRoot.test.tsx @@ -1,5 +1,5 @@ -import { expect } from 'chai'; import * as React from 'react'; +import { expect } from 'chai'; import { Progress } from '@base-ui-components/react/progress'; import { createRenderer, describeConformance } from '#test-utils'; import type { ProgressRoot } from './ProgressRoot'; @@ -61,4 +61,28 @@ describe('', () => { expect(progressbar).to.have.attribute('aria-valuenow', '77'); }); }); + + describe('prop: format', () => { + it('formats the value', async () => { + const format: Intl.NumberFormatOptions = { + style: 'currency', + currency: 'USD', + }; + function formatValue(v: number) { + return new Intl.NumberFormat(undefined, format).format(v); + } + const { getByRole, getByTestId } = await render( + + + + + + , + ); + const value = getByTestId('value'); + const progressbar = getByRole('progressbar'); + expect(value).to.have.text(formatValue(30)); + expect(progressbar).to.have.attribute('aria-valuetext', formatValue(30)); + }); + }); }); diff --git a/packages/react/src/progress/value/ProgressValue.test.tsx b/packages/react/src/progress/value/ProgressValue.test.tsx index 56375f6c16..13e676258a 100644 --- a/packages/react/src/progress/value/ProgressValue.test.tsx +++ b/packages/react/src/progress/value/ProgressValue.test.tsx @@ -1,4 +1,6 @@ import * as React from 'react'; +import { expect } from 'chai'; +import { spy } from 'sinon'; import { Progress } from '@base-ui-components/react/progress'; import { createRenderer, describeConformance } from '#test-utils'; import { ProgressRootContext } from '../root/ProgressRootContext'; @@ -27,4 +29,51 @@ describe('', () => { }, refInstanceof: window.HTMLSpanElement, })); + + describe('prop: children', () => { + it('renders the value when children is not provided', async () => { + const { getByTestId } = await render( + + + , + ); + const value = getByTestId('value'); + expect(value).to.have.text('30%'); + }); + + it('renders a formatted value when a format is provided', async () => { + const format: Intl.NumberFormatOptions = { + style: 'currency', + currency: 'USD', + }; + function formatValue(v: number) { + return new Intl.NumberFormat(undefined, format).format(v); + } + const { getByTestId } = await render( + + + , + ); + const value = getByTestId('value'); + expect(value).to.have.text(formatValue(30)); + }); + + it('accepts a render function', async () => { + const renderSpy = spy(); + const format: Intl.NumberFormatOptions = { + style: 'currency', + currency: 'USD', + }; + function formatValue(v: number) { + return new Intl.NumberFormat(undefined, format).format(v); + } + await render( + + {renderSpy} + , + ); + expect(renderSpy.lastCall.args[0]).to.deep.equal(formatValue(30)); + expect(renderSpy.lastCall.args[1]).to.deep.equal(30); + }); + }); });