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

const mount = (r: any = {}, m: any = {}) => {
    let row = {
        model: 'testModel',
        labelWidth: '100px',
        addable: true,
        closable: true,
        paneLabel: null,
        rule: (rule) => {
            rule.setInputRule({ type: 'infoInput', label: 'url', model: 'url' }).setSelectRule({
                type: 'infoCustomSelect',
                label: 'name',
                model: 'name',
                options: () => [
                    { label: 'get', value: 'get' },
                    { label: 'post', value: 'post' }
                ]
            })
        }
    }
    // 合并 row 和 r
    row = Object.assign(row, r)
    let modelData = {
        testModel: [
            {
                url: 'url',
                name: 'get'
            }
        ]
    }
    // 合并 modelData 和 m
    modelData = Object.assign(modelData, m)
    let propsData = {
        row,
        modelData
    }
    return cy.mount(AddForm, {
        propsData
    })
}

describe('<AddForm/> 组件', () => {
    it('应该正确渲染AddForm组件', () => {
        mount()
        cy.get('.el-tabs__nav-scroll')
            .find('.el-tabs__item')
            .should('have.length', 1)
            .then((tabs) => {
                expect(tabs[0]).to.have.text('set_1')
            })

        cy.get('.add-form .el-form-item')
            .should('have.length', 2)
            .then((formItems) => {
                expect(formItems[0]).to.contain.text('url')
                expect(formItems[1]).to.contain.text('name')
            })
    })

    it('应该添加一个新的标签时，点击添加按钮', () => {
        mount()

        cy.get('.el-tabs__nav-scroll').find('.el-tabs__item').should('have.length', 1)

        cy.get('.el-tabs__new-tab').click()

        cy.get('.el-tabs__nav-scroll')
            .find('.el-tabs__item')
            .should('have.length', 2)
            .then((tabs) => {
                expect(tabs[0]).to.have.text('set_1')
                expect(tabs[1]).to.have.text('set_2')
            })
    })

    it('当点击关闭按钮时应该删除一个标签', () => {
        mount()

        cy.get('.el-tabs__nav-scroll').find('.el-tabs__item').should('have.length', 1)
        cy.get('.el-tabs__new-tab').click()
        cy.get('.el-tabs__new-tab').click()
        cy.get('.el-tabs__nav-wrap').find('.is-icon-close').last().click()

        cy.get('.el-tabs__nav-scroll')
            .find('.el-tabs__item')
            .should('have.length', 2)
            .then((tabs) => {
                expect(tabs[0]).to.have.text('set_1')
            })
    })

    it('当点标签数据多时，应显示左右切换按钮', () => {
        mount()
        cy.get('.el-tabs__nav-scroll').find('.el-tabs__item').should('have.length', 1)
        for (let i = 0; i < 20; i++) {
            cy.get('.el-tabs__new-tab').click()
        }
        // 判断是否显示
        cy.get('.el-tabs__nav-prev').should('exist')
        cy.get('.el-tabs__nav-next').should('exist')
    })

    it('配置标签不允许添加', () => {
        mount({
            addable: false
        })
        cy.get('.el-tabs__new-tab').should('not.exist')
    })

    it('配置标签不允许关闭', () => {
        mount({
            closable: false
        })
        cy.get('#tab-1 > i').should('not.exist')
    })

    it('判断 labelWidth 生效', () => {
        mount({
            labelWidth: '200px'
        })
        // 判断宽度 200px
        cy.contains('url').should('have.css', 'width', '200px')
    })
})