import { fromJS } from 'immutable'

import ItemAnalysis from '../../../../../common/records/ItemAnalysis'

import AnswerFrequencySummary from '../index'
import styles from '../styles.css'

describe('AnswerFrequencySummary', () => {
  const standardItemAnalysis = new ItemAnalysis(fromJS({
    itemId: '3',
    itemAnalysis: {
      scoreInfo: {
        resultSum: 5,
        resultCount: 1
      },
      unansweredInfo: 1,
      choiceInfo: [
        {
          choiceCount: 2,
          id: 'id',
          itemBody: '<p>Item&gt;Body</p>',
          correct: true
        },
        {
          choiceCount: 3,
          id: 'not_id',
          itemBody: 'choice Item Body not correct',
          correct: false
        },
        {
          choiceCount: 4,
          id: 'not_id_again',
          itemBody: 'choice Item Body not correct still',
          correct: false
        }
      ]
    }
  }))

  const testbed = createTestbed(AnswerFrequencySummary, {
    itemAnalysis: standardItemAnalysis
  })

  shouldRenderComponent(testbed, {}, AnswerFrequencySummary)

  it('should render the choice chart', () => {
    testbed.render()
    const output = testbed.getText()
    // Add more stuff here when we render an overview
    expect(output).to.include('Item>Body')
    expect(output).to.include('Respondents')
  })

  it('should render the choice chart with the body html stripped', () => {
    testbed.render()
    const output = testbed.getText()
    expect(output).to.include('Item>Body')
    expect(output).to.not.include('<p>')
  })

  it('should render correct label when choice body has no text content', () => {
    testbed.render({ itemAnalysis: standardItemAnalysis.setIn(['itemAnalysis', 'choiceInfo'], fromJS([
      {
        choiceCount: 2,
        id: 'id',
        itemBody: '<p><strong></strong></p>',
        correct: true
      }
    ]))})
    const cell = testbed.findChildrenByClass(styles.answerTextfield)[0]
    const output = testbed.getText(cell)
    expect(output).to.include('Correct Answer')
  })

  it('should render the correct row w/ correct labeling', () => {
    testbed.render()
    const rowText = testbed.rootNode.getElementsByClassName(styles.bar)[0].parentNode.parentNode.innerText
    expect(rowText).to.include('Correct Answer')
    expect(rowText).to.include('Item>Body')
  })

  it('should render the unanswered row', () => {
    testbed.render()
    const row = testbed.findChildrenBySelector('tbody tr:last-child')[0]
    const colTexts = testbed.findChildrenBySelector('th, td', row).map((c) => c.innerText)
    expect(colTexts.slice(0, 4).map((s) => s.trim())).to.eql(['Incorrect Answer', '(No answer)', '1', '10%'])
  })

  it('should render the bar graph', () => {
    testbed.render()
    const widths = testbed.findChildrenByClass(styles.bar).map((b) => b.style.width)
    expect(widths).to.eql(['50%', '75%', '100%', '25%'])
  })
})
