@tamagui/react-native-web-internals 2.7.7 → 3.0.0-0.canary.1791056644527

package/src/modules/createEventHandle/__tests__/index-test.tsx

@@ -1,459 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-import { createEventTarget } from 'dom-event-testing-library'
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import * as ReactDOMServer from 'react-dom/server'
-import { act } from 'react-dom/test-utils'
-
-import createEventHandle from '..'
-
-function createRoot(rootNode) {
-  return {
-    render(element) {
-      ReactDOM.render(element, rootNode)
-    },
-  }
-}
-
-describe('create-event-handle', () => {
-  let root
-  let rootNode
-
-  beforeEach(() => {
-    rootNode = document.createElement('div')
-    document.body.appendChild(rootNode)
-    root = createRoot(rootNode)
-  })
-
-  afterEach(() => {
-    root.render(null)
-    document.body.removeChild(rootNode)
-    rootNode = null
-    root = null
-  })
-
-  test('can render correctly using ReactDOMServer', () => {
-    const listener = jest.fn()
-    const targetRef = React.createRef()
-    const addClickListener = createEventHandle('click')
-
-    function Component() {
-      React.useEffect(() => {
-        return addClickListener(targetRef.current, listener)
-      })
-      return <div ref={targetRef} />
-    }
-
-    const output = ReactDOMServer.renderToString(<Component />)
-    expect(output).toBe('<div data-reactroot=""></div>')
-  })
-
-  describe('createEventTarget()', () => {
-    test('event dispatched on target', () => {
-      const listener = jest.fn()
-      const targetRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-
-      function Component() {
-        React.useEffect(() => {
-          return addClickListener(targetRef.current, listener)
-        })
-        return <div ref={targetRef} />
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const target = createEventTarget(targetRef.current)
-
-      act(() => {
-        target.click()
-      })
-
-      expect(listener).toBeCalledTimes(1)
-    })
-
-    test('event dispatched on parent', () => {
-      const listener = jest.fn()
-      const listenerCapture = jest.fn()
-      const targetRef = React.createRef()
-      const parentRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true,
-      })
-
-      function Component() {
-        React.useEffect(() => {
-          const removeClickListener = addClickListener(targetRef.current, listener)
-          const removeClickCaptureListener = addClickCaptureListener(
-            targetRef.current,
-            listenerCapture
-          )
-          return () => {
-            removeClickListener()
-            removeClickCaptureListener()
-          }
-        })
-        return (
-          <div ref={parentRef}>
-            <div ref={targetRef} />
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const parent = createEventTarget(parentRef.current)
-
-      act(() => {
-        parent.click()
-      })
-
-      expect(listener).toBeCalledTimes(0)
-      expect(listenerCapture).toBeCalledTimes(0)
-    })
-
-    test('event dispatched on child', () => {
-      const log = []
-      const listener = jest.fn(() => {
-        log.push('bubble')
-      })
-      const listenerCapture = jest.fn(() => {
-        log.push('capture')
-      })
-      const targetRef = React.createRef()
-      const childRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true,
-      })
-
-      function Component() {
-        React.useEffect(() => {
-          const removeClickListener = addClickListener(targetRef.current, listener)
-          const removeClickCaptureListener = addClickCaptureListener(
-            targetRef.current,
-            listenerCapture
-          )
-          return () => {
-            removeClickListener()
-            removeClickCaptureListener()
-          }
-        })
-        return (
-          <div ref={targetRef}>
-            <div ref={childRef} />
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const child = createEventTarget(childRef.current)
-
-      act(() => {
-        child.click()
-      })
-
-      expect(listenerCapture).toBeCalledTimes(1)
-      expect(listener).toBeCalledTimes(1)
-      expect(log).toEqual(['capture', 'bubble'])
-    })
-
-    test('event dispatched on text node', () => {
-      const listener = jest.fn()
-      const targetRef = React.createRef()
-      const childRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-
-      function Component() {
-        React.useEffect(() => {
-          return addClickListener(targetRef.current, listener)
-        })
-        return (
-          <div ref={targetRef}>
-            <div ref={childRef}>text</div>
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const text = createEventTarget(childRef.current.firstChild)
-
-      act(() => {
-        text.click()
-      })
-
-      expect(listener).toBeCalledTimes(1)
-    })
-
-    test('listener can be attached to document', () => {
-      const listener = jest.fn()
-      const targetRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-
-      function Component({ target }) {
-        React.useEffect(() => {
-          return addClickListener(target, listener)
-        })
-        return <div ref={targetRef} />
-      }
-
-      act(() => {
-        root.render(<Component target={document} />)
-      })
-      const target = createEventTarget(targetRef.current)
-      act(() => {
-        target.click()
-      })
-
-      expect(listener).toBeCalledTimes(1)
-    })
-
-    test('listener can be attached to window ', () => {
-      const listener = jest.fn()
-      const targetRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-
-      function Component({ target }) {
-        React.useEffect(() => {
-          return addClickListener(target, listener)
-        })
-        return <div ref={targetRef} />
-      }
-
-      act(() => {
-        root.render(<Component target={window} />)
-      })
-      const target = createEventTarget(targetRef.current)
-      act(() => {
-        target.click()
-      })
-
-      expect(listener).toBeCalledTimes(1)
-    })
-
-    test('custom event dispatched on target', () => {
-      const listener = jest.fn()
-      const targetRef = React.createRef()
-      const addMagicEventListener = createEventHandle('magic-event')
-
-      function Component() {
-        React.useEffect(() => {
-          return addMagicEventListener(targetRef.current, listener)
-        })
-        return <div ref={targetRef} />
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      act(() => {
-        const event = new CustomEvent('magic-event', { bubbles: true })
-        targetRef.current.dispatchEvent(event)
-      })
-
-      expect(listener).toBeCalledTimes(1)
-    })
-
-    test('listeners can be set on multiple targets simultaneously', () => {
-      const log = []
-      const targetRef = React.createRef()
-      const parentRef = React.createRef()
-      const childRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true,
-      })
-      const listener = jest.fn((e) => {
-        log.push(['bubble', e.currentTarget.id])
-      })
-      const listenerCapture = jest.fn((e) => {
-        log.push(['capture', e.currentTarget.id])
-      })
-
-      function Component() {
-        React.useEffect(() => {
-          // the same event handle is used to set listeners on different targets
-          addClickListener(targetRef.current, listener)
-          addClickListener(parentRef.current, listener)
-          addClickCaptureListener(targetRef.current, listenerCapture)
-          addClickCaptureListener(parentRef.current, listenerCapture)
-        })
-        return (
-          <div id="parent" ref={parentRef}>
-            <div id="target" ref={targetRef}>
-              <div ref={childRef} />
-            </div>
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const child = createEventTarget(childRef.current)
-
-      act(() => {
-        child.click()
-      })
-
-      expect(listenerCapture).toBeCalledTimes(2)
-      expect(listener).toBeCalledTimes(2)
-      expect(log).toEqual([
-        ['capture', 'parent'],
-        ['capture', 'target'],
-        ['bubble', 'target'],
-        ['bubble', 'parent'],
-      ])
-    })
-
-    test('listeners are specific to each event handle', () => {
-      const log = []
-      const targetRef = React.createRef()
-      const childRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-      const addClickAltListener = createEventHandle('click')
-      const addClickCaptureListener = createEventHandle('click', {
-        capture: true,
-      })
-      const addClickCaptureAltListener = createEventHandle('click', {
-        capture: true,
-      })
-      const listener = jest.fn((e) => {
-        log.push(['bubble', 'target'])
-      })
-      const listenerAlt = jest.fn((e) => {
-        log.push(['bubble', 'target-alt'])
-      })
-      const listenerCapture = jest.fn((e) => {
-        log.push(['capture', 'target'])
-      })
-      const listenerCaptureAlt = jest.fn((e) => {
-        log.push(['capture', 'target-alt'])
-      })
-
-      function Component() {
-        React.useEffect(() => {
-          addClickListener(targetRef.current, listener)
-          addClickAltListener(targetRef.current, listenerAlt)
-          addClickCaptureListener(targetRef.current, listenerCapture)
-          addClickCaptureAltListener(targetRef.current, listenerCaptureAlt)
-        })
-        return (
-          <div id="target" ref={targetRef}>
-            <div ref={childRef} />
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const child = createEventTarget(childRef.current)
-
-      act(() => {
-        child.click()
-      })
-
-      expect(listenerCapture).toBeCalledTimes(1)
-      expect(listenerCaptureAlt).toBeCalledTimes(1)
-      expect(listener).toBeCalledTimes(1)
-      expect(listenerAlt).toBeCalledTimes(1)
-      expect(log).toEqual([
-        ['capture', 'target'],
-        ['capture', 'target-alt'],
-        ['bubble', 'target'],
-        ['bubble', 'target-alt'],
-      ])
-    })
-  })
-
-  describe('stopPropagation and stopImmediatePropagation', () => {
-    test('stopPropagation works as expected', () => {
-      const childListener = jest.fn((e) => {
-        e.stopPropagation()
-      })
-      const targetListener = jest.fn()
-      const targetRef = React.createRef()
-      const childRef = React.createRef()
-      const addClickListener = createEventHandle('click')
-
-      function Component() {
-        React.useEffect(() => {
-          addClickListener(childRef.current, childListener)
-          addClickListener(targetRef.current, targetListener)
-        })
-        return (
-          <div ref={targetRef}>
-            <div ref={childRef} />
-          </div>
-        )
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const child = createEventTarget(childRef.current)
-
-      act(() => {
-        child.click()
-      })
-
-      expect(childListener).toBeCalledTimes(1)
-      expect(targetListener).toBeCalledTimes(0)
-    })
-
-    test('stopImmediatePropagation works as expected', () => {
-      const firstListener = jest.fn((e) => {
-        e.stopImmediatePropagation()
-      })
-      const secondListener = jest.fn()
-      const targetRef = React.createRef()
-      const addFirstClickListener = createEventHandle('click')
-      const addSecondClickListener = createEventHandle('click')
-
-      function Component() {
-        React.useEffect(() => {
-          addFirstClickListener(targetRef.current, firstListener)
-          addSecondClickListener(targetRef.current, secondListener)
-        })
-        return <div ref={targetRef} />
-      }
-
-      act(() => {
-        root.render(<Component />)
-      })
-
-      const target = createEventTarget(targetRef.current)
-
-      act(() => {
-        target.click()
-      })
-
-      expect(firstListener).toBeCalledTimes(1)
-      expect(secondListener).toBeCalledTimes(0)
-    })
-  })
-})

package/src/modules/mergeRefs/__tests__/index-test.tsx

@@ -1,32 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { render } from '@testing-library/react'
-import * as React from 'react'
-
-import mergeRefs from '..'
-
-describe('modules/mergeRefs', () => {
-  test('merges refs of different types', () => {
-    const ref = React.createRef(null)
-    let functionRefValue = null
-    let hookRef
-    function Component() {
-      const functionRef = (x) => {
-        functionRefValue = x
-      }
-      hookRef = React.useRef(null)
-      return <div ref={mergeRefs(ref, hookRef, functionRef)} />
-    }
-
-    render(<Component />)
-
-    expect(ref.current).toBeInstanceOf(HTMLDivElement)
-    expect(hookRef.current).toBeInstanceOf(HTMLDivElement)
-    expect(functionRefValue).toBeInstanceOf(HTMLDivElement)
-  })
-})

package/src/modules/modality/__tests__/index-test.tsx

@@ -1,66 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {
-  clearPointers,
-  createEventTarget,
-  describeWithPointerEvent,
-  setPointerEvent,
-  testWithPointerType,
-} from 'dom-event-testing-library'
-
-import { getActiveModality, getModality, testOnly_resetActiveModality } from '..'
-
-describeWithPointerEvent('modules/modality', (hasPointerEvent) => {
-  let rootNode
-
-  beforeEach(() => {
-    setPointerEvent(hasPointerEvent)
-    rootNode = document.createElement('div')
-    document.body.appendChild(rootNode)
-  })
-
-  afterEach(() => {
-    document.body.removeChild(rootNode)
-    rootNode = null
-    clearPointers()
-    testOnly_resetActiveModality()
-  })
-
-  describe('getModality', () => {
-    testWithPointerType('reflects currently-in-use modality', (pointerType) => {
-      const target = createEventTarget(rootNode)
-      expect(getModality()).toBe('keyboard')
-      target.pointerdown({ pointerType })
-      expect(getModality()).toBe(pointerType)
-      target.pointerup({ pointerType })
-      target.keydown()
-      expect(getModality()).toBe('keyboard')
-      if (pointerType !== 'touch') {
-        target.pointermove({ pointerType })
-        expect(getModality()).toBe(pointerType)
-        target.keydown()
-        expect(getModality()).toBe('keyboard')
-      }
-    })
-  })
-
-  describe('getActiveModality', () => {
-    testWithPointerType('reflects last actively used modality', (pointerType) => {
-      const target = createEventTarget(rootNode)
-      expect(getActiveModality()).toBe('keyboard')
-      target.pointerdown({ pointerType })
-      expect(getActiveModality()).toBe(pointerType)
-      target.pointerup({ pointerType })
-      target.keydown()
-      if (pointerType !== 'touch') {
-        target.pointermove({ pointerType })
-        expect(getActiveModality()).toBe('keyboard')
-      }
-    })
-  })
-})

package/src/modules/multiplyStyleLengthValue/__tests__/index-test.tsx

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import multiplyStyleLengthValue from '..'
-
-describe('modules/multiplyStyleLengthValue', () => {
-  test('number', () => {
-    expect(multiplyStyleLengthValue(2, -1)).toEqual(-2)
-    expect(multiplyStyleLengthValue(2, 2)).toEqual(4)
-    expect(multiplyStyleLengthValue(2.5, 2)).toEqual(5)
-  })
-
-  test('length', () => {
-    expect(multiplyStyleLengthValue('2rem', -1)).toEqual('-2rem')
-    expect(multiplyStyleLengthValue('2px', 2)).toEqual('4px')
-    expect(multiplyStyleLengthValue('2.5em', 2)).toEqual('5em')
-    expect(multiplyStyleLengthValue('2e3px', 2)).toEqual('4000px')
-  })
-})

package/src/modules/processColor/__tests__/index-test.tsx

@@ -1,78 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import processColor from '..'
-
-const platformSpecific = (x) => x
-
-describe('processColor', () => {
-  describe('predefined color names', () => {
-    it('should convert red', () => {
-      const colorFromString = processColor('red')
-      const expectedInt = 0xffff0000
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-
-    it('should convert white', () => {
-      const colorFromString = processColor('white')
-      const expectedInt = 0xffffffff
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-
-    it('should convert black', () => {
-      const colorFromString = processColor('black')
-      const expectedInt = 0xff000000
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-
-    it('should convert transparent', () => {
-      const colorFromString = processColor('transparent')
-      const expectedInt = 0x00000000
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-
-  describe('RGB strings', () => {
-    it('should convert rgb(x, y, z)', () => {
-      const colorFromString = processColor('rgb(10, 20, 30)')
-      const expectedInt = 0xff0a141e
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-
-  describe('RGBA strings', () => {
-    it('should convert rgba(x, y, z, a)', () => {
-      const colorFromString = processColor('rgba(10, 20, 30, 0.4)')
-      const expectedInt = 0x660a141e
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-
-  describe('HSL strings', () => {
-    it('should convert hsl(x, y%, z%)', () => {
-      const colorFromString = processColor('hsl(318, 69%, 55%)')
-      const expectedInt = 0xffdb3dac
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-
-  describe('HSLA strings', () => {
-    it('should convert hsla(x, y%, z%, a)', () => {
-      const colorFromString = processColor('hsla(318, 69%, 55%, 0.25)')
-      const expectedInt = 0x40db3dac
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-
-  describe('hex strings', () => {
-    it('should convert #xxxxxx', () => {
-      const colorFromString = processColor('#1e83c9')
-      const expectedInt = 0xff1e83c9
-      expect(colorFromString).toEqual(platformSpecific(expectedInt))
-    })
-  })
-})