/* global cy */
import { defineComponent } from 'vue'
import Diff from './index.vue'

const CodeDiffStub = defineComponent({
    name: 'CodeDiff',
    props: {
        oldString: { type: String, default: '' },
        newString: { type: String, default: '' },
        language: { type: String, default: '' },
        outputFormat: { type: String, default: '' },
        maxHeight: { type: String, default: '' },
        hideHeader: { type: Boolean, default: false },
        hideStat: { type: Boolean, default: false },
        trim: { type: Boolean, default: false }
    },
    template: `
        <div class="code-diff-stub">
            <span data-cy="oldString">{{ oldString }}</span>
            <span data-cy="newString">{{ newString }}</span>
            <span data-cy="language">{{ language }}</span>
            <span data-cy="outputFormat">{{ outputFormat }}</span>
            <span data-cy="maxHeight">{{ maxHeight }}</span>
            <span data-cy="hideHeader">{{ String(hideHeader) }}</span>
            <span data-cy="hideStat">{{ String(hideStat) }}</span>
            <span data-cy="trim">{{ String(trim) }}</span>
        </div>
    `
})

const mountComponent = (props = {}) => {
    cy.mount(Diff, {
        props,
        global: {
            stubs: {
                CodeDiff: CodeDiffStub
            }
        }
    })
}

describe('<Diff/> 组件', () => {
    it('默认配置透传正确', () => {
        mountComponent()

        cy.get('.code-diff-stub').should('exist')
        cy.get('[data-cy="oldString"]').should('have.text', '')
        cy.get('[data-cy="newString"]').should('have.text', '')
        cy.get('[data-cy="language"]').should('have.text', 'javascript')
        cy.get('[data-cy="outputFormat"]').should('have.text', 'side-by-side')
        cy.get('[data-cy="maxHeight"]').should('have.text', '')
        cy.get('[data-cy="hideHeader"]').should('have.text', 'false')
        cy.get('[data-cy="hideStat"]').should('have.text', 'false')
        cy.get('[data-cy="trim"]').should('have.text', 'false')
    })

    it('自定义 props 透传正确', () => {
        mountComponent({
            left: 'const a = 1',
            right: 'const a = 2',
            language: 'json',
            outputFormat: 'line-by-line',
            maxHeight: '240px',
            hideHeader: true,
            hideStat: true,
            trim: true
        })

        cy.get('[data-cy="oldString"]').should('have.text', 'const a = 1')
        cy.get('[data-cy="newString"]').should('have.text', 'const a = 2')
        cy.get('[data-cy="language"]').should('have.text', 'json')
        cy.get('[data-cy="outputFormat"]').should('have.text', 'line-by-line')
        cy.get('[data-cy="maxHeight"]').should('have.text', '240px')
        cy.get('[data-cy="hideHeader"]').should('have.text', 'true')
        cy.get('[data-cy="hideStat"]').should('have.text', 'true')
        cy.get('[data-cy="trim"]').should('have.text', 'true')
    })

    it('左右内容更新时同步透传', () => {
        mountComponent({
            left: '{"name":"old"}',
            right: '{"name":"new"}'
        })

        cy.get('[data-cy="oldString"]').should('contain', 'old')
        cy.get('[data-cy="newString"]').should('contain', 'new')
    })
})