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

describe('<InfoTab/> 组件', () => {
    const configTab: ObjectInterface = reactive(
        {
            data: {
                Tab1: {
                    label: 'Tab 1',
                    name: 'Tab1',
                    params: {
                        id: '0'
                    }
                },
                Tab2: {
                    label: 'Tab 2',
                    name: 'Tab2',
                    params: {
                        id: '1'
                    }
                },
                Tab3: {
                    label: 'Tab 3',
                    name: 'Tab3',
                    params: {
                        id: '1'
                    }
                }
            }
        }
    )
    it('是否能正确渲染', () => {
        cy.mount(InfoTab, {
            props: {
                configTab
            }
        })
        cy.get('.el-tabs__item').should('have.length', 3)
        cy.get('.el-tabs__item').eq(0).should('contain', 'Tab 1')
        cy.get('.el-tabs__item').eq(1).should('contain', 'Tab 2')
        cy.get('.el-tabs__item').eq(2).should('contain', 'Tab 3')
    })

    it('点击切换tab active是否正确', () => {
        configTab.method = cy.spy().as('clickHandler')
        cy.mount(InfoTab, {
            props: {
                configTab
            }
        })
        cy.get('.el-tabs__item').eq(1).click()
        cy.get('@clickHandler').should('have.been.called')
        cy.get('.el-tabs__item').eq(1).should('have.class', 'is-active')
        cy.get('.el-tabs__item').eq(0).should('not.have.class', 'is-active')
    })

    it('添加功能', () => {
        configTab.addable = true
        configTab.addMethod = () => {
            configTab.data.NewTab = {
                label: 'New Tab',
                name: 'NewTab'
            }
            return 'New Tab'
        }
        cy.mount(InfoTab, {
            props: {
                configTab
            }
        })
        cy.get('.el-tabs__new-tab').click()
        cy.get('.el-tabs__item').should('have.length', 4)
        cy.get('.el-tabs__item').eq(3).should('contain', 'New Tab')
    })

    it('删除功能', () => {
        configTab.addable = false
        configTab.editable = true
        cy.mount(InfoTab, {
            props: {
                configTab
            }
        })
        cy.get('.el-tabs__item').eq(1).find('.is-icon-close').click()
        cy.get('.el-tabs__item').should('have.length', 3)
        cy.get('.el-tabs__item').eq(1).should('contain', 'Tab 3')
    })

})