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

describe('<InfoButton/> 组件', () => {
    const row = {
        operation: [
            {
                code: 'edit',
                label: '编辑',
                icon: 'el-icon-edit',
                type: 'primary',
                tooltip: '编辑'
            },
            {
                code: 'delete',
                label: '删除',
                icon: 'el-icon-delete',
                type: 'danger',
                tooltip: '删除',
                show: (data) => data.status === 'ENABLED',
                disabled: (data) => false,
                methods: () => console.log('删除')
            },
            {
                code: 'plain',
                label: 'plain',
                plain: true,
                icon: 'el-icon-edit',
                type: 'primary',
                tooltip: 'plain'
            },
            {
                code: 'round',
                label: 'round',
                round: true,
                icon: 'el-icon-edit',
                type: 'primary',
                tooltip: 'round'
            }
        ],
        size: '',
        model: 'model',
        deepData: 'deepData'
    }

    it('渲染组件', () => {
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: {},
                addIndex: ''
            }
        })
        cy.get('.info-button').should('be.visible')
    })

    it('点击按钮事件正常响应', () => {
        row.operation[1].methods = cy.spy().as('console')
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: false },
                addIndex: ''
            }
        })

        cy.get('.el-button').eq(1).click()
        cy.window().then(async (win) => {
            cy.get('@console').should('have.been.called')
        })
    })

    it('禁用按钮', () => {
        row.operation[1].disabled = () => true
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: true },
                addIndex: ''
            }
        })

        cy.get('.el-button').eq(1).should('be.disabled')
    })

    it('按钮大小设置', () => {
        row.size = 'large'
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: true },
                addIndex: ''
            }
        })
        cy.get('.el-button').eq(0).should('have.class', 'el-button--large')
        // el-button--small
    })

    it('按钮 hover 正确显示 tips', () => {
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: true },
                addIndex: ''
            }
        })
        // 通过 rightclick 实现 hover 效果
        cy.get('.el-button').eq(0).rightclick().should('have.css', 'background-color', 'rgb(121, 187, 255)') // 举例：验证背景颜色是否变化
        // tips 显示
        cy.get('.el-popper').should('exist')
    })

    it('按钮 plain 样式显示', () => {
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: true },
                addIndex: ''
            }
        })
        cy.get('.is-plain').should('exist')
    })

    it('按钮 round 样式显示', () => {
        cy.mount(InfoButton, {
            props: {
                row,
                modelData: { status: 'ENABLED', isLocked: true },
                addIndex: ''
            }
        })
        cy.get('.is-round').should('exist')
    })
})