Skip to content

Commit

Permalink
test: add s-is test cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@cxtom
cxtom committed Jul 6, 2021
1 parent 989667f commit 45c6830
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 20 deletions.
15 changes: 13 additions & 2 deletions src/view/is-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ var NodeType = require('./node-type');
var createNode = require('./create-node');
var createReverseNode = require('./create-reverse-node');
var nodeOwnSimpleDispose = require('./node-own-simple-dispose');
var TemplateNode = require('./template-node');

/**
* is 指令节点类
Expand Down Expand Up @@ -63,8 +64,13 @@ IsNode.prototype.dispose = nodeOwnSimpleDispose;
*/
IsNode.prototype.attach = function (parentEl, beforeEl) {
this.cmpt = evalExpr(this.aNode.directives.is.value, this.scope) || this.tagName;
var childANode = this.aNode.isRinsed;

if (this.cmpt === 'template' || this.cmpt === 'fragment') {
childANode.Clazz = TemplateNode;
}

var child = createNode(this.aNode.isRinsed, this, this.scope, this.owner, this.cmpt);
var child = createNode(childANode, this, this.scope, this.owner, this.cmpt);
this.children[0] = child;
child.attach(parentEl, beforeEl);
};
Expand All @@ -84,7 +90,12 @@ IsNode.prototype._update = function (changes) {
}
else {
this.cmpt = cmpt;
childANode.Clazz = undefined;
if (this.cmpt === 'template' || this.cmpt === 'fragment') {
childANode.Clazz = TemplateNode;
}
else {
childANode.Clazz = undefined;
}
var newChild = createNode(childANode, this, this.scope, this.owner, this.cmpt);
var el = child.el;
newChild.attach(el.parentNode, el);
Expand Down
76 changes: 58 additions & 18 deletions test/component.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,7 @@ describe("Component", function () {
it("components use s-is", function () {
var Label = san.defineComponent({
template: '<span title="{{text}}">{{text}}</span>',
initData() {
initData: function () {
return {
text: 'erik'
}
Expand All @@ -770,7 +770,7 @@ describe("Component", function () {
components: {
'x-label': Label,
},
initData() {
initData: function () {
return {
cmpt: 'x-label'
}
Expand All @@ -795,7 +795,7 @@ describe("Component", function () {
it("s-is value update", function (done) {
var Label = san.defineComponent({
template: '<span title="{{text}}" >{{text}}</span>',
initData() {
initData: function () {
return {
text: 'erik'
}
Expand All @@ -804,7 +804,7 @@ describe("Component", function () {

var H2 = san.defineComponent({
template: '<h2>{{text}}.baidu</h2>',
initData() {
initData: function () {
return {
text: 'erik'
}
Expand All @@ -816,7 +816,7 @@ describe("Component", function () {
'x-label': Label,
'x-h2': H2
},
initData() {
initData: function () {
return {
cmpt: 'x-label'
}
Expand Down Expand Up @@ -846,10 +846,9 @@ describe("Component", function () {
});

it("s-is html buildin tag", function (done) {

var Label = san.defineComponent({
template: '<span title="{{text}}" >{{text}}</span>',
initData() {
initData: function () {
return {
text: 'erik'
}
Expand All @@ -860,9 +859,9 @@ describe("Component", function () {
components: {
'x-label': Label
},
initData() {
initData: function () {
return {
cmpt: 'div'
cmpt: 'h1'
}
}
});
Expand All @@ -875,23 +874,20 @@ describe("Component", function () {
document.body.appendChild(wrap);
myComponent.attach(wrap);

var comp = wrap.querySelector('#comp');
expect(comp.tagName.toLowerCase()).toBe('div');
var comp = wrap.getElementsByTagName('div')[0];
expect(comp.innerHTML).toBe('<h1 id="comp"></h1>');

myComponent.data.set('cmpt', 'article');
san.nextTick(function () {
var article = wrap.querySelector('#comp');
expect(article.tagName.toLowerCase()).toBe('article');
expect(comp.innerHTML).toBe('<article id="comp"></article>');

myComponent.data.set('cmpt', '');
san.nextTick(function () {
var span = wrap.querySelector('#comp');
expect(span.tagName.toLowerCase()).toBe('span');
expect(comp.innerHTML).toBe('<span id="comp"></span>');

myComponent.data.set('cmpt', 'x-label');
san.nextTick(function () {
var label = wrap.querySelector('#comp');
expect(label.innerHTML).toBe('erik');
expect(comp.innerHTML).toBe('<span title="erik" id="comp">erik</span>');

myComponent.dispose();
document.body.removeChild(wrap);
Expand Down Expand Up @@ -5527,7 +5523,7 @@ describe("Component", function () {
});

var Parent = san.defineComponent({
template: '<test s-is="cmpt"></test>',
template: '<test s-is="cmpt">content</test>',
components: {
'x-child-a': ChildA,
'x-child-b': ChildB
Expand Down Expand Up @@ -5561,6 +5557,50 @@ describe("Component", function () {
expect(children.length).toBe(1);
expect(children[0].innerHTML).toBe('varsha');

myComponent.data.set('cmpt', 'h6');
myComponent.nextTick(function () {
var children = myComponent.el.getElementsByTagName('H6');
expect(children.length).toBe(1);
expect(children[0].innerHTML).toBe('content');

myComponent.dispose();
document.body.removeChild(wrap);
done();
});
});
});

it("dynamic s-is on fragment", function (done) {
var Child = san.defineComponent({
template: '<h2><slot>default</slot></h2>'
});

var MyComponent = san.defineComponent({
template: '<div><x-child s-is="cmpt">cxtom</x-child></div>',
components: {
'x-child': Child
}
});

var myComponent = new MyComponent({
data: {
cmpt: ''
}
});

var wrap = document.createElement('div');
document.body.appendChild(wrap);
myComponent.attach(wrap);

var children = myComponent.el.getElementsByTagName('H2');
expect(children.length).toBe(1);
expect(children[0].innerHTML).toContain('cxtom');

myComponent.data.set('cmpt', 'fragment');
myComponent.nextTick(function () {
expect(myComponent.el.innerHTML).toContain('cxtom');
expect(myComponent.el.innerHTML).not.toContain('fragment');

myComponent.dispose();
document.body.removeChild(wrap);
done();
Expand Down

0 comments on commit 45c6830

Please sign in to comment.