/* global cy */
import infoInput from './index.vue'

const mount = (r: any = {}, m: any = {}) => {
    // let vm
    let modelData = {
        name: '',
        selectValue: '',
        disabled: false
    }
    if (m) {
        Object.assign(modelData, m)
    }
    let row = {
        model: 'name',
        size: 'medium',
        placeholder: () => '请输入姓名',
        clearable: true,
        autofocus: true,
        maxlength: 20,
        inputType: 'text',
        minRow: 1,
        disabled: (modelData) => modelData.disabled,
        prefixIcon: 'el-icon-user',
        showPassword: false,
        button: {
            show: true,
            tip: true,
            disabled: () => false,
            methods: cy.spy().as('searchBtnClick')
        }
    }
    if (r) {
        Object.assign(row, r)
    }
    cy.mount(infoInput, {
        propsData: {
            row,
            modelData
        }
    })
}

describe('<InfoInput/> 组件', () => {
    it('正确呈现输入元素', () => {
        mount()
        cy.get('.info-input').should('be.visible')
        cy.get('.info-input input').should('have.attr', 'type', 'text')
        cy.get('.info-input input').should('have.attr', 'placeholder', '请输入姓名')
        cy.get('.info-input input').should('have.class', 'el-input__inner')
        cy.get('.info-input input').should('have.attr', 'maxlength', '20')
    })
    it('正确呈现按钮元素', () => {
        mount()
        cy.get('.info-input .el-button').should('be.visible')
        cy.get('.info-input .el-button').should('have.class', 'el-button')
        cy.get('.info-input .el-button span .el-icon').should('exist')
    })
    it('正确呈现选择元素', () => {
        // index.vue 中 v-slot:selectSlotName 应为 v-slot:[selectSlotName]
        mount({
            select: {
                options: () => [
                    { label: '选项1', value: '1' },
                    { label: '选项2', value: '2' }
                ],
                placeholder: () => '请选择',
                clearable: true,
                model: 'selectValue',
                slot: 'prepend',
                methods: cy.spy().as('selectClick')
            }
        })
        cy.get('.info-input .el-select').should('be.visible')
        cy.get('.info-input .el-select input').should('have.attr', 'placeholder', '请选择')
        cy.get('.info-input .el-select .el-input__suffix').should('be.visible')
        cy.get('.info-input .el-select .el-select__caret').should('be.visible')
        cy.get('.info-input .el-select .el-select__tags-text').should('not.exist')
    })
    it('正确处理按钮单击事件', () => {
        mount()
        // 获取按钮元素
        cy.get('.info-input .el-input-group__append .el-button').as('searchBtn')
        // 模拟点击事件
        cy.get('@searchBtn').click({ force: true })
        // 断言 spy 对象是否被调用
        cy.get('@searchBtnClick').should('have.been.called')
    })

    it('正确处理选择更改事件', () => {
        mount({
            select: {
                options: () => [
                    { label: '选项1', value: '1' },
                    { label: '选项2', value: '2' }
                ],
                placeholder: () => '请选择',
                clearable: true,
                model: 'selectValue',
                slot: 'prepend',
                methods: cy.spy().as('selectClick')
            }
        })
        cy.get('.info-input .el-select').click()
        cy.get('.el-select-dropdown__item').first().click()
        cy.get('@selectClick').should('have.been.called')
    })
    it('呈现输入元素', () => {
        mount()
        cy.get('.info-input input[type="text"]').should('exist')
    })

    it('正确设置输入类型', () => {
        mount({inputType: 'number'})
        // 获取页面上的名为'.info-input input'的元素，并检查其属性'type'的值是否为'number'
        cy.get('.info-input input').should('have.attr', 'type', 'number')
        // 输入'string'
        cy.get('.info-input input').type('string')
        // 输入'123'
        cy.get('.info-input input').type('123')
        // 因设置为只输入数据 查其值是否为'123'
        cy.get('.info-input input').should('have.value', '123')
    })
    it('在输入时更新v-model', () => {
        mount()
        cy.get('.info-input input').type('allright')
        cy.get('.info-input input').invoke('val').should('eq', 'allright')
    })
})