@procore/core-react 11.25.1 → 11.26.0

package/dist/_hooks/OverflowObserver/OverflowObserver.test.js

@@ -1,110 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks'
-import { useOverflowObserver } from './OverflowObserver'
-
-describe('useOverflowObserver', () => {
-  const hookApi = () => renderHook(() => useOverflowObserver()).result
-
-  const runDefaulValueAssertions = (api) => {
-    expect(api.isOverflowingY).toBe(false)
-    expect(api.isOverflowingX).toBe(false)
-    expect(api.isOverflowing).toBe(false)
-  }
-
-  it('should detect vertical content overflow', () => {
-    const api = hookApi()
-
-    const domNode = {
-      clientHeight: 100,
-      scrollHeight: 102,
-      clientWidth: 50,
-      scrollWidth: 50,
-    }
-
-    runDefaulValueAssertions(api.current)
-
-    act(() => api.current.ref(domNode))
-
-    expect(api.current.isOverflowingY).toBe(true)
-    expect(api.current.isOverflowingX).toBe(false)
-    expect(api.current.isOverflowing).toBe(true)
-  })
-
-  it('should detect horizontal content overflow', () => {
-    const api = hookApi()
-
-    const domNode = {
-      clientHeight: 100,
-      scrollHeight: 100,
-      clientWidth: 50,
-      scrollWidth: 52,
-    }
-
-    runDefaulValueAssertions(api.current)
-
-    act(() => api.current.ref(domNode))
-
-    expect(api.current.isOverflowingY).toBe(false)
-    expect(api.current.isOverflowingX).toBe(true)
-    expect(api.current.isOverflowing).toBe(true)
-  })
-
-  it('should detect vertical and horizontal content overflow', () => {
-    const api = hookApi()
-
-    const domNode = {
-      clientHeight: 100,
-      scrollHeight: 102,
-      clientWidth: 50,
-      scrollWidth: 52,
-    }
-
-    runDefaulValueAssertions(api.current)
-
-    act(() => api.current.ref(domNode))
-
-    expect(api.current.isOverflowingY).toBe(true)
-    expect(api.current.isOverflowingX).toBe(true)
-    expect(api.current.isOverflowing).toBe(true)
-  })
-
-  describe('Given that the browser miscalculates content dimensions', () => {
-    ;[
-      {
-        clientHeight: 100,
-        scrollHeight: 100,
-        clientWidth: 99,
-        scrollWidth: 100,
-      },
-      {
-        clientHeight: 99,
-        scrollHeight: 100,
-        clientWidth: 50,
-        scrollWidth: 50,
-      },
-      {
-        clientHeight: 100,
-        scrollHeight: 100,
-        clientWidth: 50,
-        scrollWidth: 49,
-      },
-      {
-        clientHeight: 100,
-        scrollHeight: 99,
-        clientWidth: 50,
-        scrollWidth: 50,
-      },
-    ].forEach((domNode) => {
-      it('should ignore dimension variance in 1 pixel range', () => {
-        const api = hookApi()
-
-        runDefaulValueAssertions(api.current)
-
-        act(() => api.current.ref(domNode))
-
-        expect(api.current.isOverflowingY).toBe(false)
-        expect(api.current.isOverflowingX).toBe(false)
-        expect(api.current.isOverflowing).toBe(false)
-      })
-    })
-  })
-})

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

@@ -1,109 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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)
-      },
-    },
-  ])
-})