@planningcenter/tapestry-react 2.6.0 → 2.6.2

package/src/TimeField/TimeField.test.tsx

@@ -121,7 +121,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', () =>
   expect(meridiemInput).toHaveValue('PM')
 })
 
-it('changes the value of hours on arrow up or arrow down', () => {
+it('increment hour on arrow up', () => {
   const { hourInput } = setup( { hours: 1, minutes: 42 })
 
   expect(hourInput).toHaveValue("01")
@@ -129,6 +129,110 @@ it('changes the value of hours on arrow up or arrow down', () => {
   expect(hourInput).toHaveValue("02")
 })
 
+it('increment hour if arrow up on minutes exceeds max value', () => {
+  const { hourInput, minuteInput } = setup( { hours: 1, minutes: 59 })
+
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(hourInput).toHaveValue("02")
+})
+
+it('decrement hour on arrow down', () => {
+  const { hourInput } = setup( { hours: 2, minutes: 42 })
+
+  expect(hourInput).toHaveValue("02")
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('decrement hour if arrow down on minutes exceeds min value', () => {
+  const { hourInput, minuteInput } = setup( { hours: 2, minutes: 0 })
+
+  expect(hourInput).toHaveValue("02")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('increment minute on arrow up', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 42 })
+
+  expect(minuteInput).toHaveValue("42")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(minuteInput).toHaveValue("43")
+})
+
+it('decrement minute on arrow down', () => {
+  const { minuteInput } = setup( { hours: 2, minutes: 43 })
+
+  expect(minuteInput).toHaveValue("43")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(minuteInput).toHaveValue("42")
+})
+
+it('set minute to min value if arrow up on minutes exceeds max value', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 59 })
+
+  expect(minuteInput).toHaveValue("59")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(minuteInput).toHaveValue("00")
+})
+
+it('set minute to max value if arrow down on minutes exceeds min value', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 0 })
+
+  expect(minuteInput).toHaveValue("00")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(minuteInput).toHaveValue("59")
+})
+
+it('toggle meridiem if arrow up on hour exceeds eleven', () => {
+  const { hourInput, meridiemInput } = setup( { hours: 11 })
+  
+  expect(meridiemInput).toHaveValue('AM')
+  userEvent.type(hourInput, '{arrowup}')
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('toggle meridiem if arrow down on hour exceeds min value', () => {
+  const { hourInput, meridiemInput } = setup( { hours: 1 })
+
+  expect(meridiemInput).toHaveValue('AM')
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('set 12 hour clock to min value if arrow up on hour exceeds max value', () => {
+  const { hourInput } = setup( { hours: 12 })
+
+  expect(hourInput).toHaveValue("12")
+  userEvent.type(hourInput, '{arrowup}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('set 24 hour clock to min value if arrow up on hour exceeds max value', () => {
+  const { hourInput } = setup( { hours: 23, twelveHourClock: false })
+
+  expect(hourInput).toHaveValue("23")
+  userEvent.type(hourInput, '{arrowup}')
+  expect(hourInput).toHaveValue("00")
+})
+
+it('set 12 hour clock to max value if arrow down on hour exceeds min value', () => {
+  const { hourInput } = setup( { hours: 1 })
+
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("12")
+})
+
+it('set 24 hour clock to max value if arrow down on hour exceeds min value', () => {
+  const { hourInput } = setup( { hours: 0, twelveHourClock: false })
+
+  expect(hourInput).toHaveValue("00")
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("23")
+})
+
 it('does not change the value of hours on arrow up or arrow down if ignored', () => {
   const { hourInput } = setup( { hours: 1, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })
 

package/src/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { Button, Link, StackView, Text, Tooltip, hooks } from '..'
+
+describe('Tooltip', () => {
+  test('does not render string when closed', () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    expect(screen.queryByText(string)).toBeNull()
+  })
+
+  test('renders string on hover', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    userEvent.hover(screen.getByText('Tooltip anchor'))
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+  })
+
+  test('renders string on focus', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string} triggerOnFocus={true}>
+        <Button>Tooltip anchor</Button>
+      </Tooltip>
+    )
+    userEvent.tab()
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+  })
+
+  test('removes string after timeout', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    const anchor = screen.getByText('Tooltip anchor')
+    expect(screen.queryByText(string)).toBeNull()
+
+    userEvent.hover(anchor)
+
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(anchor)
+    await waitFor(() => {
+      expect(screen.queryByText(string)).not.toBeInTheDocument()
+    })
+  })
+
+  test('stays open when hovering a custom tooltip', () => {
+    const CustomTooltip = function () {
+      const { hover, hoverProps } = hooks.useHover()
+
+      return (
+        <Tooltip
+          title={
+            <Link to="#">
+              <StackView>
+                <Text data-hover={hover}>{string}</Text>
+              </StackView>
+            </Link>
+          }
+        >
+          <Button {...hoverProps}>Tooltip anchor</Button>
+        </Tooltip>
+      )
+    }
+    const string = 'Test Text'
+    render(<CustomTooltip />)
+    const anchor = screen.getByText('Tooltip anchor')
+
+    userEvent.hover(anchor)
+    act(() => {
+      jest.runAllTimers()
+    })
+    const tooltip = screen.getByText(string)
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(anchor)
+    userEvent.hover(tooltip)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(tooltip)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(tooltip).not.toBeInTheDocument()
+  })
+
+  test('cleans up pageViewChange listeners', () => {
+    window.removeEventListener = jest
+      .fn()
+      .mockImplementation((event, callback) => {})
+    document.removeEventListener = jest
+      .fn()
+      .mockImplementation((event, callback) => {})
+
+    const { unmount } = render(
+      <Tooltip title="Test Text">
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    unmount()
+
+    expect(window.removeEventListener).toBeCalledWith(
+      'focus',
+      expect.any(Function)
+    )
+
+    expect(window.removeEventListener).toBeCalledWith(
+      'blur',
+      expect.any(Function)
+    )
+
+    expect(document.removeEventListener).toBeCalledWith(
+      'visibilitychange',
+      expect.any(Function)
+    )
+  })
+})