fix: fix tests & add corresponding formatToParts fns

Author: longlho

src/components/createFormattedComponent.tsx

@@ -33,18 +33,8 @@ export const FormattedNumberParts: React.FC<
   <Context.Consumer>
     {intl => {
       invariantIntlContext(intl);
-      const {value, children} = props;
-      let formattedParts: Intl.NumberFormatPart[] = [];
-      try {
-        formattedParts = getNumberFormatter(
-          intl,
-          intl.formatters.getNumberFormat,
-          props
-        ).formatToParts(value);
-      } catch (e) {
-        intl.onError(createError(`Error formatting number.`, e));
-      }
-      return children(formattedParts);
+      const {value, children, ...formatProps} = props;
+      return children(intl.formatNumberToParts(value, formatProps));
     }}
   </Context.Consumer>
 );
@@ -63,24 +53,12 @@ export function createFormattedDateTimePartsComponent<
     <Context.Consumer>
       {intl => {
         invariantIntlContext(intl);
-        const {value, children} = props;
+        const {value, children, ...formatProps} = props;
         const date = typeof value === 'string' ? new Date(value || 0) : value;
-        let formattedParts: Intl.DateTimeFormatPart[] = [];
-        try {
-          formattedParts = getDateTimeFormatter(
-            intl,
-            name === 'formatDate' ? 'date' : 'time',
-            intl.formatters.getDateTimeFormat,
-            props
-          ).formatToParts(date as Date);
-        } catch (e) {
-          intl.onError(
-            createError(
-              `Error formatting ${name === 'formatDate' ? 'date' : 'time'}.`,
-              e
-            )
-          );
-        }
+        const formattedParts: Intl.DateTimeFormatPart[] =
+          name === 'formatDate'
+            ? intl.formatDateToParts(date, formatProps)
+            : intl.formatTimeToParts(date, formatProps);
 
         return children(formattedParts);
       }}
