Skip to content

Commit f8f6015

Browse files
author
Denys Rul
committed
MAGETWO-33932: Add ability to initialize modules by selector
- Create tests
1 parent 4e2a4cb commit f8f6015

File tree

12 files changed

+331
-2
lines changed

12 files changed

+331
-2
lines changed

‎dev/tests/js/spec/assets/apply/components/fn.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
define([], function () {
2+
'use strict';
3+
4+
function fn() {
5+
fn.testCallback.apply(fn, arguments);
6+
}
7+
8+
fn.testCallback = function () {};
9+
10+
return fn;
11+
});

‎dev/tests/js/spec/assets/apply/config.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"base": {
3+
"nodeId": "mage-init-node",
4+
"dataAttr": "data-mage-init",
5+
"containerId": "test-suite-container"
6+
},
7+
"fn": {
8+
"nodeData": {
9+
"tests/assets/apply/components/fn": {
10+
"baz": "foo"
11+
}
12+
},
13+
"timeout": 20
14+
}
15+
}

‎dev/tests/js/spec/assets/apply/index.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
define([
2+
'tests/tools',
3+
'tests/assets/apply/components/fn',
4+
'text!./config.json',
5+
'text!./templates/node.html'
6+
], function (tools, fnComponent, config, nodeTmpl) {
7+
'use strict';
8+
9+
var preset;
10+
11+
preset = tools.init(config, {
12+
'fn': nodeTmpl
13+
});
14+
15+
preset.fn.component = fnComponent;
16+
17+
return preset;
18+
});

‎dev/tests/js/spec/assets/apply/templates/node.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div id="<%= containerId %>">
2+
<div id="<%= nodeId %>"
3+
<%= dataAttr %>='<%= JSON.stringify(nodeData) %>'></div>
4+
</div>

‎dev/tests/js/spec/assets/script/config.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"base": {
3+
"containerId": "test-suite-container",
4+
"dataAttr": "data-mage-init"
5+
},
6+
"virtual": {
7+
"scriptData": {
8+
"*": {
9+
"tests/assets/script/component": {
10+
"config": {
11+
"foo": "bar"
12+
}
13+
}
14+
}
15+
},
16+
"scriptId": "virtual-selector"
17+
},
18+
"bySelector": {
19+
"nodeData": {
20+
"tests/assets/script/component": {
21+
"data": {
22+
"foo": {
23+
"baz": "foo"
24+
}
25+
}
26+
}
27+
},
28+
"scriptData": {
29+
"#node-by-selector": {
30+
"tests/assets/script/component": {
31+
"data": {
32+
"foo": {
33+
"bar": "baz"
34+
}
35+
}
36+
}
37+
}
38+
},
39+
"merged": {
40+
"tests/assets/script/component": {
41+
"data": {
42+
"foo": {
43+
"baz": "foo",
44+
"bar": "baz"
45+
}
46+
}
47+
}
48+
},
49+
"nodeId": "node-by-selector"
50+
}
51+
}

‎dev/tests/js/spec/assets/script/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
define([
2+
'tests/tools',
3+
'text!./config.json',
4+
'text!./templates/selector.html',
5+
'text!./templates/virtual.html'
6+
], function (tools, config, selectorTmpl, virtualTmpl) {
7+
'use strict';
8+
9+
return tools.init(config, {
10+
bySelector: selectorTmpl,
11+
virtual: virtualTmpl
12+
});
13+
});

‎dev/tests/js/spec/assets/script/templates/selector.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div id="<%= containerId %>">
2+
<div
3+
id="<%= nodeId %>"
4+
<%= dataAttr %>='<%= JSON.stringify(nodeData) %>'></div>
5+
6+
<script type="text/x-magento-init">
7+
<%= JSON.stringify(scriptData) %>
8+
</script>
9+
</div>

‎dev/tests/js/spec/assets/script/templates/virtual.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div id="<%= containerId %>">
2+
<script id="<%= scriptId %>" type="text/x-magento-init">
3+
<%= JSON.stringify(scriptData) %>
4+
</script>
5+
</div>

