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

describe('<InfoPanel/>面板组件', () => {
    const mountPanel = (props = {}, slots = { default: 'Test content' }) => {
        cy.mount(infoPanel, {
            props,
            slots
        })
    }

    it('面板组件挂载正常', () => {
        mountPanel({
            config: {
                card: true
            }
        })

        cy.get('.boardPanel').should('exist')
    })

    it('设置slots显示正常', () => {
        mountPanel({
            config: {
                card: true
            }
        })

        cy.get('.boardPanel').should('contain.text', 'Test content')
    })

    it('config.card 为 true 时应用卡片默认样式', () => {
        mountPanel({
            config: {
                card: true
            }
        })

        cy.get('.boardPanel')
            .should('have.css', 'margin', '20px')
            .and('have.css', 'border-radius', '4px')
            .and('have.css', 'box-shadow', 'rgba(0, 0, 0, 0.1) 0px 2px 4px 2px')
    })

    it('config.customStyle 存在时应用自定义样式', () => {
        mountPanel({
            config: {
                customStyle: {
                    margin: '8px',
                    borderRadius: '12px',
                    background: 'rgb(255, 0, 0)'
                }
            }
        })

        cy.get('.boardPanel')
            .should('have.css', 'margin', '8px')
            .and('have.css', 'border-radius', '12px')
            .and('have.css', 'background-color', 'rgb(255, 0, 0)')
    })

    it('config.card 与 customStyle 同时存在时优先使用 card 样式', () => {
        mountPanel({
            config: {
                card: true,
                customStyle: {
                    margin: '8px',
                    borderRadius: '12px'
                }
            }
        })

        cy.get('.boardPanel')
            .should('have.css', 'margin', '20px')
            .and('have.css', 'border-radius', '4px')
    })
})