@instructure/ui-dom-utils 8.47.0 → 8.47.1-snapshot-1

package/src/__new-tests__/addResizeListener.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { addResizeListener } from '../addResizeListener'
+
+const mockRect = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+  toJSON: jest.fn()
+}
+
+describe('addResizeListener', () => {
+  it('should provide a remove method', async () => {
+    const callback = jest.fn()
+    Element.prototype.getBoundingClientRect = jest.fn(() => mockRect as DOMRect)
+
+    const { container } = render(<div />)
+    const node = container.firstChild as HTMLDivElement
+
+    const listener = addResizeListener(node, callback)
+
+    // Manually trigger a size change (since JSDOM won't)
+    Element.prototype.getBoundingClientRect = jest.fn(() => {
+      return { ...mockRect, width: 200 } as DOMRect
+    })
+
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(typeof listener.remove).toBe('function')
+    })
+
+    listener.remove()
+    jest.restoreAllMocks()
+  })
+})

package/src/__new-tests__/findTabbable.test.tsx

@@ -0,0 +1,71 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { findTabbable } from '../findTabbable'
+
+describe('findTabbable', () => {
+  describe('tabbable content', () => {
+    it('should find tabbable descendants', () => {
+      /* eslint-disable jsx-a11y/tabindex-no-positive */
+      /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+      const { container } = render(
+        <div>
+          <a href="https://instructure-test">Tabbable</a>
+          <div>Not Tabbable</div>
+          <div tabIndex={1}>Tabbable</div>
+          <input type="text" value="Tabbable" readOnly />
+          <div>
+            <button>Tabbable</button>
+            <button style={{ display: 'none' }}>Not Tabbable</button>
+          </div>
+        </div>
+      )
+
+      const node = container.firstChild as HTMLElement
+      expect(findTabbable(node).length).toBe(4)
+    })
+  })
+
+  describe('tabbable root', () => {
+    it('should search the root node when shouldSearchRootNode is set', () => {
+      const shouldSearchRootNode = true
+      const { container } = render(
+        <button>
+          <span>hello</span>
+        </button>
+      )
+
+      const node = container.firstChild as HTMLElement
+      expect(findTabbable(node).length).toBe(0)
+      expect(findTabbable(node, shouldSearchRootNode).length).toBe(1)
+    })
+  })
+
+  it('should gracefully handle null', () => {
+    expect(findTabbable(null).length).toBe(0)
+  })
+})

package/src/__new-tests__/getClassList.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getClassList } from '../getClassList'
+
+describe('getClassList', () => {
+  it('should provide classlist methods', () => {
+    const { container } = render(<span className="foo bar baz">Test</span>)
+    const node = container.firstChild as HTMLElement
+
+    const classes = getClassList(node)
+
+    expect(classes.toArray().length).toBe(3)
+    expect(classes.contains('foo')).toBeTruthy()
+    expect(classes.contains('lorem')).toBeFalsy()
+
+    classes.add('lorem')
+    expect(classes.contains('lorem')).toBeTruthy()
+
+    classes.remove('lorem')
+    expect(classes.contains('lorem')).toBeFalsy()
+  })
+})

package/src/__new-tests__/getFontSize.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getFontSize } from '../getFontSize'
+
+describe('getFontSize', () => {
+  it('should return font size as a number', () => {
+    const { container } = render(<span style={{ fontSize: '17px' }}>Test</span>)
+    const node = container.firstChild
+
+    expect(getFontSize(node)).toBe(17)
+  })
+})

package/src/__new-tests__/getOffsetParents.test.tsx

