react-intl 6.0.3 → 6.0.6

package/tests/unit/components/plural.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react'
+import FormattedPlural from '../../../src/components/plural'
+import {mountFormattedComponentWithProvider} from '../testUtils'
+import {createIntl} from '../../../src/components/provider'
+import {IntlShape} from '@formatjs/intl'
+import {render} from '@testing-library/react'
+import {LDMLPluralRule} from '@formatjs/ecma402-abstract'
+
+const mountWithProvider = mountFormattedComponentWithProvider(FormattedPlural)
+
+describe('<FormattedPlural>', () => {
+  let intl: IntlShape<React.ReactNode>
+
+  beforeEach(() => {
+    intl = createIntl({
+      onError: () => {},
+      locale: 'en',
+    })
+  })
+
+  it('has a `displayName`', () => {
+    expect(typeof FormattedPlural.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(<FormattedPlural value={1} other="" />)).toThrow(
+      '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.'
+    )
+  })
+
+  it('renders an empty <> when no `other` prop is provided', () => {
+    let {getByTestId, unmount} = mountWithProvider(
+      // @ts-ignore
+      {value: undefined, other: undefined},
+      intl
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent('')
+    unmount()
+    getByTestId = mountWithProvider(
+      {value: 1, other: undefined},
+      intl
+    ).getByTestId
+    expect(getByTestId('comp')).toHaveTextContent('')
+  })
+
+  it('renders `other` in a <> when no `value` prop is provided', () => {
+    const other = 'Jest'
+
+    const {getByTestId} = mountWithProvider(
+      {
+        // @ts-ignore
+        value: undefined,
+        other,
+      },
+      intl
+    )
+    expect(getByTestId('comp')).toHaveTextContent(other)
+  })
+
+  it('renders a formatted plural in a <>', () => {
+    const num = 1
+    const one = 'foo'
+    const other = 'bar'
+
+    const {getByTestId} = mountWithProvider({value: num, one, other}, intl)
+    expect(getByTestId('comp')).toHaveTextContent(num === 1 ? one : other)
+  })
+
+  it('renders a formatted plural w/o textComponent', () => {
+    const num = 1
+    const one = 'foo'
+    const other = 'bar'
+
+    const {getByTestId} = mountWithProvider(
+      {value: num, one, other},
+      // @ts-ignore
+      {...intl, textComponent: null}
+    )
+    expect(getByTestId('comp')).toHaveTextContent(num === 1 ? one : other)
+  })
+
+  it('accepts valid IntlPluralFormat options as props', () => {
+    const num = 22
+    const props = {two: 'nd'} as any
+    const options = {type: 'ordinal' as 'ordinal'}
+
+    const {getByTestId} = mountWithProvider(
+      {value: num, ...props, ...options},
+      intl
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      props[intl.formatPlural(num, options)]
+    )
+  })
+
+  it('supports function-as-child pattern', () => {
+    const props = {one: 'foo'} as Record<LDMLPluralRule, string>
+    const num = 1
+
+    const spy = jest.fn().mockImplementation(() => <b data-testid="b">Jest</b>)
+    const {getByTestId} = mountWithProvider(
+      {...props, other: undefined, value: num, children: spy},
+      intl
+    )
+
+    expect(spy).toHaveBeenCalled()
+    expect(spy.mock.calls[0]).toEqual([props[intl.formatPlural(num)]])
+
+    expect(getByTestId('b').tagName).toBe('B')
+    expect(getByTestId('comp')).toHaveTextContent('Jest')
+  })
+})

package/tests/unit/components/provider.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react'
+import IntlProvider from '../../../src/components/provider'
+import withIntl from '../../../src/components/injectIntl'
+import {render} from '@testing-library/react'
+import {FormattedDate, FormattedMessage} from '../../../'
+import type {IntlConfig} from '../../../src/types'
+
+describe('<IntlProvider>', () => {
+  const now = Date.now()
+
+  class Child extends React.Component<any> {
+    render() {
+      return <span data-testid="foo">{'foo'}</span>
+    }
+  }
+
+  const IntlChild = withIntl(Child)
+
+  let dateNow: jest.SpyInstance
+
+  beforeEach(() => {
+    dateNow = jest.spyOn(Date, 'now').mockImplementation(() => now)
+  })
+
+  afterEach(() => {
+    dateNow.mockRestore()
+  })
+
+  it('has a `displayName`', () => {
+    expect(typeof IntlProvider.displayName).toBe('string')
+  })
+
+  it('warns when no `locale` prop is provided', () => {
+    const onError = jest.fn()
+    render(
+      <IntlProvider
+        // @ts-ignore
+        locale={undefined}
+        onError={onError}
+      >
+        <IntlChild />
+      </IntlProvider>
+    )
+
+    expect(onError.mock.calls[0][0].code).toBe('INVALID_CONFIG')
+    expect(onError).toHaveBeenCalledTimes(1)
+  })
+
+  it('should re-render with new messages', () => {
+    const onError = jest.fn()
+    const props: IntlConfig = {
+      locale: 'en',
+      timeZone: 'Australia/Adelaide',
+      formats: {
+        date: {
+          'year-only': {
+            year: 'numeric',
+          },
+        },
+      },
+      messages: {
+        hello: 'Hello, World!',
+      },
+
+      defaultLocale: 'fr',
+      defaultFormats: {
+        date: {
+          'year-only': {
+            year: 'numeric',
+          },
+        },
+      },
+      onError,
+    }
+
+    const {getByTestId, rerender} = render(
+      <IntlProvider {...props}>
+        <span data-testid="comp">
+          <FormattedMessage id="hello" />
+        </span>
+      </IntlProvider>
+    )
+
+    expect(onError).not.toHaveBeenCalled()
+    expect(getByTestId('comp')).toHaveTextContent('Hello, World!')
+    rerender(
+      <IntlProvider {...props} messages={{hello: 'blah'}}>
+        <span data-testid="comp">
+          <FormattedMessage id="hello" />
+        </span>
+      </IntlProvider>
+    )
+    expect(getByTestId('comp')).toHaveTextContent('blah')
+  })
+
+  it('warns when `locale` prop provided has no locale data in Intl.NumberFormat', () => {
+    const locale = 'missing'
+    const onError = jest.fn()
+    render(
+      <IntlProvider locale={locale} onError={onError}>
+        <IntlChild />
+      </IntlProvider>
+    )
+
+    expect(onError.mock.calls[0][0].code).toBe('MISSING_DATA')
+    expect(onError).toHaveBeenCalledTimes(1)
+  })
+
+  it('warns when `locale` prop provided has no locale data in Intl.DateTimeFormat', () => {
+    const locale = 'xx-HA'
+    const onError = jest.fn()
+    const supportedLocalesOf = Intl.NumberFormat.supportedLocalesOf
+    Intl.NumberFormat.supportedLocalesOf = (): string[] => ['xx-HA']
+    render(
+      <IntlProvider locale={locale} onError={onError}>
+        <IntlChild />
+      </IntlProvider>
+    )
+
+    expect(onError.mock.calls[0][0].code).toBe('MISSING_DATA')
+    expect(onError).toHaveBeenCalledTimes(1)
+    Intl.NumberFormat.supportedLocalesOf = supportedLocalesOf
+  })
+
+  it('renders its `children`', () => {
+    const el = (
+      <IntlProvider locale="en">
+        <IntlChild />
+      </IntlProvider>
+    )
+
+    const {container} = render(el)
+    expect(container).toHaveTextContent('foo')
+  })
+
+  it('shadows inherited intl config props from an <IntlProvider> ancestor', () => {
+    const onError = jest.fn()
+    const props: IntlConfig = {
+      locale: 'en',
+      timeZone: 'Australia/Adelaide',
+      formats: {
+        date: {
+          'year-only': {
+            year: 'numeric',
+          },
+        },
+      },
+      messages: {
+        hello: 'Hello, World!',
+      },
+
+      defaultLocale: 'fr',
+      defaultFormats: {
+        date: {
+          'year-only': {
+            year: 'numeric',
+          },
+        },
+      },
+      onError,
+    }
+
+    const {getByTestId} = render(
+      <IntlProvider {...props}>
+        <IntlProvider
+          locale="fr"
+          timeZone="Atlantic/Azores"
+          formats={{}}
+          messages={{}}
+          defaultLocale="en"
+          defaultFormats={{}}
+          textComponent="span"
+        >
+          <span data-testid="comp">
+            <FormattedDate value={new Date(2020, 1, 1)} timeZoneName="short" />
+          </span>
+        </IntlProvider>
+      </IntlProvider>
+    )
+
+    expect(onError).not.toHaveBeenCalled()
+    expect(getByTestId('comp')).toHaveTextContent('31/01/2020')
+  })
+  it('show warning for non-AST messages with defaultRichTextElements', () => {
+    const consoleWarn = jest
+      .spyOn(console, 'warn')
+      .mockImplementation(() => null)
+
+    render(
+      <IntlProvider
+        locale="fr"
+        timeZone="Atlantic/Azores"
+        formats={{}}
+        messages={{
+          foo: 'bar',
+        }}
+        defaultLocale="en"
+        defaultFormats={{}}
+        textComponent="span"
+        defaultRichTextElements={{
+          b: chunks => <b>{chunks}</b>,
+        }}
+      >
+        <span data-testid="comp">
+          <FormattedDate value={new Date(2020, 1, 1)} timeZoneName="short" />
+        </span>
+      </IntlProvider>
+    )
+
+    expect(consoleWarn)
+      .toHaveBeenCalledWith(`[@formatjs/intl] "defaultRichTextElements" was specified but "message" was not pre-compiled. 
+Please consider using "@formatjs/cli" to pre-compile your messages for performance.
+For more details see https://formatjs.io/docs/getting-started/message-distribution`)
+  })
+})

package/tests/unit/components/relative.tsx

@@ -0,0 +1,263 @@
+import '@formatjs/intl-relativetimeformat/polyfill'
+import * as React from 'react'
+import FormattedRelativeTime from '../../../src/components/relative'
+import {createIntl} from '../../../src/components/provider'
+import {IntlShape} from '../../../src/types'
+import {mountFormattedComponentWithProvider} from '../testUtils'
+import type {IntlConfig} from '../../../src/types'
+import {render, act} from '@testing-library/react'
+
+jest.useFakeTimers()
+
+const mountWithProvider = mountFormattedComponentWithProvider(
+  FormattedRelativeTime
+)
+
+describe('<FormattedRelativeTime>', () => {
+  let intl: IntlShape
+  const intlConfig: IntlConfig = {
+    locale: 'en',
+    onError: () => {},
+  }
+
+  beforeEach(() => {
+    intl = createIntl(intlConfig)
+  })
+
+  it('has a `displayName`', () => {
+    expect(FormattedRelativeTime.displayName).toBe('FormattedRelativeTime')
+  })
+
+  it('throws when <IntlProvider> is missing from ancestry', () => {
+    // So it doesn't spam the console
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<FormattedRelativeTime />)).toThrow(
+      '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.'
+    )
+  })
+
+  it('should re-render when props change', () => {
+    const spy = jest.fn().mockImplementation(() => null)
+    mountWithProvider({value: 0, children: spy}, intlConfig)
+    mountWithProvider({value: 1, children: spy}, intlConfig)
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should re-render when context changes', () => {
+    const otherIntl = createIntl({
+      locale: 'en-US',
+    })
+    const spy = jest.fn().mockImplementation(() => null)
+    mountWithProvider({value: 0, children: spy}, intlConfig)
+    mountWithProvider({value: 0, children: spy}, otherIntl)
+
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('accepts valid IntlRelativeTimeFormat options as props', () => {
+    const options = {style: 'narrow' as 'narrow'}
+    const {getByTestId} = mountWithProvider({value: -60, ...options})
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-60, 'second', options)
+    )
+  })
+
+  it('can render in null textComponent', () => {
+    const options = {style: 'narrow' as 'narrow'}
+    const {getByTestId} = mountWithProvider(
+      {value: -60, ...options},
+      {
+        ...intlConfig,
+        // @ts-ignore
+        textComponent: null,
+      }
+    )
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-60, 'second', options)
+    )
+  })
+
+  it('throws an error for invalid unit', () => {
+    const onError = jest.fn()
+    const {getByTestId} = mountWithProvider(
+      {value: 0, unit: 'invalid' as any},
+      {onError, locale: 'en'}
+    )
+    expect(getByTestId('comp')).toHaveTextContent('0')
+    expect(onError).toHaveBeenCalledTimes(1)
+    expect(onError.mock.calls[0][0].code).toBe('FORMAT_ERROR')
+  })
+
+  it('accepts `format` prop', () => {
+    const format = 'seconds'
+    const config: IntlConfig = {
+      onError: () => {},
+      locale: 'en',
+      formats: {
+        relative: {
+          [format]: {
+            style: 'narrow',
+          },
+        },
+      },
+    }
+    intl = createIntl(config)
+
+    const {getByTestId} = mountWithProvider({value: -60, format}, config)
+
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-60, 'second', {format})
+    )
+  })
+
+  it('supports function-as-child pattern', () => {
+    const spy = jest.fn().mockImplementation(() => <b>Jest</b>)
+    const {getByTestId} = mountWithProvider(
+      {value: 0, children: spy},
+      intlConfig
+    )
+
+    expect(spy).toHaveBeenCalledTimes(1)
+    expect(spy.mock.calls[0]).toEqual([intl.formatRelativeTime(0)])
+
+    expect(getByTestId('comp')).toMatchSnapshot()
+  })
+
+  xit('updates automatically', () => {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: 2, updateIntervalInSeconds: 1},
+      {...intl}
+    )
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(2, 'second')
+    )
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(1, 'second')
+    )
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(0, 'second')
+    )
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'second')
+    )
+  })
+
+  xit('updates when the `value` prop changes', () => {
+    const {getByTestId, rerenderProps} = mountWithProvider(
+      {value: 0, updateIntervalInSeconds: 1},
+      {...intl}
+    )
+    rerenderProps({value: 10, updateIntervalInSeconds: 1}, {...intl})
+
+    expect(getByTestId('comp')).toHaveTextContent('in 10 seconds')
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+
+    expect(getByTestId('comp')).toHaveTextContent('in 9 seconds')
+  })
+
+  xit('should adjust unit to min correctly', function () {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: -59, updateIntervalInSeconds: 1},
+      {...intlConfig}
+    )
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'minute')
+    )
+  })
+  xit('should adjust unit to min correctly even if updateIntervalInSeconds goes past that ts', function () {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: -59, updateIntervalInSeconds: 2},
+      {...intlConfig}
+    )
+    act(() => {
+      jest.advanceTimersByTime(1010)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'minute')
+    )
+  })
+  xit('should adjust unit to hour correctly', function () {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: -59, unit: 'minute', updateIntervalInSeconds: 1},
+      {...intlConfig}
+    )
+    // Advance 1 min
+    act(() => {
+      jest.advanceTimersByTime(1000 * 60)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'hour')
+    )
+  })
+  xit('should adjust unit to day correctly and stop', function () {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: -23, unit: 'hour', updateIntervalInSeconds: 1},
+      {...intlConfig}
+    )
+    // Advance 1 hour
+    act(() => {
+      jest.advanceTimersByTime(1000 * 60 * 60)
+    })
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'day')
+    )
+    // Advance 1 day
+    act(() => {
+      jest.advanceTimersByTime(1000 * 60 * 60 * 24)
+    })
+    // shouldn't change anything
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-1, 'day')
+    )
+  })
+  xit('should show high seconds values as days with no timer', function () {
+    // span bc enzyme support for </> seems buggy
+    const {getByTestId} = mountWithProvider(
+      {value: -(60 * 60 * 24 * 3), unit: 'second', updateIntervalInSeconds: 1},
+      {...intlConfig}
+    )
+    expect(getByTestId('comp')).toHaveTextContent(
+      intl.formatRelativeTime(-3, 'day')
+    )
+  })
+  xit('should throw if try to increment in day', function () {
+    // span bc enzyme support for </> seems buggy
+    expect(() =>
+      mountWithProvider(
+        {value: 5, unit: 'day', updateIntervalInSeconds: 1},
+        {...intlConfig}
+      )
+    ).toThrow('Cannot schedule update with unit longer than hour')
+  })
+  it('should clear timer on unmount', function () {
+    const {unmount, rerenderProps} = mountWithProvider(
+      {value: 0, updateIntervalInSeconds: 1},
+      {...intlConfig}
+    )
+    rerenderProps()
+    const clearTimeoutSpy = jest.spyOn(window, 'clearTimeout')
+    unmount()
+    expect(clearTimeoutSpy).toHaveBeenCalled()
+  })
+})