@@ -103,8 +81,8 @@ export function createFormattedComponent<Name extends keyof Formatter>(
     <Context.Consumer>
       {intl => {
         invariantIntlContext(intl);
-        const {value, children} = props;
-        const formattedValue = intl[name](value as any, props);
+        const {value, children, ...formatProps} = props;
+        const formattedValue = intl[name](value as any, formatProps);
 
         if (typeof children === 'function') {
           return children(formattedValue as any);

src/components/provider.tsx

@@ -15,9 +15,14 @@ import {
 } from '../utils';
 import {IntlConfig, IntlShape, Omit, IntlCache} from '../types';
 import areIntlLocalesSupported from 'intl-locales-supported';
-import {formatNumber} from '../formatters/number';
+import {formatNumber, formatNumberToParts} from '../formatters/number';
 import {formatRelativeTime} from '../formatters/relativeTime';
-import {formatDate, formatTime} from '../formatters/dateTime';
+import {
+  formatDate,
+  formatTime,
+  formatDateToParts,
+  formatTimeToParts,
+} from '../formatters/dateTime';
 import {formatPlural} from '../formatters/plural';
 import {formatMessage, formatHTMLMessage} from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
@@ -135,6 +140,11 @@ export function createIntl(
       resolvedConfig,
       formatters.getNumberFormat
     ),
+    formatNumberToParts: formatNumberToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getNumberFormat
+    ),
     formatRelativeTime: formatRelativeTime.bind(
       null,
       resolvedConfig,
@@ -145,11 +155,21 @@ export function createIntl(
       resolvedConfig,
       formatters.getDateTimeFormat
     ),
+    formatDateToParts: formatDateToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
     formatTime: formatTime.bind(
       null,
       resolvedConfig,
       formatters.getDateTimeFormat
     ),
+    formatTimeToParts: formatTimeToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
     formatPlural: formatPlural.bind(
       null,
       resolvedConfig,

src/formatters/dateTime.ts

@@ -98,3 +98,46 @@ export function formatTime(
 
   return String(date);
 }
+
+export function formatDateToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatDate']>[0],
+  options: Parameters<IntlFormatters['formatDate']>[1] = {}
+) {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+  try {
+    return getFormatter(
+      config,
+      'date',
+      getDateTimeFormat,
+      options
+    ).formatToParts(date);
+  } catch (e) {
+    config.onError(createError('Error formatting date.', e));
+  }
+
+  return [];
+}
+
+export function formatTimeToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatTime']>[0],
+  options: Parameters<IntlFormatters['formatTime']>[1] = {}
+) {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+
+  try {
+    return getFormatter(
+      config,
+      'time',
+      getDateTimeFormat,
+      options
+    ).formatToParts(date);
+  } catch (e) {
+    config.onError(createError('Error formatting time.', e));
+  }
+
+  return [];
+}

src/formatters/number.ts

@@ -47,3 +47,18 @@ export function formatNumber(
 
   return String(value);
 }
+
+export function formatNumberToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError'>,
+  getNumberFormat: Formatters['getNumberFormat'],
+  value: Parameters<IntlFormatters['formatNumber']>[0],
+  options: Parameters<IntlFormatters['formatNumber']>[1] = {}
+) {
+  try {
+    return getFormatter(config, getNumberFormat, options).formatToParts(value);
+  } catch (e) {
+    config.onError(createError('Error formatting number.', e));
+  }
+
+  return [];
+}

src/types.ts

@@ -63,6 +63,14 @@ export interface IntlFormatters {
     value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
     opts?: FormatDateOptions
   ): string;
+  formatDateToParts(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): Intl.DateTimeFormatPart[];
+  formatTimeToParts(
+    value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
+    opts?: FormatDateOptions
+  ): Intl.DateTimeFormatPart[];
   formatRelativeTime(
     value: Parameters<IntlRelativeTimeFormat['format']>[0],
     unit?: Parameters<IntlRelativeTimeFormat['format']>[1],
@@ -72,6 +80,10 @@ export interface IntlFormatters {
     value: Parameters<Intl.NumberFormat['format']>[0],
     opts?: FormatNumberOptions
   ): string;
+  formatNumberToParts(
+    value: Parameters<Intl.NumberFormat['format']>[0],
+    opts?: FormatNumberOptions
+  ): Intl.NumberFormatPart[];
   formatPlural(
     value: Parameters<Intl.PluralRules['select']>[0],
     opts?: FormatPluralOptions

test/unit/components/__snapshots__/date.tsx.snap

@@ -162,15 +162,19 @@ describe('<FormattedDateParts>', () => {
 
     mountPartsWithProvider({value: date, ...options}, intl);
 
-    expect(children.mock.calls).toMatchSnapshot();
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatDateToParts(date, options)
+    );
   });
 
   it('falls back and warns on invalid Intl.DateTimeFormat options', () => {
     const date = new Date(1567130870626);
     mountPartsWithProvider({value: date, year: 'invalid', children}, intl);
 
-    expect(children.mock.calls).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatDateToParts(date, {year: 'invalid'})
+    );
+    expect(console.error).toHaveBeenCalledTimes(2);
     expect(console.error).toHaveBeenCalledWith(
       expect.stringMatching(
         /Error formatting date.\nRangeError: Value invalid out of range for (.*) options property year/
@@ -193,6 +197,8 @@ describe('<FormattedDateParts>', () => {
 
     mountPartsWithProvider({value: date, format, children}, intl);
 
-    expect(children.mock.calls).toMatchSnapshot();
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatDateToParts(date, {format})
+    );
   });
 });

test/unit/components/__snapshots__/number.tsx.snap

@@ -145,7 +145,9 @@ describe('<FormattedNumberParts>', function() {
 
     mountPartsWithProvider({value: num, ...options}, intl);
 
-    expect(children.mock.calls).toMatchSnapshot();
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatNumberToParts(num, options)
+    );
   });
 
   it('accepts `format` prop', () => {
@@ -165,6 +167,8 @@ describe('<FormattedNumberParts>', function() {
     const format = 'percent';
 
     mountPartsWithProvider({value: num, format, children}, intl);
-    expect(children.mock.calls).toMatchSnapshot();
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatNumberToParts(num, {format})
+    );
   });
 });