fix: fix format merging for message

fix #1500

Author: longlho

src/formatters/message.ts

@@ -60,7 +60,7 @@ function deepMergeFormatsAndSetTimeZone(
   timeZone?: string
 ): CustomFormats {
   if (!timeZone) {
-    return {};
+    return f1;
   }
   const mfFormats = IntlMessageFormat.formats;
   return {
@@ -128,7 +128,6 @@ export function formatMessage(
 
   // `id` is a required field of a Message Descriptor.
   invariant(id, '[React Intl] An `id` must be provided to format a message.');
-
   const message = messages && messages[id];
   formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
   defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);

src/formatters/number.ts

@@ -38,8 +38,9 @@ export function getFormatter(
   options: Parameters<IntlFormatters['formatNumber']>[1] = {}
 ) {
   const {format} = options;
-  let defaults =
-    ((format && getNamedFormat(formats!, 'number', format, onError)) || {}) as UnifiedNumberFormatOptions;
+  let defaults = ((format &&
+    getNamedFormat(formats!, 'number', format, onError)) ||
+    {}) as UnifiedNumberFormatOptions;
   const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults);
 
   return getNumberFormat(locale, filteredOptions);

test/unit/components/date.tsx

@@ -187,19 +187,15 @@ describe('<FormattedDateParts>', () => {
 
     mountPartsWithProvider({value: date + '', children}, intl);
 
-    expect(children.mock.calls[0][0]).toEqual(
-      intl.formatDateToParts(date)
-    );
+    expect(children.mock.calls[0][0]).toEqual(intl.formatDateToParts(date));
   });
 
   it('renders date 0 if value is ""', () => {
     const date = new Date(0);
 
     mountPartsWithProvider({value: '', children}, intl);
 
-    expect(children.mock.calls[0][0]).toEqual(
-      intl.formatDateToParts(date)
-    );
+    expect(children.mock.calls[0][0]).toEqual(intl.formatDateToParts(date));
   });
 
   it('accepts `format` prop', () => {

test/unit/components/html-message.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {mountFormattedComponentWithProvider} from '../testUtils';
 import FormattedHTMLMessage from '../../../src/components/html-message';
 import {createIntl} from '../../../src/components/provider';
-import {mount} from 'enzyme'
+import {mount} from 'enzyme';
 
 const mountWithProvider = mountFormattedComponentWithProvider(
   FormattedHTMLMessage
@@ -24,11 +24,13 @@ describe('<FormattedHTMLMessage>', () => {
     expect(FormattedHTMLMessage.displayName).toBeA('string');
   });
 
-  it('should throw if intl is not provided', function () {
-    expect(() => mount(<FormattedHTMLMessage id="foo"/>)).toThrow(/Could not find required `intl` object./)
-  })
+  it('should throw if intl is not provided', function() {
+    expect(() => mount(<FormattedHTMLMessage id="foo" />)).toThrow(
+      /Could not find required `intl` object./
+    );
+  });
 
-  it('should use textComponent if tagName is ""', function () {
+  it('should use textComponent if tagName is ""', function() {
     intl = createIntl({
       locale: 'en',
       defaultLocale: 'en-US',
@@ -37,17 +39,17 @@ describe('<FormattedHTMLMessage>', () => {
     const descriptor = {
       id: 'hello',
       defaultMessage: 'Hello, <b>World</b>!',
-      tagName: ''
-    }
+      tagName: '',
+    };
 
     const rendered = mountWithProvider(descriptor, intl).find('p');
 
     expect(rendered.prop('dangerouslySetInnerHTML')).toEqual({
       __html: intl.formatHTMLMessage(descriptor),
     });
-  })
+  });
 
-  it('should use span if textComponent & tagName is undefined', function () {
+  it('should use span if textComponent & tagName is undefined', function() {
     intl = createIntl({
       locale: 'en',
       defaultLocale: 'en-US',
@@ -56,15 +58,15 @@ describe('<FormattedHTMLMessage>', () => {
     const descriptor = {
       id: 'hello',
       defaultMessage: 'Hello, <b>World</b>!',
-      tagName: undefined
-    }
+      tagName: undefined,
+    };
 
     const rendered = mountWithProvider(descriptor, intl).find('span');
 
     expect(rendered.prop('dangerouslySetInnerHTML')).toEqual({
       __html: intl.formatHTMLMessage(descriptor),
     });
-  })
+  });
 
   it('renders a formatted HTML message in a <span>', () => {
     const descriptor = {

test/unit/components/message.tsx

@@ -160,13 +160,13 @@ describe('<FormattedMessage>', () => {
     const descriptor = {
       id: 'hello',
       defaultMessage: 'Hello, World!',
-      tagName: ''
+      tagName: '',
     };
 
-    const rendered = mountWithProvider(
-      descriptor,
-      {...providerProps, textComponent: undefined}
-    );
+    const rendered = mountWithProvider(descriptor, {
+      ...providerProps,
+      textComponent: undefined,
+    });
 
     expect(rendered.text()).toBe(intl.formatMessage(descriptor));
   });
@@ -314,15 +314,17 @@ describe('<FormattedMessage>', () => {
           time: {
             short: {
               second: 'numeric',
-              timeZoneName: 'long'
-            }
-          }
+              timeZoneName: 'long',
+            },
+          },
         },
         timeZone: 'Asia/Tokyo',
       }
     );
 
-    expect(rendered.text()).toBe('Hello, 1/1/70 - 9:00:00 AM Japan Standard Time');
+    expect(rendered.text()).toBe(
+      'Hello, 1/1/70 - 9:00:00 AM Japan Standard Time'
+    );
   });
 
   it('should merge timeZone into defaultFormats', function() {
@@ -340,15 +342,87 @@ describe('<FormattedMessage>', () => {
           time: {
             short: {
               second: 'numeric',
-              timeZoneName: 'long'
-            }
-          }
+              timeZoneName: 'long',
+            },
+          },
+        },
+        timeZone: 'Asia/Tokyo',
+      }
+    );
+
+    expect(rendered.text()).toBe(
+      'Hello, 1/1/70 - 9:00:00 AM Japan Standard Time'
+    );
+  });
+
+  it('should handle defaultFormat merge correctly', function() {
+    const rendered = mountWithProvider(
+      {
+        id: 'hello',
+        defaultMessage: 'The day is {now, date, weekday-long}.',
+        values: {
+          now: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        defaultLocale: undefined,
+        formats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        defaultFormats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        timeZone: undefined,
+      }
+    );
+
+    expect(rendered.text()).toBe('The day is Wednesday.');
+  });
+
+  it('should handle defaultFormat merge correctly w/ timeZone', function() {
+    const rendered = mountWithProvider(
+      {
+        id: 'hello',
+        defaultMessage: 'The day is {now, date, weekday-long}.',
+        values: {
+          now: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        defaultLocale: undefined,
+        formats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        defaultFormats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
         },
         timeZone: 'Asia/Tokyo',
       }
     );
 
-    expect(rendered.text()).toBe('Hello, 1/1/70 - 9:00:00 AM Japan Standard Time');
+    expect(rendered.text()).toBe('The day is Thursday.');
   });
 
   it('should re-render when `values` are different', () => {

test/unit/components/time.tsx

@@ -178,19 +178,15 @@ describe('<FormattedTimeParts>', () => {
 
     mountPartsWithProvider({value: date.toISOString(), children}, intl);
 
-    expect(children.mock.calls[0][0]).toEqual(
-      intl.formatTimeToParts(date)
-    );
+    expect(children.mock.calls[0][0]).toEqual(intl.formatTimeToParts(date));
   });
 
   it('renders date 0 if value is ""', () => {
     const date = new Date(0);
 
     mountPartsWithProvider({value: '', children}, intl);
 
-    expect(children.mock.calls[0][0]).toEqual(
-      intl.formatTimeToParts(date)
-    );
+    expect(children.mock.calls[0][0]).toEqual(intl.formatTimeToParts(date));
   });
 
   it('falls back and warns on invalid Intl.DateTimeFormat options', () => {