54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import { render, screen, fireEvent } 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 sections template - Hero/CTA/FAQ describedby wiring', () => {
|
|
it('Hero, CTA, FAQ inspector inputs are wired to helptexts', () => {
|
|
render(
|
|
<I18nProvider locale="en" messages={en as unknown as Record<string, string>}>
|
|
<BuilderClientPage />
|
|
</I18nProvider>
|
|
)
|
|
|
|
// Add hero to enable inspector
|
|
const addHero = screen.getByRole('button', { name: 'Add Hero' })
|
|
fireEvent.click(addHero)
|
|
|
|
// Select first section (Hero)
|
|
const selectButtons = screen.getAllByRole('button', { name: /Select \d+/ })
|
|
fireEvent.click(selectButtons[0])
|
|
|
|
const heroHeading = screen.getByLabelText('Hero Heading')
|
|
assertDescribedBy(heroHeading, 'ins-hero-heading-help')
|
|
|
|
// Replace with CTA and test describedby
|
|
const addCta = screen.getByRole('button', { name: 'Add CTA' })
|
|
fireEvent.click(addCta)
|
|
const selectSecond = screen.getAllByRole('button', { name: /Select \d+/ })[1]
|
|
fireEvent.click(selectSecond)
|
|
|
|
const ctaText = screen.getByLabelText('CTA Text')
|
|
assertDescribedBy(ctaText, 'ins-cta-text-help')
|
|
const ctaHref = screen.getByLabelText('CTA Href')
|
|
assertDescribedBy(ctaHref, 'ins-cta-href-help')
|
|
|
|
// Add FAQ and test using shared help id
|
|
const addFaq = screen.getByRole('button', { name: 'Add FAQ' })
|
|
fireEvent.click(addFaq)
|
|
const selectThird = screen.getAllByRole('button', { name: /Select \d+/ })[2]
|
|
fireEvent.click(selectThird)
|
|
// Add one FAQ item to render inputs
|
|
const addFaqItem = screen.getByRole('button', { name: 'Add FAQ Item' })
|
|
fireEvent.click(addFaqItem)
|
|
|
|
const faqQ = screen.getByLabelText('FAQ Q 0')
|
|
const faqA = screen.getByLabelText('FAQ A 0')
|
|
assertDescribedBy(faqQ, 'ins-faq-help')
|
|
assertDescribedBy(faqA, 'ins-faq-help')
|
|
})
|
|
})
|