Skip to content

Commit

Permalink
add template component attr inherit cases
Browse files Browse the repository at this point in the history
  • Loading branch information
@errorrik
errorrik committed Dec 8, 2023
1 parent 525b893 commit 8d9e9d3
Show file tree
Hide file tree
Showing 4 changed files with 286 additions and 7 deletions.
287 changes: 283 additions & 4 deletions test/component-attr-inherit.spec.js → test/attr-inherit.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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>'
});
Expand Down Expand Up @@ -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>'
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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>',
Expand Down Expand Up @@ -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();
});
});
});
2 changes: 1 addition & 1 deletion test/index-min.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/index-modern.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 8d9e9d3

Please sign in to comment.