diff --git a/javascript/src/tests/test_webcomponents.ts b/javascript/src/tests/test_webcomponents.ts index 1b81a218..221c6bfe 100644 --- a/javascript/src/tests/test_webcomponents.ts +++ b/javascript/src/tests/test_webcomponents.ts @@ -14,48 +14,57 @@ * limitations under the License. */ -import {loadDefaultJapaneseParser} from '../index.js'; import '../webcomponents/budoux-ja.js'; -const parser = loadDefaultJapaneseParser(); - describe('Web Components', () => { beforeAll(async () => { await window.customElements.whenDefined('budoux-ja'); }); - it('should process the provided text.', () => { - const inputText = '今日は良い天気です。'; + beforeEach(() => { + window.document.body.innerText = ''; + }); + it('should process the provided text.', () => { const budouxElement = window.document.createElement('budoux-ja'); - budouxElement.textContent = inputText; + budouxElement.textContent = '今日は良い天気です。'; window.document.body.appendChild(budouxElement); - const mirroredElement = window.document.createElement('span'); - mirroredElement.textContent = inputText; - parser.applyToElement(mirroredElement); - - expect(budouxElement.innerHTML).toBe(mirroredElement.outerHTML); + expect(budouxElement.innerHTML).toBe('今日は\u200B良い\u200B天気です。'); }); - it('should react to the text content change after attached.', resolve => { + it('should react to text content changes after attached.', resolve => { const budouxElement = window.document.createElement('budoux-ja'); budouxElement.textContent = '今日は良い天気です。'; window.document.body.appendChild(budouxElement); - const inputText = '明日はどうなるかな。'; - const mirroredElement = window.document.createElement('span'); - mirroredElement.textContent = inputText; - parser.applyToElement(mirroredElement); - const observer = new window.MutationObserver(() => { - expect(budouxElement.innerHTML).toBe(mirroredElement.outerHTML); + expect(budouxElement.innerHTML).toBe('明日は\u200B晴れるかな?'); resolve(); }); observer.observe(budouxElement, { childList: true, }); + budouxElement.textContent = '明日は晴れるかな?'; + }); - budouxElement.textContent = inputText; + it('should work with HTML inputs.', () => { + const budouxElement = window.document.createElement('budoux-ja'); + budouxElement.appendChild(window.document.createTextNode('昨日は')); + const b = window.document.createElement('b'); + b.textContent = '雨'; + budouxElement.appendChild(b); + budouxElement.appendChild(window.document.createTextNode('でした。')); + window.document.body.appendChild(budouxElement); + expect(budouxElement.innerHTML).toBe('昨日は\u200B雨でした。'); + }); + + it('should have wrapping styles to control line breaks.', () => { + const budouxElement = window.document.createElement('budoux-ja'); + budouxElement.textContent = 'Hello world'; + window.document.body.appendChild(budouxElement); + const styles = budouxElement.computedStyleMap(); + expect(styles.get('word-break')?.toString()).toBe('keep-all'); + expect(styles.get('overflow-wrap')?.toString()).toBe('anywhere'); }); }); diff --git a/javascript/src/webcomponents/budoux-base.ts b/javascript/src/webcomponents/budoux-base.ts index 9874f8e9..62f381b8 100644 --- a/javascript/src/webcomponents/budoux-base.ts +++ b/javascript/src/webcomponents/budoux-base.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import {setInnerHtml} from '../dom.js'; +import {applyWrapStyle} from '../dom.js'; import {HTMLProcessingParser} from '../html_processor.js'; const MUTATION_OBSERVER_OPTIONS = { @@ -43,6 +43,7 @@ export abstract class BudouXBaseElement extends HTMLElement { } connectedCallback() { + applyWrapStyle(this); this.sync(); } @@ -52,7 +53,7 @@ export abstract class BudouXBaseElement extends HTMLElement { sync() { this.observer.disconnect(); - setInnerHtml(this, this.parser.translateHTMLString(this.innerHTML)); + this.parser.applyToElement(this); this.observer.observe(this, MUTATION_OBSERVER_OPTIONS); } }