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

const mount = () => {
    cy.mount(ColorPicker, {
        propsData: {
            row: {
                showAlpha: true,
                colorFormat: 'hexa',
                popperClass: 'my-popper-class',
                predefine: ['#ff0000', '#00ff00', '#0000ff', '#333'],
                size: 'medium',
                disabled: () => false,
                model: 'color',
                deepData: false,
                methods: cy.spy().as('changeColor')
            },
            modelData: {
                color: '#000000'
            }
        }
    })
}

describe('<ColorPicker/>', () => {
    it('当选择颜色时应该更新模型', () => {
        mount()

        cy.get('.el-color-picker').as('colorPicker')
        // 查看能否选择颜色
        cy.get('@colorPicker').click().get('.el-color-svpanel__black').click().get('.is-plain').click()
        cy.get('@changeColor').should('have.been.called')

        cy.get('@colorPicker').invoke('val', '#ff0000').trigger('input')
        cy.get('@colorPicker').should('have.value', '#ff0000')

        cy.get('@colorPicker').invoke('val', '#00ff00').trigger('input')
        cy.get('@colorPicker').should('have.value', '#00ff00')
    })

    // 选择默认颜色
    it('选择默认颜色', () => {
        mount()
        cy.get('.el-color-picker').as('colorPicker')
        cy.get('@colorPicker').click()
        cy.get('.el-color-predefine__colors > div:nth-child(4) > div').click()
        cy.get('.is-plain').click()
        cy.get('@changeColor').should('have.been.called')
        cy.get('.el-color-picker > div > span > span').should('have.css', 'background-color', 'rgb(51, 51, 51)')
    })
    // 手动录入颜色值并确认
    it('手动录入颜色值并确认', () => {
        mount()
        cy.get('.el-color-picker').as('colorPicker')
        cy.get('@colorPicker').click()
        cy.get('.el-color-dropdown__btns')
        cy.get('.el-input__inner').clear().type('#FF0000')
        cy.get('.is-plain').click()
        cy.get('@changeColor').should('have.been.called')
        cy.get('.el-color-picker > div > span > span').should('have.css', 'background-color', 'rgb(255, 0, 0)')
    })
})