@procore/core-react 11.22.0 → 11.23.0

package/dist/_hooks/__tests__/Anchor.test.js

@@ -0,0 +1,109 @@
+import { renderHook } from '@testing-library/react-hooks'
+import React from 'react'
+import { defaultRect } from '../../_utils/dom'
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import { Anchor, AnchorProvider, useAnchor, useAnchorContext } from '../Anchor'
+
+const validateAPI = (api) => {
+  expect(typeof api.left).toBe('number')
+  expect(typeof api.minWidth).toBe('number')
+  expect(typeof api.placement).toBe('string')
+  expect(typeof api.top).toBe('number')
+}
+
+const apiTest = {
+  test: 'api',
+  config: {
+    overlayRef: React.createRef(),
+    targetRef: React.createRef(),
+  },
+  callback: validateAPI,
+}
+
+describe('Anchor', () => {
+  const mockGetBoundingClientRect = jest
+    .spyOn(Element.prototype, 'getBoundingClientRect')
+    .mockImplementation(() => ({
+      ...defaultRect,
+    }))
+
+  testHook(useAnchor, [apiTest])
+
+  describe('useAnchor', () => {
+    describe('shrinkOverlay', () => {
+      let overlayGetBoundingClientRectSpy
+      let targetRef
+      let overlayRef
+      beforeEach(() => {
+        const target = document.createElement('div')
+        target.getBoundingClientRect = jest.fn(() => ({
+          ...defaultRect,
+          width: 8.34375,
+        }))
+        targetRef = { current: target }
+
+        const overlay = document.createElement('div')
+        overlayGetBoundingClientRectSpy = jest.spyOn(
+          overlay,
+          'getBoundingClientRect'
+        )
+        overlayRef = {
+          current: overlay,
+        }
+      })
+
+      describe('when shrinkOverlay is false', () => {
+        it('should set minWidth', () => {
+          renderHook(() =>
+            useAnchor({
+              targetRef,
+              overlayRef,
+              shrinkOverlay: false,
+            })
+          )
+
+          expect(
+            overlayGetBoundingClientRectSpy.mock.instances[0].style.minWidth
+          ).toBe('8.34375px')
+        })
+      })
+
+      describe('when shrinkOverlay is true', () => {
+        it('should not set minWidth', () => {
+          renderHook(() =>
+            useAnchor({
+              targetRef,
+              overlayRef,
+              shrinkOverlay: true,
+            })
+          )
+
+          expect(
+            overlayGetBoundingClientRectSpy.mock.instances[0].style.minWidth
+          ).toBe('')
+        })
+      })
+    })
+  })
+
+  testRenderProp(Anchor, 'anchor', [apiTest])
+
+  testContext(AnchorProvider, useAnchorContext, [
+    apiTest,
+    ,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context) => {
+        validateAPI(context)
+      },
+    },
+  ])
+
+  mockGetBoundingClientRect.mockRestore()
+})

package/dist/_hooks/__tests__/BoundingRect.test.js

