spyne 0.19.1 → 0.20.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/.eslintrc.js +4 -3
- package/.travis.yml +24 -11
- package/karma.conf.js +76 -86
- package/lib/spyne.esm.js +15 -0
- package/lib/spyne.esm.js.map +1 -0
- package/lib/spyne.umd.js +9565 -0
- package/package.json +47 -27
- package/rollup.config.js +26 -0
- package/src/spyne/channels/channel-fetch-class.js +39 -43
- package/src/spyne/channels/channel-payload-class.js +61 -74
- package/src/spyne/channels/channel-proxy.js +25 -26
- package/src/spyne/channels/channel.js +141 -149
- package/src/spyne/channels/channels-config.js +46 -47
- package/src/spyne/channels/channels-map.js +61 -65
- package/src/spyne/channels/spyne-channel-lifecycle.js +12 -12
- package/src/spyne/channels/spyne-channel-route.js +241 -250
- package/src/spyne/channels/spyne-channel-ui.js +213 -75
- package/src/spyne/channels/spyne-channel-window.js +157 -157
- package/src/spyne/spyne-app.js +32 -19
- package/src/spyne/spyne-plugins.js +55 -70
- package/src/spyne/spyne.js +23 -23
- package/src/spyne/utils/channel-config-validator.js +10 -10
- package/src/spyne/utils/channel-fetch-util.js +72 -55
- package/src/spyne/utils/channel-payload-filter.js +89 -100
- package/src/spyne/utils/deep-merge.js +31 -29
- package/src/spyne/utils/frp-tools.js +108 -92
- package/src/spyne/utils/gc.js +6 -6
- package/src/spyne/utils/mixins/base-core-mixins.js +17 -15
- package/src/spyne/utils/mixins/base-streams-mixins.js +9 -9
- package/src/spyne/utils/route-channel-updater.js +23 -29
- package/src/spyne/utils/safe-clone.js +40 -58
- package/src/spyne/utils/sanitize-html.js +35 -0
- package/src/spyne/utils/security-policy.js +11 -0
- package/src/spyne/utils/spyne-app-properties.js +110 -114
- package/src/spyne/utils/spyne-logger.js +4 -11
- package/src/spyne/utils/spyne-plugins-methods.js +38 -63
- package/src/spyne/utils/spyne-trait.js +33 -33
- package/src/spyne/utils/spyne-utils-channel-route-url.js +229 -153
- package/src/spyne/utils/spyne-utils-channel-route.js +128 -138
- package/src/spyne/utils/spyne-utils-channel-window.js +39 -39
- package/src/spyne/utils/viewstream-animations.js +12 -12
- package/src/spyne/utils/viewstream-observables.js +45 -45
- package/src/spyne/views/dom-element-template.js +111 -114
- package/src/spyne/views/dom-element.js +82 -84
- package/src/spyne/views/view-stream-broadcaster.js +66 -62
- package/src/spyne/views/view-stream-element.js +105 -106
- package/src/spyne/views/view-stream-payload.js +25 -27
- package/src/spyne/views/view-stream-selector.js +157 -163
- package/src/spyne/views/view-stream.js +416 -640
- package/src/tests/channels/channel-dom.test.js +15 -15
- package/src/tests/channels/channel-fetch.test.js +51 -62
- package/src/tests/channels/channel-payload-class.test.js +50 -63
- package/src/tests/channels/channel-payload-filter.test.js +133 -193
- package/src/tests/channels/channel-route.test.js +102 -112
- package/src/tests/channels/channel-stream-item.test.js +19 -19
- package/src/tests/channels/channel-ui.test.js +15 -27
- package/src/tests/channels/channel-util-dom.test.js +31 -31
- package/src/tests/channels/channel.test.js +20 -25
- package/src/tests/channels/route-utils.test.js +61 -66
- package/src/tests/channels/url-utils.test.js +151 -151
- package/src/tests/channels/view-stream-broadcaster.test.js +7 -7
- package/src/tests/import.test.js +5 -5
- package/src/tests/index.js +6 -7
- package/src/tests/index.test.js +6 -8
- package/src/tests/mocks/channel-payload-data.js +218 -220
- package/src/tests/mocks/enhancer.test.js +5 -5
- package/src/tests/mocks/payload-ui.js +87 -90
- package/src/tests/mocks/routes-data.js +264 -266
- package/src/tests/mocks/spyne-docs.mocks.js +3 -3
- package/src/tests/mocks/template-renderer.mocks.js +47 -47
- package/src/tests/mocks/utils-data.js +78 -79
- package/src/tests/mocks/viewstream-internal-payload.mocks.js +50 -50
- package/src/tests/mocks/window-events-arr.js +1 -1
- package/src/tests/package-json.spec.test.js +9 -0
- package/src/tests/spyne-app.test.js +15 -18
- package/src/tests/spyne-plugin.test.js +16 -20
- package/src/tests/utils/channel-action-filter.test.js +84 -86
- package/src/tests/utils/channel-data-packet-generator.unused.js +62 -86
- package/src/tests/utils/channel-fetch-util.test.js +64 -66
- package/src/tests/utils/frp-tools.test.js +19 -19
- package/src/tests/utils/plugins-methods.test.js +31 -55
- package/src/tests/utils/security.test.js +10 -0
- package/src/tests/utils/spyne-app-properties.test.js +4 -8
- package/src/tests/views/dom-el-selectors.test.js +112 -119
- package/src/tests/views/dom-el-template-proxy.test.js +7 -0
- package/src/tests/views/dom-el-template.test.js +186 -156
- package/src/tests/views/dom-el.test.js +58 -56
- package/src/tests/views/view-stream-enhancer-loader.test.js +2 -2
- package/src/tests/views/view-stream-enhancer.test.js +11 -11
- package/src/tests/views/view-stream.test.js +22 -33
- package/webpack.config.js +76 -67
- package/docs/-_%20Solves%20equations%20of%20the%20form%20a%20_%20x%20=%20b.html +0 -487
- package/docs/DomItem.html +0 -298
- package/docs/DomItem_DomItem.html +0 -314
- package/docs/ViewStream.html +0 -2249
- package/docs/ViewStream_ViewStream.html +0 -503
- package/docs/custom/css/jsdoc-viewstream.css +0 -377
- package/docs/custom/layout.tmpl +0 -47
- package/docs/dom-item.js.html +0 -213
- package/docs/fonts/OpenSans-Bold-webfont.eot +0 -0
- package/docs/fonts/OpenSans-Bold-webfont.svg +0 -1830
- package/docs/fonts/OpenSans-Bold-webfont.woff +0 -0
- package/docs/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
- package/docs/fonts/OpenSans-BoldItalic-webfont.svg +0 -1830
- package/docs/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
- package/docs/fonts/OpenSans-Italic-webfont.eot +0 -0
- package/docs/fonts/OpenSans-Italic-webfont.svg +0 -1830
- package/docs/fonts/OpenSans-Italic-webfont.woff +0 -0
- package/docs/fonts/OpenSans-Light-webfont.eot +0 -0
- package/docs/fonts/OpenSans-Light-webfont.svg +0 -1831
- package/docs/fonts/OpenSans-Light-webfont.woff +0 -0
- package/docs/fonts/OpenSans-LightItalic-webfont.eot +0 -0
- package/docs/fonts/OpenSans-LightItalic-webfont.svg +0 -1835
- package/docs/fonts/OpenSans-LightItalic-webfont.woff +0 -0
- package/docs/fonts/OpenSans-Regular-webfont.eot +0 -0
- package/docs/fonts/OpenSans-Regular-webfont.svg +0 -1831
- package/docs/fonts/OpenSans-Regular-webfont.woff +0 -0
- package/docs/global.html +0 -548
- package/docs/index-custom.html +0 -79
- package/docs/index.html +0 -82
- package/docs/jsdoc.config.json +0 -22
- package/docs/scripts/linenumber.js +0 -25
- package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
- package/docs/scripts/prettify/lang-css.js +0 -2
- package/docs/scripts/prettify/prettify.js +0 -28
- package/docs/styles/jsdoc-default.css +0 -358
- package/docs/styles/prettify-jsdoc.css +0 -111
- package/docs/styles/prettify-tomorrow.css +0 -132
- package/docs/view-stream.js.html +0 -767
|
@@ -1,185 +1,215 @@
|
|
|
1
|
-
import { DomElementTemplate } from '../../spyne/views/dom-element-template'
|
|
2
|
-
import { ScriptTemplate, StringTemplate, starWarsData } from '../mocks/template-renderer.mocks'
|
|
3
|
-
import {DomElement} from '../../spyne/views/dom-element'
|
|
1
|
+
import { DomElementTemplate } from '../../spyne/views/dom-element-template'
|
|
2
|
+
import { ScriptTemplate, StringTemplate, starWarsData } from '../mocks/template-renderer.mocks'
|
|
3
|
+
import { DomElement } from '../../spyne/views/dom-element'
|
|
4
4
|
|
|
5
|
-
chai.use(require('chai-dom'))
|
|
5
|
+
chai.use(require('chai-dom'))
|
|
6
6
|
|
|
7
7
|
describe('DomElTemplate', () => {
|
|
8
8
|
it('template renderer exists', () => {
|
|
9
|
-
expect(DomElementTemplate).to.exist
|
|
10
|
-
})
|
|
9
|
+
expect(DomElementTemplate).to.exist
|
|
10
|
+
})
|
|
11
11
|
|
|
12
12
|
it('should take in a tmpl parameter', () => {
|
|
13
13
|
// console.log('String template ', starWarsData);
|
|
14
|
-
const re = DomElementTemplate.findTmplLoopsRE()
|
|
15
|
-
const reArr = ['{{#characters}}<li>{{.*}}</li>{{/characters}}', '{{#movies}}<li>{{title}} year:{{year}}</li>{{/movies}}']
|
|
16
|
-
const tmplMatch = ScriptTemplate.innerHTML.match(DomElementTemplate.findTmplLoopsRE())
|
|
17
|
-
expect(tmplMatch).to.deep.equal(reArr)
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
14
|
+
const re = DomElementTemplate.findTmplLoopsRE()
|
|
15
|
+
const reArr = ['{{#characters}}<li>{{.*}}</li>{{/characters}}', '{{#movies}}<li>{{title}} year:{{year}}</li>{{/movies}}']
|
|
16
|
+
const tmplMatch = ScriptTemplate.innerHTML.match(DomElementTemplate.findTmplLoopsRE())
|
|
17
|
+
expect(tmplMatch).to.deep.equal(reArr)
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
it('DomElementTemplate show render data value', () => {
|
|
21
|
+
const data = { cat:'meow' }
|
|
22
|
+
const template = '<h1>The cat says {{cat}}'
|
|
23
|
+
const domElTmpl = new DomElementTemplate(template, data)
|
|
24
|
+
const render = domElTmpl.renderDocFrag()
|
|
25
|
+
// console.log("RENDER IS ",render.firstElementChild);
|
|
26
|
+
expect(render.firstElementChild.innerText).to.equal('The cat says meow')
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
it('DomElementTemplate Template show loop object values', () => {
|
|
30
|
+
const data = {
|
|
31
|
+
dog: {
|
|
32
32
|
sound: 'woof'
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
const template = '<h1>The dog says {{#dog}}{{sound}}{{/dog}}</h1>'
|
|
36
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
37
|
+
const render = domElTemplate.renderDocFrag()
|
|
38
|
+
expect(render.firstElementChild.innerText).to.equal('The dog says woof')
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
it('DomElementTemplate Template show not render null objects', () => {
|
|
42
|
+
const data = {
|
|
43
|
+
cat: {
|
|
42
44
|
sound: 'woof'
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
it('DomElementTemplate Template
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
const template = '<article>{{#dog}}<h1>The dog says {{sound}}</h1>{{/dog}}</article>'
|
|
48
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
49
|
+
const render = domElTemplate.renderDocFrag()
|
|
50
|
+
expect(render.firstElementChild.innerText).to.equal('')
|
|
51
|
+
})
|
|
52
|
+
it('DomElementTemplate Template should render 0 as non-empty', () => {
|
|
53
|
+
const data = { scriptNum:0, eventType:'scriptContent', tabName:'MyTab' }
|
|
54
|
+
const template = '<button data-event-type="{{eventType}}" data-script-num="{{scriptNum}}" >{{scriptNum}}</button>'
|
|
55
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
56
|
+
const render = domElTemplate.renderDocFrag()
|
|
57
|
+
expect(render.firstElementChild.innerText).to.equal('0')
|
|
58
|
+
})
|
|
59
|
+
it('DomElementTemplate Template show not render null objects with non-looped data', () => {
|
|
60
|
+
const data = {
|
|
61
|
+
cat: {
|
|
62
|
+
sound: 'woof'
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
const template = '<article><h1>The dog says {{test.sound}}</h1></article>'
|
|
66
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
67
|
+
const render = domElTemplate.renderDocFrag()
|
|
68
|
+
expect(render.firstElementChild.innerText).to.equal('The dog says ')
|
|
69
|
+
})
|
|
70
|
+
it('DomElementTemplate Template show not render null values with non-looped data', () => {
|
|
71
|
+
const data = {
|
|
72
|
+
cat: {
|
|
73
|
+
sound: 'woof'
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
const template = '<article><h1>The dog says {{asdf}}</h1></article>'
|
|
77
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
78
|
+
const render = domElTemplate.renderDocFrag()
|
|
79
|
+
expect(render.firstElementChild.innerText).to.equal('The dog says ')
|
|
80
|
+
})
|
|
81
|
+
it('DomElementTemplate Template show not render null values', () => {
|
|
82
|
+
const data = {
|
|
83
|
+
animals: [
|
|
84
|
+
{
|
|
85
|
+
name: 'dog',
|
|
53
86
|
sound:'woof'
|
|
54
87
|
},
|
|
55
|
-
{
|
|
88
|
+
{
|
|
89
|
+
name: 'cat',
|
|
56
90
|
sound:'meow'
|
|
57
91
|
}
|
|
58
|
-
]};
|
|
59
|
-
let template = "<article>{{#animals}}<h1>The {{name}} says {{sound}}</h1>{{/animals}}</article>";
|
|
60
|
-
let domElTemplate = new DomElementTemplate(template, data);
|
|
61
|
-
let render = domElTemplate.renderDocFrag();
|
|
62
|
-
let renderStr = render.firstElementChild.querySelectorAll('h1')[1].innerText;
|
|
63
|
-
expect(renderStr).to.equal('The cat says meow');
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
it('DomElementTemplate Template renders array of objects', ()=>{
|
|
68
|
-
let data =[
|
|
69
|
-
{name: 'jane'},
|
|
70
|
-
{name: 'joe'},
|
|
71
|
-
{name: 'john'}
|
|
72
|
-
];
|
|
73
|
-
let template = "<ul>{{#}}<li>Welcome, {{name}}.</li>{{/}}</ul>";
|
|
74
|
-
let domElTemplate = new DomElementTemplate(template, data);
|
|
75
|
-
let render = domElTemplate.renderDocFrag();
|
|
76
|
-
let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
77
|
-
expect(lastItemTxt).to.equal('Welcome, john.');
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
it('DomElementTemplate Template renders array of objects and also nested objects', ()=>{
|
|
81
|
-
let data =[
|
|
82
|
-
{name: 'jane', hobbies: ['photography','driving','running']},
|
|
83
|
-
{name: 'joe', hobbies: []},
|
|
84
|
-
{name: 'john', hobbies: ['vlogging','dancing'] }
|
|
85
|
-
];
|
|
86
|
-
let template = "<ul>{{#}}<li>Welcome, {{name}}. and hobbies are {{hobbies}} </li>{{/}}</ul>";
|
|
87
|
-
// let template = "<ul>{{#}}<li>Welcome, {{name}}. <ol>{{#hobbies}}<li>{{.}}</li><{{/hobbies}}/ol></li>{{/}}</ul>";
|
|
88
|
-
let domElTemplate = new DomElementTemplate(template, data);
|
|
89
|
-
let render = domElTemplate.renderDocFrag();
|
|
90
|
-
|
|
91
|
-
//console.log("render nested obj ",render.firstElementChild);
|
|
92
|
-
//let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
93
|
-
// expect(lastItemTxt).to.equal('Welcome, john.');
|
|
94
|
-
return true;
|
|
95
|
-
});
|
|
96
|
-
it('DomElementTemplate renders object and loops arrays', ()=>{
|
|
97
|
-
let data =[
|
|
98
|
-
{name: 'jane', hobbies: ['photography','driving','running'], favFoods: ['hummus', 'quinoa', 'burritos']},
|
|
99
|
-
{name: 'joe', hobbies: []},
|
|
100
|
-
{name: 'john', hobbies: ['vlogging','dancing'] }
|
|
101
|
-
];
|
|
102
|
-
let template = "<ul><li>Welcome, {{name}}. Your hobbies are {{#hobbies}}{{.}}, {{/hobbies}}and favorite foods are {{#favFoods}}<span>{{.}}, </span>{{/favFoods}} </li></ul>";
|
|
103
|
-
data = data[0];
|
|
104
|
-
let domElTemplate = new DomElementTemplate(template, data);
|
|
105
|
-
let render = domElTemplate.renderDocFrag();
|
|
106
|
-
let favFoodInnerText = render.firstElementChild.querySelectorAll('span')[0].innerText
|
|
107
|
-
expect(favFoodInnerText).to.equal('hummus, ');
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
it('DomElementTemplate renders objectt and loops array and loops obj params', ()=>{
|
|
111
|
-
let data =[
|
|
112
|
-
{name: 'jane', hobbies: ['photography','driving','running'], details: {hair:'brown', eyes:'hazel'}},
|
|
113
|
-
{name: 'joe', hobbies: []},
|
|
114
|
-
{name: 'john', hobbies: ['vlogging','dancing'] }
|
|
115
|
-
];
|
|
116
|
-
let template = "<ul><li>Welcome, {{name}}. Your hobbies are {{#hobbies}}{{.}}, {{/hobbies}}and your {{#details}}hair is {{hair}} and your eyes are {{eyes}} {{/details}}and favorite foods are {{#favFoods}}<span>{{.}}, </span>{{/favFoods}} </li></ul>";
|
|
117
|
-
data = data[0];
|
|
118
|
-
let domElTemplate = new DomElementTemplate(template, data);
|
|
119
|
-
let render = domElTemplate.renderDocFrag();
|
|
120
|
-
let favFoodInnerText = render.firstElementChild
|
|
121
|
-
|
|
122
|
-
//console.log("render obj w looped arr ", favFoodInnerText);
|
|
123
|
-
return true;
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
it('DomElementTemplate Template renders array of nested objects and uses dot syntax', ()=>{
|
|
128
|
-
let data ={
|
|
129
|
-
users: [
|
|
130
|
-
{name: 'jane', details: {age:24, hair: 'brown', education: {school:'nyu', degree:'Philosophy'} }},
|
|
131
|
-
{name: 'joe', details: {age:34, hair: 'blonde', education: {school:'nyu', degree:'Computer Science'} }},
|
|
132
|
-
{name: 'john', details: {age:54, hair: 'green', education: {school:'nyu', degree:'Math'} }}
|
|
133
92
|
]
|
|
134
|
-
}
|
|
135
|
-
|
|
93
|
+
}
|
|
94
|
+
const template = '<article>{{#animals}}<h1>The {{name}} says {{sound}}</h1>{{/animals}}</article>'
|
|
95
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
96
|
+
const render = domElTemplate.renderDocFrag()
|
|
97
|
+
const renderStr = render.firstElementChild.querySelectorAll('h1')[1].innerText
|
|
98
|
+
expect(renderStr).to.equal('The cat says meow')
|
|
99
|
+
})
|
|
100
|
+
|
|
101
|
+
it('DomElementTemplate Template renders array of objects', () => {
|
|
102
|
+
const data = [
|
|
103
|
+
{ name: 'jane' },
|
|
104
|
+
{ name: 'joe' },
|
|
105
|
+
{ name: 'john' }
|
|
106
|
+
]
|
|
107
|
+
const template = '<ul>{{#}}<li>Welcome, {{name}}.</li>{{/}}</ul>'
|
|
108
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
109
|
+
const render = domElTemplate.renderDocFrag()
|
|
110
|
+
const lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
111
|
+
expect(lastItemTxt).to.equal('Welcome, john.')
|
|
112
|
+
})
|
|
113
|
+
|
|
114
|
+
it('DomElementTemplate Template renders array of objects and also nested objects', () => {
|
|
115
|
+
const data = [
|
|
116
|
+
{ name: 'jane', hobbies: ['photography', 'driving', 'running'] },
|
|
117
|
+
{ name: 'joe', hobbies: [] },
|
|
118
|
+
{ name: 'john', hobbies: ['vlogging', 'dancing'] }
|
|
119
|
+
]
|
|
120
|
+
const template = '<ul>{{#}}<li>Welcome, {{name}}. and hobbies are {{hobbies}} </li>{{/}}</ul>'
|
|
136
121
|
// let template = "<ul>{{#}}<li>Welcome, {{name}}. <ol>{{#hobbies}}<li>{{.}}</li><{{/hobbies}}/ol></li>{{/}}</ul>";
|
|
137
|
-
|
|
138
|
-
|
|
122
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
123
|
+
const render = domElTemplate.renderDocFrag()
|
|
124
|
+
|
|
125
|
+
const lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
126
|
+
// console.log('render nested obj ', { render, lastItemTxt }, render.firstElementChild)
|
|
139
127
|
|
|
140
|
-
//console.log("render nested array of objs ",render.firstElementChild);
|
|
141
|
-
//let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
142
128
|
// expect(lastItemTxt).to.equal('Welcome, john.');
|
|
143
|
-
return true
|
|
144
|
-
})
|
|
129
|
+
return true
|
|
130
|
+
})
|
|
131
|
+
it('DomElementTemplate renders object and loops arrays', () => {
|
|
132
|
+
let data = [
|
|
133
|
+
{ name: 'jane', hobbies: ['photography', 'driving', 'running'], favFoods: ['hummus', 'quinoa', 'burritos'] },
|
|
134
|
+
{ name: 'joe', hobbies: [] },
|
|
135
|
+
{ name: 'john', hobbies: ['vlogging', 'dancing'] }
|
|
136
|
+
]
|
|
137
|
+
const template = '<ul><li>Welcome, {{name}}. Your hobbies are {{#hobbies}}{{.}}, {{/hobbies}}and favorite foods are {{#favFoods}}<span>{{.}}, </span>{{/favFoods}} </li></ul>'
|
|
138
|
+
data = data[0]
|
|
139
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
140
|
+
const render = domElTemplate.renderDocFrag()
|
|
141
|
+
const favFoodInnerText = render.firstElementChild.querySelectorAll('span')[0].innerText
|
|
142
|
+
expect(favFoodInnerText).to.equal('hummus, ')
|
|
143
|
+
})
|
|
145
144
|
|
|
146
|
-
it('DomElementTemplate
|
|
147
|
-
let data =
|
|
145
|
+
it('DomElementTemplate renders object and loops array and loops obj params', () => {
|
|
146
|
+
let data = [
|
|
147
|
+
{ name: 'jane', hobbies: ['photography', 'driving', 'running'], details: { hair:'brown', eyes:'hazel' } },
|
|
148
|
+
{ name: 'joe', hobbies: [] },
|
|
149
|
+
{ name: 'john', hobbies: ['vlogging', 'dancing'] }
|
|
150
|
+
]
|
|
151
|
+
const template = '<ul><li>Welcome, {{name}}. Your hobbies are {{#hobbies}}{{.}}, {{/hobbies}}and your {{#details}}hair is {{hair}} and your eyes are {{eyes}} {{/details}}and favorite foods are {{#favFoods}}<span>{{.}}, </span>{{/favFoods}} </li></ul>'
|
|
152
|
+
data = data[0]
|
|
153
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
154
|
+
const render = domElTemplate.renderDocFrag()
|
|
155
|
+
const favFoodInnerText = render.firstElementChild
|
|
156
|
+
|
|
157
|
+
// console.log("render obj w looped arr ", favFoodInnerText);
|
|
158
|
+
return true
|
|
159
|
+
})
|
|
160
|
+
|
|
161
|
+
it('DomElementTemplate Template renders array of nested objects and uses dot syntax', () => {
|
|
162
|
+
const data = {
|
|
148
163
|
users: [
|
|
149
|
-
{name: 'jane', details: {age:24, hair: 'brown', education: {school:'nyu', degree:'Philosophy'}
|
|
150
|
-
{name: 'joe',
|
|
151
|
-
{name: 'john', details: {age:54, hair: 'green'
|
|
164
|
+
{ name: 'jane', details: { age:24, hair: 'brown', education: { school:'nyu', degree:'Philosophy' } } },
|
|
165
|
+
{ name: 'joe', details: { age:34, hair: 'blonde', education: { school:'nyu', degree:'Computer Science' } } },
|
|
166
|
+
{ name: 'john', details: { age:54, hair: 'green', education: { school:'nyu', degree:'Math' } } }
|
|
152
167
|
]
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
let template = "<ul><li>Welcome, {{name}}. and age is {{details.age}} and graduated from {{details.education.school}} </li></ul>";
|
|
168
|
+
}
|
|
169
|
+
const template = '<ul>{{#users}}<li>Welcome, {{name}}. and details are {{details.age}} and degree is {{details.education.degree}} </li>{{/users}}</ul>'
|
|
156
170
|
// let template = "<ul>{{#}}<li>Welcome, {{name}}. <ol>{{#hobbies}}<li>{{.}}</li><{{/hobbies}}/ol></li>{{/}}</ul>";
|
|
157
|
-
|
|
158
|
-
|
|
171
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
172
|
+
const render = domElTemplate.renderDocFrag()
|
|
159
173
|
|
|
160
|
-
//console.log("render nested
|
|
161
|
-
//let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
174
|
+
// console.log("render nested array of objs ",render.firstElementChild);
|
|
175
|
+
// let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
162
176
|
// expect(lastItemTxt).to.equal('Welcome, john.');
|
|
163
|
-
return true
|
|
164
|
-
})
|
|
165
|
-
|
|
166
|
-
it('DomElementTemplate should render index string value of an array',() =>{
|
|
167
|
-
const article = ["Usu at illum porro audire. Nam at ubique latine, vidit ocurreret pri ea, cu elitr nonumes mediocritatem nam.",
|
|
168
|
-
"Eu delenit meliore graecis sea. Sit id ubique commune, ius ne recusabo oportere similique, error putant usu ei.",
|
|
169
|
-
"Nam mutat saperet detracto eu, te ubique utamur aliquando pro. Ut verear probatus sea. Porro sonet euripidis ex est.",
|
|
170
|
-
"Mucius platonem eu per. Te utroque persecuti pro, error verterem scribentur no est.",
|
|
171
|
-
"An pro nibh salutatus, ea rebum aeterno complectitur has."];
|
|
172
|
-
|
|
173
|
-
const template = `<li>{{article.1}}</li>`;
|
|
174
|
-
const data = {article};
|
|
175
|
-
const domElTemplate = new DomElementTemplate(template, data);
|
|
176
|
-
|
|
177
|
-
const result = domElTemplate.renderToString();
|
|
177
|
+
return true
|
|
178
|
+
})
|
|
178
179
|
|
|
179
|
-
|
|
180
|
+
it('DomElementTemplate Template renders dot syntax of non looping object', () => {
|
|
181
|
+
let data = {
|
|
182
|
+
users: [
|
|
183
|
+
{ name: 'jane', details: { age:24, hair: 'brown', education: { school:'nyu', degree:'Philosophy' } } },
|
|
184
|
+
{ name: 'joe', details: { age:34, hair: 'blonde' } },
|
|
185
|
+
{ name: 'john', details: { age:54, hair: 'green' } }
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
data = data.users[0]
|
|
189
|
+
const template = '<ul><li>Welcome, {{name}}. and age is {{details.age}} and graduated from {{details.education.school}} </li></ul>'
|
|
190
|
+
// let template = "<ul>{{#}}<li>Welcome, {{name}}. <ol>{{#hobbies}}<li>{{.}}</li><{{/hobbies}}/ol></li>{{/}}</ul>";
|
|
191
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
192
|
+
const render = domElTemplate.renderDocFrag()
|
|
180
193
|
|
|
194
|
+
// console.log("render nested obj ",render.firstElementChild);
|
|
195
|
+
// let lastItemTxt = render.firstElementChild.querySelectorAll('li')[2].innerText
|
|
196
|
+
// expect(lastItemTxt).to.equal('Welcome, john.');
|
|
197
|
+
return true
|
|
181
198
|
})
|
|
182
199
|
|
|
200
|
+
it('DomElementTemplate should render index string value of an array', () => {
|
|
201
|
+
const article = ['Usu at illum porro audire. Nam at ubique latine, vidit ocurreret pri ea, cu elitr nonumes mediocritatem nam.',
|
|
202
|
+
'Eu delenit meliore graecis sea. Sit id ubique commune, ius ne recusabo oportere similique, error putant usu ei.',
|
|
203
|
+
'Nam mutat saperet detracto eu, te ubique utamur aliquando pro. Ut verear probatus sea. Porro sonet euripidis ex est.',
|
|
204
|
+
'Mucius platonem eu per. Te utroque persecuti pro, error verterem scribentur no est.',
|
|
205
|
+
'An pro nibh salutatus, ea rebum aeterno complectitur has.']
|
|
183
206
|
|
|
207
|
+
const template = '<li>{{article.1}}</li>'
|
|
208
|
+
const data = { article }
|
|
209
|
+
const domElTemplate = new DomElementTemplate(template, data)
|
|
184
210
|
|
|
185
|
-
|
|
211
|
+
const result = domElTemplate.renderToString()
|
|
212
|
+
|
|
213
|
+
expect(result).to.eq('<li>Eu delenit meliore graecis sea. Sit id ubique commune, ius ne recusabo oportere similique, error putant usu ei.</li>')
|
|
214
|
+
})
|
|
215
|
+
})
|
|
@@ -1,68 +1,70 @@
|
|
|
1
|
-
import { DomElement } from '../../spyne/views/dom-element'
|
|
2
|
-
chai.use(require('chai-dom'))
|
|
1
|
+
import { DomElement } from '../../spyne/views/dom-element'
|
|
2
|
+
chai.use(require('chai-dom'))
|
|
3
3
|
|
|
4
4
|
describe('DomEl', () => {
|
|
5
5
|
it('dom item exists', () => {
|
|
6
|
-
expect(DomElement).to.exist
|
|
7
|
-
})
|
|
6
|
+
expect(DomElement).to.exist
|
|
7
|
+
})
|
|
8
8
|
|
|
9
9
|
it('dom item is a dom element', () => {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const domItem = new DomElement({ tagName: 'h1', data: 'my dom element' })
|
|
11
|
+
const el = domItem.render()
|
|
12
12
|
// assert.isFunction(domItem.click);
|
|
13
|
-
expect(el).to.have.property('nodeName')
|
|
13
|
+
expect(el).to.have.property('nodeName')
|
|
14
14
|
// expect(domItem).dom.to.contain.text('my dom element');
|
|
15
|
-
})
|
|
15
|
+
})
|
|
16
|
+
})
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
describe('DomElRendering', () => {
|
|
19
|
+
it('DomElement Template show render data value', () => {
|
|
20
|
+
const data = { cat:'meow' }
|
|
21
|
+
const template = '<h1>The cat says {{cat}}'
|
|
22
|
+
const domEl = new DomElement({ data, template })
|
|
23
|
+
const render = domEl.render()
|
|
24
|
+
expect(render.innerText).to.equal('The cat says meow')
|
|
25
|
+
})
|
|
18
26
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
it('DomElement Template show render data value', ()=>{
|
|
23
|
-
let data = {cat:'meow'};
|
|
24
|
-
let template = "<h1>The cat says {{cat}}";
|
|
25
|
-
let domEl = new DomElement({data, template});
|
|
26
|
-
let render = domEl.render();
|
|
27
|
-
expect(render.innerText).to.equal('The cat says meow');
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('DomElement Template show loop object values', ()=>{
|
|
31
|
-
let data = {dog: {
|
|
27
|
+
it('DomElement Template show loop object values', () => {
|
|
28
|
+
const data = {
|
|
29
|
+
dog: {
|
|
32
30
|
sound: 'woof'
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
it('DomElement Template show not render null objects', ()=>{
|
|
41
|
-
let data = {cat: {
|
|
42
|
-
sound: 'woof'
|
|
43
|
-
}};
|
|
44
|
-
let template = "<article>{{#dog}}<h1>The dog says {{sound}}</h1>{{/dog}}</article>";
|
|
45
|
-
let domEl = new DomElement({data, template});
|
|
46
|
-
let render = domEl.render();
|
|
47
|
-
expect(render.innerText).to.equal('');
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
it('DomElement Template show not render null values', ()=>{
|
|
51
|
-
let data = {animals: [
|
|
52
|
-
{ name: 'dog',
|
|
53
|
-
sound:'woof'
|
|
54
|
-
},
|
|
55
|
-
{ name: 'cat',
|
|
56
|
-
sound:'meow'
|
|
57
|
-
}
|
|
58
|
-
]};
|
|
59
|
-
let template = "<article>{{#animals}}<h1>The {{name}} says {{sound}}</h1>{{/animals}}</article>";
|
|
60
|
-
let domEl = new DomElement({data, template});
|
|
61
|
-
let render = domEl.render();
|
|
62
|
-
let renderStr = render.querySelectorAll('h1')[1].innerText;
|
|
63
|
-
expect(renderStr).to.equal('The cat says meow');
|
|
64
|
-
});
|
|
65
|
-
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
const template = '<h1>The dog says {{#dog}}{{sound}}{{/dog}}'
|
|
34
|
+
const domEl = new DomElement({ data, template })
|
|
35
|
+
const render = domEl.render()
|
|
36
|
+
expect(render.innerText).to.equal('The dog says woof')
|
|
37
|
+
})
|
|
66
38
|
|
|
39
|
+
it('DomElement Template show not render null objects', () => {
|
|
40
|
+
const data = {
|
|
41
|
+
cat: {
|
|
42
|
+
sound: 'woof'
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
const template = '<article>{{#dog}}<h1>The dog says {{sound}}</h1>{{/dog}}</article>'
|
|
46
|
+
const domEl = new DomElement({ data, template })
|
|
47
|
+
const render = domEl.render()
|
|
48
|
+
expect(render.innerText).to.equal('')
|
|
49
|
+
})
|
|
67
50
|
|
|
68
|
-
|
|
51
|
+
it('DomElement Template show not render null values', () => {
|
|
52
|
+
const data = {
|
|
53
|
+
animals: [
|
|
54
|
+
{
|
|
55
|
+
name: 'dog',
|
|
56
|
+
sound:'woof'
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'cat',
|
|
60
|
+
sound:'meow'
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
const template = '<article>{{#animals}}<h1>The {{name}} says {{sound}}</h1>{{/animals}}</article>'
|
|
65
|
+
const domEl = new DomElement({ data, template })
|
|
66
|
+
const render = domEl.render()
|
|
67
|
+
const renderStr = render.querySelectorAll('h1')[1].innerText
|
|
68
|
+
expect(renderStr).to.equal('The cat says meow')
|
|
69
|
+
})
|
|
70
|
+
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*import { Enhancer } from '../mocks/enhancer.test';
|
|
1
|
+
/* import { Enhancer } from '../mocks/enhancer.test';
|
|
2
2
|
|
|
3
3
|
import * as R from 'ramda';
|
|
4
4
|
import { SpyneTrait } from '../../spyne/utils/spyne-trait';
|
|
@@ -44,4 +44,4 @@ describe('ViewStream Enhancer Loader', () => {
|
|
|
44
44
|
return true;
|
|
45
45
|
});
|
|
46
46
|
});
|
|
47
|
-
*/
|
|
47
|
+
*/
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
const Rx = require('rxjs');
|
|
3
3
|
import {SpyneTrait} from '../../spyne/utils/view-stream-enhancer';
|
|
4
4
|
*/
|
|
5
|
-
import { Enhancer } from '../mocks/enhancer.test'
|
|
5
|
+
import { Enhancer } from '../mocks/enhancer.test'
|
|
6
6
|
class MyClass {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.props = {
|
|
9
9
|
vsid: 1234234
|
|
10
|
-
}
|
|
11
|
-
this.loadEnhancer()
|
|
10
|
+
}
|
|
11
|
+
this.loadEnhancer()
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
loadEnhancer() {
|
|
15
|
-
this.enhancer = new Enhancer(this)
|
|
16
|
-
|
|
15
|
+
this.enhancer = new Enhancer(this)
|
|
16
|
+
// this.enhancer.initAutoBinder();
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
testMethods() {
|
|
@@ -24,16 +24,16 @@ class MyClass {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
describe('SpyneTrait Tests', () => {
|
|
27
|
-
|
|
27
|
+
const theClass = new MyClass()
|
|
28
28
|
|
|
29
29
|
describe('should add enhancer methods to a class instance object', () => {
|
|
30
30
|
// let methodScope = theClass.getMethodConstructor();
|
|
31
31
|
// expect(methodScope).to.equal(theClass.constructor.name);
|
|
32
|
-
return true
|
|
33
|
-
})
|
|
32
|
+
return true
|
|
33
|
+
})
|
|
34
34
|
describe('should add enhancer static methods to a class instance object', () => {
|
|
35
35
|
// let methodScope = theClass.getStaticFnConstructor();
|
|
36
36
|
// expect(methodScope).to.equal(theClass.constructor.name);
|
|
37
|
-
return true
|
|
38
|
-
})
|
|
39
|
-
})
|
|
37
|
+
return true
|
|
38
|
+
})
|
|
39
|
+
})
|
|
@@ -1,69 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
import { ViewStream } from '../../spyne/views/view-stream'
|
|
2
2
|
// import * as R from 'ramda';
|
|
3
3
|
|
|
4
4
|
describe('ViewStream Tests', () => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const eventsArrEmpty = [];
|
|
11
|
-
var eventsArrNil;
|
|
5
|
+
describe('should validate nested arrays', () => {
|
|
6
|
+
const eventsArrEmpty = []
|
|
7
|
+
let eventsArrNil
|
|
12
8
|
const eventsArrValid = [
|
|
13
9
|
['button', 'click']
|
|
14
|
-
]
|
|
10
|
+
]
|
|
15
11
|
const eventsArrValid2 = [
|
|
16
12
|
['button', 'click'],
|
|
17
13
|
['a', 'focus'],
|
|
18
14
|
['#el', 'mouseover', 'local'],
|
|
19
|
-
['.element', 'focusout', ()=>{}]
|
|
20
|
-
]
|
|
15
|
+
['.element', 'focusout', () => {}]
|
|
16
|
+
]
|
|
21
17
|
const eventsInvalid = [
|
|
22
18
|
[
|
|
23
19
|
['button', 'click']
|
|
24
20
|
]
|
|
25
|
-
]
|
|
21
|
+
]
|
|
26
22
|
|
|
27
23
|
const eventsInvalid2 = [
|
|
28
24
|
['button', ['button', 'click']]
|
|
29
25
|
|
|
30
|
-
]
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
]
|
|
33
27
|
|
|
34
28
|
it('should ignore an empty array ', () => {
|
|
35
29
|
const arrIsValid = ViewStream.isValidNestedArr(eventsArrEmpty)
|
|
36
|
-
expect(arrIsValid).to.eq(true)
|
|
37
|
-
})
|
|
38
|
-
|
|
30
|
+
expect(arrIsValid).to.eq(true)
|
|
31
|
+
})
|
|
39
32
|
|
|
40
33
|
it('should ignore an undefined array ', () => {
|
|
41
34
|
const arrIsValid = ViewStream.isValidNestedArr(eventsArrNil)
|
|
42
|
-
expect(arrIsValid).to.eq(true)
|
|
43
|
-
})
|
|
35
|
+
expect(arrIsValid).to.eq(true)
|
|
36
|
+
})
|
|
44
37
|
|
|
45
38
|
it('should validate properly nested array ', () => {
|
|
46
39
|
const arrIsValid = ViewStream.isValidNestedArr(eventsArrValid)
|
|
47
|
-
expect(arrIsValid).to.eq(true)
|
|
48
|
-
})
|
|
40
|
+
expect(arrIsValid).to.eq(true)
|
|
41
|
+
})
|
|
49
42
|
|
|
50
43
|
it('should validate properly nested array with methods ', () => {
|
|
51
44
|
const arrIsValid = ViewStream.isValidNestedArr(eventsArrValid2)
|
|
52
|
-
expect(arrIsValid).to.eq(true)
|
|
53
|
-
})
|
|
45
|
+
expect(arrIsValid).to.eq(true)
|
|
46
|
+
})
|
|
54
47
|
|
|
55
48
|
it('should invalidate overly nested array ', () => {
|
|
56
49
|
const arrIsValid = ViewStream.isValidNestedArr(eventsInvalid)
|
|
57
|
-
expect(arrIsValid).to.eq(false)
|
|
58
|
-
})
|
|
50
|
+
expect(arrIsValid).to.eq(false)
|
|
51
|
+
})
|
|
59
52
|
|
|
60
53
|
it('should invalidate nested array containing nonstrings', () => {
|
|
61
54
|
const arrIsValid = ViewStream.isValidNestedArr(eventsInvalid2)
|
|
62
|
-
expect(arrIsValid).to.eq(false)
|
|
63
|
-
})
|
|
64
|
-
|
|
65
|
-
|
|
55
|
+
expect(arrIsValid).to.eq(false)
|
|
56
|
+
})
|
|
66
57
|
})
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
});
|
|
58
|
+
})
|