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

describe('<InfoDialog/> 组件', () => {
    let options: ObjectInterface = reactive({
        title: '测试dialog',
        isShowDialog: true,
        width: '50%',
        isShowBtn: true
    })
    const emits = {
        closeDialog: () => {
            options.isShowDialog = false
        },
        confirmDialog: () => {
            console.log('confirmDialog')
        }
    }
    it('是否能正确打开及关闭', () => {
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })

        cy.get('.info-dialog').should('be.visible')
        cy.get('.el-dialog__header').contains('测试dialog')
        cy.get('.el-dialog__headerbtn').click()
    })

    it('关闭时是否出发回调', () => {
        options.isShowDialog = true
        emits.closeDialog = cy.spy().as('closeDialog')
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.el-dialog__headerbtn').click()
        cy.get('@closeDialog').should('have.been.called')
    })
    it('确认按钮点击的回调', () => {
        emits.confirmDialog = cy.spy().as('confirmDialog')
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.el-dialog__footer .dialog-footer .el-button').eq(0).click()
        cy.get('@confirmDialog').should('have.been.called')
    })

    it('底部关闭按钮放到左边', () => {
        emits.confirmDialog = cy.spy().as('confirmDialog')
        options.isCloseLeft = true
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.el-dialog__footer .dialog-footer .el-button').eq(0).contains('取消')
    })

    it('测试drawer能否正确打开及关闭', () => {
        options.isShowDialog = true
        options.isDrawer = true
        options.clickModalClose = true
        emits.closeDialog = () => {
            options.isShowDialog = false
        }
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.info-dialog').should('be.visible')
        cy.get('.info-dialog').should('have.attr', 'aria-label', '测试dialog')
        cy.get('.el-overlay').trigger('mousemove', 10, 20).click()
        cy.get('.el-overlay').should('have.attr', 'style').and('match', /display: none/)
    })

    it('drawer关闭时是否出发回调', () => {
        options.isShowDialog = true
        emits.closeDialog = cy.spy().as('closeDialog')
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.el-overlay').trigger('mousemove', 10, 20).click()
        cy.get('@closeDialog').should('have.been.called')
    })
    it('drawer确认按钮点击的回调', () => {
        emits.confirmDialog = cy.spy().as('confirmDialog')
        options.withHeader = true
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
        cy.get('.el-drawer__header').contains('测试dialog')
        cy.get('.el-drawer__footer .dialog-footer .el-button').eq(1).click()
        cy.get('@confirmDialog').should('have.been.called')
    })

    it('底部关闭按钮放到左边', () => {
        emits.confirmDialog = cy.spy().as('confirmDialog')
        options.isCloseLeft = true
        cy.mount(InfoDialog, {
            props: {
                options
            },
            emits
        })
      cy.get('.el-drawer__footer .dialog-footer .el-button').eq(0).contains('取消')
    })

})