sc-react-ions/test/Popover.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import StyledDiv from '../src/components/StyledDiv'
import { Popover } from '../src/components/Popover/Popover'
import styles from '../src/components/Popover/styles.css'

describe('Popover', () => {
  const defaultProps = {
    showing: false,
    defaultPosition: 'top',
    content: (<p>Test Content</p>),
    width: '400px',
    optClass: 'popover',
    className: 'popoverClass',
    onRequestClose: sinon.spy()
  }
  let props = defaultProps

  beforeEach(() => {
    props = defaultProps
  })

  describe('handleClickOutside', () => {
    it('does nothing when closed', () => {
      shallow(<Popover {...props} />).instance().handleClickOutside()
      expect(props.onRequestClose.calledOnce).to.be.false
    })

    it('requests close when it is open', () => {
      shallow(<Popover {...props} showing={true} />).instance().handleClickOutside()
      expect(props.onRequestClose.calledOnce).to.be.true
    })
  })

  describe('render', () => {
    const wrapper = shallow(<Popover {...props} />)

    it('is a StyledDiv', () => {
      expect(wrapper.type()).to.equal(StyledDiv)
    })

    it('uses optClass for class', () => {
      expect(wrapper.hasClass(props.optClass)).to.be.true
    })

    it('uses className for class', () => {
      expect(wrapper.hasClass(props.className)).to.be.true
    })
  })

  describe('styles', () => {
    const defaultStyleProps = {
      ...defaultProps,
      position: defaultProps.defaultPosition,
      parent: { width: 100, height: 50 }
    }

    beforeEach(() => {
      props = defaultStyleProps
    })

    it('has uses the provided width', () => {
      expect(styles({ width: '600px' })['.popoverInner'].width).to.equal('600px')
    })

    it('has visibility hidden when showing is false', () => {
      const renderedStyle = styles(props)['.popoverInner']

      expect(renderedStyle.visibility).to.equal('hidden')
      expect(renderedStyle.opacity).to.equal(0)
    })

    it('has visibility visible, opacity 1 when showing is true', () => {
      const renderedStyle = styles({ ...props, showing: true })['.popoverInner']

      expect(renderedStyle.visibility).to.equal('visible')
      expect(renderedStyle.opacity).to.equal(1)
    })

    it('is on the top when position is top', () => {
      const renderedStyle = styles(props)['.popoverInner']

      expect(renderedStyle.bottom).to.equal('70px')
      expect(renderedStyle.transform).to.equal('translateX(calc(-50% + 50px))')
    })

    it('is on the left when position is left', () => {
      const renderedStyle = styles({ ...props, position: 'left' })['.popoverInner']

      expect(renderedStyle.right).to.equal('120px')
      expect(renderedStyle.transform).to.equal('translateY(calc(-50% + 25px))')
    })
  })
})