/* global cy */
import Table from './table.vue'
import type { OperatesInterface } from './model/table'

describe('<table/> operation badge', () => {
    const columns = [
        {
            prop: 'name',
            label: 'Name'
        }
    ]
    const list = [
        {
            id: 1,
            name: 'Row 1',
            count: 3
        },
        {
            id: 2,
            name: 'Row 2',
            count: 8
        }
    ]
    const options = {
        i18n: true,
        isHideSet: true,
        index: false,
        rowKey: 'id'
    }

    const mountTable = (operates: OperatesInterface) => {
        cy.mount(Table, {
            props: {
                list,
                columns,
                options,
                operates
            },
            global: {
                mocks: {
                    $t: (value: string) => value
                }
            }
        })
        cy.wait(600)
    }

    it('renders the operation item badge config', () => {
        mountTable({
            list: [
                {
                    label: 'Edit',
                    code: 'edit',
                    method: cy.spy().as('edit'),
                    badge: {
                        value: 5,
                        type: 'primary'
                    }
                }
            ]
        })

        cy.get('.operateBtn .operateBadge--number .el-badge__content')
            .first()
            .should('have.text', '5')
            .and('have.class', 'el-badge__content--primary')
            .then(($badge) => {
                const badgeRect = $badge[0].getBoundingClientRect()
                const cellRect = $badge.parents('.el-table__cell')[0].getBoundingClientRect()
                expect(badgeRect.top).to.be.gte(cellRect.top)
                const badgeStyle = getComputedStyle($badge.parents('.operateBadge')[0])
                expect(badgeStyle.getPropertyValue('--el-badge-size').trim()).to.eq('14px')
                expect(badgeStyle.getPropertyValue('--el-badge-padding').trim()).to.eq('3px')
            })
    })

    it('uses operation item badge values with row data', () => {
        mountTable({
            list: [
                {
                    label: 'Edit',
                    code: 'edit',
                    method: cy.spy().as('edit'),
                    badge: {
                        value: (row) => row.count,
                        type: 'success'
                    }
                }
            ]
        })

        cy.get('.operateBtn .el-badge__content')
            .first()
            .should('have.text', '3')
            .and('have.class', 'el-badge__content--success')
        cy.get('.operateBtn .el-badge__content')
            .eq(1)
            .should('have.text', '8')
    })

    it('supports hidden badge config and keeps buttons without badge clickable', () => {
        mountTable({
            list: [
                {
                    label: 'Hidden',
                    code: 'hidden',
                    method: cy.spy().as('hidden'),
                    badge: {
                        value: 9,
                        hidden: (row) => row.id === 1
                    }
                },
                {
                    label: 'Plain',
                    code: 'plain',
                    method: cy.spy().as('plain')
                }
            ]
        })

        cy.get('.operateBtn .el-badge__content')
            .first()
            .should('not.be.visible')
        cy.get('[test-cy="plain"]')
            .first()
            .parents('.el-badge')
            .find('.el-badge__content')
            .should('not.be.visible')
        cy.get('[test-cy="plain"]')
            .first()
            .click()
        cy.get('@plain').should('have.been.calledOnce')
    })
})