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

const mount = (r: any = {}) => {
    let row = {
        activeText: 'On',
        inactiveText: 'Off',
        activeValue: true,
        inactiveValue: false,
        activeColor: '#13ce66',
        inactiveColor: '#ff4949',
        model: 'ceshi',
        methods: cy.spy().as('change'),
        tipContent: () => '提示内容'
    }
    Object.assign(row, r)
    cy.mount(InfoSwitch, {
        props: {
            row,
            modelData: {}
        }
    })
}

describe('<Switch/> 组件', () => {
    it('呈现开关组件', () => {
        mount()
        // 确认元素在存
        cy.get('.el-switch__core').should('exist')
        // 关文本为'Off'
        cy.get('.el-switch__label--left').should('have.text', 'Off')
        // 开文本为'On'
        cy.get('.el-switch__label--right').should('have.text', 'On')
        // 切换元素点击
        cy.get('.el-switch__core').click()
        // 确认文本为'On'的元素处于活动状态
        cy.get('.is-active').should('have.text', 'On')
    })
    it('开关组件 tips 正常显示', () => {
        mount()
        // 确认元素存在, 并以右键方式hover
        cy.get('.el-switch__core').should('exist').rightclick()
        cy.contains('提示内容').should('exist')
    })
    it('开关组件不可编辑', () => {
        mount({ disabled: () => true })
        // 确认元素存在, 并以右键方式hover
        cy.get('.el-switch__core').should('exist').click()
        cy.get('.el-switch').should('have.class', 'is-disabled')
    })
    it('开关事件正常触发', () => {
        mount()
        // 确认元素在存
        cy.get('.el-switch__core').should('exist')
        // 切换元素点击
        cy.get('.el-switch__core').click()
        cy.get('@change').should('have.been.called')
    })
})