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

import ButtonPage from '../playground/docs/pages/ButtonPage.vue'

describe('ButtonPage', () => {
  it('renders the full 40-member Button/dark M loading review from Figma', () => {
    const wrapper = mount(ButtonPage, {
      props: {
        locale: 'en-US',
      },
    })

    const variants = wrapper.findAll('.loading-matrix__variant')
    expect(variants).toHaveLength(40)
    expect(wrapper.text()).toContain('source=Button/dark M')
    expect(wrapper.text()).toContain('member count=40')
    expect(wrapper.text()).toContain(
      'icon=loading, style=filling, color=green, status=loading, radius=square, fixed width=yes'
    )
    expect(wrapper.text()).toContain(
      'icon=loading, style=ghost, color=red, status=loading, radius=round, fixed width=no'
    )
    expect(wrapper.text()).toContain('right icon')
    expect(wrapper.text()).toContain('green filling')
    expect(wrapper.text()).toContain('Disable Buttons')
    expect(wrapper.text()).toContain('loading handoff')
    expect(wrapper.text()).toContain('Hover any default-state button in this block')
  })
})