import QuintileDistribution from '../presenter'
import styles from '../../Distribution/styles.css'

describe('QuintileDistribution', () => {
  const quintile = [1, 3, 5, 3, 1]
  const quintileRangeLabels = ['0-19%', '20-39%', '40-59%', '60-79%', '80-100%']
  const testbed = createTestbed(QuintileDistribution, {
    animateDelay: null,
    animateDuration: null,
    barPaddingInner: 0,
    barPaddingOuter: 0,
    chartWidth: 100,
    visualDistribution: quintile
  })

  shouldRenderComponent(testbed, {}, QuintileDistribution)

  it('should render ticks with bin range', () => {
    testbed.render()

    const ticks = testbed.findChildrenBySelector(`.${styles.xAxis} g.tick`)
    expect(ticks.map((t) => { return t.textContent }))
      .to.eql(quintileRangeLabels)
  })

  it('should render bar labels', () => {
    testbed.render()

    const labels = testbed.findChildrenBySelector(`.${styles.barContainer} text`)
    expect(labels.length).to.eq(5)
    labels.forEach((l, i) => {
      expect(l.textContent).to.eq(quintile[i].toString())
      expect(l.attributes.x.value).to.eq(((i * 20) + 10).toString())
      expect(l.attributes.y.value > 0).to.eq(true)
    })
  })

  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(5)
    tableRows.forEach((tableRow, index) => {
      const columns = tableRow.querySelectorAll('td')
      expect(testbed.getText(columns[0])).to.eq(quintileRangeLabels[index])
      expect(testbed.getText(columns[1])).to.eq(`${quintile[index]}`)
    })
  })
})
