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

const mount = (r: any = {}, m: any = {}) => {
    let row = {
        options: () => [
            { value: '1', label: 'Option 1' },
            { value: '2', label: 'Option 2' },
            { value: '3', label: 'Option 3' }
        ],
        model: 'selectedOption',
        placeholder: () => '请选择',
        optionsValue: 'value',
        optionsLabel: 'label',
        clearable: true
    }
    // 合并
    Object.assign(row, r)

    let modelData = { selectedOption: [] }
    Object.assign(modelData, m)
    cy.mount(InfoCascader, {
        propsData: {
            row,
            modelData
        }
    })
}

describe('<InfoCascader/> 组件', () => {
    it('显示正确', () => {
        mount()
        cy.get('.info-cascader').should('be.visible')
        cy.get('.el-cascader').should('have.length', 1)
        cy.get('.el-input__inner').should('have.attr', 'placeholder', '请选择')
        cy.get('.el-cascader__tags-text').should('not.exist')
    })

    it('正确选择一个选项', () => {
        mount({}, { selectedOption: ['1'] })
        cy.get('.el-input__inner').should('have.value', 'Option 1')
        cy.get('.el-cascader').click()
        cy.get('.el-cascader-node').eq(1).click()
        cy.get('.el-input__inner').should('have.value', 'Option 2')
    })

    it('显示可清除选项按钮，并清空数据', () => {
        mount({}, { selectedOption: ['1'] })
        cy.get('.el-cascader').rightclick()
        cy.get('.icon-circle-close').should('exist')
        cy.get('.icon-circle-close').click()
        cy.get('.el-input__inner').should('have.attr', 'placeholder', '请选择')
    })
})