@schukai/monster 1.25.0 → 1.28.0

package/test/cases/dom/template.js

@@ -1,16 +1,11 @@
 'use strict';
 
 import {expect} from "chai"
+import {ATTRIBUTE_THEME_NAME} from "../../../source/dom/constants.js";
 
 import {findDocumentTemplate, Template} from "../../../source/dom/template.js";
 import {initJSDOM} from "../../util/jsdom.js";
 
-const html1 = `
-
-<template id="mytemplate"></template>
-
-`;
-
 
 describe('Template', function () {
 
@@ -20,7 +15,8 @@ describe('Template', function () {
 
     beforeEach(() => {
         let mocks = document.getElementById('mocks');
-        mocks.innerHTML = html1;
+        mocks.innerHTML = `
+            <template id="mytemplate"></template>`;
     })
 
     afterEach(() => {
@@ -75,14 +71,76 @@ describe('Template', function () {
     });
 
     describe('.findDocumentTemplate()', function () {
-        it('should throw Template not found', function () {
-            const div = document.createElement('div');
-            div.remove();
-            let t = findDocumentTemplate("mytemplate", div);
-            expect(t).is.instanceof(Template);
+        describe('Template', function () {
+            it('should find template over ownerDocument', function () {
+                const div = document.createElement('div');
+                div.remove();
+                let t = findDocumentTemplate("mytemplate", div);
+                expect(t).is.instanceof(Template);
+
+            })
+        });
 
-        })
-    });
+        describe('Thmened Template', function () {
+            let memAttributeValue;
+
+            beforeEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <template id="mytemplate"><p>1</p></template>
+                    <template id="mytemplate-monster"><p>2</p></template>
+                    <template id="mytemplate-testtheme"><p>4</p></template>
+                    <template id="myprefix-mytemplate-monster"><p>3</p></template>
+                `;
+
+                let html = document.querySelector('html');
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    memAttributeValue = html.getAttribute(ATTRIBUTE_THEME_NAME)
+                }
+
+            })
+
+            afterEach(() => {
+                let mocks = document.getElementById('mocks');
+                mocks.innerHTML = "";
 
+                let html = document.querySelector('html');
 
+                if (html.hasAttribute(ATTRIBUTE_THEME_NAME)) {
+                    html.removeAttribute(ATTRIBUTE_THEME_NAME);
+                }
+
+                if (memAttributeValue) {
+                    html.setAttribute(ATTRIBUTE_THEME_NAME, memAttributeValue)
+                }
+
+            })
+
+
+            it('should find template over ownerDocument', function () {
+                let html = document.querySelector('html');
+                const div = document.createElement('div');
+                div.setAttribute('data-monster-template-prefix', 'myprefix')
+                div.remove();
+                let t1 = findDocumentTemplate("mytemplate", div);
+                expect(t1).is.instanceof(Template);
+                expect(t1.createDocumentFragment().textContent).is.equal("3");
+
+                div.removeAttribute('data-monster-template-prefix')
+                let t2 = findDocumentTemplate("mytemplate", div);
+                expect(t2).is.instanceof(Template);
+                expect(t2.createDocumentFragment().textContent).is.equal("2");
+
+                html.setAttribute(ATTRIBUTE_THEME_NAME,'testtheme');
+                let a= html.outerHTML;
+                let t3 = findDocumentTemplate("mytemplate", div);
+                expect(t3).is.instanceof(Template);
+                expect(t3.createDocumentFragment().textContent).is.equal("4");
+
+
+            })
+        });
+
+
+    });
 });

package/test/cases/dom/updater.js

@@ -12,99 +12,100 @@ let expect = chai.expect;
 
 chai.use(chaiDom);
 
-let html1 = `<template id="current">
-    <li data-monster-replace="path:current | tojson"></li>
-</template>
-<div id="test1">
-    <ul data-monster-insert="current path:a.b">
-    </ul>
-</div>
-<div id="test2">
-    <ul data-monster-insert="current path:a.b | doit">
-    </ul>
-</div>
-<div id="test3">
-    <div data-monster-attributes="class path:a.b">
-        <input data-monster-attributes="value path:a.c" id="input1">
-        <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
-        <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
-        <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
-        <input type="radio" name="radio" value="r2" id="r2">
-        <input type="radio" name="radio" value="rx" id="rx">
-
-        <select data-monster-attributes="value path:a.select" name="select" id="select">
-            <option value="other-value">value1</option>
-            <option>value2</option>
-        </select>
-
-        <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option value="other-value5">value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
-
+let html1 = `
+    <template id="current">
+        <li data-monster-replace="path:current | tojson"></li>
+    </template>
+    <div id="test1">
+        <ul data-monster-insert="current path:a.b">
+        </ul>
+    </div>
+    <div id="test2">
+        <ul data-monster-insert="current path:a.b | doit">
+        </ul>
+    </div>
+    <div id="test3">
+        <div data-monster-attributes="class path:a.b">
+            <input data-monster-attributes="value path:a.c" id="input1">
+            <input data-monster-attributes="checked path:a.checkbox" type="checkbox" name="checkbox" id="checkbox">
+            <input data-monster-attributes="value path:a.text" type="text" name="text" id="text">
+            <input data-monster-attributes="checked path:a.radio" type="radio" name="radio" value="r1" id="radio">
+            <input type="radio" name="radio" value="r2" id="r2">
+            <input type="radio" name="radio" value="rx" id="rx">
+
+            <select data-monster-attributes="value path:a.select" name="select" id="select">
+                <option value="other-value">value1</option>
+                <option>value2</option>
+            </select>
+
+            <select data-monster-attributes="value path:a.multiselect" name="multiselect" multiple id="multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option value="other-value5">value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
+
+        </div>
     </div>
-</div>
 
 `;
 
 let html2 = `
     <div id="test1">
-        <div data-monster-replace="path:text | tolower"> </div>
-        <div data-monster-replace="path:text | call:myformatter"> </div>
+        <div data-monster-replace="path:text | tolower"></div>
+        <div data-monster-replace="path:text | call:myformatter"></div>
         <div data-monster-replace="static:hello\\ "></div>
     </div>
 `;
 
 let html3 = `
 
-<template id="myinnerid">
-    <span data-monster-replace="path:myinnerid | tojson"></span>
-</template>
+    <template id="myinnerid">
+        <span data-monster-replace="path:myinnerid | tojson"></span>
+    </template>
 
-<template id="myid">
-   <p data-monster-insert="myinnerid path:a.b"></p>
-</template>
+    <template id="myid">
+        <p data-monster-insert="myinnerid path:a.b"></p>
+    </template>
 
-<div id="test1">
-    <div data-monster-insert="myid path:a.b"></div>
-</div>
+    <div id="test1">
+        <div data-monster-insert="myid path:a.b"></div>
+    </div>
 
 `;
 
 let html4 = `
-<div>
-    <form id="form1">
-        <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
-        <input type="text" name="text">
-        <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
-        <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
-        <input type="button" name="button">
-
-        <select name="select1" id="select1" data-monster-bind="path:select">
-            <option>value1</option>
-            <option>value2</option>
-        </select>
-
-        <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
-            <option>value1</option>
-            <option>value2</option>
-            <option>value3</option>
-            <option>value4</option>
-            <option>value5</option>
-        </select>
-
-        <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
+    <div>
+        <form id="form1">
+            <input type="checkbox" value="checked" name="checkbox" data-monster-bind="path:state">
+            <input type="text" name="text">
+            <input type="radio" name="radio" value="r1" id="r1" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="r2" id="r2" data-monster-bind="path:radio">
+            <input type="radio" name="radio" value="rx" id="rx" data-comment="not called because no bind attribute">
+            <input type="button" name="button">
+
+            <select name="select1" id="select1" data-monster-bind="path:select">
+                <option>value1</option>
+                <option>value2</option>
+            </select>
+
+            <select name="select2" multiple id="select2" data-monster-bind="path:multiselect">
+                <option>value1</option>
+                <option>value2</option>
+                <option>value3</option>
+                <option>value4</option>
+                <option>value5</option>
+            </select>
+
+            <textarea name="textarea" id="textarea" data-monster-bind="path:textarea">
             
         </textarea>
 
-    </form>
-</div>
+        </form>
+    </div>
 
 `;
 
@@ -515,7 +516,7 @@ describe('DOM', function () {
                         })
                 }, 100)
 
-            }); 
+            });
         });
     });
 
