78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
|
// @vitest-environment jsdom
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
import { render, screen } from "@testing-library/react"
|
||
|
|
import { describe, expect, it } from "vitest"
|
||
|
|
|
||
|
|
import { I18nProvider } from "./i18n-provider"
|
||
|
|
import { useLocale, useLocales, useMessage, useTranslate } from "./hooks"
|
||
|
|
import { Translate } from "./translate"
|
||
|
|
|
||
|
|
const catalogs = {
|
||
|
|
en: {
|
||
|
|
greeting: "Hello",
|
||
|
|
},
|
||
|
|
"zh-Hans": {
|
||
|
|
greeting: "你好",
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
function HookProbe() {
|
||
|
|
const locale = useLocale()
|
||
|
|
const locales = useLocales()
|
||
|
|
const message = useMessage("greeting")
|
||
|
|
const translate = useTranslate()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<output>
|
||
|
|
{locale}|{locales.map((item) => item.locale).join(",")}|{message}|
|
||
|
|
{translate("greeting")}
|
||
|
|
</output>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
describe("i18n runtime", () => {
|
||
|
|
it("provides locale information and reactive translation helpers", () => {
|
||
|
|
render(
|
||
|
|
<I18nProvider
|
||
|
|
catalogs={catalogs}
|
||
|
|
locale="zh-Hans"
|
||
|
|
locales={[
|
||
|
|
{ label: "English", locale: "en" },
|
||
|
|
{ label: "简体中文", locale: "zh-Hans" },
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<HookProbe />
|
||
|
|
</I18nProvider>
|
||
|
|
)
|
||
|
|
|
||
|
|
expect(screen.getByText("zh-Hans|en,zh-Hans|你好|你好")).toBeTruthy()
|
||
|
|
})
|
||
|
|
|
||
|
|
it("wraps Lingui Trans without adding a DOM element", () => {
|
||
|
|
const { container } = render(
|
||
|
|
<I18nProvider catalogs={catalogs} locale="en">
|
||
|
|
<p>
|
||
|
|
<Translate id="greeting" message="Fallback" />
|
||
|
|
</p>
|
||
|
|
</I18nProvider>
|
||
|
|
)
|
||
|
|
|
||
|
|
expect(container.innerHTML).toBe("<p>Hello</p>")
|
||
|
|
})
|
||
|
|
|
||
|
|
it("infers right-to-left locale direction", () => {
|
||
|
|
function DirectionProbe() {
|
||
|
|
return <span>{useLocales()[0]?.direction}</span>
|
||
|
|
}
|
||
|
|
|
||
|
|
render(
|
||
|
|
<I18nProvider locale="ar" locales={["ar"]}>
|
||
|
|
<DirectionProbe />
|
||
|
|
</I18nProvider>
|
||
|
|
)
|
||
|
|
|
||
|
|
expect(screen.getByText("rtl")).toBeTruthy()
|
||
|
|
})
|
||
|
|
})
|