@@ -0,0 +1,99 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getScrollParents } from '../getScrollParents'
+
+describe('getScrollParents', () => {
+  const node = (
+    <div>
+      <div id="item-1">
+        <div id="item-2">
+          <span id="item-3">Test</span>
+          <span id="sibling-1">Test</span>
+          <span id="sibling-2">Test</span>
+          <span id="sibling-3">Test</span>
+        </div>
+      </div>
+      <div id="ht" style={{ height: '50px' }} />
+      <div id="scroll-parent" style={{ height: '200px', overflow: 'scroll' }}>
+        <div>
+          <div id="scroll-child" style={{ height: '500px' }}>
+            Test
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="scroll-parent-rel"
+        style={{ height: '200px', overflow: 'scroll', position: 'relative' }}
+      >
+        <div style={{ height: '200px', overflow: 'scroll' }}>
+          <div
+            id="scroll-child-rel"
+            style={{ height: '500px', position: 'absolute' }}
+          >
+            Test
+          </div>
+        </div>
+      </div>
+
+      <div style={{ height: '200px', overflow: 'scroll' }}>
+        <div
+          id="scroll-child-fixed"
+          style={{ height: '500px', position: 'fixed' }}
+        >
+          Test
+        </div>
+      </div>
+    </div>
+  )
+
+  beforeEach(() => {
+    render(node)
+  })
+
+  it('should find scroll parent for inline elements', () => {
+    const child = document.getElementById('scroll-child')
+    const parent = document.getElementById('scroll-parent')
+
+    expect(getScrollParents(child)[0]).toBe(parent)
+  })
+
+  it('should ignore static parents when absolute', () => {
+    const child = document.getElementById('scroll-child-rel')
+    const parent = document.getElementById('scroll-parent-rel')
+
+    expect(getScrollParents(child)[0]).toBe(parent)
+  })
+
+  it('should handle fixed', () => {
+    const child = document.getElementById('scroll-child-fixed')
+    const scrollParent = getScrollParents(child)[0]
+
+    expect(scrollParent).toBe(document)
+  })
+})

package/src/__new-tests__/getScrollParents.test.tsx

@@ -0,0 +1,84 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { getOffsetParents } from '../getOffsetParents'
+
+describe('getOffsetParents', () => {
+  // At rendering, we receive the node_wrapper and the body as extra offsetParents
+  const node = (
+    <div data-testid="node">
+      <div
+        data-testid="child_1_wrapper_parent"
+        style={{ transform: '200px', position: 'relative' }}
+      >
+        <div data-testid="child_1_wrapper">
+          <div data-testid="child-1" style={{ height: '500px' }}>
+            Test
+          </div>
+        </div>
+      </div>
+
+      <div
+        data-testid="child_2_wrapper_parent"
+        style={{ transform: '200px', position: 'absolute' }}
+      >
+        <div data-testid="child_2_wrapper" style={{ position: 'absolute' }}>
+          <div data-testid="child-2">Test</div>
+        </div>
+      </div>
+
+      <div data-testid="child_3_wrapper">
+        <div data-testid="child-3">Test</div>
+      </div>
+    </div>
+  )
+
+  it('should find offset parent for inline elements', () => {
+    const { getByTestId } = render(node)
+    const child = getByTestId('child-1')
+    const parent = getByTestId('child_1_wrapper_parent')
+    const offsetParents = getOffsetParents(child)
+
+    expect(offsetParents[1]).toBe(parent)
+  })
+
+  it('should ignore static parents when absolute', () => {
+    const { getByTestId } = render(node)
+    const child = getByTestId('child-2')
+    const offsetParents = getOffsetParents(child)
+
+    expect(offsetParents.length).toBe(5)
+  })
+
+  it('should handle fixed', () => {
+    const { getByTestId } = render(node)
+    const child = getByTestId('child-3')
+    const offsetParents = getOffsetParents(child)
+
+    expect(offsetParents.length).toBe(4)
+  })
+})

package/src/__new-tests__/isCustomElement.test.tsx

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import '@testing-library/jest-dom'
+import { isDefinedCustomElement } from '../isDefinedCustomElement'
+
+class TestElement extends HTMLElement {}
+
+describe('isDefinedCustomElement', () => {
+  beforeAll(() => {
+    customElements.define('test-element', TestElement)
+  })
+
+  it('should return true for defined elements', () => {
+    const el = document.createElement('test-element')
+    expect(isDefinedCustomElement(el)).toBe(true)
+  })
+
+  it('should return false for not defined elements', () => {
+    // it is possible to create a custom element that is not defined
+    const el = document.createElement('my-element')
+    expect(isDefinedCustomElement(el)).toBe(false)
+  })
+})

package/src/__new-tests__/isVisible.test.tsx

