From 8d9e9d3c1793ed1547d3ce0bc58c65695bad047e Mon Sep 17 00:00:00 2001
From: errorrik <errorrik@gmail.com>
Date: Fri, 8 Dec 2023 11:02:20 +0800
Subject: [PATCH] add template component attr inherit cases

---
 ...r-inherit.spec.js => attr-inherit.spec.js} | 287 +++++++++++++++++-
 test/index-min.html                           |   2 +-
 test/index-modern.html                        |   2 +-
 test/index.html                               |   2 +-
 4 files changed, 286 insertions(+), 7 deletions(-)
 rename test/{component-attr-inherit.spec.js => attr-inherit.spec.js} (56%)

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: '<span><slot/></span>'
+        });
 
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner attr-title="{{text}}" attr-data-t="state:{{text}}">{{text}}</ui-inner></div>',
+
+            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: '<span><slot/></span>'
         });
 
         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: '<button><slot/></button>'
+        });
+
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner attr-title="{{text}}" attr-disabled attr-data-d attr-data-disabled="{{ed}}">{{text}}</ui-inner></div>',
+
+            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: '<button><slot/></button>'
         });
 
         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: '<span><slot/></span>'
         });
@@ -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: '<span><slot/></span>',
+            inheritAttrs: false
+        });
+
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner s-ref="inner" attr-title="{{text}}" attr-data-t="state:{{text}}" class="a" style="display:none" id="happy">{{text}}</ui-inner></div>',
+
+            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: '<span><slot/></span>'
@@ -280,6 +414,47 @@ describe("Component Attribute Inherit", function () {
             done();
         });
     });
+    
+    it("template component, template declaration take precedence", function (done) {
+        var Inner = san.defineTemplateComponent({
+            template: '<span title="nothing"><slot/></span>'
+        });
+
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner attr-title="{{text}}" attr-data-t="state:{{text}}">{{text}}</ui-inner></div>',
+
+            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: '<p><span><slot/></span></p>'
+        });
+
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner attr-title="{{text}}" attr-data-t="state:{{text}}" s-ref="inn">{{text}}</ui-inner></div>',
+
+            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: '<p><span s-bind="$attrs"><slot/></span></p>',
@@ -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: '<p><span s-bind="$attrs"><slot/></span></p>',
+            inheritAttrs: false
+        });
+
+        var MyComponent = san.defineComponent({
+            template: '<div><ui-inner attr-title="{{text}}" attr-data-t="state:{{text}}">{{text}}</ui-inner></div>',
+
+            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 @@
     <script src="element-event.spec.js"></script>
     <script src="form-bindx.spec.js"></script>
     <script src="component-bindx.spec.js"></script>
-    <script src="component-attr-inherit.spec.js"></script>
+    <script src="attr-inherit.spec.js"></script>
     <script src="component-compile.spec.js"></script>
     <script src="slot.spec.js"></script>
     <script src="template.spec.js"></script>
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 @@
     <script src="element-event.spec.js"></script>
     <script src="form-bindx.spec.js"></script>
     <script src="component-bindx.spec.js"></script>
-    <script src="component-attr-inherit.spec.js"></script>
+    <script src="attr-inherit.spec.js"></script>
     <script src="component-compile.spec.js"></script>
     <script src="slot.spec.js"></script>
     <script src="template.spec.js"></script>
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 @@
     <script src="element-event.spec.js"></script>
     <script src="form-bindx.spec.js"></script>
     <script src="component-bindx.spec.js"></script>
-    <script src="component-attr-inherit.spec.js"></script>
+    <script src="attr-inherit.spec.js"></script>
     <script src="component-compile.spec.js"></script>
     <script src="slot.spec.js"></script>
     <script src="template.spec.js"></script>