import { expect } from 'chai'
import { mount } from '@vue/test-utils'
import ItemInput from '@/components/ItemInput.vue'

const MOCK_SOURCE = [
    { id: 1, name: "Épée", base_price: 20 },
    { id: 2, name: "Arc", base_price: 30 },
]

const withItemFactory = function (item) {
    const wrapper = mount(ItemInput, {
        propsData: {
            source: MOCK_SOURCE,
        }
    })
    wrapper.setData({ item })
    return wrapper
}

describe('ItemInput.vue', () => {

    // Tests on validation of the item data
    it('item with name and price is valid', () => {
        const localItem = {
            item: {
                id: 0,
                name: 'Epee',
                base_price: 200
            }
        }
        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(true)
    })

    it('item without data is not valid', () => {
        const localItem = {
            item: {
                id: 0,
                name: '',
                base_price: ''
            }
        }
        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
    })

    it('item without price is not valid', () => {
        const localItem = {
            item: {
                id: 0,
                name: 'Epee',
                base_price: ''
            }
        }
        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
    })

    it('item without name is not valid', () => {
        const localItem = {
            item: {
                id: 0,
                name: '',
                base_price: 200
            }
        }
        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
    })

    it('item price must be a number', () => {
        const localItem = {
            item: {
                id: 0,
                name: 'Epee',
                base_price: 'cheap'
            }
        }
        expect(ItemInput.computed.isItemValid.call(localItem)).to.equal(false)
    })

    // Test on auto-completion
    it('show completion suggestions on input', () => {
        const wrapper = withItemFactory({ id: 0, name: '', base_price: '' })
        const input = wrapper.find({ name: "name" })
        const suggestionBox = wrapper.find('.dropdown')
        console.log(input)
        expect(suggestionBox.classes('is-active')).to.equal(true)
    })

    it('hides suggestion box when no suggestions are available', () => {

    })

    it('click on suggestion sets the item', () => {

    })
})