/* global cy */
import infoContainer from './infoContainer.vue'

const mount = () => {
    const layout = {
        aside: true,
        subContainerClass: 'sub-container'
    }
    cy.mount(infoContainer, {
        props: {
            layout,
            isResizerVertical: true
        },
        slots: {
            aside: 'Test aside',
            header: 'Test header',
            main: 'Test main',
            footer: 'Test footer'
        }
    })
}

describe('<layout/> 组件', () => {
    it('挂载正常', () => {
        mount()
        cy.get('.el-container').should('exist')
    })

    it('验证 aside 样式', () => {
        mount()
        cy.get('.el-aside').should('have.css', 'width', '220px')
        cy.get('.splitter-pane-resizer.horizontal').trigger('mousedown')
        cy.get('.splitter-pane-resizer.horizontal').trigger('mouseup')
    })

    it('验证 footer 样式', () => {
        mount()
        cy.get('.el-footer').should('have.css', 'height', '60px')
        cy.get('.splitter-pane-resizer.vertical').trigger('mousedown')
        cy.get('.splitter-pane-resizer.vertical').trigger('mouseup')
    })
})