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

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

@@ -0,0 +1,138 @@
+/*
+ * 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 { experimental } from '../experimental'
+
+type TestComponentProps = {
+  bar: string
+  qux: string
+}
+class TestComponent extends Component<TestComponentProps> {
+  static propTypes = {
+    bar: PropTypes.string,
+    qux: PropTypes.string
+  }
+
+  static defaultProps = {
+    bar: undefined,
+    qux: 'Hello'
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.qux} {this.props.bar}
+      </div>
+    )
+  }
+}
+
+describe('@experimental', () => {
+  describe('experimental props', () => {
+    const ExperimentalComponent = experimental(['bar'])(TestComponent)
+
+    it('should warn when using an experimental prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      render(<ExperimentalComponent bar="Jane" />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] The `bar` prop is experimental and its API could change significantly in a future release.'
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should not output a warning using a non-experimental prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      render(<ExperimentalComponent qux="Jane" />)
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should not output a warning for an experimental prop when dangerously ignored', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(
+        <ExperimentalComponent
+          qux="Jane"
+          __dangerouslyIgnoreExperimentalWarnings
+        />
+      )
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+
+  describe('experimental component', () => {
+    const ExperimentalComponent = experimental()(TestComponent)
+
+    it('should warn that the entire component is experimental if no props are supplied', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      render(<ExperimentalComponent />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] is experimental and its API could change significantly in a future release.'
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should not output a warning for a component when dangerously ignored', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      render(<ExperimentalComponent __dangerouslyIgnoreExperimentalWarnings />)
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+})

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

@@ -0,0 +1,119 @@
+/*
+ * 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 { getInteraction, InteractionType } from '../getInteraction'
+
+describe('getInteraction', () => {
+  it("should return 'enabled' when `interaction`, `disabled`, and `readOnly` are not provided", () => {
+    const props = {
+      foo: 'foo',
+      bar: 'bar'
+    }
+
+    expect(getInteraction({ props })).toEqual('enabled')
+  })
+
+  it('should return `interaction` value when `interaction` is specified', () => {
+    const props: { interaction: InteractionType } = {
+      interaction: 'enabled'
+    }
+
+    expect(getInteraction({ props })).toEqual('enabled')
+
+    props.interaction = 'disabled'
+
+    expect(getInteraction({ props })).toEqual('disabled')
+
+    props.interaction = 'readonly'
+
+    expect(getInteraction({ props })).toEqual('readonly')
+  })
+
+  it('should give preference to interaction even when disabled and readonly are also specified', () => {
+    const props: { interaction: InteractionType; [key: string]: any } = {
+      interaction: 'enabled',
+      disabled: true,
+      readOnly: true
+    }
+
+    expect(getInteraction({ props })).toEqual('enabled')
+
+    props.disabled = false
+    props.interaction = 'disabled'
+
+    expect(getInteraction({ props })).toEqual('disabled')
+
+    props.readOnly = false
+    props.interaction = 'readonly'
+
+    expect(getInteraction({ props })).toEqual('readonly')
+  })
+
+  it("should return 'disabled' when `disabled` prop is set and `interaction` is not specified", () => {
+    const props = {
+      disabled: true
+    }
+
+    expect(getInteraction({ props })).toEqual('disabled')
+  })
+
+  it("should return 'disabled' when both `disabled` and `readonly` props are set and `interaction` is not specified", () => {
+    const props = {
+      disabled: true,
+      readOnly: true
+    }
+
+    expect(getInteraction({ props })).toEqual('disabled')
+  })
+
+  it("should return 'readonly' when `readonly` prop is set and `interaction` and `disabled` are not specified", () => {
+    const props = {
+      disabled: true
+    }
+
+    expect(getInteraction({ props })).toEqual('disabled')
+  })
+
+  it('should not include `disabled` if it is not listed in the interactionTypes', () => {
+    const props = {
+      disabled: true,
+      readOnly: true
+    }
+
+    expect(getInteraction({ props, interactionTypes: ['readonly'] })).toEqual(
+      'readonly'
+    )
+  })
+
+  it('should not include `readonly` if it is not listed in the interactionTypes', () => {
+    const props = {
+      readOnly: true
+    }
+
+    expect(getInteraction({ props, interactionTypes: ['disabled'] })).toEqual(
+      'enabled'
+    )
+  })
+})

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

@@ -0,0 +1,90 @@
+/*
+ * 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 { hack } from '../hack'
+
+type TestComponentProps = {
+  bar: string
+  qux: string
+}
+class TestComponent extends Component<TestComponentProps> {
+  static propTypes = {
+    bar: PropTypes.string,
+    qux: PropTypes.string
+  }
+
+  static defaultProps = {
+    bar: undefined,
+    qux: 'Hello'
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.qux} {this.props.bar}
+      </div>
+    )
+  }
+}
+
+describe('@hack', () => {
+  describe('hack props', () => {
+    const HackComponent = hack(['bar'])(TestComponent)
+
+    it('should warn when using an hack prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+      render(<HackComponent bar="Jane" />)
+
+      const expectedWarningMessage =
+        'Warning: [TestComponent] The `bar` prop is a temporary hack and will be removed in a future release.'
+
+      expect(consoleWarningSpy).toHaveBeenCalledWith(
+        expect.stringContaining(expectedWarningMessage),
+        expect.any(String)
+      )
+
+      consoleWarningSpy.mockRestore()
+    })
+
+    it('should not output a warning using a non-hack prop', () => {
+      const consoleWarningSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {})
+
+      render(<HackComponent qux="Jane" />)
+
+      expect(consoleWarningSpy).not.toHaveBeenCalled()
+
+      consoleWarningSpy.mockRestore()
+    })
+  })
+})

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

@@ -0,0 +1,113 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import '@testing-library/jest-dom'
+import { omitProps } from '../omitProps'
+
+describe('omitProps', () => {
+  it('should work with PropTypes', () => {
+    const propTypes = {
+      prop1: PropTypes.string.isRequired,
+      prop2: PropTypes.number
+    }
+
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp: 'excessiveValue'
+    }
+
+    const expectedResult = {
+      excessiveProp: 'excessiveValue'
+    }
+
+    const actualResult = omitProps(inputProps, propTypes)
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should work with PropTypes and exclude the given keys', () => {
+    const propTypes = {
+      prop1: PropTypes.string.isRequired,
+      prop2: PropTypes.number
+    }
+
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const expectedResult = {
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const actualResult = omitProps(inputProps, propTypes, ['excessiveProp1'])
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should work with an input of a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2']
+
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const expectedResult = {
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const actualResult = omitProps(inputProps, allowedPropKeys)
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should work with an input of a list allowed prop names and exclude the given keys', () => {
+    const allowedPropKeys = ['prop1', 'prop2']
+
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const expectedResult = {
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const actualResult = omitProps(inputProps, allowedPropKeys, [
+      'excessiveProp1'
+    ])
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+})

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

@@ -0,0 +1,100 @@
+/*
+ * 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 { passthroughProps } from '../passthroughProps'
+
+describe('passthroughProps', () => {
+  it('should passthrough standard dom attributes', () => {
+    const props = {
+      id: 'myId',
+      title: 'My title'
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(2)
+  })
+
+  it('should passthrough data attributes', () => {
+    const props = {
+      'data-test': true
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(1)
+  })
+
+  it('should passthrough valid react props', () => {
+    const props = {
+      ref: () => {},
+      innerHTML: '<span>hello world</span>'
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(2)
+  })
+
+  it('should passthrough props prefixed with "on"', () => {
+    const props = {
+      onClick: () => {},
+      onCustomCallback: () => {},
+      onChange: () => {}
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(3)
+  })
+
+  it('should omit invalid props', () => {
+    const props = {
+      myCustomProp: 'hello'
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(0)
+  })
+
+  it('should omit certain react props', () => {
+    const props = {
+      style: { color: 'blue' },
+      className: 'myClass',
+      children: 'hello world',
+      theme: { themeVar: 'myColor' }
+    }
+    expect(Object.keys(passthroughProps(props)).length).toEqual(0)
+  })
+
+  it('should passthrough and omit correct props', () => {
+    const props = {
+      id: 'myId',
+      title: 'My title',
+      'data-test': true,
+      className: 'myClassName',
+      children: 'hello world',
+      style: { color: 'blue' },
+      theme: { themeVar: 'myColor' },
+      withSomething: false,
+      onCustomCallback: null,
+      onChange: null
+    }
+
+    expect(passthroughProps(props)).toEqual({
+      id: 'myId',
+      title: 'My title',
+      'data-test': true,
+      onCustomCallback: null,
+      onChange: null
+    })
+  })
+})

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

@@ -0,0 +1,111 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import '@testing-library/jest-dom'
+import { pickProps } from '../pickProps'
+
+describe('pickProps', () => {
+  it('should work with propTypes', () => {
+    const propTypes = {
+      prop1: PropTypes.string.isRequired,
+      prop2: PropTypes.number
+    }
+
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp: 'excessiveValue'
+    }
+
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42
+    }
+
+    const actualResult = pickProps(inputProps, propTypes)
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should add the `include` keys to the result with PropTypes', () => {
+    const propTypes = {
+      prop1: PropTypes.string.isRequired,
+      prop2: PropTypes.number
+    }
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const actualResult = pickProps(inputProps, propTypes, ['excessiveProp2'])
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should work with an input of a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2']
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1'
+    }
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42
+    }
+
+    const actualResult = pickProps(inputProps, allowedPropKeys)
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+
+  it('should add the `include` keys to the result with a list allowed prop names', () => {
+    const allowedPropKeys = ['prop1', 'prop2']
+    const inputProps = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp1: 'excessiveValue1',
+      excessiveProp2: 'excessiveValue2'
+    }
+    const expectedResult = {
+      prop1: 'hello',
+      prop2: 42,
+      excessiveProp2: 'excessiveValue2'
+    }
+
+    const actualResult = pickProps(inputProps, allowedPropKeys, [
+      'excessiveProp2'
+    ])
+
+    expect(actualResult).toEqual(expectedResult)
+  })
+})