import { fireEvent, render } from '@testing-library/react'
import BrandLogo from '@/components/BrandLogo'

describe('BrandLogo', () => {
  test('远端失败只回退一次，本地也失败后显示稳定文字且不再生成图片', () => {
    const handleError = jest.fn()
    const { container } = render(
      <BrandLogo
        src="https://s3.jiansun.vip/gongxiangpan/brand/missing.png"
        fallbackSrc="/brand/header-logo.png"
        fallbackText="由壹点"
        alt=""
        width={36}
        height={36}
        unoptimized
        onError={handleError}
      />,
    )

    const remoteImage = container.querySelector('img')
    expect(remoteImage).toHaveAttribute('alt', '')
    fireEvent.error(remoteImage!)

    const localImage = container.querySelector('img')
    expect(localImage?.getAttribute('src')).toMatch(/\/brand\/header-logo\.png$/)
    fireEvent.error(localImage!)

    expect(container.querySelector('img')).not.toBeInTheDocument()
    expect(container.querySelector('[data-brand-logo-fallback="text"]')).toHaveTextContent('由壹点')
    expect(handleError).toHaveBeenCalledTimes(2)
  })

  test('传入地址变化后会重新尝试新地址', () => {
    const { container, rerender } = render(
      <BrandLogo
        src="/brand/header-logo.png"
        fallbackSrc="/brand/header-logo.png"
        alt="品牌"
        width={36}
        height={36}
        unoptimized
      />,
    )
    fireEvent.error(container.querySelector('img')!)
    expect(container.querySelector('[data-brand-logo-fallback="text"]')).toBeInTheDocument()

    rerender(
      <BrandLogo
        src="/brand/login-logo.png"
        fallbackSrc="/brand/header-logo.png"
        alt="品牌"
        width={36}
        height={36}
        unoptimized
      />,
    )

    expect(container.querySelector('img')?.getAttribute('src')).toMatch(/\/brand\/login-logo\.png$/)
  })
})