/* global cy */
import { h, reactive } from 'vue'
import InfoSteps from './InfoSteps.vue'

describe('<InfoSteps>', () => {
    const createSteps = () => reactive([
        { title: '测试step1', id: 'step1' },
        { title: '测试step2', id: 'step2' },
        { title: '测试step3', id: 'step3' }
    ])

    const mountComponent = ({
        props = {},
        slot = true
    }: {
        props?: Record<string, any>
        slot?: boolean
    } = {}) => {
        const defaultMethods = {
            cancel: cy.stub().as('cancel'),
            prev: cy.stub().as('prev'),
            next: cy.stub().as('next'),
            complete: cy.stub().as('complete'),
            nativeActive: cy.stub().as('nativeActive')
        }
        const mergedMethods = {
            ...defaultMethods,
            ...(props.methods || {})
        }
        const mergedProps = {
            config: reactive({
                direction: 'horizontal',
                buttonAligning: 'left'
            }),
            steps: createSteps(),
            isShowButton: true,
            defaultIndex: 1,
            ...props,
            methods: mergedMethods
        }

        cy.mount(InfoSteps, {
            props: mergedProps,
            slots: slot
                ? {
                    default: (slotProps: { active: number }) => h('div', { class: 'slot-active' }, `active:${slotProps.active}`)
                }
                : undefined
        })

        return mergedProps
    }

    it('显示正确的 step 和当前插槽内容', () => {
        mountComponent({
            props: {
                isShowButton: false
            }
        })

        cy.get('.info-steps').should('have.class', 'horizontal-steps')
        cy.get('.info-steps .el-step').should('have.length', 3)
        cy.get('.slot-active').should('have.text', 'active:1')
    })

    it('点击“下一步”时调用 next 并切换到下一步', () => {
        mountComponent({
            props: {
                methods: {
                    next: cy.stub().returns(true).as('next')
                }
            }
        })

        cy.get('.info-steps .el-step__head').eq(0).should('have.class', 'is-process')
        cy.contains('下一步').click()
        cy.get('@next').should('have.been.calledOnce')
        cy.get('.info-steps .el-step__head').eq(1).should('have.class', 'is-process')
        cy.get('.slot-active').should('have.text', 'active:2')
        cy.contains('上一步').should('exist')
    })

    it('当 next 返回 false 时停留在当前步骤', () => {
        mountComponent({
            props: {
                methods: {
                    next: cy.stub().returns(false).as('next')
                }
            }
        })

        cy.contains('下一步').click()
        cy.get('@next').should('have.been.calledOnce')
        cy.get('.info-steps .el-step__head').eq(0).should('have.class', 'is-process')
        cy.get('.slot-active').should('have.text', 'active:1')
        cy.contains('上一步').should('not.exist')
    })

    it('当 next 返回 Promise<true> 时异步进入下一步', () => {
        mountComponent({
            props: {
                methods: {
                    next: cy.stub().returns(Promise.resolve(true)).as('next')
                }
            }
        })

        cy.contains('下一步').click()
        cy.get('@next').should('have.been.calledOnce')
        cy.get('.info-steps .el-step__head').eq(1).should('have.class', 'is-process')
        cy.get('.slot-active').should('have.text', 'active:2')
    })

    it('点击“上一步”时回退并调用 prev', () => {
        mountComponent({
            props: {
                defaultIndex: 3
            }
        })

        cy.get('.slot-active').should('have.text', 'active:3')
        cy.contains('上一步').click()
        cy.get('@prev').should('have.been.calledOnce')
        cy.get('.info-steps .el-step__head').eq(1).should('have.class', 'is-process')
        cy.get('.slot-active').should('have.text', 'active:2')
    })

    it('最后一步显示“完成”并调用 complete', () => {
        mountComponent({
            props: {
                defaultIndex: 3,
                loading: reactive({ isLoading: true })
            }
        })

        cy.contains('完成').should('exist').click({ force: true })
        cy.get('@complete').should('have.been.calledOnce')
        cy.contains('下一步').should('not.exist')
    })

    it('点击“取消”时调用 cancel', () => {
        mountComponent()

        cy.contains('取消').click()
        cy.get('@cancel').should('have.been.calledOnce')
    })

    it('允许 nativeActive 返回 true 时点击步骤跳转', () => {
        mountComponent({
            props: {
                methods: {
                    nativeActive: cy.stub().returns(true).as('nativeActive')
                }
            }
        })

        cy.get('.info-steps .el-step').eq(2).click()
        cy.get('@nativeActive').should('have.been.calledOnce')
        cy.get('.slot-active').should('have.text', 'active:3')
        cy.contains('完成').should('exist')
    })

    it('当 nativeActive 返回 false 时点击步骤不跳转', () => {
        mountComponent({
            props: {
                methods: {
                    nativeActive: cy.stub().returns(false).as('nativeActive')
                }
            }
        })

        cy.get('.info-steps .el-step').eq(1).click()
        cy.get('@nativeActive').should('have.been.calledOnce')
        cy.get('.slot-active').should('have.text', 'active:1')
    })
})