react-intl 6.0.3 → 6.0.6

package/tests/unit/components/message.tsx

@@ -0,0 +1,509 @@
+import * as React from 'react'
+import FormattedMessage from '../../../src/components/message'
+import IntlProvider, {createIntl} from '../../../src/components/provider'
+import {mountFormattedComponentWithProvider} from '../testUtils'
+import {IntlShape} from '../../../'
+import {render} from '@testing-library/react'
+import type {IntlConfig} from '../../../src/types'
+
+const mountWithProvider = mountFormattedComponentWithProvider(FormattedMessage)
+
+const dummyContext = React.createContext('')
+const {Provider: DummyProvider, Consumer: DummyConsumer} = dummyContext
+
+describe('<FormattedMessage>', () => {
+  let providerProps: IntlConfig
+  let intl: IntlShape
+
+  beforeEach(() => {
+    providerProps = {
+      locale: 'en',
+      defaultLocale: 'en',
+      onError: () => {},
+    }
+    intl = createIntl(providerProps)
+  })
+
+  it('has a `displayName`', () => {
+    expect(typeof FormattedMessage.displayName).toBe('string')
+  })
+
+  it('throws when <IntlProvider> is missing from ancestry and there is no defaultMessage', () => {
+    // So it doesn't spam the console
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<FormattedMessage id="foo" />)).toThrow(
+      '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.'
+    )
+  })
+
+  it('should not work if <IntlProvider> is missing from ancestry', () => {
+    expect(() =>
+      render(<FormattedMessage id="hello" defaultMessage="Hello" />)
+    ).toThrow()
+  })
+
+  it('should work w/ multiple context', function () {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'hello world',
+    }
+    function Foo() {
+      return (
+        <DummyConsumer>
+          {id => (
+            <span data-testid="msg">
+              <FormattedMessage data-testid="msg" id={id} />
+            </span>
+          )}
+        </DummyConsumer>
+      )
+    }
+    const {getByTestId} = render(
+      <IntlProvider
+        locale="en"
+        messages={{
+          [descriptor.id]: descriptor.defaultMessage,
+        }}
+      >
+        <DummyProvider value={descriptor.id}>
+          <Foo />
+        </DummyProvider>
+      </IntlProvider>
+    )
+
+    expect(getByTestId('msg')).toHaveTextContent(intl.formatMessage(descriptor))
+  })
+
+  it('renders a formatted message in a <>', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, World!',
+    }
+    const {getByTestId} = mountWithProvider(descriptor, providerProps)
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatMessage(descriptor)
+    )
+  })
+
+  it('accepts `values` prop', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, {name}!',
+    }
+    const values = {name: 'Jest'}
+    const {getByTestId} = mountWithProvider(
+      {...descriptor, values},
+      providerProps
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatMessage(descriptor, values)
+    )
+  })
+
+  it('accepts string as `tagName` prop', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, World!',
+    }
+    const tagName = 'p'
+
+    const {container} = mountWithProvider(
+      {...descriptor, tagName},
+      providerProps
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('accepts an react element as `tagName` prop', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, World!',
+    }
+
+    const H1: React.FC = ({children}) => <h1 data-testid="h1">{children}</h1>
+    const {getByTestId} = mountWithProvider(
+      {...descriptor, tagName: H1},
+      providerProps
+    )
+
+    expect(getByTestId('h1').tagName).toBe('H1')
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatMessage(descriptor)
+    )
+  })
+
+  it('should render out raw array if tagName is not specified', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, World!',
+      tagName: '' as any,
+    }
+
+    const {getByTestId} = mountWithProvider(descriptor, {
+      ...providerProps,
+      textComponent: undefined,
+    })
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatMessage(descriptor)
+    )
+  })
+
+  it('supports function-as-child pattern', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, World!',
+    }
+
+    const spy = jest.fn().mockImplementation(() => <p>Jest</p>)
+
+    const {getByTestId} = mountWithProvider(
+      {...descriptor, children: spy},
+      providerProps
+    )
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    expect(spy.mock.calls[0][0]).toEqual([intl.formatMessage(descriptor)])
+
+    expect(getByTestId('comp')).toHaveTextContent('Jest')
+  })
+
+  describe('rich text', function () {
+    it('supports legacy behavior', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, {name}!',
+          values: {
+            name: <b data-testid="b">Jest</b>,
+          },
+        },
+        providerProps
+      )
+
+      const nameNode = getByTestId('b')
+      expect(nameNode.tagName).toBe('B')
+      expect(nameNode).toHaveTextContent('Jest')
+    })
+    it('supports rich-text message formatting', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}</b>!',
+          values: {
+            name: 'Jest',
+            b: (name: string) => <b data-testid="b">{name}</b>,
+          },
+        },
+        providerProps
+      )
+
+      const nameNode = getByTestId('b')
+      expect(nameNode.tagName).toBe('B')
+      expect(nameNode).toHaveTextContent('Jest')
+    })
+    it('supports rich-text message formatting with defaultRichTextElements', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}</b>!',
+          values: {
+            name: 'Jest',
+          },
+        },
+        {
+          ...providerProps,
+          defaultRichTextElements: {
+            b: chunks => <b data-testid="b">{chunks}</b>,
+          },
+        }
+      )
+      const nameNode = getByTestId('b')
+      expect(nameNode.tagName).toBe('B')
+      expect(nameNode).toHaveTextContent('Jest')
+    })
+
+    it('supports rich-text message formatting with defaultRichTextElements', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}</b>!',
+          values: {
+            name: 'Jest',
+          },
+          ignoreTag: true,
+        },
+        {
+          ...providerProps,
+        }
+      )
+
+      expect(getByTestId('comp')).toHaveTextContent('Hello, <b>Jest</b>!')
+    })
+
+    it('supports rich-text message formatting w/ nested tag', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}<i>!</i></b>',
+          values: {
+            name: 'Jest',
+            b: (chunks: any[]) => <b>{chunks}</b>,
+            i: (msg: string) => <i>{msg}</i>,
+          },
+        },
+        providerProps
+      )
+      expect(getByTestId('comp')).toMatchSnapshot()
+    })
+
+    it('supports rich-text message formatting w/ nested tag, chunks merged', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, <b>{name}<i>!</i></b>',
+          values: {
+            name: 'Jest',
+            b: (chunks: any) => <b>{chunks}</b>,
+            i: (msg: string) => <i>{msg}</i>,
+          },
+        },
+        providerProps
+      )
+      expect(getByTestId('comp')).toMatchSnapshot()
+    })
+
+    it('supports rich-text message formatting in function-as-child pattern', () => {
+      const {getByTestId} = mountWithProvider(
+        {
+          id: 'hello',
+          defaultMessage: 'Hello, {name}',
+          values: {
+            name: <b data-testid="b">Jest</b>,
+          },
+          children: (chunks: any) => <strong>{chunks}</strong>,
+        },
+        providerProps
+      )
+
+      const nameNode = getByTestId('b')
+      expect(nameNode.tagName).toBe('B')
+      expect(nameNode).toHaveTextContent('Jest')
+    })
+  })
+  it('should use timeZone from Provider', function () {
+    const {getByTestId} = mountWithProvider(
+      {
+        id: 'hello',
+        values: {
+          ts: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        messages: {
+          hello: 'Hello, {ts, date, short} - {ts, time, short}',
+        },
+        timeZone: 'Asia/Tokyo',
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('Hello, 1/1/70 - 9:00 AM')
+  })
+
+  it('should use timeZone from Provider for defaultMessage', function () {
+    const {getByTestId} = mountWithProvider(
+      {
+        id: 'hello',
+        defaultMessage: 'Hello, {ts, date, short} - {ts, time, short}',
+        values: {
+          ts: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        timeZone: 'Asia/Tokyo',
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('Hello, 1/1/70 - 9:00 AM')
+  })
+
+  it('should merge timeZone into formats', function () {
+    const {getByTestId} = mountWithProvider(
+      {
+        id: 'hello',
+        values: {
+          ts: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        messages: {
+          hello: 'Hello, {ts, date, short} - {ts, time, short}',
+        },
+        formats: {
+          time: {
+            short: {
+              second: 'numeric',
+              timeZoneName: 'long',
+            },
+          },
+        },
+        timeZone: 'Asia/Tokyo',
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      'Hello, 1/1/70 - 9:00:00 AM Japan Standard Time'
+    )
+  })
+
+  it('should merge timeZone into defaultFormats', function () {
+    const {getByTestId} = mountWithProvider(
+      {
+        id: 'hello',
+        defaultMessage: 'Hello, {ts, date, short} - {ts, time, short}',
+        values: {
+          ts: new Date(0),
+        },
+      },
+      {
+        ...providerProps,
+        defaultFormats: {
+          time: {
+            short: {
+              second: 'numeric',
+              timeZoneName: 'long',
+            },
+          },
+        },
+        timeZone: 'Asia/Tokyo',
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      'Hello, 1/1/70 - 9:00:00 AM Japan Standard Time'
+    )
+  })
+
+  it('should handle defaultFormat merge correctly', function () {
+    const {getByTestId} = 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', timeZone: 'UTC'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        defaultFormats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        timeZone: undefined,
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('The day is Thursday.')
+  })
+
+  it('should handle defaultFormat merge correctly w/ timeZone', function () {
+    const {getByTestId} = 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', timeZone: 'UTC'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        defaultFormats: {
+          date: {
+            'weekday-long': {weekday: 'long'},
+          },
+          time: {
+            hour: {hour: 'numeric'},
+          },
+        },
+        timeZone: 'Asia/Tokyo',
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('The day is Thursday.')
+  })
+
+  it('should re-render when `values` are different', () => {
+    const descriptor = {
+      id: 'hello',
+      defaultMessage: 'Hello, {name}!',
+    }
+    const values = {
+      name: 'Jest',
+    }
+
+    const spy = jest.fn().mockImplementation(() => null)
+    const {rerenderProps} = mountWithProvider(
+      {
+        ...descriptor,
+        values,
+        children: spy,
+      },
+      providerProps
+    )
+
+    expect(spy).toHaveBeenCalled()
+    spy.mockClear()
+    rerenderProps(
+      {
+        ...descriptor,
+        values: {
+          ...values, // create new object instance with same values to test shallow equality check
+        },
+        children: spy,
+      },
+      providerProps
+    )
+    expect(spy).not.toHaveBeenCalled()
+
+    rerenderProps(
+      {
+        ...descriptor,
+        values: {
+          name: 'Enzyme',
+        },
+        children: spy,
+      },
+      providerProps
+    )
+    expect(spy).toHaveBeenCalled()
+  })
+})

package/tests/unit/components/number.tsx

@@ -0,0 +1,198 @@
+import * as React from 'react'
+import {FormattedNumber, FormattedNumberParts} from '../../../'
+import {createIntl} from '../../../src/components/provider'
+import {mountFormattedComponentWithProvider} from '../testUtils'
+import {NumberFormatOptions} from '@formatjs/ecma402-abstract'
+import {render} from '@testing-library/react'
+import {IntlShape} from '@formatjs/intl'
+
+const mountWithProvider = mountFormattedComponentWithProvider(FormattedNumber)
+const mountPartsWithProvider =
+  mountFormattedComponentWithProvider(FormattedNumberParts)
+
+describe('<FormattedNumber>', () => {
+  let intl: IntlShape<React.ReactNode>
+  const onError = jest.fn()
+  beforeEach(() => {
+    onError.mockClear()
+    intl = createIntl({
+      locale: 'en',
+      onError,
+    })
+  })
+
+  it('has a `displayName`', () => {
+    expect(typeof FormattedNumber.displayName).toBe('string')
+  })
+
+  it('throws when <IntlProvider> is missing from ancestry', () => {
+    // So it doesn't spam the console
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<FormattedNumber value={0} />)).toThrow(
+      '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.'
+    )
+  })
+
+  it('renders "NaN" in a <span> when no `value` prop is provided', () => {
+    const {getByTestId} = mountWithProvider(
+      {
+        // @ts-ignore
+        value: undefined,
+      },
+      intl
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('NaN')
+  })
+
+  it('renders a formatted number in a <>', () => {
+    const num = 1000
+
+    const {getByTestId} = mountWithProvider({value: num}, intl)
+
+    expect(getByTestId('comp')).toHaveTextContent(intl.formatNumber(num))
+  })
+
+  it('renders a formatted number w/o textComponent', () => {
+    const num = 1000
+
+    const {getByTestId} = mountWithProvider(
+      {value: num},
+      // @ts-ignore
+      {...intl, textComponent: null}
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(intl.formatNumber(num))
+  })
+
+  it('accepts valid Intl.NumberFormat options as props', () => {
+    const num = 0.5
+    const options = {style: 'percent' as NumberFormatOptions['style']}
+
+    const {getByTestId} = mountWithProvider({value: num, ...options}, intl)
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatNumber(num, options)
+    )
+  })
+
+  it('falls back and warns on invalid Intl.NumberFormat options', () => {
+    const {getByTestId} = mountWithProvider(
+      {value: 0, style: 'invalid' as any},
+      intl
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('0')
+    expect(onError.mock.calls[0][0].code).toBe('FORMAT_ERROR')
+    expect(onError).toHaveBeenCalledTimes(1)
+  })
+
+  it('accepts `format` prop', () => {
+    intl = createIntl({
+      onError: () => {},
+      locale: 'en',
+      formats: {
+        number: {
+          percent: {
+            style: 'percent',
+            minimumFractionDigits: 2,
+          },
+        },
+      },
+    })
+
+    const num = 0.505
+    const format = 'percent'
+
+    const {getByTestId} = mountWithProvider({value: num, format}, intl)
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatNumber(num, {format})
+    )
+  })
+
+  it('supports function-as-child pattern', () => {
+    const num = Date.now()
+
+    const spy = jest
+      .fn()
+      .mockImplementation(() => <span data-testid="spy">Jest</span>)
+    const {getByTestId} = mountWithProvider({value: num, children: spy}, intl)
+
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy.mock.calls[0]).toEqual([intl.formatNumber(num)])
+
+    expect(getByTestId('spy').tagName).toBe('SPAN')
+    expect(getByTestId('comp')).toHaveTextContent('Jest')
+  })
+})
+
+function NOOP(_: Intl.NumberFormatPart[]) {
+  return null
+}
+
+describe('<FormattedNumberParts>', function () {
+  let intl: IntlShape<React.ReactNode>
+  const children = jest.fn(
+    parts => (Array.isArray(parts) && parts[0] && parts[0].value) || null
+  )
+
+  beforeEach(() => {
+    intl = createIntl({
+      locale: 'en',
+      onError: () => {},
+    })
+    children.mockClear()
+  })
+
+  it('has a `displayName`', () => {
+    expect(typeof FormattedNumberParts.displayName).toBe('string')
+  })
+
+  it('throws when <IntlProvider> is missing from ancestry', () => {
+    // So it doesn't spam the console
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() =>
+      render(<FormattedNumberParts value={0} children={NOOP} />)
+    ).toThrow(
+      '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.'
+    )
+  })
+
+  it('accepts valid Intl.NumberFormat options as props', () => {
+    const num = 0.5
+    const options = {
+      style: 'percent' as NumberFormatOptions['style'],
+      children,
+    }
+
+    mountPartsWithProvider({value: num, ...options}, intl)
+
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatNumberToParts(num, options)
+    )
+  })
+
+  it('accepts `format` prop', () => {
+    intl = createIntl({
+      onError: () => {},
+      locale: 'en',
+      formats: {
+        number: {
+          percent: {
+            style: 'percent',
+            minimumFractionDigits: 2,
+          },
+        },
+      },
+    })
+
+    const num = 0.505
+    const format = 'percent'
+
+    mountPartsWithProvider({value: num, format, children}, intl)
+    expect(children.mock.calls[0][0]).toEqual(
+      intl.formatNumberToParts(num, {format})
+    )
+  })
+})