Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-t. Simple translation module for React applications.
Something went wrong. Try again.
JSX
at react-args
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389import React from 'react';import { act, render, screen } from '@testing-library/react';
import T from './T';import TProvider from './TProvider';
import { muteConsole, restoreConsole } from '../test-utils';
const deLanguageFile = { 'Hello world!': 'Hallo Welt!', 'Hello {name}!': 'Hallo {name}!', 'Hello {name} and {other}!': 'Hallo {name} und {other}!',};
const esLanguageFile = { 'Hello world!': '¡Hola Mundo!', 'Hello {name}!': '¡Hola {name}!', 'Hello {name} and {other}!': '¡Hola {name} y {other}!',};
const languageFiles = { 'de-DE': deLanguageFile, 'es-ES': esLanguageFile,};
const syncLanguageFiles = { 'de-DE': () => deLanguageFile, 'es-ES': () => esLanguageFile,};
const asyncLanguageFiles = { 'de-DE': () => new Promise((resolve) => resolve(deLanguageFile)), 'es-ES': () => new Promise((resolve) => resolve(esLanguageFile)),};
jest.mock('lodash.once', () => (fn) => fn);
describe('<T /> component', () => { beforeEach(() => { document.documentElement.removeAttribute('lang'); });
it('throws when rendered without TProvider context', () => { muteConsole();
expect(() => render( <T />, )).toThrowError();
restoreConsole(); });
it('renders nothing given nothing', () => { const { container } = render( <TProvider> <T /> </TProvider>, );
expect(container.firstChild).toBe(null); });
it('returns original phrase given no language files', () => { const { getByText } = render( <TProvider> <T>Hello world!</T> </TProvider>, );
expect(getByText('Hello world!')).toBeInTheDocument(); });
it('returns original phrase with variable given no language files', () => { const { getByText } = render( <TProvider> <T name="John">{'Hello {name}!'}</T> </TProvider>, );
expect(getByText('Hello John!')).toBeInTheDocument(); });
it('returns original phrase with variable placeholder given no language files and no args', () => { const { getByText } = render( <TProvider> <T>{'Hello {name}!'}</T> </TProvider>, );
expect(getByText('Hello {name}!')).toBeInTheDocument(); });
it('returns original phrase with multiple variables given no language files', () => { const { getByText } = render( <TProvider> <T name="John" other="Elisabeth" > {'Hello {name} and {other}!'} </T> </TProvider>, );
expect(getByText('Hello John and Elisabeth!')).toBeInTheDocument(); });
it('returns original phrase with React element variable given no language files', () => { const { getByText } = render( <TProvider> <T name={<strong>John</strong>}>{'Hello {name}!'}</T> </TProvider>, );
expect(getByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'div' && node.textContent === 'Hello John!'; })).toBeInTheDocument(); expect(getByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'strong' && node.textContent === 'John'; })).toBeInTheDocument(); });
it('returns original phrase with React component variable given no language files', () => { function John() { return ( <strong>John</strong> ); }
const { getByText } = render( <TProvider> <T name={<John />}>{'Hello {name}!'}</T> </TProvider>, );
expect(getByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'div' && node.textContent === 'Hello John!'; })).toBeInTheDocument(); expect(getByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'strong' && node.textContent === 'John'; })).toBeInTheDocument(); });
it('returns original phrase if html lang is given but no languageFiles were given', () => { muteConsole();
document.documentElement.setAttribute('lang', 'de-DE');
const { getByText } = render( <TProvider> <T>Hello world!</T> </TProvider>, );
expect(getByText('Hello world!')).toBeInTheDocument();
restoreConsole(); });
it('returns original phrase if html lang equal to defaultLanguage is given', async () => { document.documentElement.setAttribute('lang', 'en-US');
const { getByText } = render( <TProvider languageFiles={languageFiles}> <T>Hello world!</T> </TProvider>, );
expect(getByText('Hello world!')).toBeInTheDocument(); });
it('returns translated phrase if html lang is given and language files are given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={languageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument(); });
it('returns translated phrase with variable if locale prop is given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={languageFiles}> <T name="John">{'Hello {name}!'}</T> </TProvider>, );
expect(await screen.findByText('Hallo John!')).toBeInTheDocument(); });
it('returns translated phrase with variable placeholder if locale prop is given given no args', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={languageFiles}> <T>{'Hello {name}!'}</T> </TProvider>, );
expect(await screen.findByText('Hallo {name}!')).toBeInTheDocument(); });
it('returns translated phrase with multiple variables if locale prop is given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={languageFiles}> <T name="John" other="Elisabeth">{'Hello {name} and {other}!'}</T> </TProvider>, );
expect(await screen.findByText('Hallo John und Elisabeth!')).toBeInTheDocument(); });
it('returns translated phrase with React element variable if locale prop is given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={languageFiles}> <T name={<strong>John</strong>}>{'Hello {name}!'}</T> </TProvider>, );
expect(await screen.findByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'div' && node.textContent === 'Hallo John!'; })).toBeInTheDocument(); expect(await screen.findByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'strong' && node.textContent === 'John'; })).toBeInTheDocument(); });
it('returns translated phrase with React component variable if locale prop is given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
function John() { return ( <strong>John</strong> ); }
render( <TProvider languageFiles={languageFiles}> <T name={<John />}>{'Hello {name}!'}</T> </TProvider>, );
expect(await screen.findByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'div' && node.textContent === 'Hallo John!'; })).toBeInTheDocument(); expect(await screen.findByText((content, node) => { const nodeName = node.nodeName.toLowerCase(); return nodeName === 'strong' && node.textContent === 'John'; })).toBeInTheDocument(); });
it('returns translated phrase if html lang is given and synchronous functions returning language files are given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={syncLanguageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument(); });
it('returns translated phrase if html lang is given and asynchronous functions returning language files are given', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={asyncLanguageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument(); });
it('changes translated phrase if html lang is changed', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={asyncLanguageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument();
act(() => { document.documentElement.setAttribute('lang', 'es-ES'); });
expect(await screen.findByText('¡Hola Mundo!')).toBeInTheDocument(); });
it('changes translated phrase if html lang is changed to value equal to defaultLanguage', async () => { document.documentElement.setAttribute('lang', 'de-DE');
render( <TProvider languageFiles={asyncLanguageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument();
act(() => { document.documentElement.setAttribute('lang', 'en-US'); });
expect(await screen.findByText('Hello world!')).toBeInTheDocument(); });
it('returns original phrase if browser language is given but no languageFiles were given', () => { muteConsole();
const languageGetter = jest.spyOn(window.navigator, 'language', 'get'); languageGetter.mockReturnValue('de-DE');
const { getByText } = render( <TProvider> <T>Hello world!</T> </TProvider>, );
expect(getByText('Hello world!')).toBeInTheDocument();
languageGetter.mockRestore();
restoreConsole(); });
it('returns translated phrase if browser language is given', async () => { const languageGetter = jest.spyOn(window.navigator, 'language', 'get'); languageGetter.mockReturnValue('de-DE');
render( <TProvider languageFiles={asyncLanguageFiles}> <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument();
languageGetter.mockRestore(); });
it('returns original phrase if locale prop is given but no languageFiles were given', () => { muteConsole();
const { getByText } = render( <TProvider locale="de-DE"> <T>Hello world!</T> </TProvider>, );
expect(getByText('Hello world!')).toBeInTheDocument();
restoreConsole(); });
it('returns translated phrase if locale prop is given', async () => { render( <TProvider languageFiles={asyncLanguageFiles} locale="de-DE" > <T>Hello world!</T> </TProvider>, );
expect(await screen.findByText('Hallo Welt!')).toBeInTheDocument(); });});