How to use the @instructure/ui-testable function in @instructure/ui-testable

import { uid } from '@instructure/uid'

import themeable from '@instructure/ui-themeable'
import testable from '@instructure/ui-testable'

import { Day } from './Day'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@testable()
@themeable(theme, styles)
class Calendar extends Component {
  static Day = Day
  static DAY_COUNT = 42 // 6 weeks visible

  static propTypes = {
    /**
    * children of type `` There should be exactly 42 provided (6
    * weeks).
    */
    children: ChildrenPropTypes.oneOf([Day]),
    /**
    * A button to render in the navigation header. The recommendation is to
    * compose it with the [IconButton](#IconButton) component by setting the `size`
    * prop to `small`, `withBorder` and `withBackground` to `false`, and setting
    * `renderIcon` to [IconArrowOpenEnd](#iconography).

import testable from '@instructure/ui-testable'
import themeable from '@instructure/ui-themeable'
import ThemeablePropTypes from '@instructure/ui-themeable/lib/ThemeablePropTypes'

import Transition from '@instructure/ui-motion/lib/Transition'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: Tabs
---
**/
@testable()
@themeable(theme, styles)
export default class Panel extends Component {
  static propTypes = {
    /**
    * The content that will be rendered in the corresponding  and will label
    * this `` for screen readers
    */
    title: PropTypes.node.isRequired,
    children: PropTypes.node,
    variant: PropTypes.oneOf(['default', 'secondary']),
    maxHeight: PropTypes.string,
    minHeight: PropTypes.string,
    id: PropTypes.string,
    labelledBy: PropTypes.string,
    selected: PropTypes.bool,
    disabled: PropTypes.bool,

import themeable from '@instructure/ui-themeable'
import Browser from '@instructure/ui-utils/lib/Browser'
import testable from '@instructure/ui-testable'

import TreeButton from '../TreeButton'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: TreeBrowser
---
**/

@testable()
@themeable(theme, styles)
export default class TreeCollection extends Component {
  static propTypes = {
    id: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    name: PropTypes.string,
    descriptor: PropTypes.string,
    items: PropTypes.array,
    collections: PropTypes.array,
    expanded: PropTypes.bool,
    selection: PropTypes.string,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    variant: PropTypes.oneOf(['folderTree', 'indent']),
    collectionIcon: PropTypes.func,

import classnames from 'classnames'

import themeable from '@instructure/ui-themeable'

import InlineSVG from '../InlineSVG'
import testable from '@instructure/ui-testable'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components/utilities
---
**/
@testable()
@themeable(theme, styles)
class SVGIcon extends Component {
  static propTypes = {
    ...InlineSVG.propTypes,
    rotate: PropTypes.oneOf(['0', '90', '180', '270']),
    size: PropTypes.oneOf([
      'x-small',
      'small',
      'medium',
      'large',
      'x-large'
    ]),
    bidirectional: PropTypes.bool
  }

  static defaultProps = {

import { omitProps } from '@instructure/ui-react-utils/lib/omitProps'
import { pickProps } from '@instructure/ui-react-utils/lib/pickProps'
import isActiveElement from '@instructure/ui-dom-utils/lib/isActiveElement'
import testable from '@instructure/ui-testable'

import Expandable from '../Expandable'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@testable()
@themeable(theme, styles)
class ToggleDetails extends Component {
  static propTypes = {
    variant: PropTypes.oneOf(['default', 'filled']),
    /**
    * The summary that displays and can be interacted with
    */
    summary: PropTypes.node.isRequired,
    /**
    * Whether the content is expanded or hidden
    */
    expanded: controllable(
      PropTypes.bool,
      'onToggle',
      'defaultExpanded'
    ),

import uid from '@instructure/uid'
import testable from '@instructure/ui-testable'

import Tab from './Tab'
import Panel from './Panel'

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/

@testable()
@themeable(theme, styles)
export default class Tabs extends Component {
  static propTypes = {
    /**
    * children of type `Tabs.Panel`
    */
    children: ChildrenPropTypes.oneOf([Panel, null]),

    variant: PropTypes.oneOf(['default', 'secondary']),
    /**
    * the index (zero based) of the panel that should be selected on initial render
    */
    defaultSelectedIndex: PropTypes.number,
    /**
    * the index (zero based) of the panel that should be selected (should be accompanied by `onChange`)
    */

import FormPropTypes from '@instructure/ui-form-field/lib/utils/FormPropTypes'
import Locale from '@instructure/ui-i18n/lib/Locale'
import NumberInputControlled from '@instructure/ui-number-input/lib/components/NumberInput'
import deepEqual from '@instructure/ui-utils/lib/deepEqual'
import deprecated, { changedPackageWarning } from '@instructure/ui-utils/lib/react/deprecated'
import isActiveElement from '@instructure/ui-utils/lib/dom/isActiveElement'
import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
import testable from '@instructure/ui-testable'

/**
---
category: components
---
**/

@testable()
class NumberInput extends Component {
  static propTypes = {
    label: PropTypes.node.isRequired,
    id: PropTypes.string,
    showArrows: PropTypes.bool,
    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /**
     * Specify the number of digits to display after the decimal separator. If
     * the input has more digits after the decimal separator, it will be
     * rounded on blur. If it has less, trailing zeros will be added on blur.
     *
     * Pass either decimalPrecision or significantDigits, not both.
     */
    decimalPrecision: xor(PropTypes.number, 'significantDigits'),

import classnames from 'classnames'

import testable from '@instructure/ui-testable'
import themeable from '@instructure/ui-themeable'
import findDOMNode from '@instructure/ui-dom-utils/lib/findDOMNode'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: Tabs
id: Tabs.Tab
---
**/
@testable()
@themeable(theme, styles)
export default class Tab extends Component {
  static propTypes = {
    variant: PropTypes.oneOf(['default', 'secondary', 'screenreader-only']),
    id: PropTypes.string.isRequired,
    index: PropTypes.number.isRequired,
    controls: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    selected: PropTypes.bool,
    focus: PropTypes.bool,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    role: PropTypes.string,
    children: PropTypes.node
  }

import isActiveElement from '@instructure/ui-dom-utils/lib/isActiveElement'

import Flex, { FlexItem } from '@instructure/ui-layout/lib/Flex'
import View from '@instructure/ui-layout/lib/View'
import IconArrowOpenEndSolid from '@instructure/ui-icons/lib/IconArrowOpenEndSolid'
import IconArrowOpenDownSolid from '@instructure/ui-icons/lib/IconArrowOpenDownSolid'
import testable from '@instructure/ui-testable'

import Expandable from '../Expandable'

/**
---
category: components
---
**/
@testable()
class ToggleGroup extends Component {
  static propTypes = {
    /**
    * the content to show and hide
    */
    children: PropTypes.node.isRequired,
    /**
    * the content area next to the toggle button
    */
    summary: PropTypes.node.isRequired,
    /**
    * provides a screenreader label for the toggle button
    * (takes `expanded` as an argument if a function)
    */
    toggleLabel: PropTypes.oneOfType([
      PropTypes.node,

import testable from '@instructure/ui-testable'
import themeable from '@instructure/ui-themeable'
import ThemeablePropTypes from '@instructure/ui-themeable/lib/ThemeablePropTypes'

import Transition from '@instructure/ui-motion/lib/Transition'

import styles from './styles.css'
import theme from './theme'

/**
---
parent: TabList
---
**/
@testable()
@themeable(theme, styles)
export default class TabPanel extends Component {
  static propTypes = {
    /**
    * The content that will be rendered in the corresponding  and will label
    * this `` for screen readers
    */
    title: PropTypes.node.isRequired,
    children: PropTypes.node,
    variant: PropTypes.oneOf(['simple', 'minimal']),
    maxHeight: PropTypes.string,
    id: PropTypes.string,
    labelledBy: PropTypes.string,
    selected: PropTypes.bool,
    disabled: PropTypes.bool,
    padding: ThemeablePropTypes.spacing,