@@ -0,0 +1,114 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { isVisible } from '../isVisible'
+
+describe('isVisible', () => {
+  it('should recognize visible elements', () => {
+    render(<div data-testid="test">Hello world!</div>)
+    const element = screen.getByTestId('test')
+
+    expect(isVisible(element)).toBe(true)
+  })
+
+  it('should recognize elements with display: none', () => {
+    render(
+      <div data-testid="test">
+        <span style={{ display: 'none' }}>Hello world!</span>
+      </div>
+    )
+    const element = screen.getByTestId('test').firstChild
+
+    expect(isVisible(element)).toBe(false)
+  })
+
+  it('should recognize elements hidden with clip', () => {
+    const style: React.CSSProperties = {
+      position: 'absolute',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)'
+    }
+    render(
+      <div data-testid="test">
+        <span style={style}>Hello world!</span>
+      </div>
+    )
+    const element = screen.getByTestId('test').firstChild
+
+    expect(isVisible(element)).toBe(false)
+  })
+
+  it('should recognize clipped elements that are not hidden', () => {
+    const style: React.CSSProperties = {
+      position: 'absolute',
+      overflow: 'hidden',
+      clip: 'rect(0,0,10px,0)'
+    }
+    render(
+      <div data-testid="test">
+        <span style={style}>Hello world!</span>
+      </div>
+    )
+    const element = screen.getByTestId('test').firstChild
+
+    expect(isVisible(element)).toBe(true)
+  })
+
+  it('should recursively check parent visibility', () => {
+    const style: React.CSSProperties = { visibility: 'hidden' }
+    render(
+      <div data-testid="test" style={style}>
+        <span>
+          <span data-testid="test-2" style={{ visibility: 'visible' }}>
+            Hello world!
+          </span>
+        </span>
+      </div>
+    )
+    const element = screen.getByTestId('test-2')
+
+    expect(isVisible(element, false)).toBe(true)
+    expect(isVisible(element)).toBe(false)
+  })
+
+  it('should not recursively check text nodes', () => {
+    const style: React.CSSProperties = { visibility: 'hidden' }
+    render(
+      <div data-testid="test" style={style}>
+        <span>
+          <span data-testid="test-2" style={{ visibility: 'visible' }}>
+            Hello world!
+          </span>
+        </span>
+      </div>
+    )
+    const element = screen.getByTestId('test-2').firstChild
+
+    expect(isVisible(element, false)).toBe(true)
+    expect(isVisible(element)).toBe(false)
+  })
+})

package/src/__new-tests__/requestAnimationFrame.test.tsx

@@ -0,0 +1,38 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { waitFor } from '@testing-library/react'
+import { requestAnimationFrame } from '../requestAnimationFrame'
+
+describe('requestAnimationFrame', () => {
+  it('should provide a cancel method', async () => {
+    const callback = jest.fn()
+    const raf = requestAnimationFrame(callback)
+
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(typeof raf.cancel).toBe('function')
+    })
+  })
+})

package/src/__new-tests__/transformSelection.test.tsx

@@ -0,0 +1,80 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { transformSelection, transformCursor } from '../transformSelection'
+
+describe('transformSelection', () => {
+  it('should work with transformCursor', () => {
+    const paramObj = {
+      selectionStart: 2,
+      selectionEnd: 3,
+      selectionDirection: 'none',
+      value: '1x2345'
+    }
+
+    const result = transformSelection(paramObj as HTMLTextAreaElement, '12345')
+
+    expect(result).toEqual({
+      selectionStart: 1,
+      selectionEnd: 2,
+      selectionDirection: 'none'
+    })
+  })
+})
+
+describe('transformCursor', () => {
+  it('should retain cursor at the end', () => {
+    const dirtyValue = '12_xxxx_'
+    const cleanedValue = '12'
+    const cursorIndex = dirtyValue.length
+
+    expect(transformCursor(cursorIndex, dirtyValue, cleanedValue)).toBe(
+      cleanedValue.length
+    )
+  })
+
+  it('should retain cursor at the start', () => {
+    const dirtyValue = '12_xxxx_67'
+    const cleanedValue = '1267'
+    const cursorIndex = 0
+
+    expect(transformCursor(cursorIndex, dirtyValue, cleanedValue)).toBe(0)
+  })
+
+  it('should retain cursor between cleaned values', () => {
+    const dirtyValue = '12_xxxx_67'
+    const cleanedValue = '1267'
+    const cursorIndex = 6
+
+    expect(transformCursor(cursorIndex, dirtyValue, cleanedValue)).toBe(2)
+  })
+
+  it('should retain cursor after cleaned values', () => {
+    const dirtyValue = '12_xxxx_67'
+    const cleanedValue = '1267'
+    const cursorIndex = dirtyValue.length - 1
+
+    expect(transformCursor(cursorIndex, dirtyValue, cleanedValue)).toBe(3)
+  })
+})