/* global cy */
import { ObjectInterface } from 'script'
import InfoSelect from './index.vue'

const mount = (
    r: ObjectInterface = {},
    m: any = {
        ceshi: 1
    }
) => {
    let row = {
        label: '测试',
        model: 'ceshi',
        clearable: true,
        placeholder: () => '请选择',
        options: () => [
            {
                name: 'ceshi2',
                id: 2
            },
            {
                name: 'ceshi1',
                id: 1
            },
            {
                name: 'filter',
                id: 3
            }
        ],
        optionsLabel: 'name',
        optionsValue: 'id',
        methods: cy.spy().as('changeEvent')
    }
    if (r) {
        row = Object.assign(row, r)
    }

    let modelData = {
        ceshi: 1
    }
    if (m) {
        modelData = m
    }
    let propsData: ObjectInterface = {
        row,
        modelData
    }
    cy.mount(InfoSelect, {
        propsData
    })
}

describe('<InfoSelect/>', () => {
    it('呈现选项并发出更改事件', () => {
        mount()
        cy.get('.info-select').click()
        cy.get('.info-select').find('.el-input__suffix').should('have.length', 1)
        cy.get('.el-select-dropdown__item').contains('ceshi2').click()
        cy.get('.el-input__inner').should('have.value', 'ceshi2')
        cy.get('@changeEvent').should('have.been.called')
        // 测试clear功能
        cy.get('.info-select').click().find('.el-select__icon').click()
        cy.get('.el-input__inner').should('have.attr', 'placeholder', '请选择')
    })
    it('校验禁用', () => {
        mount({
            disabled: () => true
        })
        cy.get('.info-select').find('.is-disabled').should('have.length', 1)
    })
    it('选项禁用', () => {
        mount({
            disabled: () => false,
            options: () => [
                {
                    name: 'ceshi2',
                    disabled: () => true,
                    id: 2
                },
                {
                    name: 'ceshi1',
                    disabled: () => true,
                    id: 1
                },
                {
                    name: 'ceshi3',
                    id: 3
                }
            ]
        })
        cy.get('.el-select-dropdown__list').find('.is-disabled').should('have.length', 2)
    })
    // filterable
    it('可搜索下拉框', () => {
        mount({
            filterable: true
        })
        // 在搜索框中输入 f
        cy.get('.info-select').click().type('f')
        // 确认搜索结果只有一条
        cy.get('.el-select-dropdown__item').filter(':not(:hidden)').should('have.length', 1)
        cy.get('.el-select-dropdown__item').contains('filter').click()
        cy.get('.el-input__inner').should('have.value', 'filter')
    })

    // allow-create
    it('可创建选项', () => {
        mount(
            {
                filterable: true,
                isCustom: true,
                multiple: true
            },
            []
        )
        // 在搜索框中输入 new, 并回车确认是否已添加
        cy.get('.info-select').click().type('new{enter}')
        cy.get('.info-select').click().type('new2{enter}')
        cy.get('.info-select').click().type('new3{enter}')
        cy.get('.el-select-tags-wrapper').find('.el-tag').should('have.length', 3)
    })

    // 多选限制最多两条
    it('多选限制最多两条', () => {
        mount(
            {
                multiple: true,
                multipleLimit: 2
            },
            []
        )
        cy.get('.info-select').click()
        cy.contains('ceshi2').click()
        cy.contains('ceshi1').click()
        // 选择两个后，其它无法选择
        cy.contains('filter').parent().should('have.class', 'is-disabled')
    })
    // 修改值时 change事件调用正常
    it('修改值时 change事件调用正常', () => {
        mount()
        cy.get('.info-select').click()
        cy.contains('ceshi2').click()
        cy.get('@changeEvent').should('have.been.called')
    })
})