import { render } from '@testing-library/react'
import { describe, expect, it } from 'vitest'

import LocalisedText from '@/components/LocalisedText'


describe ('LocalisedText', () => {
  it.each ([
      ['ネコ　チャペ', ['ネコ', 'チャペ']],
      ['ネコ、チャペ', ['ネコ、', 'チャペ']],
      ['著作者人格権、商標権、肖像権、パブリシティー権',
       ['著作者人格権、', '商標権、', '肖像権、', 'パブリシティー権']],
      ['ネコ、チャペ。', ['ネコ、', 'チャペ。']],
      ['ネコ、「チャペ」。', ['ネコ、', '「チャペ」。']],
      ['ネコ，、」チャペ', ['ネコ，、」', 'チャペ']]]) (
      'adds word boundaries without changing %s', (text, words) => {
	const { container } = render (<LocalisedText language="ain">{text}</LocalisedText>)
	const wrapper = container.firstElementChild!
	expect (wrapper).toHaveAttribute ('lang', 'ain-Kana')
	expect (wrapper.textContent).toBe (text)
	expect (Array.from (wrapper.querySelectorAll ('.ainu-ui-word'), node => node.textContent))
	    .toEqual (words)
	expect (wrapper.querySelectorAll ('wbr')).toHaveLength (words.length - 1)
      })

  it ('preserves Japanese fallback and links and code inside an Ainu paragraph', () => {
    const { container } = render (
	<LocalisedText language="ain">
	  <span lang="ja">日本語、本文</span>
	  <a href="https://example.com">ネコ　チャペ</a>
	  <code>ネコ　チャペ</code>
	  <strong>ネコ　チャペ</strong>
	</LocalisedText>)
    expect (container.querySelector ('[lang="ja"] .ainu-ui-word')).toBeNull ()
    expect (container.querySelector ('a .ainu-ui-word')).toBeNull ()
    expect (container.querySelector ('code .ainu-ui-word')).toBeNull ()
    expect (container.querySelectorAll ('strong .ainu-ui-word')).toHaveLength (2)
  })

  it ('does not apply Ainu word splitting to Japanese text', () => {
    const { container } = render (
	<LocalisedText language="ja">ネコ、チャペ。</LocalisedText>)
    expect (container.firstElementChild).toHaveAttribute ('lang', 'ja')
    expect (container.querySelector ('.ainu-ui-word')).toBeNull ()
    expect (container.textContent).toBe ('ネコ、チャペ。')
  })
})