@magic-translate/react 1.15.1 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/components/Translate.d.ts +5 -5
- package/dist/components/Translate.d.ts.map +1 -1
- package/dist/components/Translate.js +26 -41
- package/dist/components/Translate.js.map +1 -1
- package/dist/components/Translate.test.d.ts +1 -1
- package/dist/components/Translate.test.js +172 -446
- package/dist/components/Translate.test.js.map +1 -1
- package/dist/context/MagicTranslateContext.d.ts +31 -24
- package/dist/context/MagicTranslateContext.d.ts.map +1 -1
- package/dist/context/MagicTranslateContext.js +22 -12
- package/dist/context/MagicTranslateContext.js.map +1 -1
- package/dist/hooks/use-language-switcher.d.ts +6 -0
- package/dist/hooks/use-language-switcher.d.ts.map +1 -0
- package/dist/hooks/use-language-switcher.js +7 -0
- package/dist/hooks/use-language-switcher.js.map +1 -0
- package/dist/hooks/use-magic-translate.d.ts +1 -1
- package/dist/hooks/use-magic-translate.d.ts.map +1 -1
- package/dist/hooks/use-magic-translate.js +1 -1
- package/dist/hooks/use-magic-translate.js.map +1 -1
- package/dist/hooks/use-translate.d.ts +3 -3
- package/dist/hooks/use-translate.js +11 -28
- package/dist/hooks/use-translate.js.map +1 -1
- package/dist/hooks/use-translate.test.d.ts +1 -1
- package/dist/hooks/use-translate.test.js +65 -117
- package/dist/hooks/use-translate.test.js.map +1 -1
- package/dist/index.d.ts +5 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +2 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +3 -2
- package/dist/index.min.js.map +1 -1
- package/package.json +50 -53
|
@@ -1,478 +1,204 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
-
function step(op) {
|
|
15
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (_) try {
|
|
17
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
-
switch (op[0]) {
|
|
20
|
-
case 0: case 1: t = op; break;
|
|
21
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
-
default:
|
|
25
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
-
if (t[2]) _.ops.pop();
|
|
30
|
-
_.trys.pop(); continue;
|
|
31
|
-
}
|
|
32
|
-
op = body.call(thisArg, _);
|
|
33
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
1
|
import { act, render, waitFor } from '@testing-library/react';
|
|
38
2
|
import { MagicTranslateProvider } from '../context/MagicTranslateContext';
|
|
39
3
|
import React, { useState } from 'react';
|
|
40
4
|
import { T } from './Translate';
|
|
41
5
|
import { Language } from '@magic-translate/core';
|
|
42
|
-
|
|
43
|
-
|
|
6
|
+
const tick = () => new Promise((resolve) => setTimeout(resolve));
|
|
7
|
+
const ExampleComponent = () => React.createElement(React.Fragment, null, "Some component");
|
|
44
8
|
ExampleComponent.displayName = 'ExampleComponent';
|
|
45
|
-
describe('Translate',
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var loader = function () { return function (content) {
|
|
9
|
+
describe('Translate', () => {
|
|
10
|
+
const lang = Language.DE;
|
|
11
|
+
const mockFn = jest.fn();
|
|
12
|
+
const loader = () => (content) => {
|
|
50
13
|
// for some reason when using the mock directly the mock is not called. This is a workaround
|
|
51
14
|
mockFn(content);
|
|
52
|
-
return Promise.resolve(content.map(
|
|
53
|
-
}; };
|
|
54
|
-
var Wrapper = function (_a) {
|
|
55
|
-
var children = _a.children;
|
|
56
|
-
return (React.createElement(MagicTranslateProvider, { _loaderFactory: loader, language: lang, apiKey: "test-api-key" }, children));
|
|
15
|
+
return Promise.resolve(content.map((item) => `Translated: ${item.text}`));
|
|
57
16
|
};
|
|
58
|
-
|
|
17
|
+
const Wrapper = ({ children, }) => (React.createElement(MagicTranslateProvider, { _loaderFactory: loader, language: lang, apiKey: "test-api-key" }, children));
|
|
18
|
+
afterEach(() => {
|
|
59
19
|
mockFn.mockReset();
|
|
60
20
|
});
|
|
61
|
-
it('should call the loader with the content',
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
React.createElement(T, null, "test"))));
|
|
69
|
-
return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
70
|
-
return __generator(this, function (_a) {
|
|
71
|
-
switch (_a.label) {
|
|
72
|
-
case 0: return [4 /*yield*/, tick()];
|
|
73
|
-
case 1:
|
|
74
|
-
_a.sent();
|
|
75
|
-
return [2 /*return*/];
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
}); })];
|
|
79
|
-
case 1:
|
|
80
|
-
_a.sent();
|
|
81
|
-
// then
|
|
82
|
-
expect(mockFn).toHaveBeenCalledWith([{ text: 'test' }]);
|
|
83
|
-
return [2 /*return*/];
|
|
84
|
-
}
|
|
21
|
+
it('should call the loader with the content', async () => {
|
|
22
|
+
// given
|
|
23
|
+
render(React.createElement(Wrapper, null,
|
|
24
|
+
React.createElement("button", null,
|
|
25
|
+
React.createElement(T, null, "test"))));
|
|
26
|
+
await act(async () => {
|
|
27
|
+
await tick();
|
|
85
28
|
});
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
return __generator(this, function (_a) {
|
|
97
|
-
switch (_a.label) {
|
|
98
|
-
case 0: return [4 /*yield*/, tick()];
|
|
99
|
-
case 1:
|
|
100
|
-
_a.sent();
|
|
101
|
-
return [2 /*return*/];
|
|
102
|
-
}
|
|
103
|
-
});
|
|
104
|
-
}); })];
|
|
105
|
-
case 1:
|
|
106
|
-
_a.sent();
|
|
107
|
-
// then
|
|
108
|
-
expect(mockFn).toHaveBeenCalledWith([{ text: 'test', lang: Language.ZH }]);
|
|
109
|
-
return [2 /*return*/];
|
|
110
|
-
}
|
|
29
|
+
// then
|
|
30
|
+
expect(mockFn).toHaveBeenCalledWith([{ text: 'test' }]);
|
|
31
|
+
});
|
|
32
|
+
it('should call the loader with the correct options', async () => {
|
|
33
|
+
// given
|
|
34
|
+
render(React.createElement(Wrapper, null,
|
|
35
|
+
React.createElement("button", null,
|
|
36
|
+
React.createElement(T, { lang: Language.ZH }, "test"))));
|
|
37
|
+
await act(async () => {
|
|
38
|
+
await tick();
|
|
111
39
|
});
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return __generator(this, function (_a) {
|
|
124
|
-
switch (_a.label) {
|
|
125
|
-
case 0: return [4 /*yield*/, tick()];
|
|
126
|
-
case 1:
|
|
127
|
-
_a.sent();
|
|
128
|
-
return [2 /*return*/];
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
}); })];
|
|
132
|
-
case 1:
|
|
133
|
-
_a.sent();
|
|
134
|
-
// then
|
|
135
|
-
expect(mockFn).toHaveBeenCalledWith([{ text: 'test1' }, { text: 'test2' }]);
|
|
136
|
-
return [2 /*return*/];
|
|
137
|
-
}
|
|
40
|
+
// then
|
|
41
|
+
expect(mockFn).toHaveBeenCalledWith([{ text: 'test', lang: Language.ZH }]);
|
|
42
|
+
});
|
|
43
|
+
it('should call the loader with multiple contents', async () => {
|
|
44
|
+
// given
|
|
45
|
+
render(React.createElement(Wrapper, null,
|
|
46
|
+
React.createElement("button", null,
|
|
47
|
+
React.createElement(T, null, "test1"),
|
|
48
|
+
React.createElement(T, null, "test2"))));
|
|
49
|
+
await act(async () => {
|
|
50
|
+
await tick();
|
|
138
51
|
});
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
return __generator(this, function (_a) {
|
|
150
|
-
switch (_a.label) {
|
|
151
|
-
case 0: return [4 /*yield*/, tick()];
|
|
152
|
-
case 1:
|
|
153
|
-
_a.sent();
|
|
154
|
-
return [2 /*return*/];
|
|
155
|
-
}
|
|
156
|
-
});
|
|
157
|
-
}); })];
|
|
158
|
-
case 1:
|
|
159
|
-
_a.sent();
|
|
160
|
-
// then
|
|
161
|
-
expect(mockFn).toHaveBeenCalledWith([{ text: '<button>test</button>' }]);
|
|
162
|
-
return [2 /*return*/];
|
|
163
|
-
}
|
|
52
|
+
// then
|
|
53
|
+
expect(mockFn).toHaveBeenCalledWith([{ text: 'test1' }, { text: 'test2' }]);
|
|
54
|
+
});
|
|
55
|
+
it('should call the loader with the html inside the translate component', async () => {
|
|
56
|
+
// given
|
|
57
|
+
render(React.createElement(Wrapper, null,
|
|
58
|
+
React.createElement(T, null,
|
|
59
|
+
React.createElement("button", null, "test"))));
|
|
60
|
+
await act(async () => {
|
|
61
|
+
await tick();
|
|
164
62
|
});
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
return __generator(this, function (_a) {
|
|
177
|
-
switch (_a.label) {
|
|
178
|
-
case 0: return [4 /*yield*/, tick()];
|
|
179
|
-
case 1:
|
|
180
|
-
_a.sent();
|
|
181
|
-
return [2 /*return*/];
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
}); })];
|
|
185
|
-
case 1:
|
|
186
|
-
_a.sent();
|
|
187
|
-
// then
|
|
188
|
-
expect(mockFn).toHaveBeenCalledWith([
|
|
189
|
-
{ text: '<span>span1</span><span>span2</span>' },
|
|
190
|
-
]);
|
|
191
|
-
return [2 /*return*/];
|
|
192
|
-
}
|
|
63
|
+
// then
|
|
64
|
+
expect(mockFn).toHaveBeenCalledWith([{ text: '<button>test</button>' }]);
|
|
65
|
+
});
|
|
66
|
+
it('should call the loader with multiple html elements the translate component', async () => {
|
|
67
|
+
// given
|
|
68
|
+
render(React.createElement(Wrapper, null,
|
|
69
|
+
React.createElement(T, null,
|
|
70
|
+
React.createElement("span", null, "span1"),
|
|
71
|
+
React.createElement("span", null, "span2"))));
|
|
72
|
+
await act(async () => {
|
|
73
|
+
await tick();
|
|
193
74
|
});
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
case 0: return [4 /*yield*/, tick()];
|
|
206
|
-
case 1:
|
|
207
|
-
_a.sent();
|
|
208
|
-
return [2 /*return*/];
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
|
-
}); })];
|
|
212
|
-
case 1:
|
|
213
|
-
_a.sent();
|
|
214
|
-
// then
|
|
215
|
-
expect(mockFn).not.toHaveBeenCalled();
|
|
216
|
-
return [2 /*return*/];
|
|
217
|
-
}
|
|
75
|
+
// then
|
|
76
|
+
expect(mockFn).toHaveBeenCalledWith([
|
|
77
|
+
{ text: '<span>span1</span><span>span2</span>' },
|
|
78
|
+
]);
|
|
79
|
+
});
|
|
80
|
+
it('should not call the loader if the only child is a number', async () => {
|
|
81
|
+
// given
|
|
82
|
+
render(React.createElement(Wrapper, null,
|
|
83
|
+
React.createElement(T, null, 1)));
|
|
84
|
+
await act(async () => {
|
|
85
|
+
await tick();
|
|
218
86
|
});
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
return __generator(this, function (_a) {
|
|
229
|
-
switch (_a.label) {
|
|
230
|
-
case 0: return [4 /*yield*/, tick()];
|
|
231
|
-
case 1:
|
|
232
|
-
_a.sent();
|
|
233
|
-
return [2 /*return*/];
|
|
234
|
-
}
|
|
235
|
-
});
|
|
236
|
-
}); })];
|
|
237
|
-
case 1:
|
|
238
|
-
_a.sent();
|
|
239
|
-
// then
|
|
240
|
-
expect(mockFn).not.toHaveBeenCalled();
|
|
241
|
-
return [2 /*return*/];
|
|
242
|
-
}
|
|
87
|
+
// then
|
|
88
|
+
expect(mockFn).not.toHaveBeenCalled();
|
|
89
|
+
});
|
|
90
|
+
it('should not call the loader if the only child is a boolean', async () => {
|
|
91
|
+
// given
|
|
92
|
+
render(React.createElement(Wrapper, null,
|
|
93
|
+
React.createElement(T, null, true)));
|
|
94
|
+
await act(async () => {
|
|
95
|
+
await tick();
|
|
243
96
|
});
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
return __generator(this, function (_a) {
|
|
254
|
-
switch (_a.label) {
|
|
255
|
-
case 0: return [4 /*yield*/, tick()];
|
|
256
|
-
case 1:
|
|
257
|
-
_a.sent();
|
|
258
|
-
return [2 /*return*/];
|
|
259
|
-
}
|
|
260
|
-
});
|
|
261
|
-
}); })];
|
|
262
|
-
case 1:
|
|
263
|
-
_a.sent();
|
|
264
|
-
// then
|
|
265
|
-
expect(mockFn).not.toHaveBeenCalled();
|
|
266
|
-
return [2 /*return*/];
|
|
267
|
-
}
|
|
97
|
+
// then
|
|
98
|
+
expect(mockFn).not.toHaveBeenCalled();
|
|
99
|
+
});
|
|
100
|
+
it('should not call the loader if the translate component has no children at all', async () => {
|
|
101
|
+
// given
|
|
102
|
+
render(React.createElement(Wrapper, null,
|
|
103
|
+
React.createElement(T, null)));
|
|
104
|
+
await act(async () => {
|
|
105
|
+
await tick();
|
|
268
106
|
});
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
return __generator(this, function (_a) {
|
|
285
|
-
switch (_a.label) {
|
|
286
|
-
case 0: return [4 /*yield*/, tick()];
|
|
287
|
-
case 1:
|
|
288
|
-
_a.sent();
|
|
289
|
-
return [2 /*return*/];
|
|
290
|
-
}
|
|
291
|
-
});
|
|
292
|
-
}); })];
|
|
293
|
-
case 1:
|
|
294
|
-
_a.sent();
|
|
295
|
-
// then
|
|
296
|
-
expect(mockFn).not.toHaveBeenCalled();
|
|
297
|
-
return [2 /*return*/];
|
|
298
|
-
}
|
|
107
|
+
// then
|
|
108
|
+
expect(mockFn).not.toHaveBeenCalled();
|
|
109
|
+
});
|
|
110
|
+
it('should throw an error if there is a react component inside the translation component', async () => {
|
|
111
|
+
// given
|
|
112
|
+
try {
|
|
113
|
+
render(React.createElement(Wrapper, null,
|
|
114
|
+
React.createElement(T, null,
|
|
115
|
+
React.createElement(ExampleComponent, null))));
|
|
116
|
+
}
|
|
117
|
+
catch (err) {
|
|
118
|
+
expect(err.message).toContain('ExampleComponent');
|
|
119
|
+
}
|
|
120
|
+
await act(async () => {
|
|
121
|
+
await tick();
|
|
299
122
|
});
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
return __generator(this, function (_a) {
|
|
317
|
-
switch (_a.label) {
|
|
318
|
-
case 0: return [4 /*yield*/, tick()];
|
|
319
|
-
case 1:
|
|
320
|
-
_a.sent();
|
|
321
|
-
return [2 /*return*/];
|
|
322
|
-
}
|
|
323
|
-
});
|
|
324
|
-
}); })];
|
|
325
|
-
case 1:
|
|
326
|
-
_a.sent();
|
|
327
|
-
// then
|
|
328
|
-
expect(mockFn).not.toHaveBeenCalled();
|
|
329
|
-
return [2 /*return*/];
|
|
330
|
-
}
|
|
123
|
+
// then
|
|
124
|
+
expect(mockFn).not.toHaveBeenCalled();
|
|
125
|
+
});
|
|
126
|
+
it('should throw an error if any child of the translate component is a react component', async () => {
|
|
127
|
+
// given
|
|
128
|
+
try {
|
|
129
|
+
render(React.createElement(Wrapper, null,
|
|
130
|
+
React.createElement(T, null,
|
|
131
|
+
"test",
|
|
132
|
+
React.createElement(ExampleComponent, null))));
|
|
133
|
+
}
|
|
134
|
+
catch (err) {
|
|
135
|
+
expect(err.message).toContain('ExampleComponent');
|
|
136
|
+
}
|
|
137
|
+
await act(async () => {
|
|
138
|
+
await tick();
|
|
331
139
|
});
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
return __generator(this, function (_a) {
|
|
343
|
-
switch (_a.label) {
|
|
344
|
-
case 0: return [4 /*yield*/, tick()];
|
|
345
|
-
case 1:
|
|
346
|
-
_a.sent();
|
|
347
|
-
return [2 /*return*/];
|
|
348
|
-
}
|
|
349
|
-
});
|
|
350
|
-
}); })];
|
|
351
|
-
case 1:
|
|
352
|
-
_a.sent();
|
|
353
|
-
// then
|
|
354
|
-
return [4 /*yield*/, waitFor(function () {
|
|
355
|
-
return expect(getByRole('button').textContent).toContain('Translated: test');
|
|
356
|
-
})];
|
|
357
|
-
case 2:
|
|
358
|
-
// then
|
|
359
|
-
_a.sent();
|
|
360
|
-
return [2 /*return*/];
|
|
361
|
-
}
|
|
140
|
+
// then
|
|
141
|
+
expect(mockFn).not.toHaveBeenCalled();
|
|
142
|
+
});
|
|
143
|
+
it('should replace the content with the loaded content', async () => {
|
|
144
|
+
// given
|
|
145
|
+
const { getByRole } = render(React.createElement(Wrapper, null,
|
|
146
|
+
React.createElement("button", null,
|
|
147
|
+
React.createElement(T, null, "test"))));
|
|
148
|
+
await act(async () => {
|
|
149
|
+
await tick();
|
|
362
150
|
});
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
return __generator(this, function (_a) {
|
|
375
|
-
switch (_a.label) {
|
|
376
|
-
case 0: return [4 /*yield*/, tick()];
|
|
377
|
-
case 1:
|
|
378
|
-
_a.sent();
|
|
379
|
-
return [2 /*return*/];
|
|
380
|
-
}
|
|
381
|
-
});
|
|
382
|
-
}); })];
|
|
383
|
-
case 1:
|
|
384
|
-
_a.sent();
|
|
385
|
-
// then
|
|
386
|
-
return [4 /*yield*/, waitFor(function () {
|
|
387
|
-
return expect(getByTestId('wrapper').innerHTML).toContain('Translated: <span>test</span>');
|
|
388
|
-
})];
|
|
389
|
-
case 2:
|
|
390
|
-
// then
|
|
391
|
-
_a.sent();
|
|
392
|
-
return [2 /*return*/];
|
|
393
|
-
}
|
|
151
|
+
// then
|
|
152
|
+
await waitFor(() => expect(getByRole('button').textContent).toContain('Translated: test'));
|
|
153
|
+
});
|
|
154
|
+
it('should replace the content the translated HTML', async () => {
|
|
155
|
+
// given
|
|
156
|
+
const { getByTestId } = render(React.createElement(Wrapper, null,
|
|
157
|
+
React.createElement("div", { "data-testid": "wrapper" },
|
|
158
|
+
React.createElement(T, null,
|
|
159
|
+
React.createElement("span", null, "test")))));
|
|
160
|
+
await act(async () => {
|
|
161
|
+
await tick();
|
|
394
162
|
});
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
163
|
+
// then
|
|
164
|
+
await waitFor(() => expect(getByTestId('wrapper').innerHTML).toContain('Translated: <span>test</span>'));
|
|
165
|
+
});
|
|
166
|
+
describe('interactivity', () => {
|
|
167
|
+
const InteractiveComonent = () => {
|
|
168
|
+
const [color, setColor] = useState('red');
|
|
399
169
|
return (React.createElement(React.Fragment, null,
|
|
400
|
-
React.createElement("button", { onClick:
|
|
170
|
+
React.createElement("button", { onClick: () => setColor('blue') }, "blue"),
|
|
401
171
|
React.createElement("div", { "data-testid": "wrapper" },
|
|
402
172
|
React.createElement(T, null,
|
|
403
|
-
React.createElement("div", { style: { color
|
|
173
|
+
React.createElement("div", { style: { color } }, "test")))));
|
|
404
174
|
};
|
|
405
|
-
it('should update the HTML inside the translate component',
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
}); })];
|
|
424
|
-
case 1:
|
|
425
|
-
_b.sent();
|
|
426
|
-
// then
|
|
427
|
-
return [4 /*yield*/, waitFor(function () {
|
|
428
|
-
return expect(getByTestId('wrapper').innerHTML).toContain("Translated: <div style=\"color: blue;\">test</div>");
|
|
429
|
-
})];
|
|
430
|
-
case 2:
|
|
431
|
-
// then
|
|
432
|
-
_b.sent();
|
|
433
|
-
return [2 /*return*/];
|
|
434
|
-
}
|
|
175
|
+
it('should update the HTML inside the translate component', async () => {
|
|
176
|
+
// given
|
|
177
|
+
const { getByRole, getByTestId } = render(React.createElement(Wrapper, null,
|
|
178
|
+
React.createElement(InteractiveComonent, null)));
|
|
179
|
+
await act(async () => {
|
|
180
|
+
await tick();
|
|
181
|
+
// when
|
|
182
|
+
getByRole('button').click();
|
|
183
|
+
});
|
|
184
|
+
// then
|
|
185
|
+
await waitFor(() => expect(getByTestId('wrapper').innerHTML).toContain(`Translated: <div style="color: blue;">test</div>`));
|
|
186
|
+
});
|
|
187
|
+
it('should call the loader again when children updated', async () => {
|
|
188
|
+
// given
|
|
189
|
+
const { getByRole } = render(React.createElement(Wrapper, null,
|
|
190
|
+
React.createElement(InteractiveComonent, null)));
|
|
191
|
+
await act(async () => {
|
|
192
|
+
await tick();
|
|
435
193
|
});
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
switch (_a.label) {
|
|
441
|
-
case 0:
|
|
442
|
-
getByRole = render(React.createElement(Wrapper, null,
|
|
443
|
-
React.createElement(InteractiveComonent, null))).getByRole;
|
|
444
|
-
return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
445
|
-
return __generator(this, function (_a) {
|
|
446
|
-
switch (_a.label) {
|
|
447
|
-
case 0: return [4 /*yield*/, tick()];
|
|
448
|
-
case 1:
|
|
449
|
-
_a.sent();
|
|
450
|
-
return [2 /*return*/];
|
|
451
|
-
}
|
|
452
|
-
});
|
|
453
|
-
}); })];
|
|
454
|
-
case 1:
|
|
455
|
-
_a.sent();
|
|
456
|
-
// when
|
|
457
|
-
getByRole('button').click();
|
|
458
|
-
return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
459
|
-
return __generator(this, function (_a) {
|
|
460
|
-
switch (_a.label) {
|
|
461
|
-
case 0: return [4 /*yield*/, tick()];
|
|
462
|
-
case 1:
|
|
463
|
-
_a.sent();
|
|
464
|
-
return [2 /*return*/];
|
|
465
|
-
}
|
|
466
|
-
});
|
|
467
|
-
}); })];
|
|
468
|
-
case 2:
|
|
469
|
-
_a.sent();
|
|
470
|
-
// then
|
|
471
|
-
expect(mockFn).toHaveBeenCalledTimes(2);
|
|
472
|
-
return [2 /*return*/];
|
|
473
|
-
}
|
|
194
|
+
// when
|
|
195
|
+
getByRole('button').click();
|
|
196
|
+
await act(async () => {
|
|
197
|
+
await tick();
|
|
474
198
|
});
|
|
475
|
-
|
|
199
|
+
// then
|
|
200
|
+
expect(mockFn).toHaveBeenCalledTimes(2);
|
|
201
|
+
});
|
|
476
202
|
});
|
|
477
203
|
});
|
|
478
204
|
//# sourceMappingURL=Translate.test.js.map
|