@@ -0,0 +1,85 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import {
+  getProps,
+  testContext,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  BoundingRect,
+  BoundingRectProvider,
+  DEFAULT_RECT,
+  useBoundingRect,
+  useBoundingRectContext,
+} from '../BoundingRect'
+
+const Component = 'div'
+
+const validateAPI = (api) => {
+  expect(api.ref).toBeTruthy()
+  expect(api.rect).toBeInstanceOf(Object)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const Enhanced = ({ width, dependencies }) => {
+  const mockGetBoundingClientRect = jest
+    .spyOn(Element.prototype, 'getBoundingClientRect')
+    .mockImplementation(() => ({
+      ...DEFAULT_RECT,
+      width,
+    }))
+
+  const boundingRect = useBoundingRect({ dependencies })
+
+  React.useLayoutEffect(mockGetBoundingClientRect.mockRestore)
+
+  return (
+    <Component ref={boundingRect.ref} state={boundingRect} style={{ width }} />
+  )
+}
+
+describe('BoundingRect', () => {
+  describe('hook', () => {
+    it('provides the correct api', () => {
+      const width = 100
+      const dom = mount(<Enhanced width={width} />)
+      const props = getProps(Component, dom, 'state')()
+
+      validateAPI(props)
+
+      expect(props.rect.width).toBe(100)
+    })
+
+    it('updates rect when changing dependencies', () => {
+      const width1 = 100
+      const width2 = 200
+      const dom = mount(<Enhanced width={width1} dependencies={[true]} />)
+      const props = getProps(Component, dom, 'state')
+
+      expect(props().rect.width).toBe(width1)
+
+      dom.setProps({ width: width2, dependencies: [false] })
+
+      expect(props().rect.width).toBe(width2)
+    })
+  })
+
+  testRenderProp(BoundingRect, 'boundingRect', [apiTest])
+
+  testContext(BoundingRectProvider, useBoundingRectContext, [
+    apiTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: ({ ref, rect }) => {
+        expect(ref).toEqual({ current: null })
+      },
+    },
+  ])
+})

package/dist/_hooks/__tests__/Buffer.test.js