@@ -638,14 +639,13 @@ describe('DOM', function () {
         });
     });
 
-
     describe('Get Attribute Pipe', function () {
         let id, mocks;
         beforeEach(() => {
             mocks = document.getElementById('mocks');
             id = new ID('monster');
             mocks.innerHTML = ` <div id="` + id + `"
-                             data-monster-replace="path:a | if:value:\\ "></div>`
+            data-monster-replace="path:a | if:value:\\ "></div>`
         })
 
         afterEach(() => {
@@ -661,4 +661,31 @@ describe('DOM', function () {
         });
     });
 
+
+    describe('manuel update', function () {
+        let id, mocks;
+        
+        beforeEach(() => {
+            mocks = document.getElementById('mocks');
+            id = new ID('monster').toString();
+            mocks.innerHTML = `<input id="` + id + `"data-monster-bind="path:myvalue">`
+        })
+
+        afterEach(() => {
+            mocks.innerHTML = "";
+        })
+
+        it('should get value', function () {
+
+            document.getElementById(id).value="hello";
+            const updater = new Updater(mocks);
+            const subject = updater.getSubject();
+            
+            expect(subject).to.not.have.property('myvalue');
+            updater.retrieve();
+            expect(subject).to.have.property('myvalue');
+        });
+
+
+    });
 });

package/test/cases/i18n/formatter.js

@@ -0,0 +1,66 @@
+import {expect} from "chai"
+import {Formatter} from "../../../source/i18n/formatter.js";
+import {Translations} from "../../../source/i18n/translations.js";
+
+
+describe('Formatter', function () {
+
+    describe('example', function () {
+
+        it('should run with marker', function () {
+
+            const translations = new Translations('en')
+                .assignTranslations({
+                    thekey: "${animal} has eaten the ${food}!"
+                });
+
+            const f = new Formatter({}, translations);
+            
+            expect(f.format("i18n{thekey::animal=dog::food=cake}")).to.be.equal('dog has eaten the cake!');
+            // ↦ dog has eaten the cake!                
+
+        });
+        
+        it('should run without marker', function () {
+
+            const translations = new Translations('en')
+                .assignTranslations({
+                    thekey: "${animal} has eaten the ${food}!"
+                });
+
+            // missing marker
+            expect(new Formatter({}, translations).format("thekey::animal=dog::food=cake")).to.be.equal('dog has eaten the cake!');
+            // ↦ dog has eaten the cake!                
+
+        });
+    });
+
+
+    describe('format', function () {
+
+        [
+            ['i18n{translationkey::a=3::b=5}', 'test is 3 and 5'],
+
+        ].forEach(function (data) {
+
+            let a = data.shift()
+            let b = data.shift()
+
+            it('format ' + a + ' should ' + b, function () {
+
+                const translations = new Translations('de').assignTranslations({
+                    translationkey: "test is ${a} and ${b}"
+                })
+
+                expect(
+                    new Formatter({}, translations).format(a)
+                ).to.equal(b)
+            });
+        });
+
+
+    })
+
+
+})
+;

package/test/cases/monster.js

@@ -9,7 +9,7 @@ describe('Monster', function () {
         let monsterVersion
 
     /**#@+ dont touch, replaced by make with package.json version */
-    monsterVersion = new Version('1.25.0')
+    monsterVersion = new Version('1.28.0')
     /**#@-*/
 
         let m = Monster.getVersion();

package/test/cases/text/formatter.js

@@ -69,6 +69,7 @@ describe('Formatter', function () {
 
         [
             ['${a | tojson}', "{\"b\":{\"c\":\"Hello\"},\"d\":\"World\",\"e\":1}"],
+            ['click ${a.d} times', "click World times"],
             [' ${a.b.c} ', ' Hello '],
             [' ${a.b.c}', ' Hello'],
             ['${a.b.c} ', 'Hello '],
@@ -84,9 +85,8 @@ describe('Formatter', function () {
 
             let a = data.shift()
             let b = data.shift()
-            let c = data.shift()
 
-            it('format ' + a + ' should return ' + c, function () {
+            it('format ' + a + ' should return ' + b, function () {
 
                 let obj = {
                     a: {
@@ -110,7 +110,7 @@ describe('Formatter', function () {
         let text = '${mykey${subkey}}';
         let expected = '1';
 
-        it('format ' + text + ' should '+expected, function () {
+        it('format ' + text + ' should ' + expected, function () {
 
             let obj = {
                 mykey2: "1",
@@ -123,13 +123,44 @@ describe('Formatter', function () {
 
 
     });
-    
+
+    describe('setParameterChars()', function () {
+
+        it('setParameterChars() should return Instance', function () {
+            expect(new Formatter({}).setParameterChars('a', 'b')).is.instanceof(Formatter);
+
+        });
+
+
+    });
+
+
+    describe('with callbacks', function () {
+
+        it('add callback', function () {
+            const formatter = new Formatter({
+                x: '1'
+            }, {
+                callbacks: {
+                    my: (value) => {
+                        return "!" + value + "!"
+                    }
+                }
+            });
+
+            expect(formatter.format('${x | call:my}')).is.equal('!1!');
+
+        });
+
+
+    });
+
     describe('Marker in marker with parameter', function () {
 
         let text = '${mykey::mykey=${subkey}}';
         let expected = '2';
 
-        it('format ' + text + ' should '+expected, function () {
+        it('format ' + text + ' should ' + expected, function () {
 
             let obj = {
                 subkey: "2"