test: lazy translation on/off for tests

translate-tools · Dec 23, 2024 · c004e43 · c004e43
1 parent dc2bd40
commit c004e43
Show file tree

Hide file tree

Showing 2 changed files with 268 additions and 123 deletions.
diff --git a/src/__tests__/NodesTranslator.test.ts b/src/__tests__/NodesTranslator.test.ts
@@ -38,7 +38,7 @@ const fillDocument = (text: string) => {
 	document.write(text);
 };
 
-describe.only('basic usage', () => {
+describe('basic usage', () => {
 	const sample = readFileSync(__dirname + '/sample.html', 'utf8');
 
 	[true, false].forEach((lazyTranslate) => {
@@ -64,125 +64,148 @@ describe.only('basic usage', () => {
 	});
 });
 
-describe('usage with parameters', () => {
-	const sample = readFileSync(__dirname + '/sample.html', 'utf8');
-
-	const options = {
-		lazyTranslate: false,
-		translatableAttributes: ['title', 'alt', 'placeholder', 'label', 'aria-label'],
-		ignoredTags: ['meta', 'link', 'script', 'noscript', 'style', 'code', 'textarea'],
-	};
-
-	test('translate whole document', async () => {
-		fillDocument(sample);
-		const parsedHTML = document.documentElement.outerHTML;
-
-		// Translate document
-		const domTranslator = new NodesTranslator(translator, options);
-		domTranslator.observe(document.documentElement);
-
-		await awaitTranslation();
-		expect(document.documentElement.outerHTML).toMatchSnapshot();
-
-		// Disable translation
-		domTranslator.unobserve(document.documentElement);
-		expect(document.documentElement.outerHTML).toBe(parsedHTML);
-	});
-
-	test('translate changed nodes', async () => {
-		fillDocument(sample);
-
-		// Translate document
-		const domTranslator = new NodesTranslator(translator, options);
-		domTranslator.observe(document.documentElement);
-
-		await awaitTranslation();
-
-		const div1 = document.createElement('div');
-		document.body.appendChild(div1);
-
-		div1.innerHTML = 'Text 1';
-		await awaitTranslation();
-		expect(div1.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
-
-		div1.innerHTML = 'Text 2';
-		await awaitTranslation();
-		expect(div1.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
-
-		const elmA = document.querySelector('a');
-		expect(elmA).not.toBeNull();
-
-		if (elmA !== null) {
-			elmA.innerHTML = 'changed link text';
-			elmA.setAttribute('title', 'changed title');
-			elmA.setAttribute('href', 'changed url');
-
-			await awaitTranslation();
-			expect(elmA.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
-			expect(elmA.innerHTML).toMatch(endsWithRegex('changed link text'));
-
-			expect(elmA.getAttribute('title')).toMatch(
-				startsWithRegex(TRANSLATION_SYMBOL),
-			);
-			expect(elmA.getAttribute('href')).not.toMatch(
-				startsWithRegex(TRANSLATION_SYMBOL),
-			);
-		}
-
-		// Disable translation
-		domTranslator.unobserve(document.documentElement);
-		expect(div1.innerHTML).not.toMatch(startsWithRegex(TRANSLATION_SYMBOL));
-
-		if (elmA !== null) {
-			expect(elmA.innerHTML).not.toMatch(startsWithRegex(TRANSLATION_SYMBOL));
-			expect(elmA.getAttribute('title')).not.toMatch(
-				startsWithRegex(TRANSLATION_SYMBOL),
-			);
-		}
-	});
-
-	test('translate multiple nodes', async () => {
-		fillDocument(sample);
-
-		// Translate document
-		const domTranslator = new NodesTranslator(translator, options);
-
-		const pElm = document.querySelector('p');
-		const form = document.querySelector('form');
-		const figure = document.querySelector('figure');
-
-		if (!pElm || !form || !figure) throw new Error('Not found elements for test');
-
-		domTranslator.observe(form);
-		domTranslator.observe(figure);
-
-		await awaitTranslation();
-
-		expect(getElementText(pElm)).not.toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(form)).toContain(TRANSLATION_SYMBOL);
-
-		// Disable translation
-		domTranslator.unobserve(form);
-		expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
-
-		domTranslator.unobserve(figure);
-		expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(figure)).not.toContain(TRANSLATION_SYMBOL);
-
-		// Enable translation back
-		domTranslator.observe(form);
-		domTranslator.observe(figure);
-		await awaitTranslation();
-
-		expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(form)).toContain(TRANSLATION_SYMBOL);
-
-		// Disable translation for all elements
-		domTranslator.unobserve(form);
-		domTranslator.unobserve(figure);
-		expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
-		expect(getElementText(figure)).not.toContain(TRANSLATION_SYMBOL);
-	});
-});
+[true, false].forEach((isLazyTranslation) =>
+	describe(
+		'translation with consider translatable and ignored nodes' +
+			(isLazyTranslation ? ' (lazy translation mode)' : ''),
+		() => {
+			const sample = readFileSync(__dirname + '/sample.html', 'utf8');
+
+			const options = {
+				lazyTranslate: isLazyTranslation,
+				translatableAttributes: [
+					'title',
+					'alt',
+					'placeholder',
+					'label',
+					'aria-label',
+				],
+				ignoredTags: [
+					'meta',
+					'link',
+					'script',
+					'noscript',
+					'style',
+					'code',
+					'textarea',
+				],
+			};
+
+			test('translate whole document', async () => {
+				fillDocument(sample);
+				const parsedHTML = document.documentElement.outerHTML;
+
+				// Translate document
+				const domTranslator = new NodesTranslator(translator, options);
+				domTranslator.observe(document.documentElement);
+
+				await awaitTranslation();
+				expect(document.documentElement.outerHTML).toMatchSnapshot();
+
+				// Disable translation
+				domTranslator.unobserve(document.documentElement);
+				expect(document.documentElement.outerHTML).toBe(parsedHTML);
+			});
+
+			test('translate changed nodes', async () => {
+				fillDocument(sample);
+
+				// Translate document
+				const domTranslator = new NodesTranslator(translator, options);
+				domTranslator.observe(document.documentElement);
+
+				await awaitTranslation();
+
+				const div1 = document.createElement('div');
+				document.body.appendChild(div1);
+
+				div1.innerHTML = 'Text 1';
+				await awaitTranslation();
+				expect(div1.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
+
+				div1.innerHTML = 'Text 2';
+				await awaitTranslation();
+				expect(div1.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
+
+				const elmA = document.querySelector('a');
+				expect(elmA).not.toBeNull();
+
+				if (elmA !== null) {
+					elmA.innerHTML = 'changed link text';
+					elmA.setAttribute('title', 'changed title');
+					elmA.setAttribute('href', 'changed url');
+
+					await awaitTranslation();
+					expect(elmA.innerHTML).toMatch(startsWithRegex(TRANSLATION_SYMBOL));
+					expect(elmA.innerHTML).toMatch(endsWithRegex('changed link text'));
+
+					expect(elmA.getAttribute('title')).toMatch(
+						startsWithRegex(TRANSLATION_SYMBOL),
+					);
+					expect(elmA.getAttribute('href')).not.toMatch(
+						startsWithRegex(TRANSLATION_SYMBOL),
+					);
+				}
+
+				// Disable translation
+				domTranslator.unobserve(document.documentElement);
+				expect(div1.innerHTML).not.toMatch(startsWithRegex(TRANSLATION_SYMBOL));
+
+				if (elmA !== null) {
+					expect(elmA.innerHTML).not.toMatch(
+						startsWithRegex(TRANSLATION_SYMBOL),
+					);
+					expect(elmA.getAttribute('title')).not.toMatch(
+						startsWithRegex(TRANSLATION_SYMBOL),
+					);
+				}
+			});
+
+			test('translate multiple nodes', async () => {
+				fillDocument(sample);
+
+				// Translate document
+				const domTranslator = new NodesTranslator(translator, options);
+
+				const pElm = document.querySelector('p');
+				const form = document.querySelector('form');
+				const figure = document.querySelector('figure');
+
+				if (!pElm || !form || !figure)
+					throw new Error('Not found elements for test');
+
+				domTranslator.observe(form);
+				domTranslator.observe(figure);
+
+				await awaitTranslation();
+
+				expect(getElementText(pElm)).not.toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(form)).toContain(TRANSLATION_SYMBOL);
+
+				// Disable translation
+				domTranslator.unobserve(form);
+				expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
+
+				domTranslator.unobserve(figure);
+				expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(figure)).not.toContain(TRANSLATION_SYMBOL);
+
+				// Enable translation back
+				domTranslator.observe(form);
+				domTranslator.observe(figure);
+				await awaitTranslation();
+
+				expect(getElementText(figure)).toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(form)).toContain(TRANSLATION_SYMBOL);
+
+				// Disable translation for all elements
+				domTranslator.unobserve(form);
+				domTranslator.unobserve(figure);
+				expect(getElementText(form)).not.toContain(TRANSLATION_SYMBOL);
+				expect(getElementText(figure)).not.toContain(TRANSLATION_SYMBOL);
+			});
+		},
+	),
+);