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

const mount = () => {
    cy.mount(InfoCheckbox, {
        props: {
            row: {
                checkbox: () => ['Option 1', 'Option 2', 'Option 3'],
                model: 'selectedOptions',
                allElection: true,
                allElectionText: 'Select all',
                methods: (value) => {
                    console.log(value)
                }
            },
            modelData: {
                selectedOptions: []
            }
        }
    })
}

describe('<InfoCheckbox/>', () => {
    it('正确呈现复选框', () => {
        mount()
        //  正确呈现复选框
        cy.get('.info-checkbox').should('exist')
        //  正确呈现复选框组
        cy.get('.el-checkbox-group').should('exist')
        //  正确呈现复选框数量
        cy.get('.el-checkbox-group .el-checkbox').should('have.length', 3)
        //  正确呈现复选框内容
        cy.get('.el-checkbox-group .el-checkbox').eq(0).contains('Option 1')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).contains('Option 2')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).contains('Option 3')
    })
    it('复选框选中状态', () => {
        mount()
        // Option1 Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(0).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('not.have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('not.have.class', 'is-checked')
        // Option1 Option2 Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(1).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('not.have.class', 'is-checked')
        // All Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(2).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('have.class', 'is-checked')
        // Option1 not Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(0).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('not.have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('have.class', 'is-checked')
    })
    // 部分选中状态显示[-]
    it('部分选中状态显示[-]', () => {
        mount()
        // Option1 Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(0).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('have.class', 'is-checked')
        cy.get('#__cy_vue_root > div > div > label > span.el-checkbox__input').should('have.class', 'is-indeterminate')
    })
    // 全部选中状态显示[✓]
    it('全部选中状态显示[✓]', () => {
        mount()
        // Option1 Option2 Checked
        cy.get('.el-checkbox-group .el-checkbox').eq(0).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(1).click()
        cy.get('.el-checkbox-group .el-checkbox').eq(2).click()
        cy.get('#__cy_vue_root > div > div > label > span.el-checkbox__input').should('have.class', 'is-checked')
    })
    // 全选选中所有复选框选中[✓]
    it('全选选中状态[✓]', () => {
        mount()
        cy.get('.info-checkbox > :nth-child(1) > .el-checkbox__input > .el-checkbox__inner').click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('have.class', 'is-checked')
    })
    // 全选后取消全部选中[ ]
    it('全选后取消全部选中[ ]', () => {
        mount()
        cy.get('.info-checkbox > :nth-child(1) >.el-checkbox__input >.el-checkbox__inner').click()
        cy.get('.info-checkbox > :nth-child(1) >.el-checkbox__input >.el-checkbox__inner').click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).should('not.have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(1).should('not.have.class', 'is-checked')
        cy.get('.el-checkbox-group .el-checkbox').eq(2).should('not.have.class', 'is-checked')
    })
    // 全选后取消一个，状态显示[-]
    it('全选后取消一个，状态显示[-]', () => {
        mount()
        cy.get('.info-checkbox > :nth-child(1) >.el-checkbox__input >.el-checkbox__inner').click()
        cy.get('.el-checkbox-group .el-checkbox').eq(0).click()
        cy.get('#__cy_vue_root > div > div > label > span.el-checkbox__input').should('have.class', 'is-indeterminate')
    })
})