‎dev/tests/js/spec/integration/lib/mage/apply.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
define([
2+
'underscore',
3+
'tests/tools',
4+
'tests/assets/apply/index',
5+
'mage/apply/main'
6+
], function (_, tools, config, mage) {
7+
'use strict';
8+
9+
describe('mage/apply/main', function () {
10+
var body = document.body;
11+
12+
afterEach(function () {
13+
tools.removeContainer(config.base.containerId);
14+
});
15+
16+
it('exports object', function () {
17+
expect(_.isFunction(mage) || _.isObject(mage)).toBe(true);
18+
});
19+
20+
it('removes data-mage-init attribute affter processing', function () {
21+
var preset = config.fn,
22+
elem;
23+
24+
/**
25+
* Checks if element has data attribute.
26+
*
27+
* @returns {Boolean}
28+
*/
29+
function hasAttr() {
30+
return elem.hasAttribute(preset.dataAttr);
31+
}
32+
33+
body.insertAdjacentHTML('beforeend', preset.tmpl);
34+
35+
elem = document.getElementById(preset.nodeId);
36+
37+
expect(hasAttr()).toBe(true);
38+
39+
mage.apply();
40+
41+
expect(hasAttr()).toBe(false);
42+
});
43+
44+
it('calls function returned from module', function (done) {
45+
var preset = config.fn,
46+
node;
47+
48+
spyOn(preset.component, 'testCallback').and.callThrough();
49+
50+
body.insertAdjacentHTML('beforeend', preset.tmpl);
51+
52+
node = document.getElementById(preset.nodeId);
53+
54+
mage.apply();
55+
56+
setTimeout(function () {
57+
expect(preset.component.testCallback)
58+
.toHaveBeenCalledWith(jasmine.any(Object), node);
59+
60+
done();
61+
}, preset.timeout);
62+
});
63+
});
64+
});

‎dev/tests/js/spec/integration/lib/mage/scripts.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
define([
2+
'tests/tools',
3+
'tests/assets/script/index',
4+
'mage/apply/scripts'
5+
], function (tools, config, processScripts) {
6+
'use strict';
7+
8+
describe('mage/apply/scripts', function () {
9+
var body = document.body;
10+
11+
afterEach(function () {
12+
tools.removeContainer(config.base.containerId);
13+
});
14+
15+
it('exports function', function () {
16+
expect(typeof processScripts).toBe('function');
17+
});
18+
19+
it('removes script node after processing it', function () {
20+
var preset = config.virtual;
21+
22+
/**
23+
* Checks if script node exists.
24+
*
25+
* @returns {Boolean}
26+
*/
27+
function hasNode() {
28+
return !!document.getElementById(preset.scriptId);
29+
}
30+
31+
body.insertAdjacentHTML('beforeend', preset.tmpl);
32+
33+
expect(hasNode()).toBe(true);
34+
35+
processScripts();
36+
37+
expect(hasNode()).toBe(false);
38+
});
39+
40+
it('parses custom script nodes without element selector', function () {
41+
var virtuals,
42+
preset = config.virtual;
43+
44+
body.insertAdjacentHTML('beforeend', preset.tmpl);
45+
46+
virtuals = processScripts();
47+
48+
expect(virtuals).toBeDefined();
49+
expect(virtuals.length).toBeGreaterThan(0);
50+
});
51+
52+
it('extends data-mage-init attribute of a found node', function () {
53+
var preset = config.bySelector,
54+
elem,
55+
result;
56+
57+
body.insertAdjacentHTML('beforeend', preset.tmpl);
58+
59+
processScripts();
60+
61+
elem = document.getElementById(preset.nodeId);
62+
result = elem.getAttribute(preset.dataAttr);
63+
64+
expect(result).toEqual(JSON.stringify(preset.merged));
65+
});
66+
});
67+
});

0 commit comments

Comments
 (0)