import { mount } from '@vue/test-utils'
import Button from '../Button.vue'
import { describe, it, expect } from 'vitest'

describe('Button.vue', () => {
    it('renders default (solid primary md) styles', () => {
        const wrapper = mount(Button, {
            slots: { default: 'Click Me' },
        })
        expect(wrapper.text()).toBe('Click Me')
        const cls = wrapper.attributes('class')
        expect(cls).toContain('bg-primary')
        expect(cls).toContain('px-4') // md size padding
    })

    it('renders outline success variant', () => {
        const wrapper = mount(Button, {
            props: { variant: 'outline', color: 'success' },
            slots: { default: 'Save' },
        })
        const cls = wrapper.attributes('class')
        expect(cls).toContain('border-success')
        expect(cls).toContain('text-success')
    })

    it('renders ghost danger lg size', () => {
        const wrapper = mount(Button, {
            props: { variant: 'ghost', color: 'danger', size: 'lg' },
            slots: { default: 'Delete' },
        })
        const cls = wrapper.attributes('class')
        expect(cls).toContain('text-danger')
        expect(cls).toContain('px-6') // lg size padding
    })
}) 