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);
+ });
+ });
});