mirror of
https://github.com/cupcakearmy/svelte-i18n.git
synced 2024-07-07 06:04:47 +02:00
Add new documentation to readme
This commit is contained in:
Christian Kaisermann
parent
06072e0a9d
commit
2ebeac4ff0
284
README.md
284
README.md
@ -4,132 +4,224 @@
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### On the `store`
|
`svelte-i18n` utilizes svelte `stores` for keeping track of the current locale, dictionary of messages and the main format function. This way, we keep everything neat, in sync and easy to use on your svelte files.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Locale
|
||||||
|
|
||||||
|
The `locale` store defines what is the current locale.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { i18n } from 'svelte-i18n'
|
import { locale, dictionary } from 'svelte-i18n'
|
||||||
import { Store } from 'svelte/store'
|
|
||||||
|
|
||||||
/** i18n(svelteStore, { dictionary }) */
|
// Set the current locale to en-US
|
||||||
let store = new Store()
|
locale.set('en-US')
|
||||||
|
|
||||||
store = i18n(store, {
|
// This is a store, so we can subscribe to its changes
|
||||||
dictionary: {
|
locale.subscribe(() => {
|
||||||
'pt-BR': {
|
console.log('locale change')
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### The dictionary
|
||||||
|
|
||||||
|
The `dictionary` store defines the dictionary of messages of all locales.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { locale, dictionary } from 'svelte-i18n'
|
||||||
|
|
||||||
|
// Define a locale dictionary
|
||||||
|
dictionary.set({
|
||||||
|
pt: {
|
||||||
message: 'Mensagem',
|
message: 'Mensagem',
|
||||||
greeting: 'Olá {name}, como vai?',
|
'switch.lang': 'Trocar idioma',
|
||||||
greetingIndex: 'Olá {0}, como vai?',
|
greeting: {
|
||||||
meter: 'metros | metro | metros',
|
ask: 'Por favor, digite seu nome',
|
||||||
book: 'livro | livros',
|
message: 'Olá {name}, como vai?',
|
||||||
messages: {
|
|
||||||
alert: 'Alerta',
|
|
||||||
error: 'Erro',
|
|
||||||
},
|
},
|
||||||
|
photos:
|
||||||
|
'Você {n, plural, =0 {não tem fotos.} =1 {tem uma foto.} other {tem # fotos.}}',
|
||||||
|
cats: 'Tenho {n, number} {n,plural,=0{gatos}one{gato}other{gatos}}',
|
||||||
},
|
},
|
||||||
'en-US': {
|
en: {
|
||||||
message: 'Message',
|
message: 'Message',
|
||||||
greeting: 'Hello {name}, how are you?',
|
'switch.lang': 'Switch language',
|
||||||
greetingIndex: 'Hello {0}, how are you?',
|
greeting: {
|
||||||
meter: 'meters | meter | meters',
|
ask: 'Please type your name',
|
||||||
book: 'book | books',
|
message: 'Hello {name}, how are you?',
|
||||||
messages: {
|
|
||||||
alert: 'Alert',
|
|
||||||
error: 'Error',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
photos:
|
||||||
|
'You have {n, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}',
|
||||||
|
cats: 'I have {n, number} {n,plural,one{cat}other{cats}}',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
// It's also possible to merge the current dictionary
|
||||||
* Extend the initial dictionary.
|
// with other objets
|
||||||
* Dictionaries are deeply merged.
|
dictionary.update(dict => {
|
||||||
* */
|
dict.fr = {
|
||||||
store.i18n.extendDictionary({
|
// ...french messages
|
||||||
'pt-BR': {
|
}
|
||||||
messages: {
|
return dict
|
||||||
warn: 'Aviso',
|
|
||||||
success: 'Sucesso',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
messages: {
|
|
||||||
warn: 'Warn',
|
|
||||||
success: 'Success',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
/** Set the initial locale */
|
|
||||||
store.i18n.setLocale('en-US')
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### On `templates`
|
Each language message dictionary can be as deep as you want. Messages can also be looked up by a string represetation of it's path on the dictionary (i.e `greeting.message`).
|
||||||
|
|
||||||
#### Basic usage
|
---
|
||||||
|
|
||||||
|
### Formatting
|
||||||
|
|
||||||
|
The `_`/`format` store is the actual formatter method. To use it, it's simple as any other svelte store.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
// locale is en
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input placeholder="{$_('greeting.ask')}" />
|
||||||
|
```
|
||||||
|
|
||||||
|
`svelte-i18n` uses `formatjs` behind the scenes, which means it supports the [ICU message format](http://userguide.icu-project.org/formatparse/messages) for interpolation, pluralization and much more.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>
|
<div>
|
||||||
{$_('message')}: {$_('messages.success')}
|
{$_('greeting.message', { name: 'John' })}
|
||||||
<!-- Message: SUCCESS-->
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Current locale
|
|
||||||
|
|
||||||
The current locale is available via `this.store.get().locale`.
|
|
||||||
|
|
||||||
#### Interpolation
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div>
|
|
||||||
<!-- Named interpolation -->
|
|
||||||
{$_('greeting', { name: 'John' })}
|
|
||||||
<!-- Hello John, how are you? -->
|
<!-- Hello John, how are you? -->
|
||||||
|
|
||||||
<!-- List interpolation -->
|
{$_('photos', { n: 0 })}
|
||||||
{$_('greetingIndex', ['John'])}
|
<!-- You have no photos. -->
|
||||||
<!-- Hello John, how are you?-->
|
|
||||||
|
{$_('photos', { n: 12 })}
|
||||||
|
<!-- You have 12 photos. -->
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Pluralization
|
### Formatting methods
|
||||||
|
|
||||||
|
#### `_` / `format`
|
||||||
|
|
||||||
|
`function(messageId: string, locale:? string): string`
|
||||||
|
|
||||||
|
`function(messageId: string, interpolations?: object, locale:? string): string`
|
||||||
|
|
||||||
|
Main formatting method that formats a localized message by its id.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>
|
<script>
|
||||||
0 {$_.plural('meter', 0)}
|
import { _ } from 'svelte-i18n'
|
||||||
<!-- 0 meters -->
|
</script>
|
||||||
|
|
||||||
1 {$_.plural('meter', 1)}
|
<div>{$_('greeting.ask')}</div>
|
||||||
<!-- 1 meter -->
|
<!-- Please type your name -->
|
||||||
|
|
||||||
100 {$_.plural('meter', 100)}
|
|
||||||
<!-- 100 meters -->
|
|
||||||
|
|
||||||
0 {$_.plural('book', 0)}
|
|
||||||
<!-- 0 books -->
|
|
||||||
|
|
||||||
1 {$_.plural('book', 1)}
|
|
||||||
<!-- 1 book -->
|
|
||||||
|
|
||||||
10 {$_.plural('book', 10)}
|
|
||||||
<!-- 10 books -->
|
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Utilities
|
#### `_.upper`
|
||||||
|
|
||||||
|
Transforms a localized message into uppercase.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>
|
<script>
|
||||||
{$_.upper('message')}
|
import { _ } from 'svelte-i18n'
|
||||||
<!-- MESSAGE -->
|
</script>
|
||||||
|
|
||||||
{$_.lower('message')}
|
<div>{$_.upper('greeting.ask')}</div>
|
||||||
<!-- message -->
|
<!-- PLEASE TYPE YOUR NAME -->
|
||||||
|
```
|
||||||
{$_.capital('message')}
|
|
||||||
<!-- Message -->
|
#### `_.lower`
|
||||||
|
|
||||||
{$_.title('greeting', { name: 'John' })}
|
Transforms a localized message into lowercase.
|
||||||
<!-- Hello John, How Are You?-->
|
|
||||||
</div>
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.lower('greeting.ask')}</div>
|
||||||
|
<!-- PLEASE TYPE YOUR NAME -->
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `_.capital`
|
||||||
|
|
||||||
|
Capitalize a localized message.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.capital('greeting.ask')}</div>
|
||||||
|
<!-- Please type your name -->
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `_.title`
|
||||||
|
|
||||||
|
Transform the message into title case.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.capital('greeting.ask')}</div>
|
||||||
|
<!-- Please Type Your Name -->
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `_.time`
|
||||||
|
|
||||||
|
`function(time: Date, format?: string, locale?: string)`
|
||||||
|
|
||||||
|
Formats a date object into a time string with the specified format (`short`, `medium`, `long`, `full`). Please refer to the [ICU message format](http://userguide.icu-project.org/formatparse/messages) documentation for all available. formats
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.time(new Date(2019, 3, 24, 23, 45))}</div>
|
||||||
|
<!-- 11:45 PM -->
|
||||||
|
|
||||||
|
<div>{$_.time(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
|
||||||
|
<!-- 11:45:00 PM -->
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `_.date`
|
||||||
|
|
||||||
|
`function(date: Date, format?: string, locale?: string)`
|
||||||
|
|
||||||
|
Formats a date object into a string with the specified format (`short`, `medium`, `long`, `full`). Please refer to the [ICU message format](http://userguide.icu-project.org/formatparse/messages) documentation for all available. formats
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.date(new Date(2019, 3, 24, 23, 45))}</div>
|
||||||
|
<!-- 4/24/19 -->
|
||||||
|
|
||||||
|
<div>{$_.date(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
|
||||||
|
<!-- Apr 24, 2019 -->
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `_.number`
|
||||||
|
|
||||||
|
`function(number: Number, locale?: string)`
|
||||||
|
|
||||||
|
Formats a number with the specified locale
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{$_.number(100000000)}</div>
|
||||||
|
<!-- 100,000,000 -->
|
||||||
|
|
||||||
|
<div>{$_.number(100000000, 'pt')}</div>
|
||||||
|
<!-- 100.000.000 -->
|
||||||
```
|
```
|
||||||
|
|||||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "svelte-i18n",
|
"name": "svelte-i18n",
|
||||||
"version": "1.0.1-beta",
|
"version": "1.0.2-beta",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -5556,11 +5556,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"intl-format-cache": {
|
|
||||||
"version": "2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-2.1.0.tgz",
|
|
||||||
"integrity": "sha1-BKNp/sv61tpgBbrh8UMzMy3PkxY="
|
|
||||||
},
|
|
||||||
"intl-messageformat": {
|
"intl-messageformat": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
|
||||||
|
|||||||
@ -71,7 +71,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"deepmerge": "^3.2.0",
|
"deepmerge": "^3.2.0",
|
||||||
"intl-format-cache": "^2.1.0",
|
|
||||||
"intl-messageformat": "^2.2.0",
|
"intl-messageformat": "^2.2.0",
|
||||||
"micro-memoize": "^3.0.1",
|
"micro-memoize": "^3.0.1",
|
||||||
"object-resolve-path": "^1.1.1"
|
"object-resolve-path": "^1.1.1"
|
||||||
|
|||||||
25
src/index.js
25
src/index.js
@ -1,31 +1,32 @@
|
|||||||
import { writable, derived } from 'svelte/store'
|
import { writable, derived } from 'svelte/store'
|
||||||
import resolvePath from 'object-resolve-path'
|
import resolvePath from 'object-resolve-path'
|
||||||
import IntlMessageFormat from 'intl-messageformat'
|
import IntlMessageFormat from 'intl-messageformat'
|
||||||
import memoizeConstructor from 'intl-format-cache'
|
import memoize from 'micro-memoize'
|
||||||
|
import { capital, title, upper, lower } from './utils.js'
|
||||||
const capital = str => str.replace(/(^|\s)\S/, l => l.toUpperCase())
|
|
||||||
const title = str => str.replace(/(^|\s)\S/g, l => l.toUpperCase())
|
|
||||||
const upper = str => str.toLocaleUpperCase()
|
|
||||||
const lower = str => str.toLocaleLowerCase()
|
|
||||||
|
|
||||||
let currentLocale
|
let currentLocale
|
||||||
let currentDictionary
|
let currentDictionary
|
||||||
|
|
||||||
const getMessageFormatter = memoizeConstructor(IntlMessageFormat)
|
const getMessageFormatter = memoize(
|
||||||
|
(message, locale, formats) => new IntlMessageFormat(message, locale, formats),
|
||||||
|
)
|
||||||
|
|
||||||
function lookupMessage(path, locale) {
|
const lookupMessage = memoize((path, locale) => {
|
||||||
// TODO improve perf here
|
|
||||||
return (
|
return (
|
||||||
currentDictionary[locale][path] ||
|
currentDictionary[locale][path] ||
|
||||||
resolvePath(currentDictionary[locale], path)
|
resolvePath(currentDictionary[locale], path)
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
|
|
||||||
function formatMessage(message, interpolations, locale = currentLocale) {
|
const formatMessage = (message, interpolations, locale = currentLocale) => {
|
||||||
return getMessageFormatter(message, locale).format(interpolations)
|
return getMessageFormatter(message, locale).format(interpolations)
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLocalizedMessage(path, interpolations, locale = currentLocale) {
|
const getLocalizedMessage = (path, interpolations, locale = currentLocale) => {
|
||||||
|
if (typeof interpolations === 'string') {
|
||||||
|
locale = interpolations
|
||||||
|
interpolations = undefined
|
||||||
|
}
|
||||||
const message = lookupMessage(path, locale)
|
const message = lookupMessage(path, locale)
|
||||||
|
|
||||||
if (!message) return path
|
if (!message) return path
|
||||||
|
|||||||
6
src/utils.js
Normal file
6
src/utils.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export const capital = str => str.replace(/(^|\s)\S/, l => l.toUpperCase())
|
||||||
|
export const title = str => str.replace(/(^|\s)\S/g, l => l.toUpperCase())
|
||||||
|
export const upper = str => str.toLocaleUpperCase()
|
||||||
|
export const lower = str => str.toLocaleLowerCase()
|
||||||
@ -1,174 +1,110 @@
|
|||||||
// TODO: A more serious test
|
import { dictionary, locale, format } from '../src/index'
|
||||||
|
|
||||||
import { dictionary, locale } from '../src/index'
|
|
||||||
import { capital, title, upper, lower } from '../src/utils'
|
import { capital, title, upper, lower } from '../src/utils'
|
||||||
|
|
||||||
dictionary.set({
|
let _
|
||||||
'pt-br': {
|
let currentLocale
|
||||||
test: 'teste',
|
|
||||||
phrase: 'adoro banana',
|
const dict = {
|
||||||
phrases: ['Frase 1', 'Frase 2'],
|
pt: {
|
||||||
pluralization: 'Zero | Um | Muito!',
|
hi: 'olá você',
|
||||||
simplePluralization: 'Singular | Plural',
|
'switch.lang': 'Trocar idioma',
|
||||||
interpolation: {
|
greeting: {
|
||||||
key: 'Olá, {0}! Como está {1}?',
|
ask: 'Por favor, digite seu nome',
|
||||||
named: 'Olá, {name}! Como está {time}?',
|
message: 'Olá {name}, como vai?',
|
||||||
},
|
},
|
||||||
interpolationPluralization: 'One thingie | {0} thingies',
|
photos:
|
||||||
wow: {
|
'Você {n, plural, =0 {não tem fotos.} =1 {tem uma foto.} other {tem # fotos.}}',
|
||||||
much: {
|
cats: 'Tenho {n, number} {n,plural,=0{gatos}one{gato}other{gatos}}',
|
||||||
deep: {
|
|
||||||
list: ['Muito', 'muito profundo'],
|
|
||||||
},
|
},
|
||||||
|
en: {
|
||||||
|
hi: 'hi yo',
|
||||||
|
'switch.lang': 'Switch language',
|
||||||
|
greeting: {
|
||||||
|
ask: 'Please type your name',
|
||||||
|
message: 'Hello {name}, how are you?',
|
||||||
},
|
},
|
||||||
|
photos:
|
||||||
|
'You have {n, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}',
|
||||||
|
cats: 'I have {n, number} {n,plural,one{cat}other{cats}}',
|
||||||
},
|
},
|
||||||
obj: {
|
}
|
||||||
a: 'a',
|
|
||||||
b: 'b',
|
format.subscribe(formatFn => {
|
||||||
},
|
_ = formatFn
|
||||||
},
|
})
|
||||||
|
dictionary.set(dict)
|
||||||
|
locale.subscribe(l => (currentLocale = l))
|
||||||
|
locale.set('pt')
|
||||||
|
|
||||||
|
it('should change locale', () => {
|
||||||
|
locale.set('pt')
|
||||||
|
expect(currentLocale).toBe('pt')
|
||||||
|
locale.set('en')
|
||||||
|
expect(currentLocale).toBe('en')
|
||||||
})
|
})
|
||||||
|
|
||||||
locale.set('pt-br')
|
it('should fallback to message id if id is not found', () => {
|
||||||
|
expect(_('batatinha')).toBe('batatinha')
|
||||||
|
|
||||||
describe('Localization', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
console.error = jest.fn()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
afterEach(() => {
|
it('should translate to current locale', () => {
|
||||||
console.error.mockRestore()
|
locale.set('pt')
|
||||||
|
expect(_('switch.lang')).toBe('Trocar idioma')
|
||||||
|
locale.set('en')
|
||||||
|
expect(_('switch.lang')).toBe('Switch language')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should start with a clean store', () => {
|
it('should translate to passed locale', () => {
|
||||||
const { _, locale } = store.get()
|
expect(_('switch.lang', 'pt')).toBe('Trocar idioma')
|
||||||
expect(locale).toBeFalsy()
|
expect(_('switch.lang', 'en')).toBe('Switch language')
|
||||||
expect(_).toBeFalsy()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change the locale after a "locale" store event', () => {
|
it('should interpolate message with variables', () => {
|
||||||
store.fire('locale', 'pt-br')
|
expect(_('greeting.message', { name: 'Chris' })).toBe(
|
||||||
const { locale, _ } = store.get()
|
'Hello Chris, how are you?',
|
||||||
|
|
||||||
expect(locale).toBe('pt-br')
|
|
||||||
expect(_).toBeInstanceOf(Function)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should have a .i18n.setLocale() method', () => {
|
|
||||||
expect(store.i18n.setLocale).toBeInstanceOf(Function)
|
|
||||||
|
|
||||||
store.i18n.setLocale('pt-br')
|
|
||||||
const { locale } = store.get()
|
|
||||||
|
|
||||||
expect(locale).toBe('pt-br')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should handle nonexistent locale', () => {
|
|
||||||
expect(store.i18n.setLocale('foo'))
|
|
||||||
expect(console.error).toHaveBeenCalledTimes(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should return the message id when no message identified by it was found', () => {
|
|
||||||
store.i18n.setLocale('pt-br')
|
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(_('non.existent')).toBe('non.existent')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should get a message by its id', () => {
|
|
||||||
const { _ } = store.get()
|
|
||||||
expect(_('test')).toBe(locales['pt-br'].test)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should get a deep nested message by its string path', () => {
|
|
||||||
store.i18n.setLocale('pt-br')
|
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(_('obj.b')).toBe('b')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should get a message within an array by its index', () => {
|
|
||||||
store.i18n.setLocale('pt-br')
|
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(_('phrases[1]')).toBe(locales['pt-br'].phrases[1])
|
|
||||||
|
|
||||||
/** Not found */
|
|
||||||
expect(_('phrases[2]')).toBe('phrases[2]')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should interpolate with {numeric} placeholders', () => {
|
|
||||||
store.i18n.setLocale('pt-br')
|
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(_('interpolation.key', ['Chris', 'o dia'])).toBe(
|
|
||||||
'Olá, Chris! Como está o dia?',
|
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should interpolate with {named} placeholders', () => {
|
it('should interpolate message with variables according to passed locale', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
expect(_('greeting.message', { name: 'Chris' }, 'pt')).toBe(
|
||||||
const { _ } = store.get()
|
'Olá Chris, como vai?',
|
||||||
|
)
|
||||||
expect(
|
|
||||||
_('interpolation.named', {
|
|
||||||
name: 'Chris',
|
|
||||||
time: 'o dia',
|
|
||||||
}),
|
|
||||||
).toBe('Olá, Chris! Como está o dia?')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should handle pluralization with _.plural()', () => {
|
describe('utilities', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
beforeAll(() => {
|
||||||
const { _ } = store.get()
|
locale.set('en')
|
||||||
|
|
||||||
expect(_.plural('simplePluralization')).toBe('Plural')
|
|
||||||
expect(_.plural('simplePluralization', 1)).toBe('Singular')
|
|
||||||
expect(_.plural('simplePluralization', 3)).toBe('Plural')
|
|
||||||
expect(_.plural('simplePluralization', -23)).toBe('Plural')
|
|
||||||
expect(_.plural('pluralization')).toBe('Zero')
|
|
||||||
expect(_.plural('pluralization', 0)).toBe('Zero')
|
|
||||||
expect(_.plural('pluralization', 1)).toBe('Um')
|
|
||||||
expect(_.plural('pluralization', -1)).toBe('Um')
|
|
||||||
expect(_.plural('pluralization', -1000)).toBe('Muito!')
|
|
||||||
expect(_.plural('pluralization', 2)).toBe('Muito!')
|
|
||||||
expect(_.plural('pluralization', 100)).toBe('Muito!')
|
|
||||||
expect(_.plural('interpolationPluralization', 1)).toBe('One thingie')
|
|
||||||
expect(_.plural('interpolationPluralization', 10, [10])).toBe('10 thingies')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
describe('Localization utilities', () => {
|
|
||||||
it('should capital a translated message', () => {
|
it('should capital a translated message', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
expect(_.capital('hi')).toBe('Hi yo')
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(capital('Adoro banana')).toBe('Adoro banana')
|
|
||||||
expect(_.capital('phrase')).toBe('Adoro banana')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should title a translated message', () => {
|
it('should title a translated message', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
expect(_.title('hi')).toBe('Hi Yo')
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(title('Adoro Banana')).toBe('Adoro Banana')
|
|
||||||
expect(_.title('phrase')).toBe('Adoro Banana')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should lowercase a translated message', () => {
|
it('should lowercase a translated message', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
expect(_.lower('hi')).toBe('hi yo')
|
||||||
const { _ } = store.get()
|
|
||||||
|
|
||||||
expect(lower('adoro banana')).toBe('adoro banana')
|
|
||||||
expect(_.lower('phrase')).toBe('adoro banana')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should uppercase a translated message', () => {
|
it('should uppercase a translated message', () => {
|
||||||
store.i18n.setLocale('pt-br')
|
expect(_.upper('hi')).toBe('HI YO')
|
||||||
const { _ } = store.get()
|
})
|
||||||
|
|
||||||
expect(upper('ADORO BANANA')).toBe('ADORO BANANA')
|
const date = new Date(2019, 3, 24, 23, 45)
|
||||||
expect(_.upper('phrase')).toBe('ADORO BANANA')
|
it('should format a time value', () => {
|
||||||
|
locale.set('en')
|
||||||
|
expect(_.time(date)).toBe('11:45 PM')
|
||||||
|
expect(_.time(date, 'medium')).toBe('11:45:00 PM')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should format a date value', () => {
|
||||||
|
expect(_.date(date)).toBe('4/24/19')
|
||||||
|
expect(_.date(date, 'medium')).toBe('Apr 24, 2019')
|
||||||
|
})
|
||||||
|
// number
|
||||||
|
it('should format a date value', () => {
|
||||||
|
expect(_.number(123123123)).toBe('123,123,123')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user