import { beforeEach, describe, expect, it } from 'vitest'
import { page } from 'vitest/browser'

import '../src/my-button.js'

describe('Button with increment', async () => {
  beforeEach(async () => {
    await page.mark('render', async () => {
      document.body.innerHTML = '<my-button name="World"></my-button>'
      await page.getByRole('button').mark('render button')
    })
  })

  it('should increment the count on each click', async () => {
    await page.getByRole('button').click()

    await expect.element(page.getByRole('button')).toMatchTextContent('2')
    if (import.meta.env.VITE_FAIL_TEST) {
      await expect.element(page.getByRole('button'), { timeout: 3000 }).toMatchTextContent('3')
    }
  })

  it('should show name props', async () => {
    await expect.element(page.getByRole('heading')).toMatchTextContent('World')
  })
})