How to use @instructure/ui-testable - 10 common examples

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).

const squareVariants = [
  'circle-default',
  'circle-primary',
  'circle-danger',
  'icon',
  'icon-inverse'
]

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

@testable()
@themeable(theme, styles)
class Button extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    type: PropTypes.oneOf(['button', 'submit', 'reset']),
    variant: PropTypes.oneOf([
      'default',
      'primary',
      'success',
      'danger',
      'light',
      'ghost',
      'ghost-inverse',
      'link',
      'link-inverse',
      'circle-default',

import { mirrorHorizontalPlacement } from '../mirrorHorizontalPlacement'
import { DrawerContent } from './DrawerContent'
import { DrawerTray } from './DrawerTray'

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

/**
---
category: components/deprecated
id: DeprecatedDrawerLayout
---
**/
@deprecated('7.0.0', null, 'Use DrawerLayout from ui-drawer-layout instead.')
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerLayout extends Component {
  static locatorAttribute = 'data-drawer-layout'
  static propTypes = {
    /**
     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
     */
    children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
    /**
     * Min width for the ``
     */
    minWidth: PropTypes.string,
    /**
     * Function called when the `` is resized and hits the `minWidth` breakpoint
     * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if

import React, { Component } from 'react'

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

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

/**
---
parent: Menu
id: Menu.Separator
---
@module MenuItemSeparator
**/
@testable()
@themeable(theme, styles)
class MenuItemSeparator extends Component {
  render () {
    return (
      <div role="presentation">
    )
  }
}

export default MenuItemSeparator
export { MenuItemSeparator }
</div>

import { addPositionChangeListener, findDOMNode } from '@instructure/ui-dom-utils'
import { uid } from '@instructure/uid'
import { shallowEqual, deepEqual } from '@instructure/ui-utils'
import { debounce } from '@instructure/debounce'
import { testable } from '@instructure/ui-testable'

import { Portal } from '@instructure/ui-portal'

import { calculateElementPosition } from '../calculateElementPosition'
import { PositionPropTypes } from '../PositionPropTypes'

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

@deprecated('8.0.0', null, 'Use Position\'s `renderTarget` prop instead.')
@testable()
class PositionTarget extends ComponentIdentifier {
  static displayName = 'PositionTarget'
  static locatorAttribute = 'data-position-target'
}

@deprecated('8.0.0', null, 'Use Posiition\'s `children` instead.')
@testable()
class PositionContent extends ComponentIdentifier {
  static displayName = 'PositionContent'
  static propTypes = {
    children: PropTypes.node,
    placement: PositionPropTypes.placement
  }
  static locatorAttribute = 'data-position-content'
}

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

import { mirrorHorizontalPlacement } from '@instructure/ui-position'
import { DrawerContent } from './DrawerContent'
import { DrawerTray } from './DrawerTray'

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

/**
---
category: components
---
**/
@testable()
@bidirectional()
@themeable(theme, styles)
class DrawerLayout extends Component {
  static locatorAttribute = 'data-drawer-layout'
  static propTypes = {
    /**
     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
     */
    children: ChildrenPropTypes.oneOfEach([DrawerContent, DrawerTray]),
    /**
     * Min width for the ``
     */
    minWidth: PropTypes.string,
    /**
     * Function called when the `` is resized and hits the `minWidth` breakpoint
     * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if

* 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 { LayoutPropTypes } from '@instructure/ui-layout'
import { Popover as UIPopover } from '@instructure/ui-popover'
import { bidirectional } from '@instructure/ui-i18n'
import { Children, controllable, element } from '@instructure/ui-prop-types'
import { ComponentIdentifier, deprecated } from '@instructure/ui-react-utils'
import { ThemeablePropTypes } from '@instructure/ui-themeable'
import { testable } from '@instructure/ui-testable'

@testable()
class PopoverTrigger extends ComponentIdentifier {
  static displayName = 'PopoverTrigger'
}

@testable()
class PopoverContent extends ComponentIdentifier {
  static displayName = 'PopoverContent'
}

/**
---
category: components/deprecated
id: DeprecatedPopover
---
**/
@deprecated('7.0.0', null, 'Use @instructure/ui-popover instead')

import { themeable } from '@instructure/ui-themeable'
import { ms } from '@instructure/ui-utils'
import { testable } from '@instructure/ui-testable'

import { BaseTransition } from './BaseTransition'

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

/**
---
category: components/utilities
---
@module Transition
**/
@testable()
@themeable(theme, styles)
class Transition extends Component {
  static propTypes = {
    type: PropTypes.oneOf([
      'fade',
      'scale',
      'slide-down',
      'slide-up',
      'slide-left',
      'slide-right'
    ]),
    /**
     * A single element to animate in and out
     */
    children: PropTypes.element,
    /**

import { Popover } from '@instructure/ui-popover'
import { element } from '@instructure/ui-prop-types'

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

/**
---
category: components
---
**/
@deprecated('8.0.0', {
  tip: 'renderTip',
  variant: 'color'
})
@testable()
@themeable(theme, styles)
class Tooltip extends Component {
  static propTypes = {
    /**
    * @param {Object} renderProps
    * @param {Boolean} renderProps.focused - Is the Tooltip trigger focused?
    * @param {Function} renderProps.getTriggerProps - Props to be spread onto the trigger element
    */
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
    /**
    * The content to render in the tooltip
    */
    renderTip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
    * Whether or not the tooltip content is shown, when controlled
    */

return propsHaveCompactView(props) && currentPageIndex > 0
}

function shouldShowNextButton (props, currentPageIndex) {
  return (
    propsHaveCompactView(props) && currentPageIndex < props.children.length - 1
  )
}

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

@testable()
@themeable(theme, styles)
class Pagination extends Component {
  static propTypes = {
    /**
     * children of type Pagination.Page
     */
    children: Children.oneOf([PaginationButton]),
    /**
     * Disables interaction with all pages
     */
    disabled: PropTypes.bool,
    /**
     * Visible label for component
     */
    label: PropTypes.node,
    /**