@rockpack/localazer
Version:
This module can help you organize localization in your React application
119 lines (118 loc) • 5.89 kB
JavaScript
import { __awaiter } from "tslib";
import React, { useContext, createContext, useState } from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { l, sprintf } from './jed';
import Localization from './Localization';
import LocalizationObserver, { components } from './LocalizationObserver';
const WrapperContext = createContext(null);
let ctx;
let wrapper;
const localeData = {
domain: 'messages',
// eslint-disable-next-line @typescript-eslint/camelcase
locale_data: {
messages: {
'': {
domain: 'messages',
// eslint-disable-next-line @typescript-eslint/camelcase
plural_forms: 'nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);',
lang: 'ru'
},
'USER\u0004Your name is %s and surname is %s': ['Ваше имя %s ваша фамилия %s']
}
}
};
beforeAll(() => {
const Wrapper = ({ children }) => {
const [name, setName] = useState('Ivan');
const [show, setVisibility] = useState(true);
const [activeLang, setActiveLang] = useState('en');
const resetName = () => {
setName('Ivan');
};
const toggleComponent = () => {
setVisibility(() => !show);
};
return (React.createElement(WrapperContext.Provider, { value: {
setName,
resetName,
toggleComponent,
setActiveLang
} }, children(activeLang, name, show)));
};
const App = ({ name, show }) => {
ctx = useContext(WrapperContext);
return (React.createElement("div", null,
React.createElement("p", { className: "test-case-3" }, show && (React.createElement(Localization, null, sprintf(l('Your name is %s and surname is %s', 'USER'), React.createElement("span", { style: { textDecoration: 'underline' } },
React.createElement("b", null, name)), React.createElement("span", { style: { textDecoration: 'underline' } },
React.createElement("b", null, "Pupkin"))))))));
};
wrapper = mount(React.createElement(Wrapper, null, (activeLang, name, show) => (React.createElement(LocalizationObserver, { currentLanguage: activeLang, languages: { ru: localeData } },
React.createElement(App, { name: name, show: show })))));
});
describe('Test default language (English)', () => {
test('sprintf test with react components', () => __awaiter(void 0, void 0, void 0, function* () {
expect(wrapper.find('.test-case-3')
.find('.localization-node')
.html())
.toBe('<span class="localization-node ">Your name is <span style="text-decoration:underline"><b>Ivan</b></span> and surname is <span style="text-decoration:underline"><b>Pupkin</b></span></span>');
}));
test('sprintf change name in the sentence', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.setName('Sergey');
}));
expect(wrapper.find('.test-case-3')
.find('.localization-node')
.html())
.toBe('<span class="localization-node ">Your name is <span style="text-decoration:underline"><b>Sergey</b></span> and surname is <span style="text-decoration:underline"><b>Pupkin</b></span></span>');
}));
});
describe('Test Russian language', () => {
test('Change active language', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.setActiveLang('ru');
}));
}));
});
describe('Test Russian language', () => {
test('sprintf test with react components', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.resetName();
}));
expect(wrapper.find('.test-case-3')
.find('.localization-node')
.html())
.toBe('<span class="localization-node ">Ваше имя <span style="text-decoration:underline"><b>Ivan</b></span> ваша фамилия <span style="text-decoration:underline"><b>Pupkin</b></span></span>');
}));
test('sprintf change name in the sentence', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.setName('Sergey');
}));
expect(wrapper.find('.test-case-3')
.find('.localization-node')
.html())
.toBe('<span class="localization-node ">Ваше имя <span style="text-decoration:underline"><b>Sergey</b></span> ваша фамилия <span style="text-decoration:underline"><b>Pupkin</b></span></span>');
}));
});
describe('Remove localization node', () => {
test('Hide localization component', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.toggleComponent();
}));
expect(wrapper.find('.test-case-3')
.html())
.toBe('<p class="test-case-3"></p>');
}));
test('check components dictionary (hide)', () => __awaiter(void 0, void 0, void 0, function* () {
expect(Object.keys(components).length)
.toBe(0);
}));
test('check components dictionary (show)', () => __awaiter(void 0, void 0, void 0, function* () {
yield act(() => __awaiter(void 0, void 0, void 0, function* () {
ctx.toggleComponent();
}));
expect(Object.keys(components).length)
.toBe(1);
}));
});