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

describe('<InfoDropdown/>下拉菜单', () => {
    it('挂载下拉菜单', () => {
        cy.mount(InfoDropdown, {
            props: {
                row: {
                    title: () => 'Dropdown Title',
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1' },
                        { name: 'Option 2', command: 'option2' }
                    ]
                }
            }
        })

        cy.get('.el-dropdown').should('be.visible')
        cy.get('.el-dropdown').should('contain', 'Dropdown Title')
    })

    it('点击展示下拉菜单', () => {
        cy.mount(InfoDropdown, {
            props: {
                row: {
                    title: () => 'Dropdown Title',
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1' },
                        { name: 'Option 2', command: 'option2' }
                    ],
                    method: cy.spy().as('changeHandler')
                }
            }
        })

        cy.get('.el-dropdown').click()
        cy.get('.el-dropdown-menu').should('be.visible')
    })

    it('设置菜单不可选', () => {
        cy.mount(InfoDropdown, {
            props: {
                row: {
                    title: () => 'Dropdown Title',
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1', disabled: () => true },
                        { name: 'Option 2', command: 'option2' }
                    ]
                }
            }
        })

        cy.get('.el-dropdown').click()
        cy.get('.el-dropdown-menu__item').eq(0).should('have.class', 'is-disabled')
    })

    it('设置下拉按钮不可选', () => {
        cy.mount(InfoDropdown, {
            props: {
                row: {
                    disabled: () => true,
                    title: () => 'Dropdown Title',
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1', disabled: () => true },
                        { name: 'Option 2', command: 'option2' }
                    ]
                }
            }
        })

        cy.get('.el-tooltip__trigger').should('have.class', 'is-disabled')
    })
    it('设置提示语正常显示', () => {
        cy.mount(InfoDropdown, {
            props: {
                row: {
                    title: () => 'Dropdown Title',
                    useTip: true,
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1', disabled: () => true },
                        { name: 'Option 2', command: 'option2' }
                    ]
                }
            }
        })

        cy.get('.el-dropdown .el-icon--right').trigger('mouseenter')
        cy.get('.el-popper.is-dark').should('have.text', 'Dropdown Title')
    })

    it('选项点击事件正常响应', () => {
        const handleCommand = cy.stub()

        cy.mount(InfoDropdown, {
            props: {
                row: {
                    title: () => 'Dropdown Title',
                    dropdown: () => [
                        { name: 'Option 1', command: 'option1' },
                        { name: 'Option 2', command: 'option2' }
                    ],
                    method: handleCommand
                }
            }
        })

        cy.get('.el-dropdown').click()
        cy.get('.el-dropdown-menu').contains('Option 1').click()
        cy.wrap(handleCommand).should('have.been.calledWith', 'option1')
    })
})