import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import React from 'react'
import BuilderClientPage from '@/components/BuilderClientPage'
import I18nProvider from '@/components/I18nProvider'
import en from '@/messages/en.json'
import { assertDescribedBy } from '@/components/testUtils/inspectorA11y'

describe('Inspector a11y template - describedby wiring', () => {
  it('SEO/Analytics inputs are wired to their helptexts via aria-describedby', () => {
    render(
      <I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
        <BuilderClientPage />
      </I18nProvider>
    )

    const seoTitle = screen.getByLabelText('SEO Title')
    const seoDesc = screen.getByLabelText('SEO Description')
    const ogImage = screen.getByLabelText('OG Image URL')
    const ga4 = screen.getByLabelText('GA4 Measurement ID')
    const meta = screen.getByLabelText('Meta Pixel ID')

    assertDescribedBy(seoTitle, 'ins-seo-title-help')
    assertDescribedBy(seoDesc, 'ins-seo-desc-help')
    assertDescribedBy(ogImage, 'ins-og-image-help')
    assertDescribedBy(ga4, 'ins-ga4-help')
    assertDescribedBy(meta, 'ins-meta-pixel-help')
  })
})