@procore/core-react 11.22.0 → 11.23.0

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

@@ -0,0 +1,78 @@
+import { mount } from 'enzyme'
+import React from 'react'
+
+import { useEventListener } from '../EventListener'
+
+function noop() {}
+
+const mockScope = () => {
+  const listeners = {}
+
+  const scope = {
+    addEventListener: jest.fn((event, cb) => {
+      listeners[event] = cb
+    }),
+    removeEventListener: jest.fn((event, cb) => {
+      listeners[event] = null
+    }),
+  }
+
+  return { current: scope }
+}
+
+const Enhanced = (props) => {
+  useEventListener(props)
+
+  return null
+}
+
+describe('useEventListener', () => {
+  describe('scope changes', () => {
+    const scopeA = mockScope()
+    const scopeB = mockScope()
+
+    mount(<Enhanced event="scroll" handler={noop} scope={scopeA} />).setProps({
+      scope: scopeB,
+    })
+
+    it('adds and removes listeners to scope when scope changes', (done) => {
+      setTimeout(() => {
+        expect(scopeA.current.removeEventListener).toBeCalledTimes(1)
+        expect(scopeB.current.addEventListener).toBeCalledTimes(1)
+        done()
+      }, 10)
+    })
+  })
+
+  describe('event type changes', () => {
+    const scope = mockScope()
+
+    mount(<Enhanced event="scroll" handler={noop} scope={scope} />).setProps({
+      event: 'resize',
+    })
+
+    it('adds and removes listeners from scope when event changes', (done) => {
+      setTimeout(() => {
+        expect(scope.current.addEventListener).toBeCalledTimes(2)
+        expect(scope.current.removeEventListener).toBeCalledTimes(1)
+        done()
+      }, 10)
+    })
+  })
+
+  describe('handler changes', () => {
+    const scope = mockScope()
+
+    mount(<Enhanced event="scroll" handler={noop} scope={scope} />).setProps({
+      handler: () => {},
+    })
+
+    it('keeps the same listener when handler changes', (done) => {
+      setTimeout(() => {
+        expect(scope.current.addEventListener).toBeCalledTimes(1)
+        expect(scope.current.removeEventListener).toBeCalledTimes(0)
+        done()
+      }, 10)
+    })
+  })
+})

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

@@ -0,0 +1,18 @@
+import { fireEvent } from '@testing-library/react'
+import { act, renderHook } from '@testing-library/react-hooks'
+
+import { useHotkey } from '../Hotkey'
+
+describe('useHotkey', () => {
+  it('binds key handlers', () => {
+    const onSubmit = jest.fn()
+
+    renderHook(() => useHotkey({ key: 'Enter', handler: onSubmit }))
+
+    act(() => {
+      fireEvent.keyDown(window, { key: 'Enter' })
+      fireEvent.keyDown(window, { key: 'Enter' })
+      expect(onSubmit).toHaveBeenCalledTimes(2)
+    })
+  })
+})

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

