import { range } from 'd3-array'
import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'

import CentileDistribution from '../presenter'
import distributionStyles from '../../Distribution/styles.css'
import Distribution from '../../Distribution'

describe('CentileDistribution', () => {
  const testbed = createTestbed(CentileDistribution, {
    animateDelay: null,
    animateDuration: null,
    visualDistribution: range(100)
  })

  shouldRenderComponent(testbed, {}, CentileDistribution)

  it('should render ticks at 10% intervals', () => {
    testbed.render()

    const ticks = testbed.findChildrenBySelector(`.${distributionStyles.xAxis} g.tick`)
    expect(ticks.length).to.eq(11)
    ticks.forEach((t, i) => {
      expect(t.textContent).to.eq(`${i * 10}%`)
      expect(t.attributes.transform.value).to.match(/translate\(\d+(\.\d+)?,0\)/)
    })
  })

  it('renders a table containing the raw chart data', () => {
    testbed.render()
    const tbody = testbed.findChildByTagName('tbody')
    const tableRows = tbody.querySelectorAll('tr')
    expect(tableRows).to.have.length(100)
    tableRows.forEach((tableRow, index) => {
      const columns = tableRow.querySelectorAll('td')
      expect(testbed.getText(columns[0])).to.eq(`${index}%`)
      expect(testbed.getText(columns[1])).to.eq(`${index}`)
    })
  })

  context('with starred score', () => {
    it('includes starred score in summary', () => {
      testbed.render({ starScore: 0.96 })
      const srNode = testbed.findChildrenByType(ScreenReaderContent)[0]
      expect(testbed.getText(srNode)).to.include('You scored 96%')
    })

    it('passes the correct star index to the underlying distribution', () => {
      testbed.render({ starScore: 0.42 })
      const distribution = testbed.findChildByType(Distribution)
      expect(distribution.props.starIndex).to.eq(42)
    })

    it('clamps the star index when star score is above 100%', () => {
      testbed.render({ starScore: 1.1 })
      const distribution = testbed.findChildByType(Distribution)
      expect(distribution.props.starIndex).to.eq(99)
    })

    it('clamps the star index when star score is at 0%', () => {
      testbed.render({ starScore: 0.0 })
      const distribution = testbed.findChildByType(Distribution)
      expect(distribution.props.starIndex).to.eq(0)
    })
  })
})