@@ -0,0 +1,76 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import { Buffer, BufferProvider, useBuffer, useBufferContext } from '../Buffer'
+
+const validateAPI = (api) => {
+  expect(api.value).toEqual('')
+  expect(api.clear).toBeInstanceOf(Function)
+  expect(api.reset).toBeInstanceOf(Function)
+  expect(api.update).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: { initialValue: 'foo' },
+  callback: ({ value }) => expect(value).toEqual('foo'),
+}
+
+describe('Buffer', () => {
+  testHook(useBuffer, [
+    apiTest,
+    configTest,
+    {
+      test: 'mutations',
+      config: { initialValue: 'foo' },
+      mutations: [
+        ['update', 'bar', ['value', 'toBe', 'bar']],
+        ['clear', null, ['value', 'toBe', '']],
+        ['reset', null, ['value', 'toBe', 'foo']],
+      ],
+    },
+  ])
+
+  testRenderProp(Buffer, 'buffer', [apiTest, configTest])
+
+  testContext(BufferProvider, useBufferContext, [
+    apiTest,
+    configTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        context.update()
+        context.clear()
+        context.reset()
+        expect(context.value).toBe('')
+        expect(spy).toBeCalledTimes(3)
+        expect(spy).toHaveBeenNthCalledWith(
+          1,
+          'Could not call `update`, please wrap your component in a `<BufferProvider>`'
+        )
+        expect(spy).toHaveBeenNthCalledWith(
+          2,
+          'Could not call `clear`, please wrap your component in a `<BufferProvider>`'
+        )
+        expect(spy).toHaveBeenNthCalledWith(
+          3,
+          'Could not call `reset`, please wrap your component in a `<BufferProvider>`'
+        )
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})

package/dist/_hooks/__tests__/DateTime.test.js

@@ -0,0 +1,136 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import { DateTimeProvider, useDateTime } from '../DateTime'
+
+const sampleDate = new Date(2020, 9, 31, 14, 30, 42) // Halloween, a Saturday at 2:30 PM
+// Testing is set up to run in time zone "America/Los_Angeles" as local
+const timeZone1 = 'Australia/Sydney' // ahead of California
+const timeZone2 = 'America/Adak' // behind California
+const timeZoneLocalFormatted = '2:30 PM PDT on 10/31/2020'
+const timeZoneLocalTimeFormatted = '2:30 PM PDT'
+const timeZoneLocalTimeFormatted24Hour = '14:30 PDT'
+const timeZone1Formatted = '8:30 AM GMT+11 on 11/1/2020'
+const timeZone2Formatted = '12:30 PM HADT on 10/31/2020'
+const timeZone2TimeFormatted24Hour = '12:30 HADT'
+const timeZone1TimeFormatted = '8:30 AM GMT+11'
+
+function ComponentUsingHook({
+  date = sampleDate,
+  format = 'time-on-numeric-date',
+  optionsDate,
+  optionsTime,
+}) {
+  const dateTime = useDateTime()
+
+  return dateTime.format(date, format, optionsDate, optionsTime)
+}
+
+describe('Context and Time Zone Shifting', () => {
+  describe('Does not time zone shift', () => {
+    it('when no provider', () => {
+      const wrapper = mount(<ComponentUsingHook />)
+
+      expect(wrapper.text()).toEqual(timeZoneLocalFormatted)
+    })
+
+    it('when a provider but no time zone', () => {
+      const wrapper = mount(
+        <DateTimeProvider>
+          <ComponentUsingHook />
+        </DateTimeProvider>
+      )
+      expect(wrapper.text()).toEqual(timeZoneLocalFormatted)
+    })
+    it('when a provider with default time zone is inside a provider with time zone', () => {
+      const wrapper = mount(
+        <DateTimeProvider timeZone={timeZone1}>
+          <DateTimeProvider>
+            <ComponentUsingHook />
+          </DateTimeProvider>
+        </DateTimeProvider>
+      )
+      expect(wrapper.text()).toEqual(timeZoneLocalFormatted)
+    })
+    it('when a provider with undefined time zone is inside a provider with time zone', () => {
+      const wrapper = mount(
+        <DateTimeProvider timeZone={timeZone1}>
+          <DateTimeProvider timeZone={undefined}>
+            <ComponentUsingHook />
+          </DateTimeProvider>
+        </DateTimeProvider>
+      )
+      expect(wrapper.text()).toEqual(timeZoneLocalFormatted)
+    })
+  })
+  describe('Does time zone shift', () => {
+    it('when a provider has time zome', () => {
+      const wrapper = mount(
+        <DateTimeProvider timeZone={timeZone1}>
+          <ComponentUsingHook />
+        </DateTimeProvider>
+      )
+      expect(wrapper.text()).toEqual(timeZone1Formatted)
+    })
+    it('using the nearest provider', () => {
+      const wrapper = mount(
+        <DateTimeProvider timeZone={timeZone1}>
+          <DateTimeProvider timeZone={timeZone2}>
+            <ComponentUsingHook />
+          </DateTimeProvider>
+        </DateTimeProvider>
+      )
+      expect(wrapper.text()).toEqual(timeZone2Formatted)
+    })
+    it('when passed as an option', () => {
+      const wrapper = mount(
+        <ComponentUsingHook
+          format="time"
+          optionsDate={{ timeZone: timeZone1 }}
+        />
+      )
+
+      expect(wrapper.text()).toEqual(timeZone1TimeFormatted)
+    })
+  })
+})
+
+describe('Context and 24 Hour Clock', () => {
+  it('can change 24 hour clock', () => {
+    const wrapper = mount(
+      <DateTimeProvider hour12={true}>
+        <DateTimeProvider hour12={false}>
+          <ComponentUsingHook format="time" />
+        </DateTimeProvider>
+      </DateTimeProvider>
+    )
+    expect(wrapper.text()).toEqual(timeZoneLocalTimeFormatted24Hour)
+  })
+  it('can change 24 hour clock in time zone', () => {
+    const wrapper = mount(
+      <DateTimeProvider hour12={true}>
+        <DateTimeProvider timeZone={timeZone2} hour12={false}>
+          <ComponentUsingHook format="time" />
+        </DateTimeProvider>
+      </DateTimeProvider>
+    )
+    expect(wrapper.text()).toEqual(timeZone2TimeFormatted24Hour)
+  })
+  it('when passed as an option can be 24 hours', () => {
+    const wrapper = mount(
+      <DateTimeProvider hour12={false}>
+        <ComponentUsingHook format="time" optionsDate={{ hour12: true }} />
+      </DateTimeProvider>
+    )
+
+    expect(wrapper.text()).toEqual(timeZoneLocalTimeFormatted)
+  })
+  it('when passed as an option can be 12 hours', () => {
+    const wrapper = mount(
+      <DateTimeProvider hour12={true}>
+        <ComponentUsingHook format="time" optionsDate={{ hour12: false }} />
+      </DateTimeProvider>
+    )
+
+    expect(wrapper.text()).toEqual(timeZoneLocalTimeFormatted24Hour)
+  })
+})

package/dist/_hooks/__tests__/DelayedCallback.test.js

@@ -0,0 +1,119 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { mount } from 'enzyme'
+import React from 'react'
+import { isPromise, useDelayedCallback, wrapPromise } from '../DelayedCallback'
+
+const DELAY = 10
+
+const Component = 'button' //
+
+const Enhanced = ({ after, before, delay }) => {
+  const delayed = useDelayedCallback({ after, before, delay })
+
+  return <Component onClick={delayed} />
+}
+
+describe('isPromise', () => {
+  it('returns true if input is a promise object', () => {
+    expect(isPromise(new Promise(() => {}))).toBe(true)
+    expect(isPromise(0)).toBe(false)
+    expect(isPromise('')).toBe(false)
+    expect(isPromise(false)).toBe(false)
+    expect(isPromise([])).toBe(false)
+    expect(isPromise({})).toBe(false)
+  })
+})
+
+describe('wrapPromise', () => {
+  it('passes through if input is a promise', () => {
+    wrapPromise(new Promise((resolve) => resolve('foo'))).then((value) =>
+      expect(value).toBe('foo')
+    )
+  })
+
+  it('resolves to provided input if input is a boolean', () => {
+    wrapPromise(true).then((value) => expect(value).toBe(true))
+    wrapPromise(false).then((value) => expect(value).toBe(false))
+  })
+
+  it('thens to true if input is not a promise or boolean', () => {
+    wrapPromise('').then((value) => expect(value).toBe(true))
+    wrapPromise({}).then((value) => expect(value).toBe(true))
+    wrapPromise([]).then((value) => expect(value).toBe(true))
+  })
+})
+
+describe('useDelayedCallback', () => {
+  describe('api', () => {
+    it('provides a delayed function', () => {
+      const after = jest.fn()
+      const before = jest.fn()
+      const delay = DELAY
+      const dom = mount(<Enhanced {...{ after, before, delay }} />)
+      const onClick = dom.find(Component).prop('onClick')
+      expect(typeof onClick).toBe('function')
+    })
+  })
+
+  describe('after callback', () => {
+    let after, before
+    beforeEach(() => {
+      after = jest.fn()
+      before = jest.fn()
+      jest.useFakeTimers()
+    })
+
+    afterEach(() => {
+      jest.runOnlyPendingTimers()
+      jest.useRealTimers()
+    })
+
+    // remove delay to make it work with FakeTimers
+    const user = userEvent.setup({ delay: null })
+
+    it('gets invoked after the delay has elapsed', async () => {
+      render(<Enhanced {...{ after, before, delay: DELAY }} />)
+
+      await user.click(screen.getByRole('button'))
+      expect(after).not.toHaveBeenCalled()
+
+      jest.advanceTimersByTime(DELAY)
+      expect(after).toHaveBeenCalled()
+    })
+
+    it('should not call after if component is unmounted', async () => {
+      const { unmount } = render(
+        <Enhanced {...{ after, before, delay: DELAY }} />
+      )
+
+      await user.click(screen.getByRole('button'))
+      unmount()
+
+      jest.advanceTimersByTime(DELAY)
+      expect(after).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('before callback', () => {
+    it('gets invoked immediately', () => {
+      const after = jest.fn()
+      const before = jest.fn()
+      const delay = DELAY
+      const dom = mount(<Enhanced {...{ after, before, delay }} />)
+      dom.simulate('click')
+      expect(before).toHaveBeenCalled()
+    })
+
+    it('will not call the after callback when before returns false', (done) => {
+      const after = jest.fn()
+      const before = jest.fn(() => false)
+      const delay = DELAY
+      mount(<Enhanced {...{ after, before, delay }} />)
+      setTimeout(() => {
+        expect(after).toHaveBeenCalledTimes(0)
+        done()
+      }, DELAY * 2)
+    })
+  })
+})

package/dist/_hooks/__tests__/DelayedToggle.test.js

@@ -0,0 +1,50 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+
+import {
+  DelayedToggle,
+  DelayedToggleProvider,
+  initDelayedToggle,
+  useDelayedToggle,
+  useDelayedToggleContext,
+} from '../DelayedToggle'
+
+const mockOnEnable = () => {}
+const mockOnDisable = () => {}
+
+const validateAPI = (api) => {
+  expect(api.enable).toBeInstanceOf(Function)
+  expect(api.disable).toBeInstanceOf(Function)
+  expect(api.toggle).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {
+    onEnable: mockOnEnable,
+    onDisable: mockOnDisable,
+  },
+  callback: validateAPI,
+}
+
+describe('DelayedToggle', () => {
+  testHook(useDelayedToggle, [apiTest])
+
+  testRenderProp(DelayedToggle, 'delayedToggle', [apiTest])
+
+  testContext(DelayedToggleProvider, useDelayedToggleContext, [
+    apiTest,
+    ,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context) => {
+        expect(context).toEqual(initDelayedToggle)
+      },
+    },
+  ])
+})

package/dist/_hooks/__tests__/Deprecation.test.js

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import { useDeprecation } from '../Deprecation'
+
+const oldThing = 'Boooo'
+const newThing = 'Yaaaay'
+const link = 'https://dwitter.net'
+
+/* eslint-disable no-console */
+describe('useDeprecation', () => {
+  let spy
+  beforeEach(() => {
+    spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    spy.mockRestore()
+  })
+
+  const checkIsWarningCalled = (times = 1) => {
+    expect(spy).toBeCalledTimes(times)
+
+    for (let i = 0; i < times; i++) {
+      expect(console.warn.mock.calls[i][0]).toContain(
+        `${oldThing} is deprecated, please use ${newThing}`
+      )
+      expect(console.warn.mock.calls[i][1]).toContain(`${link}`)
+    }
+  }
+
+  it('should warn without passing "when"', () => {
+    renderHook(() => useDeprecation({ oldThing, newThing, link }))
+    checkIsWarningCalled()
+  })
+
+  it('should warn when "when" is truthy', () => {
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: true }))
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: 'prop' }))
+    checkIsWarningCalled(2)
+  })
+
+  it('should warn when "when" is falsy(except undefined)', () => {
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: 0 }))
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: null }))
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: false }))
+    renderHook(() => useDeprecation({ oldThing, newThing, link, when: '' }))
+    checkIsWarningCalled(4)
+  })
+
+  it('should not warn when "when" is undefined', () => {
+    renderHook(() =>
+      useDeprecation({ oldThing, newThing, link, when: undefined })
+    )
+
+    expect(spy).toBeCalledTimes(0)
+  })
+})
+/* eslint-enable no-console */

package/dist/_hooks/__tests__/Event.test.js

@@ -0,0 +1,46 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import { Event, EventProvider, useEvent, useEventContext } from '../Event'
+
+const validateAPI = (api) => {
+  expect(api.value).toEqual(null)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+jest.spyOn(global.console, 'warn').mockImplementation(() => {})
+
+afterAll(() => {
+  jest.clearAllMocks()
+})
+
+describe('Event', () => {
+  testHook(useEvent, [
+    apiTest,
+    {
+      test: 'mutations',
+      config: { initialValue: 'foo' },
+    },
+  ])
+
+  testRenderProp(Event, 'event', [apiTest])
+
+  testContext(EventProvider, useEventContext, [
+    apiTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        expect(context.value).toBe(null)
+      },
+    },
+  ])
+})