it('should allow changing scope', async () => {
// given
getTemplate.returns({
render: (v, render) => {
if (v.child) {
if (v.scope) {
return html`${render(v.child, v.scope)}`;
}
return html`${render(v.child)}`;
}
return html``;
},
});
litView.value = {
scope: 'nested',
child: {
child: {},
},
};
// when
await litView.updateComplete;
// then
expect(getTemplate.firstCall.args[0].scope).to.be.null;
expect(getTemplate.secondCall.args[0].scope).to.equal('nested');
expect(getTemplate.thirdCall.args[0].scope).to.equal('nested');
});
it('creates a matcher', () => {
// given
const field = {};
const matchFunc = sinon.stub().returns(true);
// when
builder.fieldMatches(matchFunc);
// then
const matcher = builder._selector._matchers[0];
expect(matcher({ field })).to.be.true;
expect(matchFunc.firstCall.args[0]).to.be.equal(field);
});
it('should use render parameter', async () => {
// given
getTemplate.returns({
render: (object, render) => {
if (object.child) {
return html`<p class="${object.clazz}">${render(object.child)}</p>`;
}
return html`<span>${object.value}</span>`;
},
});
litView.value = {
clazz: 'l1',
child: {
clazz: 'l2',
child: {
clazz: 'l3',
child: {
value: "I'm deep",
},
},
},
};
// when
await litView.updateComplete;
// then
const span = litView.shadowRoot.querySelector('p.l1 p.l2 p.l3 span');
expect(span.textContent).to.equal("I'm deep");
});
it('creates a matcher', () => {
// given
const valueToMatch = 'the scope';
// when
builder.scopeMatches('the scope');
// then
const matcher = builder._selector._matchers[0];
expect(matcher({
scope: valueToMatch,
})).to.be.true;
});
it('creates a matcher', () => {
// given
const valueToMatch = 'test val';
// when
builder.valueMatches(v => v === 'test val');
// then
const matcher = builder._selector._matchers[0];
expect(matcher({
value: valueToMatch,
})).to.be.true;
});
it('should select template for given value', async () => {
// given
litView.value = 'a string';
// when
await litView.updateComplete;
// then
expect(getTemplate.calledWith({
value: 'a string',
scope: null,
})).to.be.true;
});
it('should select template for selected value', async () => {
// given
getTemplate.returns({
render: (v, render) => {
if (v.child) {
return html`${render(v.child)}`;
}
return html``;
},
});
litView.value = {
child: 10,
};
// when
await litView.updateComplete;
// then
expect(getTemplate.firstCall.args[0].value).to.deep.equal({ child: 10 });
expect(getTemplate.secondCall.args[0].value).to.equal(10);
});
it('should render correctly', async () => {
// given
getTemplate.returns({
render: object => html`<span>${object.inserted}</span>`,
});
// when
document.body.appendChild(manualView);
await litView.updateComplete;
// then
const span = manualView.shadowRoot.querySelector('span');
expect(span.textContent).to.equal('manually');
});
it('should render pass scope to template', async () => {
// given
getTemplate.returns({
render: (_1, _2, scope) => html`<span>${scope}</span>`,
});
litView.value = {};
litView.templateScope = 'scope test';
// when
await litView.updateComplete;
// then
const span = litView.shadowRoot.querySelector('span');
expect(span.textContent).to.equal('scope test');
});
it('should render found template', async () => {
// given
getTemplate.returns({
render: object => html`<span>${object.value}</span>`,
});
litView.value = {
'@id': 'test',
value: 'test',
};
// when
await litView.updateComplete;
// then
const span = litView.shadowRoot.querySelector('span');
expect(span.textContent).to.equal('test');
});
it('should render nothing when object is undefined', () => {
expect(litView.shadowRoot.querySelectorAll('*').length).to.equal(0);
});
it('sets templateRegistry', () => {
expect(litView.templateRegistry).to.equal('my registry');
});
it('sets ignoreMissing', () => {
expect(litView.ignoreMissing).to.be.true;
});
it('sets scope', () => {
expect(litView.templateScope).to.equal('some scope');
});