diff --git a/test/component-attr-inherit.spec.js b/test/attr-inherit.spec.js
similarity index 56%
rename from test/component-attr-inherit.spec.js
rename to test/attr-inherit.spec.js
index f2899ed4..98629aaf 100644
--- a/test/component-attr-inherit.spec.js
+++ b/test/attr-inherit.spec.js
@@ -1,9 +1,49 @@
-describe("Component Attribute Inherit", function () {
+describe("Attribute Inherit", function () {
- it("1 level", function (done) {
+ it("component 1 level", function (done) {
var Inner = san.defineComponent({
template: ''
+ });
+ var MyComponent = san.defineComponent({
+ template: '
{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha'
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var span = wrap.getElementsByTagName('span')[0];
+ expect(span.innerHTML).toContain('Hahaha');
+ expect(span.getAttribute('title')).toBe('Hahaha');
+ expect(span.getAttribute('data-t')).toBe('state:Hahaha');
+
+ myComponent.data.set('text', 'Wuwuwu');
+
+ myComponent.nextTick(function () {
+ expect(span.innerHTML).toContain('Wuwuwu');
+ expect(span.getAttribute('title')).toBe('Wuwuwu');
+ expect(span.getAttribute('data-t')).toBe('state:Wuwuwu');
+
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
+
+ it("template component 1 level", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: ''
});
var MyComponent = san.defineComponent({
@@ -42,10 +82,51 @@ describe("Component Attribute Inherit", function () {
});
});
- it("bool value and bool attr", function (done) {
+ it("component bool value and bool attr", function (done) {
var Inner = san.defineComponent({
template: ''
+ });
+
+ var MyComponent = san.defineComponent({
+ template: '{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha',
+ ed: true
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var btn = wrap.getElementsByTagName('button')[0];
+ expect(btn.getAttribute('title')).toBe('Hahaha');
+ expect(btn.getAttribute('data-d')).toBe('');
+ expect(btn.disabled).toBeTruthy();
+ expect(btn.getAttribute('data-disabled')).toBe('true');
+
+ myComponent.data.set('ed', 'false');
+
+ myComponent.nextTick(function () {
+ expect(btn.disabled).toBeTruthy();
+ expect(btn.getAttribute('data-disabled')).toBe('false');
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
+
+ it("template component bool value and bool attr", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: ''
});
var MyComponent = san.defineComponent({
@@ -85,7 +166,7 @@ describe("Component Attribute Inherit", function () {
});
});
- it("multi level", function (done) {
+ it("component multi level", function (done) {
var DeepInner = san.defineComponent({
template: ''
});
@@ -191,6 +272,59 @@ describe("Component Attribute Inherit", function () {
});
});
+ it("template component inheritAttrs option to disable attr inherit, include style/class/id", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: '',
+ inheritAttrs: false
+ });
+
+ var MyComponent = san.defineComponent({
+ template: '{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha'
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var innerComponent = myComponent.ref('inner');
+ expect(innerComponent.data.get('$attrs').title).toContain('Hahaha');
+ expect(innerComponent.data.get('$attrs')['data-t']).toContain('state:Hahaha');
+
+ var span = wrap.getElementsByTagName('span')[0];
+ expect(span.innerHTML).toContain('Hahaha');
+ expect(span.hasAttribute('title')).toBeFalsy();
+ expect(span.hasAttribute('data-t')).toBeFalsy();
+ expect(span.className).not.toContain('a');
+ expect(span.id).not.toContain('happy');
+ expect(span.style.display).not.toContain('none');
+
+
+ myComponent.data.set('text', 'Wuwuwu');
+
+ myComponent.nextTick(function () {
+ expect(span.innerHTML).toContain('Wuwuwu');
+ expect(span.hasAttribute('title')).toBeFalsy();
+ expect(span.hasAttribute('data-t')).toBeFalsy();
+ expect(span.className).not.toContain('a');
+ expect(span.id).not.toContain('happy');
+ expect(span.style.display).not.toContain('none');
+
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
+
it("inheritAttrs static prop to disable attr inherit, include style/class/id", function (done) {
var Inner = san.defineComponent({
template: ''
@@ -280,6 +414,47 @@ describe("Component Attribute Inherit", function () {
done();
});
});
+
+ it("template component, template declaration take precedence", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: ''
+ });
+
+ var MyComponent = san.defineComponent({
+ template: '{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha'
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var span = wrap.getElementsByTagName('span')[0];
+ expect(span.innerHTML).toContain('Hahaha');
+ expect(span.getAttribute('title')).toBe('nothing');
+ expect(span.getAttribute('data-t')).toBe('state:Hahaha');
+
+ myComponent.data.set('text', 'Wuwuwu');
+
+ myComponent.nextTick(function () {
+ expect(span.innerHTML).toContain('Wuwuwu');
+ expect(span.getAttribute('title')).toBe('nothing');
+ expect(span.getAttribute('data-t')).toBe('state:Wuwuwu');
+
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
it("inner component has $attrs data, not has attrXxx data", function (done) {
var Inner = san.defineComponent({
@@ -340,6 +515,65 @@ describe("Component Attribute Inherit", function () {
});
});
+ it("inner template component has $attrs data, not has attrXxx data", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: '
'
+ });
+
+ var MyComponent = san.defineComponent({
+ template: '{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha'
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var innComponent = myComponent.ref('inn');
+ var innAttrs = innComponent.data.get('$attrs');
+ expect(innAttrs.title).toBe('Hahaha');
+ expect(innAttrs['data-t']).toBe('state:Hahaha');
+ expect(innComponent.data.get('attrTitle')).toBeUndefined();
+
+
+ var p = wrap.getElementsByTagName('p')[0];
+ expect(p.getAttribute('title')).toBe('Hahaha');
+ expect(p.getAttribute('data-t')).toBe('state:Hahaha');
+
+ var span = wrap.getElementsByTagName('span')[0];
+ expect(span.innerHTML).toContain('Hahaha');
+ expect(span.hasAttribute('title')).toBeFalsy();
+ expect(span.hasAttribute('data-t')).toBeFalsy();
+
+ myComponent.data.set('text', 'Wuwuwu');
+
+ myComponent.nextTick(function () {
+ expect(span.innerHTML).toContain('Wuwuwu');
+ expect(p.getAttribute('title')).toBe('Wuwuwu');
+ expect(p.getAttribute('data-t')).toBe('state:Wuwuwu');
+
+
+ var innAttrs = innComponent.data.get('$attrs');
+ expect(innAttrs.title).toBe('Wuwuwu');
+ expect(innAttrs['data-t']).toBe('state:Wuwuwu');
+
+ expect(innComponent.data.get('attrTitle')).toBeUndefined();
+
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
+
it("spread inherit attrs to other element", function (done) {
var Inner = san.defineComponent({
template: '
',
@@ -386,4 +620,49 @@ describe("Component Attribute Inherit", function () {
});
});
+ it("template component, spread inherit attrs to other element", function (done) {
+ var Inner = san.defineTemplateComponent({
+ template: '
',
+ inheritAttrs: false
+ });
+
+ var MyComponent = san.defineComponent({
+ template: '{{text}}
',
+
+ components: {
+ 'ui-inner': Inner
+ }
+ });
+
+ var myComponent = new MyComponent({
+ data: {
+ text: 'Hahaha'
+ }
+ });
+
+ var wrap = document.createElement('div');
+ document.body.appendChild(wrap);
+ myComponent.attach(wrap);
+
+ var span = wrap.getElementsByTagName('span')[0];
+ expect(span.innerHTML).toContain('Hahaha');
+ expect(span.getAttribute('title')).toBe('Hahaha');
+ expect(span.getAttribute('data-t')).toBe('state:Hahaha');
+
+ var p = wrap.getElementsByTagName('p')[0];
+ expect(p.hasAttribute('title')).toBeFalsy();
+ expect(p.hasAttribute('data-t')).toBeFalsy();
+
+ myComponent.data.set('text', 'Wuwuwu');
+
+ myComponent.nextTick(function () {
+ expect(span.innerHTML).toContain('Wuwuwu');
+ expect(span.getAttribute('title')).toBe('Wuwuwu');
+ expect(span.getAttribute('data-t')).toBe('state:Wuwuwu');
+
+ myComponent.dispose();
+ document.body.removeChild(wrap);
+ done();
+ });
+ });
});
diff --git a/test/index-min.html b/test/index-min.html
index e9b1bab3..3e79738e 100755
--- a/test/index-min.html
+++ b/test/index-min.html
@@ -33,7 +33,7 @@
-
+
diff --git a/test/index-modern.html b/test/index-modern.html
index 64bb6797..7b103c0b 100755
--- a/test/index-modern.html
+++ b/test/index-modern.html
@@ -33,7 +33,7 @@
-
+
diff --git a/test/index.html b/test/index.html
index e178e5da..2bad6df6 100755
--- a/test/index.html
+++ b/test/index.html
@@ -96,7 +96,7 @@
-
+