Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
$it('changes in bound VM properties are correctly reflected in the read-only-texts', function ({ host, ctx }) {
((host.querySelector('button#staticTextChanger') as unknown) as HTMLButtonElement).click();
ctx.scheduler.getRenderTaskQueue().flush();
assert.html.textContent('read-only-text#text0', 'text0', 'incorrect text for read-only-text#text0', host);
assert.html.textContent('read-only-text#text1', 'text1', 'incorrect text for read-only-text#text1', host);
assert.html.textContent('read-only-text#text2', 'newText2', 'incorrect text for read-only-text#text2', host);
assert.html.textContent('read-only-text#text3', 'newText3', 'incorrect text for read-only-text#text3', host);
});
$it('binds interpolated string to read-only-texts', function ({ host, ctx }) {
const el = host.querySelector('#interpolated-text');
const vm = getViewModel(host);
assert.html.textContent(el, `interpolated: ${vm.text4}${vm.text5}`, `incorrect text`);
const text1 = 'hello',
text2 = 'world';
vm.text4 = text1;
ctx.scheduler.getRenderTaskQueue().flush();
assert.html.textContent(el, `interpolated: ${text1}${vm.text5}`, `incorrect text - change1`, host);
vm.text5 = text2;
ctx.scheduler.getRenderTaskQueue().flush();
assert.html.textContent(el, `interpolated: ${text1}${text2}`, `incorrect text - change2`, host);
});
assertFn: (ctx, host, component) => {
assert.html.textContent(host, 'i-0');
const dirtyChecker = ctx.container.get(IDirtyChecker) as any;
assert.strictEqual(dirtyChecker['tracked'].length, 0);
component.itemNames.splice(0, 1, '00');
assert.html.textContent(host, 'i-0');
ctx.container.get(IScheduler).getRenderTaskQueue().flush();
assert.html.textContent(host, '00');
}
}
backgroundColor: 'rgb(0, 0, 255)',
borderTopWidth: '1px',
borderBottomWidth: '1px',
borderRightWidth: '1px',
borderLeftWidth: '1px',
borderTopStyle: 'solid',
borderBottomStyle: 'solid',
borderRightStyle: 'solid',
borderLeftStyle: 'solid',
borderTopColor: 'rgb(0, 255, 0)',
borderBottomColor: 'rgb(0, 255, 0)',
borderRightColor: 'rgb(0, 255, 0)',
borderLeftColor: 'rgb(0, 255, 0)',
},
`style ${id} - post change`);
assert.html.notComputedStyle(
para,
{ fontWeight: '700' },
`font-weight ${id} - post change`);
}
});
.container
.get(IObserverLocator)
.getObserver(
LifecycleFlags.none,
component,
'total'
) as GetterObserver;
assert.strictEqual(observer['propertyDeps']?.length, 17);
assert.strictEqual(observer['collectionDeps']?.length, 1);
observer['propertyDeps'].forEach((observerDep: SetterObserver) => {
assert.instanceOf(observerDep, SetterObserver);
});
assert.html.textContent(host, '4');
component.items[1].isDone = true;
assert.html.textContent(host, '4');
ctx.container.get(IScheduler).getRenderTaskQueue().flush();
assert.html.textContent(host, '5');
}
},
async function ({ host, ctx }) {
const container1 = host.querySelector('cards #cards1');
const container2 = host.querySelector('cards #cards2');
const cards1 = toArray(container1.querySelectorAll('div'));
const cards2 = toArray(container2.querySelectorAll('div'));
assert.html.computedStyle(container1, { display: 'flex' }, 'incorrect container1 display');
assert.html.computedStyle(container2, { display: 'flex' }, 'incorrect container2 display');
assert.equal(cards1.every((card) => card.querySelector('footer').classList.contains('foo-bar')), true);
assert.html.computedStyle(cards1[0], { backgroundColor: selectedHeaderColor }, 'incorrect selected background1 - container1');
assert.html.computedStyle(cards1[0].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color1 - container1');
assert.html.computedStyle(cards2[0], { backgroundColor: selectedHeaderColor }, 'incorrect selected background1 - container2');
assert.html.computedStyle(cards2[0].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color1 - container2');
cards1[1].click();
await ctx.scheduler.yieldAll();
assert.html.computedStyle(cards1[0], { backgroundColor: 'rgba(0, 0, 0, 0)' }, 'incorrect background1 - container1');
assert.html.computedStyle(cards1[0].querySelector('span'), { color: 'rgb(0, 0, 0)' }, 'incorrect color1 - container1');
assert.html.computedStyle(cards1[1], { backgroundColor: selectedHeaderColor }, 'incorrect selected background2 - container1');
assert.html.computedStyle(cards1[1].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color2 - container1');
assert.html.computedStyle(cards2[0], { backgroundColor: 'rgba(0, 0, 0, 0)' }, 'incorrect background1 - container2');
assert.html.computedStyle(cards2[0].querySelector('span'), { color: 'rgb(0, 0, 0)' }, 'incorrect color1 - container2');
assert.html.computedStyle(cards2[1], { backgroundColor: selectedHeaderColor }, 'incorrect selected background2 - container2');
assert.html.computedStyle(cards2[1].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color2 - container2');
},
{ useCSSModule }));
assertFn: (ctx, host, component) => {
assert.html.textContent(host, 'i-0');
const dirtyChecker = ctx.container.get(IDirtyChecker) as any;
assert.strictEqual(dirtyChecker['tracked'].length, 0);
component.itemNames.splice(0, 1, '00');
assert.html.textContent(host, 'i-0');
ctx.container.get(IScheduler).getRenderTaskQueue().flush();
assert.html.textContent(host, '00');
}
}
component,
'total'
) as GetterObserver;
assert.strictEqual(observer['propertyDeps']?.length, 17);
assert.strictEqual(observer['collectionDeps']?.length, 1);
observer['propertyDeps'].forEach((observerDep: SetterObserver) => {
assert.instanceOf(observerDep, SetterObserver);
});
assert.html.textContent(host, '4');
component.items[1].isDone = true;
assert.html.textContent(host, '4');
ctx.container.get(IScheduler).getRenderTaskQueue().flush();
assert.html.textContent(host, '5');
}
},
const linex = demo.querySelector('#linex');
const { line, ec } = vm;
const getEcYSqNum = () => Math.pow(ec.x, 3) - ec.a * ec.x + ec.b;
const getEcYsq = () => getEcYSqNum().toString();
const getEcY = () => Math.sqrt(getEcYSqNum()).toString();
const getLinex = () => ((line.y - line.intercept) / line.slope).toString();
assert.html.textContent(ecYSq, getEcYsq(), 'ecysq1');
assert.html.textContent(ecY, getEcY(), 'ecy1');
assert.html.textContent(linex, getLinex(), 'linex1');
line.slope = 4;
ec.a = 10;
ctx.scheduler.getRenderTaskQueue().flush();
assert.html.textContent(ecYSq, getEcYsq(), 'ecysq2');
assert.html.textContent(ecY, getEcY(), 'ecy2');
assert.html.textContent(linex, getLinex(), 'linex2');
});