12 | Getting started | Demo | Documentation | 中文 13 |
14 |10 | 快速上手 | 在线演示 | 使用文档 | English 11 |
12 |4 | 5 | 6 |
7 |8 | 9 | 10 | {{ n }} 11 | 12 | 13 |
14 |3 | {{ dateFormat(dateNow) }} 4 |
5 | 6 | 7 | 29 | -------------------------------------------------------------------------------- /dev/components/DemoDirective.vue: -------------------------------------------------------------------------------- 1 | 2 |A random number: %{ random }
5 | 6 | 7 |8 | 9 | Hello %{ name } 10 |
11 | 12 | 13 |14 | 15 | 21 | %{ count } apple 22 | 23 | 24 |
25 |4 | 5 | {{ $gettext("Welcome %{ name }", { name: obj.name }) }} 6 |
7 |9 | 10 | 11 | 12 | [{{ obj.name }}] 13 |
14 |This is %{ obj.name }
15 |This is %{ obj.name }
16 |This is %{ obj.name }
17 |
4 |
7 | 8 | {{ n }} 9 | 10 |
11 |12 | {{ $ngettext("%{ n } book", "%{ n } books", n, { n }) }} 13 |
14 | 15 |Use default singular or plural form when there is no translation.
16 |17 | {{ 18 | $ngettext( 19 | "%{ countForUntranslated } item. This is left untranslated on purpose.", 20 | "%{ countForUntranslated } items. This is left untranslated on purpose.", 21 | countForUntranslated, 22 | { countForUntranslated }, 23 | ) 24 | }} 25 |
26 |
4 |
The <translate> component and v-translate directive have been deprecated, use the functions instead.
Since Vue 3, extracting messages from within components is awkward and error-prone as well as cause issues with server-side rendering.
7 | To make the transition easier, they will keep working until a future major release. 8 |The <translate> component and v-translate directive have been deprecated, use the functions instead.
Since Vue 3, extracting messages from within components is awkward and error-prone as well as cause issues with server-side rendering.
7 | To make the transition easier, they will keep working until a future major release. 8 |Hello %{ name }!
23 | ``` 24 | 25 | 26 | ### Pluralization 27 | 28 | 29 | ```vue 30 |35 | %{ amount } car 36 |
37 | ``` 38 | 39 | 40 | ## Attributes 41 | 42 | | Prop | Description | Type | Default | 43 | | ----------------- | -------------------------------------------------------------------------------------------- | ------- | ------- | 44 | | v-translate | **Required**. You can optionally provide an object with parameters for message interpolation | object | null | 45 | | translate-n | Determines what plural form to apply to the message | number | null | 46 | | translate-plural | Pluralized message | string | null | 47 | | translate-context | Gettext translation context | string | null | 48 | | translate-comment | Comment for the message id | string | null | 49 | | render-html | Will disable HTML escaping and render it directly | boolean | false | 50 | -------------------------------------------------------------------------------- /docs/extraction.md: -------------------------------------------------------------------------------- 1 | # Message extraction 2 | 3 | To extract all the messages that you want translated from your application code, a bit of setup is required. 4 | 5 | ## Scripts 6 | 7 | First, add scripts to your `package.json`: 8 | 9 | ```json { package.json } 10 | "scripts": { 11 | ... 12 | "gettext:extract": "vue-gettext-extract", 13 | "gettext:compile": "vue-gettext-compile", 14 | } 15 | ``` 16 | 17 | `npm run gettext:extract` extracts messages from your code and creates `.po` files. 18 | 19 | `npm run gettext:compile` compiles the translated messages from the `.po` files to a `.json` to be used in your application. 20 | 21 | Using these scripts is _theoretically_ optional if you have other means of extraction or may even want to write message files yourself. 22 | 23 | ## Configuration 24 | 25 | Before running the scripts, create a file `gettext.config.js` in your application root. This is a configuration _only_ for the scripts above. A minimal configuration may look like this: 26 | 27 | ```js 28 | module.exports = { 29 | output: { 30 | locales: ["en", "de"], 31 | }, 32 | }; 33 | ``` 34 | 35 | You can also use a `gettext.config.mjs` file with the Ecmascript module format: 36 | 37 | ```js 38 | export default { 39 | output: { 40 | locales: ["en", "de"], 41 | }, 42 | } 43 | ``` 44 | 45 | Here are all the available configuration options and their defaults: 46 | 47 | ```js 48 | module.exports = { 49 | input: { 50 | path: "./src", // only files in this directory are considered for extraction 51 | include: ["**/*.js", "**/*.ts", "**/*.vue"], // glob patterns to select files for extraction 52 | exclude: [], // glob patterns to exclude files from extraction 53 | jsExtractorOpts:[ // custom extractor keyword. default empty. 54 | { 55 | keyword: "__", // only extractor default keyword such as $gettext,use keyword to custom 56 | options: { // see https://github.com/lukasgeiter/gettext-extractor 57 | content: { 58 | replaceNewLines: "\n", 59 | }, 60 | arguments: { 61 | text: 0, 62 | }, 63 | }, 64 | }, 65 | { 66 | keyword: "_n", // $ngettext 67 | options: { 68 | content: { 69 | replaceNewLines: "\n", 70 | }, 71 | arguments: { 72 | text: 0, 73 | textPlural: 1, 74 | }, 75 | }, 76 | }, 77 | ], 78 | compileTemplate: false, // do not compile tag when its lang is not html 79 | }, 80 | output: { 81 | path: "./src/language", // output path of all created files 82 | potPath: "./messages.pot", // relative to output.path, so by default "./src/language/messages.pot" 83 | jsonPath: "./translations.json", // relative to output.path, so by default "./src/language/translations.json" 84 | locales: ["en"], 85 | flat: false, // don't create subdirectories for locales 86 | linguas: true, // create a LINGUAS file 87 | splitJson: false, // create separate json files for each locale. If used, jsonPath must end with a directory, not a file 88 | }, 89 | }; 90 | ``` 91 | 92 | ## Gotchas 93 | When first extract, it will call `msginit` to create a `.po` file, 94 | this command will set the `Plural-Forms` header, if the locale is in 95 | [the embedded table](https://github.com/dd32/gettext/blob/master/gettext-tools/src/plural-table.c#L27) 96 | of msginit. 97 | 98 | Otherwise, as an experimental feature, 99 | you can instruct msginit to use the information from Unicode CLDR, 100 | by setting the `GETTEXTCLDRDIR` environment variable. 101 | The program will look for a file named 102 | `common/supplemental/plurals.xml` under that directory. 103 | You can get the CLDR data from [http://cldr.unicode.org/](http://cldr.unicode.org/). 104 | Or only download the [plurals.xml](https://raw.githubusercontent.com/unicode-org/cldr/main/common/supplemental/plurals.xml) file. 105 | -------------------------------------------------------------------------------- /docs/functions.md: -------------------------------------------------------------------------------- 1 | # Functions 2 | 3 | Translation functions are made available globally in `` sections but can also be used in scripts. 4 | 5 | ## Functions 6 | 7 | ### `$gettext` 8 | 9 | Simple message translation 10 | 11 | ```ts 12 | 13 | {{ $gettext("My message") }} 14 | 15 | ``` 16 | 17 | ```ts 18 | const { $gettext } = useGettext(); 19 | 20 | $gettext("My message"); 21 | ``` 22 | 23 | #### Interpolation 24 | 25 | ```ts 26 | 27 | {{ $gettext("My message for %{ name }", { name: "Rudi" }) }} 28 | 29 | ``` 30 | 31 | ### `$pgettext` 32 | 33 | Takes a translation context as the first argument 34 | 35 | ```ts 36 | 37 | {{ $pgettext("my_context", "My message") }} 38 | 39 | ``` 40 | 41 | ```ts 42 | const { $pgettext } = useGettext(); 43 | 44 | $pgettext("my_context", "My message"); 45 | ``` 46 | 47 | #### Interpolation 48 | 49 | ```ts 50 | 51 | {{ $pgettext("my_context", "My message for %{ name }", { name: "Rudi" }) }} 52 | 53 | ``` 54 | 55 | ### `$ngettext` 56 | 57 | Can be used to pluralize messages 58 | 59 | ```vue 60 | 61 | {{ $ngettext("apple", "apples", 5) }} 62 | 63 | ``` 64 | 65 | ```ts 66 | const { $ngettext } = useGettext(); 67 | 68 | $ngettext("apple", "apples", 5); 69 | ``` 70 | 71 | #### Interpolation 72 | 73 | ```ts 74 | 75 | {{ $ngettext("apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }} 76 | 77 | ``` 78 | 79 | ### `$npgettext` 80 | 81 | Can be used to pluralize messages with a translation context 82 | 83 | ```vue 84 | 85 | {{ $npgettext("my_context", "apple", "apples", 5) }} 86 | 87 | ``` 88 | 89 | ```ts 90 | const { $npgettext } = useGettext(); 91 | 92 | $npgettext("my_context", "apple", "apples", 5); 93 | ``` 94 | 95 | #### Interpolation 96 | 97 | ```ts 98 | 99 | {{ $npgettext("my_context", "apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }} 100 | 101 | ``` 102 | 103 | ### `$language` 104 | 105 | Provides access to the whole plugin, for example if you want to access the current language: 106 | 107 | ```vue 108 | 109 | {{ $language.current }} 110 | 111 | ``` 112 | 113 | ```ts 114 | const gettext = useGettext(); 115 | 116 | console.log(gettext.current); 117 | ``` 118 | 119 | ### `$gettextInterpolate` 120 | 121 |<translate> 组件和 v-translate 指令已被弃用，请使用 翻译函数 代替。
从 Vue 3 开始，从组件中提取消息变得笨拙且容易出错，并且会导致服务器端渲染出现问题。
7 | 为了迁移方便，这些功能将会保留到之后的大版本升级。 8 |<translate> 组件和 v-translate 指令已被弃用，请使用 翻译函数 代替。
从 Vue 3 开始，从组件中提取消息变得笨拙且容易出错，并且会导致服务器端渲染出现问题。
7 | 为了迁移方便，这些功能将会保留到之后的大版本升级。 8 |Hello %{ name }!
22 | ``` 23 | 24 | 25 | ### 复数 26 | 27 | 28 | ```vue 29 |34 | %{ amount } car 35 |
36 | ``` 37 | 38 | 39 | ## 属性 40 | 41 | | Prop | 描述 | 类型 | 默认值 | 42 | | ----------------- | -------------------------------- | ------- | ------- | 43 | | v-translate | **必须**. 值不为空时表示翻译内容的参数 | object | null | 44 | | translate-n | 用于判断使用哪种复数形式 | number | null | 45 | | translate-plural | 复数形式 | string | null | 46 | | translate-context | 上下文 | string | null | 47 | | translate-comment | 翻译的注释 | string | null | 48 | | render-html | 不转义直接输出 html | boolean | false | 49 | -------------------------------------------------------------------------------- /docs/zh/extraction.md: -------------------------------------------------------------------------------- 1 | # 自动抽取 2 | 3 | 要使用自动抽取功能，你需要做一些如下准备工作。 4 | 5 | ## 脚本 6 | 首先，在 `package.json` 中添加 scripts 指令: 7 | 8 | ```json { package.json } 9 | "scripts": { 10 | ... 11 | "gettext:extract": "vue-gettext-extract", 12 | "gettext:compile": "vue-gettext-compile", 13 | } 14 | ``` 15 | 16 | `npm run gettext:extract` 从代码中自动抽取待翻译字符串并创建为 `.po` 文件。 17 | 18 | `npm run gettext:compile` 把翻译好的 `.po` 文件编译为 `.json` 文件以便在程序中引用。 19 | 20 | 这些指令 _理论上_ 是可选的，因为如果你有其他方式可以达到同样的目的的话也未尝不可，甚至也可以手写 po 文件。 21 | 22 | 23 | ## 配置 24 | 运行这些脚本之前，你需要在根目录新建一个名为 `gettext.config.js` 的配置文件。 25 | 该文件 _只_ 会被上述脚本读取。最简示例如下所示： 26 | 27 | 28 | ```js 29 | module.exports = { 30 | output: { 31 | locales: ["en", "de"], 32 | }, 33 | }; 34 | ``` 35 | 36 | 您也可以使用带有 Ecmascript 模块格式的 `gettext.config.mjs` 文件： 37 | 38 | ```js 39 | export default { 40 | output: { 41 | locales: ["en", "de"], 42 | }, 43 | } 44 | ``` 45 | 46 | 下面列出所有配置选项和默认值： 47 | 48 | ```js 49 | module.exports = { 50 | input: { 51 | path: "./src", // 只有该目录下的文件会被自动抽取 52 | include: ["**/*.js", "**/*.ts", "**/*.vue"], // 需要抽取的文件 53 | exclude: [], // 需要排除的文件 54 | jsExtractorOpts:[ // 自定义抽取关键字 55 | { 56 | keyword: "__", // 默认只抽取 $gettext 这些内置的关键字，可以通过 keyword 自定义 57 | options: { // 详细说明可查看 https://github.com/lukasgeiter/gettext-extractor 58 | content: { 59 | replaceNewLines: "\n", 60 | }, 61 | arguments: { 62 | text: 0, // 这个 __ 函数的第几个参数是待翻译字符串 63 | }, 64 | }, 65 | }, 66 | { 67 | keyword: "_n", // 对应 $ngettext 68 | options: { 69 | content: { 70 | replaceNewLines: "\n", 71 | }, 72 | arguments: { 73 | text: 0, // 第0个参数是待翻译字符串 74 | textPlural: 1,// 第1个参数是复数字符串 75 | }, 76 | }, 77 | }, 78 | ], 79 | }, 80 | output: { 81 | path: "./src/language", // 抽取后生成的文件存放的路径 82 | potPath: "./messages.pot", // 相对于 output.path, 所以默认值是 "./src/language/messages.pot" 83 | jsonPath: "./translations.json", // 相对于 output.path, 所以默认值是 "./src/language/translations.json" 84 | locales: ["en"], // 需要生成哪些语言的 po 文件 85 | flat: false, // 是否为每种语言单独创建一个文件夹 86 | linguas: true, // 创建一个 LINGUAS 文件 87 | splitJson: false, // 为每种语言生成一个 json 文件，如果为 true, jsonPath 应当是一个目录路径而不是一个文件路径 88 | }, 89 | }; 90 | ``` 91 | 92 | ## 额外说明 93 | 第一次抽取时，会调用 [`msginit`](https://www.gnu.org/software/gettext/manual/html_node/msginit-Invocation.html) 94 | 新建 `.po` 文件，该命令会自动设置 po 文件中的 `Plural-Forms` 字段。该字段表示翻译语言的复数形式。 95 | 96 | 但如果翻译语言不在该命令的 97 | [内置表](https://github.com/dd32/gettext/blob/master/gettext-tools/src/plural-table.c#L27) 中， 98 | 需要使用 [CLDR](http://cldr.unicode.org/) 数据才能判断语言的复数形式。 99 | 100 | 因此你需要设置环境变量 `GETTEXTCLDRDIR` 指向 CLDR 数据所在的目录， 101 | 并保证目录中存在 `common/supplemental/plurals.xml` 文件。 102 | 不过，你无需下载完整的 CLDR 数据，只需要下载 [plurals.xml](https://raw.githubusercontent.com/unicode-org/cldr/main/common/supplemental/plurals.xml) 即可。 103 | -------------------------------------------------------------------------------- /docs/zh/functions.md: -------------------------------------------------------------------------------- 1 | # 全局属性 2 | 在 `` 模板中可以使用翻译函数，当然在 scripts 代码中也可以。 3 | 4 | ## 翻译函数 5 | 6 | ### `$gettext` 7 | 普通翻译函数 8 | 9 | ```vue 10 | 11 | {{ $gettext("My message") }} 12 | 13 | ``` 14 | 15 | ```ts 16 | const { $gettext } = useGettext(); 17 | 18 | $gettext("My message"); 19 | ``` 20 | 21 | #### 参数插值 22 | 23 | ```vue 24 | 25 | {{ $gettext("My message for %{ name }", { name: "Rudi" }) }} 26 | 27 | ``` 28 | 29 | ### `$pgettext` 30 | 上下文翻译，第一个参数是上下文，第二个参数是待翻译内容。 31 | 32 | ```vue 33 | 34 | {{ $pgettext("my_context", "My message") }} 35 | 36 | ``` 37 | 38 | ```ts 39 | const { $pgettext } = useGettext(); 40 | 41 | $pgettext("my_context", "My message"); 42 | ``` 43 | 44 | #### 参数插值 45 | 46 | ```vue 47 | 48 | {{ $pgettext("my_context", "My message for %{ name }", { name: "Rudi" }) }} 49 | 50 | ``` 51 | 52 | ### `$ngettext` 53 | 用于支持复数翻译。 54 | 55 | ```vue 56 | 57 | {{ $ngettext("apple", "apples", 5) }} 58 | 59 | ``` 60 | 61 | ```ts 62 | const { $ngettext } = useGettext(); 63 | 64 | $ngettext("apple", "apples", 5); 65 | ``` 66 | 67 | #### 参数插值 68 | 69 | ```vue 70 | 71 | {{ $ngettext("apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }} 72 | 73 | ``` 74 | 75 | ### `$npgettext` 76 | 带上下文的复数翻译。 77 | 78 | ```vue 79 | 80 | {{ $npgettext("my_context", "apple", "apples", 5) }} 81 | 82 | ``` 83 | 84 | ```ts 85 | const { $npgettext } = useGettext(); 86 | 87 | $npgettext("my_context", "apple", "apples", 5); 88 | ``` 89 | 90 | #### 参数插值 91 | 92 | ```vue 93 | 94 | {{ $npgettext("my_context", "apple for %{ name }", "apples for %{ name }", 5, { name: "Rudi" }) }} 95 | 96 | ``` 97 | 98 | ### `$language` 99 | 这个属性是插件实例，可以通过这个属性访问插件实例的属性/方法。比如可以拿到当前语言： 100 | 101 | 102 | ```vue 103 | 104 | {{ $language.current }} 105 | 106 | ``` 107 | 108 | ```ts 109 | const gettext = useGettext(); 110 | 111 | console.log(gettext.current); 112 | ``` 113 | 114 | ### `$gettextInterpolate` 115 | 116 |This is Sparta!
` 49 | * 50 | * If you need interpolation, you must add an expression that outputs binding value that changes with each of the 51 | * context variable: 52 | * `I am %{ fullName } and from %{ location }
` 53 | * @deprecated 54 | */ 55 | export default function directive(language: Language): ObjectDirectivePlein de lignes
`); 60 | }); 61 | 62 | it("renders translation in custom html tag", async () => { 63 | const wrapper = mount({ template: '
143 |
158 |
175 |
Bonjour John Doe
"); 264 | }); 265 | 266 | it("goes up the parent chain of a nested component to evaluate `user.details.name`", async () => { 267 | const warnSpy = vi.spyOn(console, "warn"); 268 | const wrapper = mount({ 269 | template: `Bonjour Jane Doe
"); 289 | expect(warnSpy).not.toHaveBeenCalled; 290 | warnSpy.mockRestore(); 291 | }); 292 | 293 | it("goes up the parent chain of 2 nested components to evaluate `user.details.name`", async () => { 294 | const warnSpy = vi.spyOn(console, "warn"); 295 | const wrapper = mount({ 296 | template: `Bonjour Jane Doe
"); 321 | expect(console.warn).not.toHaveBeenCalled; 322 | warnSpy.mockRestore(); 323 | }); 324 | }); 325 | -------------------------------------------------------------------------------- /tests/config.test.ts: -------------------------------------------------------------------------------- 1 | import { mkdir, mkdtemp, readFile, rm, symlink, writeFile } from "fs/promises"; 2 | import { join } from "path"; 3 | import { tmpdir } from "os"; 4 | import { cwd } from "process"; 5 | import { execSync } from "child_process"; 6 | 7 | describe("config format tests", () => { 8 | type WithTempDirTest = (tmpDir: string) => PromiseOrange
", 18 | data() { 19 | return { count: 1 }; 20 | }, 21 | }).vm; 22 | expect(vm.$el.innerHTML).toEqual("البرتقالي"); 23 | }); 24 | 25 | it("translates plural form 0", async () => { 26 | const count = 0; 27 | const vm = mount({ 28 | template: '%{ count } day
', 29 | data() { 30 | return { count }; 31 | }, 32 | }).vm; 33 | await vm.$nextTick(); 34 | expect(vm.$el.innerHTML).toEqual(`${count}أقل من يوم`); 35 | }); 36 | 37 | it("translates plural form 1", () => { 38 | const count = 1; 39 | const vm = mount({ 40 | template: '%{ count } day
', 41 | data() { 42 | return { count }; 43 | }, 44 | }).vm; 45 | expect(vm.$el.innerHTML).toEqual(`${count}يوم واحد`); 46 | }); 47 | 48 | it("translates plural form 2", () => { 49 | const count = 2; 50 | const vm = mount({ 51 | template: '%{ count } day
', 52 | data() { 53 | return { count }; 54 | }, 55 | }).vm; 56 | expect(vm.$el.innerHTML).toEqual(`${count}يومان`); 57 | }); 58 | 59 | it("translates plural form 3", () => { 60 | const count = 9; 61 | const vm = mount({ 62 | template: '%{ count } day
', 63 | data() { 64 | return { count }; 65 | }, 66 | }).vm; 67 | expect(vm.$el.innerHTML).toEqual(`${count} أيام`); 68 | }); 69 | 70 | it("translates plural form 4", () => { 71 | const count = 11; 72 | const vm = mount({ 73 | template: '%{ count } day
', 74 | data() { 75 | return { count }; 76 | }, 77 | }).vm; 78 | expect(vm.$el.innerHTML).toEqual(`${count} يومًا`); 79 | }); 80 | 81 | it("translates plural form 5", async () => { 82 | const count = 3000; 83 | const vm = mount({ 84 | template: '%{ count } day
', 85 | data() { 86 | return { count }; 87 | }, 88 | }).vm; 89 | expect(vm.$el.innerHTML).toEqual(`${count} يوم`); 90 | }); 91 | }); 92 | -------------------------------------------------------------------------------- /tests/directive.spec.ts: -------------------------------------------------------------------------------- 1 | import translations from "./json/directive"; 2 | import { mountWithPlugin } from "./utils"; 3 | 4 | const mount = mountWithPlugin({ 5 | availableLanguages: { 6 | en_US: "American English", 7 | fr_FR: "Français", 8 | }, 9 | defaultLanguage: "en_US", 10 | translations: translations, 11 | silent: false, 12 | setGlobalProperties: true, 13 | }); 14 | 15 | describe("translate directive tests", () => { 16 | it("works on empty strings", () => { 17 | const vm = mount({ template: "" }).vm; 18 | expect(vm.$el.innerHTML).toEqual(""); 19 | }); 20 | 21 | it("returns an unchanged string when no translation is available for a language", () => { 22 | const warnSpy = vi.spyOn(console, "warn"); 23 | const vm = mount({ template: "Hello %{ name }
", 76 | data() { 77 | return { name: "John Doe" }; 78 | }, 79 | }).vm; 80 | (vm as any).$language.current = "fr_FR"; 81 | await vm.$nextTick(); 82 | expect(vm.$el.innerHTML).toEqual("Bonjour John Doe"); 83 | }); 84 | 85 | it("escapes HTML in variables by default", async () => { 86 | const vm = mount({ 87 | template: "Hello %{ openingTag }%{ name }%{ closingTag }
", 88 | data() { 89 | return { 90 | name: "John Doe", 91 | openingTag: "", 92 | closingTag: "", 93 | }; 94 | }, 95 | }).vm; 96 | (vm as any).$language.current = "fr_FR"; 97 | await vm.$nextTick(); 98 | expect(vm.$el.innerHTML).toEqual("Bonjour <b>John Doe</b>"); 99 | }); 100 | 101 | it("forces HTML rendering in variables (with the `render-html` attribute set to `true`)", async () => { 102 | const vm = mount({ 103 | template: 'Hello %{ openingTag }%{ name }%{ closingTag }
', 104 | data() { 105 | return { 106 | name: "John Doe", 107 | openingTag: "", 108 | closingTag: "", 109 | }; 110 | }, 111 | }).vm; 112 | (vm as any).$language.current = "fr_FR"; 113 | await vm.$nextTick(); 114 | expect(vm.$el.innerHTML).toEqual("Bonjour John Doe"); 115 | }); 116 | 117 | it("allows interpolation with computed property", async () => { 118 | const vm = mount({ 119 | template: "Hello %{ name }
", 120 | computed: { 121 | name() { 122 | return "John Doe"; 123 | }, 124 | }, 125 | }).vm; 126 | (vm as any).$language.current = "fr_FR"; 127 | await vm.$nextTick(); 128 | expect(vm.$el.innerHTML).toEqual("Bonjour John Doe"); 129 | }); 130 | 131 | it("allows custom params for interpolation", async () => { 132 | const vm = mount({ 133 | template: 'Hello %{ name }
', 134 | data() { 135 | return { 136 | someNewNameVar: "John Doe", 137 | }; 138 | }, 139 | }).vm; 140 | (vm as any).$language.current = "fr_FR"; 141 | await vm.$nextTick(); 142 | expect(vm.$el.innerHTML.trim()).toEqual("Bonjour John Doe"); 143 | }); 144 | 145 | it("allows interpolation within v-for with custom params", async () => { 146 | let names = ["John Doe", "Chester"]; 147 | const vm = mount({ 148 | template: 'Hello %{ name }
', 149 | data() { 150 | return { 151 | names, 152 | }; 153 | }, 154 | }).vm; 155 | (vm as any).$language.current = "fr_FR"; 156 | await vm.$nextTick(); 157 | const html = vm.$el.innerHTML.trim(); 158 | const missedName = names.some((name) => { 159 | if (html.indexOf(name) === -1) { 160 | return true; 161 | } 162 | }); 163 | expect(missedName).toEqual(false); 164 | }); 165 | 166 | it("logs a warning in the console if translate-params is used", async () => { 167 | const warnSpy = vi.spyOn(console, "warn"); 168 | const vm = mount({ 169 | template: 'Hello %{ name }
', 170 | data() { 171 | return { 172 | someNewNameVar: "John Doe", 173 | }; 174 | }, 175 | }).vm; 176 | (vm as any).$language.current = "fr_FR"; 177 | await vm.$nextTick(); 178 | expect(vm.$el.innerHTML.trim()).toEqual("Bonjour name"); 179 | expect(console.warn).toHaveBeenCalled; 180 | warnSpy.mockRestore(); 181 | }); 182 | 183 | it("updates a translation after a data change", async () => { 184 | const vm = mount({ 185 | template: 'Hello %{ name }
', 186 | data() { 187 | return { name: "John Doe" }; 188 | }, 189 | }).vm; 190 | (vm as any).$language.current = "fr_FR"; 191 | await vm.$nextTick(); 192 | expect(vm.$el.innerHTML).toEqual("Bonjour John Doe"); 193 | (vm as any).name = "Kenny"; 194 | await vm.$nextTick(); 195 | expect(vm.$el.innerHTML).toEqual("Bonjour Kenny"); 196 | }); 197 | 198 | it("translates plurals", async () => { 199 | const vm = mount({ 200 | template: 201 | '%{ count } car
', 202 | data() { 203 | return { count: 2 }; 204 | }, 205 | }).vm; 206 | (vm as any).$language.current = "fr_FR"; 207 | await vm.$nextTick(); 208 | expect(vm.$el.innerHTML).toEqual("2 véhicules"); 209 | }); 210 | 211 | it("translates plurals with computed property", async () => { 212 | const vm = mount({ 213 | template: 214 | '%{ count } car
', 215 | computed: { 216 | count() { 217 | return 2; 218 | }, 219 | }, 220 | }).vm; 221 | (vm as any).$language.current = "fr_FR"; 222 | await vm.$nextTick(); 223 | expect(vm.$el.innerHTML).toEqual("2 véhicules"); 224 | }); 225 | 226 | it("updates a plural translation after a data change", async () => { 227 | const vm = mount({ 228 | template: 229 | '%{ count } %{ brand } car
', 230 | data() { 231 | return { count: 1, brand: "Toyota" }; 232 | }, 233 | }).vm; 234 | (vm as any).$language.current = "fr_FR"; 235 | await vm.$nextTick(); 236 | expect(vm.$el.innerHTML).toEqual("1 Toyota véhicule"); 237 | (vm as any).count = 8; 238 | await vm.$nextTick(); 239 | expect(vm.$el.innerHTML).toEqual("8 Toyota véhicules"); 240 | }); 241 | 242 | it("updates a translation after a language change", async () => { 243 | const vm = mount({ template: "bar
" }; 34 | const interpolated = interpolate(msgid, context); 35 | expect(interpolated).toEqual("Foo <p>bar</p> baz"); 36 | }); 37 | 38 | it("with HTML in var (should NOT be escaped)", () => { 39 | const msgid = "Foo %{ placeholder } baz"; 40 | const context = { placeholder: "bar
" }; 41 | const disableHtmlEscaping = true; 42 | const interpolated = interpolate(msgid, context, disableHtmlEscaping, undefined); 43 | expect(interpolated).toEqual("Foobar
baz"); 44 | }); 45 | 46 | it("with multiple spaces in the placeholder", () => { 47 | const msgid = "Foo %{ placeholder } baz"; 48 | const context = { placeholder: "bar" }; 49 | const interpolated = interpolate(msgid, context); 50 | expect(interpolated).toEqual("Foo bar baz"); 51 | }); 52 | 53 | it("with the same placeholder multiple times", () => { 54 | const msgid = "Foo %{ placeholder } baz %{ placeholder } foo"; 55 | const context = { placeholder: "bar" }; 56 | const interpolated = interpolate(msgid, context); 57 | expect(interpolated).toEqual("Foo bar baz bar foo"); 58 | }); 59 | 60 | it("with multiple placeholders", () => { 61 | const msgid = "%{foo}%{bar}%{baz}%{bar}%{foo}"; 62 | const context = { foo: 1, bar: 2, baz: 3 }; 63 | const interpolated = interpolate(msgid, context); 64 | expect(interpolated).toEqual("12321"); 65 | }); 66 | 67 | it("with new lines", () => { 68 | const msgid = "%{ \n \n\n\n\n foo} %{bar}!"; 69 | const context = { foo: "Hello", bar: "world" }; 70 | const interpolated = interpolate(msgid, context); 71 | expect(interpolated).toEqual("Hello world!"); 72 | }); 73 | 74 | it("with an object", () => { 75 | const msgid = "Foo %{ foo.bar } baz"; 76 | const context = { 77 | foo: { 78 | bar: "baz", 79 | }, 80 | }; 81 | const interpolated = interpolate(msgid, context); 82 | expect(interpolated).toEqual("Foo baz baz"); 83 | }); 84 | 85 | it("with an array", () => { 86 | const msgid = "Foo %{ foo[1] } baz"; 87 | const context = { 88 | foo: ["bar", "baz"], 89 | }; 90 | const interpolated = interpolate(msgid, context); 91 | expect(interpolated).toEqual("Foo baz baz"); 92 | }); 93 | 94 | it("with a multi level object", () => { 95 | const msgid = "Foo %{ a.b.x } %{ a.c.y[1].title }"; 96 | const context = { 97 | a: { 98 | b: { 99 | x: "foo", 100 | }, 101 | c: { 102 | y: [{ title: "bar" }, { title: "baz" }], 103 | }, 104 | }, 105 | }; 106 | const interpolated = interpolate(msgid, context); 107 | expect(interpolated).toEqual("Foo foo baz"); 108 | }); 109 | 110 | it("with a failing expression", () => { 111 | const msgid = 'Foo %{ alert("foobar") } baz'; 112 | const context = { 113 | foo: "bar", 114 | }; 115 | const warnSpy = vi.spyOn(console, "warn"); 116 | interpolate(msgid, context); 117 | expect(warnSpy).toHaveBeenCalledTimes(1); 118 | expect(warnSpy).toHaveBeenCalledWith('Cannot evaluate expression: alert("foobar")'); 119 | warnSpy.mockRestore(); 120 | }); 121 | 122 | it("should warn of the usage of mustache syntax", () => { 123 | const msgid = "Foo {{ foo }} baz"; 124 | const context = { 125 | foo: "bar", 126 | }; 127 | const warnSpy = vi.spyOn(console, "warn"); 128 | interpolate(msgid, context); 129 | expect(warnSpy).not.toHaveBeenCalled; 130 | plugin.silent = false; 131 | interpolate(msgid, context); 132 | expect(warnSpy).toHaveBeenCalledTimes(1); 133 | warnSpy.mockRestore(); 134 | }); 135 | }); 136 | -------------------------------------------------------------------------------- /tests/json/component.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | en_US: { 3 | Answer: { 4 | Noun: "Answer (noun)", 5 | Verb: "Answer (verb)", 6 | }, 7 | "Hello %{ name }": "Hello %{ name }", 8 | "Hello %{ user.details.name }": "Hello %{ user.details.name }", 9 | Pending: "Pending", 10 | "%{ count } car": ["1 car", "%{ count } cars"], 11 | "A lot of lines": "A lot of lines", 12 | }, 13 | fr_FR: { 14 | Answer: { 15 | Noun: "Réponse (nom)", 16 | Verb: "Réponse (verbe)", 17 | }, 18 | "Hello %{ name }": "Bonjour %{ name }", 19 | "Hello %{ user.details.name }": "Bonjour %{ user.details.name }", 20 | Pending: "En cours", 21 | "%{ count } car": ["1 véhicule", "%{ count } véhicules"], 22 | "A lot of lines": "Plein de lignes", 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /tests/json/directive.arabic.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | ar: { 3 | Orange: "البرتقالي", 4 | "%{ count } day": [ 5 | "%{ count }أقل من يوم", 6 | "%{ count }يوم واحد", 7 | "%{ count }يومان", 8 | "%{ count } أيام", 9 | "%{ count } يومًا", 10 | "%{ count } يوم", 11 | ], 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /tests/json/directive.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | en_US: { 3 | Answer: { 4 | Noun: "Answer (noun)", 5 | Verb: "Answer (verb)", 6 | }, 7 | "Hello %{ name }": "Hello %{ name }", 8 | "Hello %{ openingTag }%{ name }%{ closingTag }": "Hello %{ openingTag }%{ name }%{ closingTag }", 9 | Pending: "Pending", 10 | "%{ count } car": ["1 car", "%{ count } cars"], 11 | "%{ count } %{ brand } car": [ 12 | "1 %{ brand } car", 13 | "%{ count } %{ brand } cars", 14 | ], 15 | }, 16 | fr_FR: { 17 | Answer: { 18 | Noun: "Réponse (nom)", 19 | Verb: "Réponse (verbe)", 20 | }, 21 | "Hello %{ openingTag }%{ name }%{ closingTag }": "Bonjour %{ openingTag }%{ name }%{ closingTag }", 22 | "Hello %{ name }": "Bonjour %{ name }", 23 | Pending: "En cours", 24 | "%{ count } car": ["1 véhicule", "%{ count } véhicules"], 25 | "%{ count } %{ brand } car": [ 26 | "1 %{ brand } véhicule", 27 | "%{ count } %{ brand } véhicules", 28 | ], 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /tests/json/plugin.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | en_US: { 3 | Foo: "Foo en_US", 4 | }, 5 | fr_FR: { 6 | Foo: "Foo fr_FR", 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /tests/json/translate.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | en_US: { 3 | Answer: { 4 | Noun: "Answer (noun)", 5 | Verb: "Answer (verb)", 6 | }, 7 | "Hello %{ name }": "Hello %{ name }", 8 | May: "May", 9 | Pending: "Pending", 10 | "%{ carCount } car": ["1 car", "%{ carCount } cars"], 11 | "%{ carCount } car (noun)": { 12 | Noun: ["%{ carCount } car (noun)", "%{ carCount } cars (noun)"], 13 | }, 14 | "%{ carCount } car (verb)": { 15 | Verb: ["%{ carCount } car (verb)", "%{ carCount } cars (verb)"], 16 | }, 17 | "%{ carCount } car (multiple contexts)": { 18 | "": ["1 car", "%{ carCount } cars"], 19 | Context: ["1 car with context", "%{ carCount } cars with context"], 20 | }, 21 | Object: { 22 | "": "Object", 23 | Context: "Object with context", 24 | }, 25 | 26 | "%{ orangeCount } orange": ["", "%{ orangeCount } oranges"], 27 | "%{ appleCount } apple": ["1 apple", ""], 28 | }, 29 | fr: { 30 | Answer: { 31 | Noun: "Réponse (nom)", 32 | Verb: "Réponse (verbe)", 33 | }, 34 | "Hello %{ name }": "Bonjour %{ name }", 35 | May: "Pourrait", 36 | Pending: "En cours", 37 | "%{ carCount } car": ["1 véhicule", "%{ carCount } véhicules"], 38 | "%{ carCount } car (noun)": { 39 | Noun: ["%{ carCount } véhicule (nom)", "%{ carCount } véhicules (nom)"], 40 | }, 41 | "%{ carCount } car (verb)": { 42 | Verb: ["%{ carCount } véhicule (verbe)", "%{ carCount } véhicules (verbe)"], 43 | }, 44 | "%{ carCount } car (multiple contexts)": { 45 | "": ["1 véhicule", "%{ carCount } véhicules"], 46 | Context: ["1 véhicule avec contexte", "%{ carCount } véhicules avec contexte"], 47 | }, 48 | Object: { 49 | "": "Objet", 50 | Context: "Objet avec contexte", 51 | }, 52 | }, 53 | }; 54 | -------------------------------------------------------------------------------- /tests/plurals.spec.ts: -------------------------------------------------------------------------------- 1 | import plurals from "../src/plurals"; 2 | 3 | describe("Translate plurals tests", () => { 4 | it("plural form of singular english is 0", () => { 5 | expect(plurals.getTranslationIndex("en", 1)).toEqual(0); 6 | }); 7 | 8 | it("plural form of plural english is 1", () => { 9 | expect(plurals.getTranslationIndex("en", 2)).toEqual(1); 10 | }); 11 | 12 | it("plural form of Infinity in english is 1", () => { 13 | expect(plurals.getTranslationIndex("en", Infinity)).toEqual(1); 14 | }); 15 | 16 | it("plural form of zero in english is 1", () => { 17 | expect(plurals.getTranslationIndex("en", 0)).toEqual(1); 18 | }); 19 | 20 | it("plural form of singular dutch is 0", () => { 21 | expect(plurals.getTranslationIndex("nl", 1)).toEqual(0); 22 | }); 23 | 24 | it("plural form of plural dutch is 1", () => { 25 | expect(plurals.getTranslationIndex("nl", 2)).toEqual(1); 26 | }); 27 | 28 | it("plural form of zero in dutch is 1", () => { 29 | expect(plurals.getTranslationIndex("nl", 0)).toEqual(1); 30 | }); 31 | 32 | it("plural form of singular french is 0", () => { 33 | expect(plurals.getTranslationIndex("fr", 1)).toEqual(0); 34 | }); 35 | 36 | it("plural form of plural french is 1", () => { 37 | expect(plurals.getTranslationIndex("fr", 2)).toEqual(1); 38 | }); 39 | 40 | it("plural form of zero in french is 0", () => { 41 | expect(plurals.getTranslationIndex("fr", 0)).toEqual(0); 42 | }); 43 | 44 | it("plural form of 27 in arabic is 4", () => { 45 | expect(plurals.getTranslationIndex("ar", 27)).toEqual(4); 46 | }); 47 | 48 | it("plural form of 23 in kashubian is 1", () => { 49 | expect(plurals.getTranslationIndex("csb", 23)).toEqual(1); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /tests/translate.spec.ts: -------------------------------------------------------------------------------- 1 | import type { Language } from "../src/typeDefs"; 2 | import translateRaw from "../src/translate"; 3 | import { mountWithPlugin } from "./utils"; 4 | import translations from "./json/translate"; 5 | 6 | const mount = mountWithPlugin({ 7 | availableLanguages: { 8 | en_US: "American English", 9 | fr_FR: "Français", 10 | }, 11 | defaultLanguage: "en_US", 12 | sourceCodeLanguage: "en_US", 13 | translations: translations, 14 | setGlobalProperties: true, 15 | }); 16 | 17 | const wrapper = mount({ template: "" }); 18 | let plugin = wrapper.vm.$.appContext.config.globalProperties.$language as Language; 19 | const setLanguage = (lang: string) => (plugin.current = lang); 20 | 21 | const translate = translateRaw(plugin); 22 | 23 | describe("Translate tests", () => { 24 | let translated; 25 | beforeEach(async () => { 26 | plugin = wrapper.vm.$.appContext.config.globalProperties.$language as Language; 27 | setLanguage("en_US"); 28 | }); 29 | 30 | it("tests the getTranslation() method", () => { 31 | translated = translate.getTranslation("", 1, null, null, "fr_FR"); 32 | expect(translated).toEqual(""); 33 | 34 | translated = translate.getTranslation("Unexisting language", null, null, null, "be_FR"); 35 | expect(translated).toEqual("Unexisting language"); 36 | 37 | translated = translate.getTranslation("Untranslated key", null, null, null, "fr_FR"); 38 | expect(translated).toEqual("Untranslated key"); 39 | 40 | translated = translate.getTranslation("Pending", 1, null, null, "fr_FR"); 41 | expect(translated).toEqual("En cours"); 42 | 43 | translated = translate.getTranslation("%{ carCount } car", 2, null, null, "fr_FR"); 44 | expect(translated).toEqual("%{ carCount } véhicules"); 45 | 46 | translated = translate.getTranslation("Answer", 1, "Verb", null, "fr_FR"); 47 | expect(translated).toEqual("Réponse (verbe)"); 48 | 49 | translated = translate.getTranslation("Answer", 1, "Noun", null, "fr_FR"); 50 | expect(translated).toEqual("Réponse (nom)"); 51 | 52 | translated = translate.getTranslation("Pending", 1, null, null, "en_US"); 53 | expect(translated).toEqual("Pending"); 54 | 55 | // If no translation exists, display the untranslated message (if n==1 then use singular form). 56 | translated = translate.getTranslation("Untranslated %{ n } item", 1, null, "Untranslated %{ n } items", "fr_FR"); 57 | expect(translated).toEqual("Untranslated %{ n } item"); 58 | 59 | // If no translation exists, display the untranslated message (if n!=1 then use plural form). 60 | translated = translate.getTranslation("Untranslated %{ n } item", 0, null, "Untranslated %{ n } items", "fr_FR"); 61 | expect(translated).toEqual("Untranslated %{ n } items"); 62 | 63 | // If no translation exists, display the untranslated message (if n!=1 then use plural form). 64 | translated = translate.getTranslation("Untranslated %{ n } item", 10, null, "Untranslated %{ n } items", "fr_FR"); 65 | expect(translated).toEqual("Untranslated %{ n } items"); 66 | 67 | // Test that it works when a msgid exists with and without a context, see #32. 68 | translated = translate.getTranslation("Object", null, null, null, "fr_FR"); 69 | expect(translated).toEqual("Objet"); 70 | translated = translate.getTranslation("Object", null, "Context", null, "fr_FR"); 71 | expect(translated).toEqual("Objet avec contexte"); 72 | 73 | // Ensure that pluralization is right in English when there are no English translations. 74 | translated = translate.getTranslation("Untranslated %{ n } item", 0, null, "Untranslated %{ n } items", "en_US"); 75 | expect(translated).toEqual("Untranslated %{ n } items"); 76 | translated = translate.getTranslation("Untranslated %{ n } item", 1, null, "Untranslated %{ n } items", "en_US"); 77 | expect(translated).toEqual("Untranslated %{ n } item"); 78 | translated = translate.getTranslation("Untranslated %{ n } item", 2, null, "Untranslated %{ n } items", "en_US"); 79 | expect(translated).toEqual("Untranslated %{ n } items"); 80 | 81 | // Ensure that pluralization does not fail if the translation have empty strings for singural or plural form. 82 | translated = translate.getTranslation("%{ orangeCount } orange", 1, null, "%{ orangeCount } oranges", "en_US"); 83 | expect(translated).toEqual("%{ orangeCount } orange"); 84 | translated = translate.getTranslation("%{ orangeCount } orange", 2, null, "%{ orangeCount } oranges", "en_US"); 85 | expect(translated).toEqual("%{ orangeCount } oranges"); 86 | 87 | translated = translate.getTranslation("%{ appleCount } apple", 1, null, "%{ appleCount } apples", "en_US"); 88 | expect(translated).toEqual("1 apple"); 89 | translated = translate.getTranslation("%{ appleCount } apple", 2, null, "%{ appleCount } apples", "en_US"); 90 | expect(translated).toEqual("%{ appleCount } apples"); 91 | 92 | // Test plural message with multiple contexts (default context and 'Context'') 93 | translated = translate.getTranslation("%{ carCount } car (multiple contexts)", 1, null, null, "en_US"); 94 | expect(translated).toEqual("1 car"); 95 | translated = translate.getTranslation("%{ carCount } car (multiple contexts)", 2, null, null, "en_US"); 96 | expect(translated).toEqual("%{ carCount } cars"); 97 | translated = translate.getTranslation("%{ carCount } car (multiple contexts)", 1, "Context", null, "en_US"); 98 | expect(translated).toEqual("1 car with context"); 99 | translated = translate.getTranslation("%{ carCount } car (multiple contexts)", 2, "Context", null, "en_US"); 100 | expect(translated).toEqual("%{ carCount } cars with context"); 101 | }); 102 | 103 | it("tests the gettext() method", () => { 104 | const gettext = translate.gettext.bind(translate) as Language["$gettext"]; 105 | 106 | setLanguage("fr_FR"); 107 | expect(gettext("Pending")).toEqual("En cours"); 108 | 109 | setLanguage("en_US"); 110 | expect(gettext("Pending")).toEqual("Pending"); 111 | 112 | expect(gettext("Interpolated: %{param1}", { param1: "success" })).toEqual("Interpolated: success"); 113 | expect(gettext("Interpolated escaped: %{param1}", { param1: "success" })).toEqual( 114 | "Interpolated escaped: <b>success</b>", 115 | ); 116 | expect(gettext("Interpolated unescaped: %{param1}", { param1: "success" }, true)).toEqual( 117 | "Interpolated unescaped: success", 118 | ); 119 | }); 120 | 121 | it("tests the pgettext() method", () => { 122 | const undetectablePgettext = translate.pgettext.bind(translate) as Language["$pgettext"]; // Hide from gettext-extract. 123 | 124 | setLanguage("fr_FR"); 125 | expect(undetectablePgettext("Noun", "Answer")).toEqual("Réponse (nom)"); 126 | 127 | setLanguage("en_US"); 128 | expect(undetectablePgettext("Noun", "Answer")).toEqual("Answer (noun)"); 129 | 130 | expect(undetectablePgettext("ctx", "Interpolated: %{param1}", { param1: "success" })).toEqual( 131 | "Interpolated: success", 132 | ); 133 | expect(undetectablePgettext("ctx", "Interpolated escaped: %{param1}", { param1: "success" })).toEqual( 134 | "Interpolated escaped: <b>success</b>", 135 | ); 136 | expect( 137 | undetectablePgettext("ctx", "Interpolated unescaped: %{param1}", { param1: "success" }, true), 138 | ).toEqual("Interpolated unescaped: success"); 139 | }); 140 | 141 | it("tests the ngettext() method", () => { 142 | const undetectableNgettext = translate.ngettext.bind(translate) as Language["$ngettext"]; // Hide from gettext-extract. 143 | 144 | setLanguage("fr_FR"); 145 | expect(undetectableNgettext("%{ carCount } car", "%{ carCount } cars", 2)).toEqual("%{ carCount } véhicules"); 146 | 147 | setLanguage("en_US"); 148 | expect(undetectableNgettext("%{ carCount } car", "%{ carCount } cars", 2)).toEqual("%{ carCount } cars"); 149 | 150 | // If no translation exists, display the untranslated message (if n==1 then use singular form). 151 | setLanguage("fr_FR"); 152 | expect(undetectableNgettext("Untranslated %{ n } item", "Untranslated %{ n } items", 1)).toEqual( 153 | "Untranslated %{ n } item", 154 | ); 155 | 156 | // If no translation exists, display the untranslated message (if n!=1 then use plural form). 157 | setLanguage("fr_FR"); 158 | expect(undetectableNgettext("Untranslated %{ n } item", "Untranslated %{ n } items", -1)).toEqual( 159 | "Untranslated %{ n } items", 160 | ); 161 | 162 | expect( 163 | undetectableNgettext("Interpolated: %{param1}", "Interpolated plural: %{param1}", 1, { param1: "success" }), 164 | ).toEqual("Interpolated: success"); 165 | expect( 166 | undetectableNgettext("Interpolated escaped: %{param1}", "Interpolated escaped plural: %{param1}", 1, { 167 | param1: "success", 168 | }), 169 | ).toEqual("Interpolated escaped: <b>success</b>"); 170 | expect( 171 | undetectableNgettext( 172 | "Interpolated unescaped: %{param1}", 173 | "Interpolated unescaped plural: %{param1}", 174 | 1, 175 | { param1: "success" }, 176 | true, 177 | ), 178 | ).toEqual("Interpolated unescaped: success"); 179 | }); 180 | 181 | it("tests the npgettext() method", () => { 182 | const undetectableNpgettext = translate.npgettext.bind(translate) as Language["$npgettext"]; // Hide from gettext-extract 183 | 184 | setLanguage("fr_FR"); 185 | expect(undetectableNpgettext("Noun", "%{ carCount } car (noun)", "%{ carCount } cars (noun)", 2)).toEqual( 186 | "%{ carCount } véhicules (nom)", 187 | ); 188 | 189 | setLanguage("en_US"); 190 | expect(undetectableNpgettext("Verb", "%{ carCount } car (verb)", "%{ carCount } cars (verb)", 2)).toEqual( 191 | "%{ carCount } cars (verb)", 192 | ); 193 | 194 | setLanguage("fr_FR"); 195 | expect(undetectableNpgettext("Noun", "%{ carCount } car (noun)", "%{ carCount } cars (noun)", 1)).toEqual( 196 | "%{ carCount } véhicule (nom)", 197 | ); 198 | 199 | setLanguage("en_US"); 200 | expect(undetectableNpgettext("Verb", "%{ carCount } car (verb)", "%{ carCount } cars (verb)", 1)).toEqual( 201 | "%{ carCount } car (verb)", 202 | ); 203 | 204 | // If no translation exists, display the default singular form (if n < 2). 205 | setLanguage("fr_FR"); 206 | expect( 207 | undetectableNpgettext("Noun", "Untranslated %{ n } item (noun)", "Untranslated %{ n } items (noun)", 1), 208 | ).toEqual("Untranslated %{ n } item (noun)"); 209 | 210 | // If no translation exists, display the default plural form (if n > 1). 211 | setLanguage("fr_FR"); 212 | expect( 213 | undetectableNpgettext("Noun", "Untranslated %{ n } item (noun)", "Untranslated %{ n } items (noun)", 2), 214 | ).toEqual("Untranslated %{ n } items (noun)"); 215 | 216 | expect( 217 | undetectableNpgettext("ctx", "Interpolated: %{param1}", "Interpolated plural: %{param1}", 1, { 218 | param1: "success", 219 | }), 220 | ).toEqual("Interpolated: success"); 221 | expect( 222 | undetectableNpgettext("ctx", "Interpolated escaped: %{param1}", "Interpolated escaped plural: %{param1}", 1, { 223 | param1: "success", 224 | }), 225 | ).toEqual("Interpolated escaped: <b>success</b>"); 226 | expect( 227 | undetectableNpgettext( 228 | "ctx", 229 | "Interpolated unescaped: %{param1}", 230 | "Interpolated unescaped plural: %{param1}", 231 | 1, 232 | { param1: "success" }, 233 | true, 234 | ), 235 | ).toEqual("Interpolated unescaped: success"); 236 | }); 237 | 238 | it("works when a msgid exists with and without a context, but the one with the context has not been translated", () => { 239 | expect(plugin.silent).toEqual(false); 240 | const warnSpy = vi.spyOn(console, "warn"); 241 | 242 | translated = translate.getTranslation("May", null, null, null, "fr_FR"); 243 | expect(translated).toEqual("Pourrait"); 244 | 245 | translated = translate.getTranslation("May", null, "Month name", null, "fr_FR"); 246 | expect(translated).toEqual("May"); 247 | 248 | expect(warnSpy).toHaveBeenCalledTimes(1); 249 | expect(warnSpy).toHaveBeenCalledWith("Untranslated fr_FR key found: May (with context: Month name)"); 250 | 251 | warnSpy.mockRestore(); 252 | }); 253 | }); 254 | -------------------------------------------------------------------------------- /tests/utils.ts: -------------------------------------------------------------------------------- 1 | import { createGettext } from "../src"; 2 | import type { GetTextOptions } from "../src/typeDefs"; 3 | import { mount } from "@vue/test-utils"; 4 | 5 | export const mountWithPlugin = (pluginOptions: Partial