@@ -0,0 +1,80 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  InjectedScript,
+  InjectedScriptProvider,
+  useInjectedScript,
+  useInjectedScriptContext,
+} from '../InjectedScript'
+
+const validateAPI = (api) => {
+  expect(api.isLoaded).toEqual(false)
+  expect(api.setLoaded).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {
+    id: 'foo',
+    src: 'bar',
+  },
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: {
+    id: 'foo',
+    src: 'bar',
+  },
+  callback: ({ id, src }) => {
+    expect(id).toEqual(id)
+    expect(src).toEqual(src)
+  },
+}
+
+beforeEach(() => {
+  document.head.innerHTML = ''
+})
+
+describe('InjectedScript', () => {
+  testHook(useInjectedScript, [
+    apiTest,
+    configTest,
+    {
+      test: 'mutations',
+      config: {},
+      mutations: [
+        ['setLoaded', true, ['isLoaded', 'toBe', true]],
+        ['setLoaded', false, ['isLoaded', 'toBe', false]],
+      ],
+    },
+  ])
+
+  testRenderProp(InjectedScript, 'injectedScript', [apiTest, configTest])
+
+  testContext(InjectedScriptProvider, useInjectedScriptContext, [
+    apiTest,
+    configTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        expect(context.isLoaded).toBe(false)
+        context.setLoaded()
+        expect(spy).toBeCalledTimes(1)
+        expect(spy).toBeCalledWith(
+          'Could not call `setLoaded`, please wrap your component in a `<InjectedScriptProvider>`'
+        )
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,101 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  ListNavigation,
+  ListNavigationProvider,
+  useListNavigation,
+  useListNavigationContext,
+} from '../ListNavigation'
+
+const validateAPI = (api) => {
+  expect(api.index).toEqual(0)
+  expect(api.set).toBeInstanceOf(Function)
+  expect(api.increment).toBeInstanceOf(Function)
+  expect(api.decrement).toBeInstanceOf(Function)
+  expect(api.clear).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: { initialIndex: 3 },
+  callback: ({ index }) => expect(index).toEqual(3),
+}
+
+const spy = jest.spyOn(global.console, 'warn')
+beforeEach(() => {
+  spy.mockReset()
+})
+
+describe('ListNavigation', () => {
+  testHook(useListNavigation, [
+    apiTest,
+    configTest,
+    {
+      test: 'mutations',
+      config: { size: 5, initialIndex: -1 },
+      mutations: [
+        ['set', 3, ['index', 'toBe', 3]],
+        ['increment', null, ['index', 'toBe', 4]],
+        ['decrement', null, ['index', 'toBe', 3]],
+        ['clear', null, ['index', 'toBe', 0]],
+        ['set', 3, ['index', 'toBe', 3]],
+        ['decrementBy', 2, ['index', 'toBe', 1]],
+        ['incrementBy', 3, ['index', 'toBe', 4]],
+        ['reset', null, ['index', 'toBe', 0]],
+      ],
+    },
+    {
+      test: 'is circular',
+      config: { circular: true, initialIndex: 4, size: 5 },
+      mutations: [
+        ['increment', null, ['index', 'toBe', 0]],
+        ['decrement', null, ['index', 'toBe', 4]],
+      ],
+    },
+    {
+      test: 'is not circular, does not increment past size',
+      config: { circular: false, initialIndex: 5, size: 6 },
+      mutations: [['increment', null, ['index', 'toBe', 5]]],
+    },
+    {
+      test: 'is not circular, does not have a size, can decrement',
+      config: { circular: false, initialIndex: 100, size: 200 },
+      mutations: [['decrement', null, ['index', 'toBe', 99]]],
+    },
+    {
+      test: 'is not circular, does not have a size, can increment',
+      config: { circular: false, initialIndex: 100, size: 200 },
+      mutations: [['increment', null, ['index', 'toBe', 101]]],
+    },
+  ])
+
+  testRenderProp(ListNavigation, 'listNavigation', [apiTest, configTest])
+
+  testContext(ListNavigationProvider, useListNavigationContext, [
+    apiTest,
+    configTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        expect(context.index).toBe(-1)
+        context.set()
+        context.increment()
+        context.decrement()
+        context.clear()
+        context.reset()
+        expect(spy).toBeCalledTimes(5)
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,92 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  TextEntry,
+  TextEntryProvider,
+  useTextEntry,
+  useTextEntryContext,
+} from '../TextEntry'
+
+const validateAPI = (api) => {
+  expect(api.value).toEqual('')
+  expect(api.empty).toEqual(true)
+  expect(api.onChange).toBeInstanceOf(Function)
+  expect(api.clear).toBeInstanceOf(Function)
+  expect(api.reset).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: { initialValue: 'foo', handler: jest.fn() },
+  callback: ({ value }) => expect(value).toEqual('foo'),
+}
+
+const onChangeTest = () => {
+  const onChange = jest.fn()
+
+  return {
+    test: 'handler',
+    config: { onChange },
+    callback: ({ reset }) => {
+      reset()
+      expect(onChange).toBeCalled()
+    },
+  }
+}
+
+describe('TextEntry', () => {
+  testHook(useTextEntry, [
+    apiTest,
+    configTest,
+    onChangeTest(),
+    {
+      test: 'mutations',
+      config: { initialValue: 'foo' },
+      mutations: [
+        ['clear', null, ['value', 'toBe', '']],
+        ['reset', null, ['value', 'toBe', 'foo']],
+        ['reset', null, ['empty', 'toBe', false]],
+      ],
+    },
+  ])
+
+  testRenderProp(TextEntry, 'textEntry', [apiTest, configTest])
+
+  testContext(TextEntryProvider, useTextEntryContext, [
+    apiTest,
+    configTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        context.clear()
+        context.reset()
+        expect(spy).toBeCalledTimes(2)
+        expect(spy).toHaveBeenNthCalledWith(
+          1,
+          'Could not call `clear`, please wrap your component in a `<TextEntryProvider>`'
+        )
+        expect(spy).toHaveBeenNthCalledWith(
+          2,
+          'Could not call `reset`, please wrap your component in a `<TextEntryProvider>`'
+        )
+        expect(context.value).toBe('')
+        expect(context.empty).toBe(true)
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,60 @@
+import { mount } from 'enzyme'
+import React from 'react'
+import {
+  Component,
+  getProps,
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import { Timer, TimerProvider, useTimer, useTimerContext } from '../Timer'
+
+const validateAPI = (api) => {
+  expect(api.setTimer).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+describe('Timer', () => {
+  it('calls the provided function after the given time', (done) => {
+    const Enhanced = () => <Component {...useTimer()} />
+    const dom = mount(<Enhanced />)
+    const props = getProps(Component, dom)()
+    const spy = jest.fn()
+    props.setTimer(spy, 1000)
+    expect(spy).toBeCalledTimes(0)
+    setTimeout(() => {
+      expect(spy).toBeCalledTimes(1)
+      done()
+    }, 1500)
+  })
+
+  testHook(useTimer, [apiTest])
+
+  testRenderProp(Timer, 'timer', [apiTest])
+
+  testContext(TimerProvider, useTimerContext, [
+    apiTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        expect(context.timerId).toBe(null)
+        context.setTimer()
+        expect(spy).toBeCalledTimes(1)
+        expect(spy).toBeCalledWith(
+          'Could not call `setTimer`, please wrap your component in a `<TimerProvider>`'
+        )
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  initTrigger,
+  Trigger,
+  TriggerProvider,
+  useTrigger,
+  useTriggerContext,
+} from '../Trigger'
+
+const mockEnable = () => {}
+const mockDisable = () => {}
+
+const validateAPI = (api) => {
+  expect(api.isVisible).toBe(false)
+  expect(api.enable).toBeInstanceOf(Function)
+  expect(api.disable).toBeInstanceOf(Function)
+  expect(api.toggle).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {
+    scope: React.createRef(),
+    enable: mockEnable,
+    disable: mockDisable,
+  },
+  callback: validateAPI,
+}
+
+describe('Trigger', () => {
+  testHook(useTrigger, [apiTest])
+
+  testRenderProp(Trigger, 'trigger', [apiTest])
+
+  testContext(TriggerProvider, useTriggerContext, [
+    apiTest,
+    ,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context) => {
+        expect(context).toEqual(initTrigger)
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,86 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  useVisibility,
+  useVisibilityContext,
+  Visibility,
+  VisibilityProvider,
+} from '../Visibility'
+
+const validateAPI = (api) => {
+  expect(api.isVisible).toEqual(false)
+  expect(api.show).toBeInstanceOf(Function)
+  expect(api.hide).toBeInstanceOf(Function)
+  expect(api.toggle).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: {
+    initialIsVisible: true,
+  },
+  callback: ({ isVisible }) => {
+    expect(isVisible).toEqual(true)
+  },
+}
+
+describe('Visibility', () => {
+  testHook(useVisibility, [
+    apiTest,
+    configTest,
+    {
+      test: 'mutations',
+      config: {},
+      mutations: [
+        ['show', null, ['isVisible', 'toBe', true]],
+        ['hide', null, ['isVisible', 'toBe', false]],
+        ['toggle', null, ['isVisible', 'toBe', true]],
+        ['toggle', null, ['isVisible', 'toBe', false]],
+      ],
+    },
+  ])
+
+  testRenderProp(Visibility, 'visibility', [apiTest, configTest])
+
+  testContext(VisibilityProvider, useVisibilityContext, [
+    apiTest,
+    configTest,
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        expect(context.isVisible).toBe(false)
+        context.show()
+        context.hide()
+        context.toggle()
+        expect(spy).toBeCalledTimes(3)
+        expect(spy).toHaveBeenNthCalledWith(
+          1,
+          'Could not call `show`, please wrap your component in a `<VisibilityProvider>`'
+        )
+        expect(spy).toHaveBeenNthCalledWith(
+          2,
+          'Could not call `hide`, please wrap your component in a `<VisibilityProvider>`'
+        )
+        expect(spy).toHaveBeenNthCalledWith(
+          3,
+          'Could not call `toggle`, please wrap your component in a `<VisibilityProvider>`'
+        )
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})

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

@@ -0,0 +1,76 @@
+import {
+  testContext,
+  testHook,
+  testRenderProp,
+} from '../../__tests__/helpers/state'
+import {
+  defaultZIndex,
+  useZIndex,
+  useZIndexContext,
+  ZIndex,
+  ZIndexProvider,
+} from '../ZIndex'
+
+const validateAPI = (api) => {
+  expect(api.value).toEqual(defaultZIndex)
+  expect(api.increment).toBeInstanceOf(Function)
+}
+
+const apiTest = {
+  test: 'api',
+  config: {},
+  callback: validateAPI,
+}
+
+const configTest = {
+  test: 'config',
+  config: { initialValue: 10 },
+  callback: ({ value }) => expect(value).toEqual(10),
+}
+
+describe('ZIndex', () => {
+  testHook(useZIndex, [
+    apiTest,
+    configTest,
+    {
+      test: 'mutations',
+      config: {},
+      mutations: [['increment', null, ['value', 'toBe', defaultZIndex + 1]]],
+    },
+  ])
+
+  testRenderProp(ZIndex, 'zIndex', [apiTest, configTest])
+
+  testContext(ZIndexProvider, useZIndexContext, [
+    {
+      test: 'api',
+      config: {},
+      callback: (api) => {
+        expect(api.value).toEqual(defaultZIndex + 1)
+        expect(api.increment).toBeInstanceOf(Function)
+      },
+    },
+    {
+      test: 'config',
+      config: { initialValue: 10 },
+      callback: ({ value }) => expect(value).toEqual(11),
+    },
+    {
+      test: 'missing provider',
+      config: {},
+      injectProvider: false,
+      callback: (context, { spy }) => {
+        spy.mockImplementation(() => {})
+
+        expect(context.value).toBe(defaultZIndex + 1)
+        context.increment()
+        expect(spy).toBeCalledTimes(1)
+        expect(spy).toBeCalledWith(
+          'Could not call `increment`, please wrap your component in a `<ZIndexProvider>`'
+        )
+
+        spy.mockRestore()
+      },
+    },
+  ])
+})