@instructure/ui-react-utils 8.53.2 → 8.53.3-pr-snapshot-8

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

@@ -0,0 +1,126 @@
+/*
+ * 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 {
+  withDeterministicId,
+  DeterministicIdContextProvider,
+  generateInstanceCounterMap
+} from '../DeterministicIdContext'
+import type { WithDeterministicIdProps } from '../DeterministicIdContext'
+
+@withDeterministicId()
+class TestComponent extends React.Component<
+  React.PropsWithChildren<WithDeterministicIdProps>
+> {
+  render() {
+    return (
+      <div data-testid="test-component" id={this.props.deterministicId!()}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class WrapperComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        <TestComponent />
+      </div>
+    )
+  }
+}
+
+const uniqueIds = (el: Element) => {
+  const idList = Array.from(el.children).map((child) => child.id)
+  return new Set(idList).size === idList.length
+}
+
+describe('DeterministicIdContext', () => {
+  it('can be found and tested with ReactTestUtils', () => {
+    render(<WrapperComponent />)
+    const testComponent = screen.getByTestId('test-component')
+
+    expect(testComponent).toBeInTheDocument()
+    expect(testComponent.id).toBeDefined()
+  })
+
+  it('should generate unique ids without Provider wrapper', () => {
+    render(
+      <div data-testid="test-components">
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+        <TestComponent />
+      </div>
+    )
+    const el = screen.getByTestId('test-components')
+
+    expect(uniqueIds(el)).toBe(true)
+  })
+
+  it('should generate unique ids when components are rendered both out and inside of provider', () => {
+    render(
+      <div data-testid="test-components">
+        <DeterministicIdContextProvider>
+          <TestComponent />
+          <TestComponent />
+          <TestComponent />
+        </DeterministicIdContextProvider>
+        <TestComponent />
+        <TestComponent />
+      </div>
+    )
+    const el = screen.getByTestId('test-components')
+
+    expect(uniqueIds(el)).toBe(true)
+  })
+
+  it('should generate unique ids with provider only', () => {
+    const Wrapper = ({ children }: any) => {
+      return (
+        <DeterministicIdContextProvider
+          instanceCounterMap={generateInstanceCounterMap()}
+        >
+          <div data-testid="wrapper">{children}</div>
+        </DeterministicIdContextProvider>
+      )
+    }
+    const children = []
+    for (let i = 0; i < 10; i++) {
+      children.push(<TestComponent key={i} />)
+    }
+
+    render(<Wrapper>{children}</Wrapper>)
+    const el = screen.getByTestId('wrapper')
+
+    expect(uniqueIds(el)).toBe(true)
+  })
+})

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

@@ -0,0 +1,136 @@
+/*
+ * 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 PropTypes from 'prop-types'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { callRenderProp } from '../callRenderProp'
+
+describe('callRenderProp', () => {
+  it('strings', () => {
+    expect(callRenderProp('foo')).toEqual('foo')
+  })
+
+  it('numbers', () => {
+    expect(callRenderProp(2)).toEqual(2)
+  })
+
+  it('arrays', () => {
+    const prop = ['foo', 'bar', 'baz']
+
+    expect(callRenderProp(prop)).toStrictEqual(prop)
+    expect(callRenderProp([])).toStrictEqual([])
+  })
+
+  it('booleans', () => {
+    expect(callRenderProp(false)).toEqual(false)
+  })
+
+  it('JSX literals', () => {
+    const Foo = () => <div>hello</div>
+    expect(callRenderProp(<Foo />)).toStrictEqual(<Foo />)
+  })
+
+  it('React classes', () => {
+    class Foo extends React.Component {
+      render() {
+        return <div>hello</div>
+      }
+    }
+
+    const Result = callRenderProp(Foo)
+    expect(Result).toStrictEqual(<Foo />)
+
+    const { getByText } = render(Result)
+    expect(getByText('hello')).toBeInTheDocument()
+  })
+
+  it('functions', () => {
+    const Baz = function () {
+      return 'some text'
+    }
+    const result = callRenderProp(Baz)
+
+    const { getByText } = render(<div>{result}</div>)
+
+    expect(getByText('some text')).toBeInTheDocument()
+  })
+
+  it('fat arrow functions', () => {
+    const Baz = () => 'some text'
+
+    // in this test we are trying to test that it works with fat arrow functions,
+    // but the babel config when we run these tests is currently configured
+    // to transpile fat arrow functions down to normal functions.
+    // Real, untranspiled, fat-arrow functions don't have a `prototype` but when
+    // they are transpiled down they do. So this next line is to make sure
+    // the thing we are testing really doesn't have a prototype like it would
+    // if it was a real untranspiled fat arrow function.
+    if (Baz.prototype) Baz.prototype! = undefined
+
+    const result = callRenderProp(Baz)
+
+    const { getByText } = render(<div>{result}</div>)
+
+    expect(getByText('some text')).toBeInTheDocument()
+  })
+
+  describe('passing props', () => {
+    it('should pass props correctly to functions', () => {
+      const someFunc = ({ shape }: { shape: string }) => <div>{shape}</div>
+
+      const result = callRenderProp(someFunc, { shape: 'rectangle' })
+
+      const { getByText } = render(<div>{result}</div>)
+
+      expect(getByText('rectangle')).toBeInTheDocument()
+    })
+
+    it('should pass props correctly to React classes', () => {
+      type FooProps = { shape?: string }
+      class Foo extends React.Component<FooProps> {
+        static propTypes = {
+          shape: PropTypes.oneOf(['circle', 'rectangle'])
+        }
+
+        static defaultProps = {
+          shape: 'circle'
+        }
+
+        render() {
+          return <div>{this.props.shape}</div>
+        }
+      }
+
+      const result = callRenderProp(Foo, { shape: 'rectangle' })
+
+      const { getByText } = render(<div>{result}</div>)
+
+      expect(getByText('rectangle')).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,357 @@
+/*
+ * 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, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { deprecated } from '../deprecated'
+
+type TestComponentProps = {
+  bar: string
+  qux: string
+}
+class TestComponent extends Component<TestComponentProps> {
+  static propTypes = {
+    bar: PropTypes.string,
+    qux: PropTypes.string
+  }
+
+  static defaultProps = {
+    bar: null,
+    qux: 'Hello'
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.qux} {this.props.bar}
+      </div>
+    )
+  }
+}
+
+describe('@deprecated', () => {
+  describe('deprecated props', () => {
+    const DeprecatedComponent = deprecated('2.1.0', {
+      foo: 'bar',
+      baz: true
+    })(TestComponent)
+
+    it('should warn when suggesting new prop when using old prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(<DeprecatedComponent foo="Jane" />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] `foo` is deprecated and will be removed in version 2.1.0. Use `bar` instead. '
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should warn when using old prop with no new prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(<DeprecatedComponent baz="Goodbye" />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] `baz` is deprecated and will be removed in version 2.1.0.'
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should not output a warning using new prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(<DeprecatedComponent bar="Jane" />)
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+
+  describe('deprecated component', () => {
+    const DeprecatedComponent = deprecated('3.4.0')(TestComponent)
+
+    it('should warn that the entire component is deprecated if no old props are supplied', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(<DeprecatedComponent />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] is deprecated and will be removed in version 3.4.0.'
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+
+  describe('deprecated component with a changed package message', () => {
+    const DeprecatedComponent = deprecated(
+      '5.0.0',
+      null,
+      deprecated.changedPackageWarning('ui-forms', 'ui-number-input')
+    )(TestComponent)
+
+    it('should warn that the component is deprecated and output a warning that the package changed', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] is deprecated and will be removed in version 5.0.0. It has been moved from @instructure/ui-forms to @instructure/ui-number-input.'
+
+      render(<DeprecatedComponent />)
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+
+  describe('component with deprecated prop values', () => {
+    it('should not warn when an allowed prop value is supplied', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      type DeprecatedPropValueComponentProps = {
+        color: string
+      }
+      class DeprecatedPropValueComponent extends Component<DeprecatedPropValueComponentProps> {
+        static propTypes = {
+          color: deprecated.deprecatePropValues(
+            PropTypes.oneOf(['red', 'yellow', 'blue', 'orange', 'gold']),
+            ['blue', 'orange', 'gold']
+          )
+        }
+
+        static defaultProps = {
+          color: 'red'
+        }
+
+        render() {
+          return <div>{this.props.color}</div>
+        }
+      }
+
+      render(<DeprecatedPropValueComponent color="yellow" />)
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should warn when a forbidden prop value is supplied', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      const color = 'orange'
+      type DeprecatedPropValueComponentProps = {
+        color: string
+      }
+      class DeprecatedPropValueComponent extends Component<DeprecatedPropValueComponentProps> {
+        static propTypes = {
+          color: deprecated.deprecatePropValues(
+            PropTypes.oneOf(['red', 'yellow', 'blue', 'orange', 'gold']),
+            ['blue', 'orange', 'gold']
+          )
+        }
+
+        static defaultProps = {
+          color: 'red'
+        }
+
+        render() {
+          return <div>{this.props.color}</div>
+        }
+      }
+
+      render(<DeprecatedPropValueComponent color={color} />)
+
+      const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated.`
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should warn with additional message text when a forbidden prop value is supplied and has message text', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      const color = 'gold'
+      const message = 'It will be removed in v8.0.0.'
+      type DeprecatedPropValueComponentProps = {
+        color: string
+      }
+      class DeprecatedPropValueComponent extends Component<DeprecatedPropValueComponentProps> {
+        static propTypes = {
+          color: deprecated.deprecatePropValues(
+            PropTypes.oneOf(['red', 'yellow', 'blue', 'orange', 'gold']),
+            ['blue', 'orange', 'gold'],
+            'It will be removed in v8.0.0.'
+          )
+        }
+
+        static defaultProps = {
+          color: 'red'
+        }
+
+        render() {
+          return <div>{this.props.color}</div>
+        }
+      }
+
+      render(<DeprecatedPropValueComponent color={color} />)
+
+      const expectedWarningMessage = `The '${color}' value for the \`color\` prop is deprecated. ${message}`
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should call functional message with the correct props', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      const messageMock = jest.fn()
+
+      const color = 'gold'
+      type DeprecatedPropValueComponentProps = {
+        color: string
+      }
+      class DeprecatedPropValueComponent extends Component<DeprecatedPropValueComponentProps> {
+        static propTypes = {
+          color: deprecated.deprecatePropValues(
+            PropTypes.oneOf(['red', 'yellow', 'blue', 'orange', 'gold']),
+            ['blue', 'orange', 'gold'],
+            messageMock
+          )
+        }
+
+        static defaultProps = {
+          color: 'red'
+        }
+
+        render() {
+          return <div>{this.props.color}</div>
+        }
+      }
+
+      render(<DeprecatedPropValueComponent color={color} />)
+
+      const { props, propName, propValue } = messageMock.mock.calls[0][0]
+
+      expect(props).toEqual({ color })
+      expect(propName).toBe('color')
+      expect(propValue).toBe(color)
+      expect(consoleWarningSpy).toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should warn with a completely custom message when provided message is functional and prop value is forbidden', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      const color = 'gold'
+      type DeprecatedPropValueComponentProps = {
+        color: string
+      }
+      class DeprecatedPropValueComponent extends Component<DeprecatedPropValueComponentProps> {
+        static propTypes = {
+          color: deprecated.deprecatePropValues(
+            PropTypes.oneOf(['red', 'yellow', 'blue', 'orange', 'gold']),
+            ['blue', 'orange', 'gold'],
+            ({
+              propValue,
+              propName
+            }: {
+              propValue: string
+              propName: string
+            }) =>
+              `The ${propValue} value for ${propName} has been deprecated. Use the FooBar component with the 'baz' prop set instead.`
+          )
+        }
+
+        static defaultProps = {
+          color: 'red'
+        }
+
+        render() {
+          return <div>{this.props.color}</div>
+        }
+      }
+
+      render(<DeprecatedPropValueComponent color={color} />)
+
+      const expectedWarningMessage = `The ${color} value for color has been deprecated. Use the FooBar component with the 'baz' prop set instead.`
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+})