[NumberField] Fix tests on non-English locale machines (#524)

mui · Aug 2, 2024 · dfeef6e · dfeef6e
1 parent 7b0e684
commit dfeef6e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx
@@ -133,7 +133,7 @@ describe('<NumberField.Input />', () => {
     fireEvent.change(input, { target: { value: '1234' } });
     expect(input).to.have.value('1234');
     fireEvent.blur(input);
-    expect(input).to.have.value('1,234');
+    expect(input).to.have.value((1234).toLocaleString());
   });
 
   it('should commit validated number on blur (min)', () => {

diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx
@@ -373,23 +373,23 @@ describe('<NumberField />', () => {
       const input = screen.getByRole('textbox');
       fireEvent.keyDown(document.body, { altKey: true });
       fireEvent.pointerDown(screen.getByLabelText('Increase'));
-      expect(input).to.have.value('5.1');
+      expect(input).to.have.value((5.1).toLocaleString());
     });
 
     it('should decrement the value by the default `smallStep` prop of 0.1 while holding the alt key', () => {
       render(<NumberField defaultValue={6} />);
       const input = screen.getByRole('textbox');
       fireEvent.keyDown(document.body, { altKey: true });
       fireEvent.pointerDown(screen.getByLabelText('Decrease'));
-      expect(input).to.have.value('5.9');
+      expect(input).to.have.value((5.9).toLocaleString());
     });
 
     it('should use explicit `smallStep` value if provided while holding the alt key', () => {
       render(<NumberField defaultValue={5} smallStep={0.5} />);
       const input = screen.getByRole('textbox');
       fireEvent.keyDown(document.body, { altKey: true });
       fireEvent.pointerDown(screen.getByLabelText('Increase'));
-      expect(input).to.have.value('5.5');
+      expect(input).to.have.value((5.5).toLocaleString());
     });
 
     it('should not use the `smallStep` prop if no longer holding the alt key', () => {
@@ -398,18 +398,22 @@ describe('<NumberField />', () => {
       const button = screen.getByLabelText('Increase');
       fireEvent.keyDown(document.body, { altKey: true });
       fireEvent.pointerDown(button);
-      expect(input).to.have.value('5.5');
+      expect(input).to.have.value((5.5).toLocaleString());
       fireEvent.keyUp(input, { altKey: false });
       fireEvent.pointerDown(button);
-      expect(input).to.have.value('6.5');
+      expect(input).to.have.value((6.5).toLocaleString());
     });
   });
 
   describe('prop: format', () => {
     it('should format the value using the provided options', () => {
       render(<NumberField defaultValue={1000} format={{ style: 'currency', currency: 'USD' }} />);
       const input = screen.getByRole('textbox');
-      expect(input).to.have.value('$1,000.00');
+      const expectedValue = new Intl.NumberFormat(undefined, {
+        style: 'currency',
+        currency: 'USD',
+      }).format(1000);
+      expect(input).to.have.value(expectedValue);
     });
   });
 

diff --git a/packages/mui-base/src/NumberField/utils/format.test.ts b/packages/mui-base/src/NumberField/utils/format.test.ts
@@ -19,7 +19,11 @@ describe('NumberField format', () => {
 
   describe('formatNumber', () => {
     it('formats a number', () => {
-      expect(getFormatter(undefined, getOptions()).format(1234.56)).to.equal('$1,234.56');
+      const expected = new Intl.NumberFormat(undefined, {
+        style: 'currency',
+        currency: 'USD',
+      }).format(1234.56);
+      expect(getFormatter(undefined, getOptions()).format(1234.56)).to.equal(expected);
     });
 
     it('formats a number with different options', () => {

diff --git a/packages/mui-base/src/NumberField/utils/parse.test.ts b/packages/mui-base/src/NumberField/utils/parse.test.ts
@@ -4,7 +4,7 @@ import { getNumberLocaleDetails, parseNumber } from './parse';
 describe('NumberField parse', () => {
   describe('getNumberLocaleDetails', () => {
     it('returns the number locale details', () => {
-      const details = getNumberLocaleDetails();
+      const details = getNumberLocaleDetails('en-US');
       expect(details.decimal).to.equal('.');
       expect(details.group).to.equal(',');
       expect(details.currency).to.equal(undefined);
@@ -16,7 +16,8 @@ describe('NumberField parse', () => {
 
   describe('parseNumber', () => {
     it('parses a number', () => {
-      expect(parseNumber('1,234.56')).to.equal(1234.56);
+      const numberString = new Intl.NumberFormat().format(1234.56);
+      expect(parseNumber(numberString)).to.equal(1234.56);
     });
 
     it('parses a number with different options', () => {