/* global cy */
import { ObjectInterface } from 'script'
import { FormRule } from '../formConfig'
import InfoDynamic from './index.vue'

describe('<DynamicTable/>', () => {
    const propsData: ObjectInterface = {
        row: {
            label: '字段',
            model: 'fields',
            height: 'auto',
            showIndex: true,
            noOper: () => false,
            pagination: true,
            rule: (rule: FormRule) => [
                rule.setInputRule({
                    type: 'infoInput',
                    label: '测试字段1',
                    labelI18n: true,
                    model: 'name',
                    isSearch: true,
                    disabledHeader: () => false,
                    show: () => true
                })
                    .setInputRule({
                        type: 'infoInput',
                        label: '测试字段2',
                        noTrim: true,
                        labelI18n: true,
                        model: 'description',
                        show: () => true
                    })
                    .setSelectRule({
                        type: 'infoSelect',
                        label: '测试字段3',
                        labelI18n: true,
                        model: 'type',
                        options: () => [
                            {
                                label: '测试1',
                                value: 1
                            },
                            {
                                label: '测试2',
                                value: 2
                            }
                        ]
                    })
                    .setInputRule({
                        type: 'infoInput',
                        label: '测试字段4',
                        labelI18n: true,
                        model: 'alias',
                        show: () => true
                    })
            ]
        },
        modelData: {
            fields: []
        }
    }
    it('正确呈现表', () => {
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.info-dynamic').should('exist')
        cy.get('.el-table__header').should('exist')
        cy.get('.el-table__body').should('exist')
    })

    it('向表中添加新行', () => {
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.oper-header').find('.el-icon').click()
        cy.get('.el-table__body').should('have.length', 1)
        cy.get('.el-table__body').find('.el-table__cell').should('have.length', 6) // 测试index
    })

    it('在表中搜索数据', () => {
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.el-table__body').should('have.length', 1)
    })

    it('从表中删除一行', () => {
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.el-table__body').should('have.length', 1)
        cy.get('.el-table-fixed-column--right').find('i[title="删除"]').click()
        cy.get('.el-table__empty-text').should('have.text', 'No Data')
    })


    it('分页', () => {
        propsData.row.pagination = false
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.el-pagination').should('exist')
    })

    it('noOper属性', () => {
        propsData.row.noOper = () => true
        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.el-table__header').find('.el-table__cell').should('have.length', 5)
    })

    it('showUpload属性', () => {
        propsData.row.noOper = () => false
        propsData.row.showUpload = true

        cy.mount(InfoDynamic, {
            propsData
        })
        cy.get('.oper-header').find('i[title="上传"]').should('have.length', 1)
    })
})