/* global describe it expect beforeEach afterEach */

var $ = window.jQuery

describe('details-polyfill', function () {

'use strict'
var GOVUK = window.GOVUK

beforeEach(function (done) {
  // Sample markup
  this.$content = $(
    '<details>' +
    '<summary><span class="summary">Summary</span></summary>' +
    '<div><p>Hidden content</p></div>' +
    '</details>'
  )

  // Find elements
  var $summaries = this.$content.find('summary')
  var $hiddenContent = this.$content.find('div')

  this.$summary1 = $summaries.eq(0)
  this.$hiddenContent1 = $hiddenContent.eq(0)

  // Add to page
  $(document.body).append(this.$content)

  setTimeout(function () {
    done()
  }, 1)
})

afterEach(function () {
  this.detailsPolyfill = null
  this.$content.remove()
})

describe('When the polyfill is initialised', function () {
  beforeEach(function () {
    // Initialise detailsPolyfill
    this.detailsPolyfill = GOVUK.details.addDetailsPolyfill()
    GOVUK.details.started = false
  })
  it('should add to summary the button role', function () {
    expect(this.$summary1.attr('role')).toBe('button')
  })

  it('should set the element controlled by the summary using aria-controls', function () {
    expect(this.$summary1.attr('aria-controls')).toBe('details-content-0')
  })

  it('should set the expanded state of the summary to false using aria-expanded', function () {
    expect(this.$summary1.attr('aria-expanded')).toBe('false')
  })

  it('should add a unique id to the hidden content in order to be controlled by the summary', function () {
    expect(this.$hiddenContent1.attr('id')).toBe('details-content-0')
  })

  it('should present the content as hidden using aria-hidden', function () {
    expect(this.$hiddenContent1.attr('aria-hidden')).toBe('true')
  })

  it('should visually hide the content', function () {
    expect(this.$hiddenContent1.is(':visible')).toBe(false)
  })

  describe('and when summary is clicked', function () {
    beforeEach(function () {
      // Trigger click on summary
      this.$summary1.click()
    })

    it('should indicate the expanded state of the summary using aria-expanded', function () {
      expect(this.$summary1.attr('aria-expanded')).toBe('true')
    })

    it('should make the content visible', function () {
      expect(this.$hiddenContent1.is(':visible')).toBe(true)
    })

    it('should indicate the visible state of the content using aria-hidden', function () {
      expect(this.$hiddenContent1.attr('aria-hidden')).toBe('false')
    })

    it('should indicate the open state of the content', function () {
      expect(this.$content.attr('open')).toBe('open')
    })
  })
})

})