import { createAppLocalVue } from '@/../tests/utils' // should be the first to implement default mocks
import TickOrChoose from '../TickOrChoose'
import { mount } from '@vue/test-utils'
import store from '@/store'
import router from '@/router'

const localVue = createAppLocalVue({
  appSettings: {
    myAccount: {
      ampPreference: true,
    },
  },
})

describe('Global - Components - Blocks - Choice Boxes - Tick Or Choose', () => {
  it('should render checkbox by default', async () => {
    let wrapper = mount(TickOrChoose, {
      localVue,
      propsData: {
        title: 'test title',
        subTitle: 'test subtitle',
        options: ['text only', { value: 12, text: 'options object' }, [22, 'Array option']],
      },
    })

    // Titles
    expect(wrapper.html()).toContain('test title')
    expect(wrapper.html()).toContain('test subtitle')

    // Test Options
    let inputs = wrapper.findAll('input')
    let labels = wrapper.findAll('label')

    expect(inputs.length).toBe(3)
    expect(labels.length).toBe(3)

    // Option 1
    expect(inputs.at(0).attributes('type')).toBe('checkbox')
    expect(inputs.at(0).attributes('value')).toBe('0')
    expect(labels.at(0).html()).toContain('text only')

    // Option 2
    expect(inputs.at(1).attributes('type')).toBe('checkbox')
    expect(inputs.at(1).attributes('value')).toBe('12')
    expect(labels.at(1).html()).toContain('options object')

    // Option 3
    expect(inputs.at(2).attributes('type')).toBe('checkbox')
    expect(inputs.at(2).attributes('value')).toBe('22')
    expect(labels.at(2).html()).toContain('Array option')

    // Test Value Change
    inputs.at(1).trigger('click')
    await wrapper.vm.$nextTick() // Wait until $emits have been handled

    expect(wrapper.emitted().input[0]).toEqual([[false, 12, false]])

    // Snapshot
    expect(wrapper.element).toMatchSnapshot()
  })

  it('should render radio', async () => {
    let wrapper = mount(TickOrChoose, {
      localVue,
      propsData: {
        title: 'test title',
        subTitle: 'test subtitle',
        type: 'radio',
        options: ['text only', { value: 12, text: 'options object' }, [22, 'Array option']],
      },
    })

    // Titles
    expect(wrapper.html()).toContain('test title')
    expect(wrapper.html()).toContain('test subtitle')

    // Test Options
    let inputs = wrapper.findAll('input')
    let labels = wrapper.findAll('label')

    expect(inputs.length).toBe(3)
    expect(labels.length).toBe(3)

    // Option 1
    expect(inputs.at(0).attributes('type')).toBe('radio')
    expect(inputs.at(0).attributes('value')).toBe('0')
    expect(labels.at(0).html()).toContain('text only')

    // Option 2
    expect(inputs.at(1).attributes('type')).toBe('radio')
    expect(inputs.at(1).attributes('value')).toBe('12')
    expect(labels.at(1).html()).toContain('options object')

    // Option 3
    expect(inputs.at(2).attributes('type')).toBe('radio')
    expect(inputs.at(2).attributes('value')).toBe('22')
    expect(labels.at(2).html()).toContain('Array option')

    // Test Value Change
    inputs.at(1).trigger('click')
    await wrapper.vm.$nextTick() // Wait until $emits have been handled

    expect(wrapper.emitted().input[0]).toEqual([12])

    // Snapshot
    expect(wrapper.element).toMatchSnapshot()
  })
})
