Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
$it(`uses a tri-state-boolean`, function ({ host, ctx }) {
const app = getViewModel(host);
const tsb = host.querySelector(`tri-state-boolean`);
const labels = toArray(tsb.querySelectorAll('label'));
// assert radio buttons and selection
assert.html.textContent(labels[0], app.noDisplayValue, `incorrect label for noValue`);
assert.html.textContent(labels[1], app.trueValue, `incorrect label for true`);
assert.html.textContent(labels[2], app.falseValue, `incorrect label for false`);
assert.equal(labels[0].querySelector('input').checked, false, `should not have been checked for noValue`);
assert.equal(labels[1].querySelector('input').checked, false, `should not have been checked for true`);
assert.equal(labels[2].querySelector('input').checked, false, `should not have been checked for false`);
// assert if the choice is changed in VM, it is propagated to view
app.likesCake = true;
ctx.scheduler.getRenderTaskQueue().flush();
assert.equal(labels[1].querySelector('input').checked, true, `should have been checked for true`);
// assert that when choice is changed from view, it is propagaetd to VM
labels[2].click();
ctx.scheduler.getRenderTaskQueue().flush();
assert.equal(labels[2].querySelector('input').checked, true, `should have been checked for false`);
assert.equal(app.likesCake, false, 'expected change to porapagate to vm');
});
it('does not invoke change handler when starts with two-way usage', async function () {
const template = `<div></div>`;
const options = setup(
template,
class {
public prop: string = 'prop';
},
[Foo1]
);
const fooEl = options.appHost.querySelector('div') as INode;
const foo1Vm = CustomAttribute.for(fooEl, 'foo1').viewModel as Foo1;
assert.strictEqual(foo1Vm.propChangedCallCount, 0, `#1 Foo1 count`);
assert.strictEqual(foo1Vm.propertyChangedCallCount, 0, `#2 Foo1 count`);
assert.strictEqual(foo1Vm.prop, `prop`);
const rootVm = options.au.root.viewModel;
// changing source value should trigger the change handler
xit('should unbind if it is bound', function () {
const { sut } = createFixture();
const scope: any = {};
sut['$scope'] = scope;
sut.$state = State.isBound;
sut['targetObserver'] = {} as any;
const unobserveSpy = createSpy(sut, 'unobserve');
const unbindSpy = dummySourceExpression.unbind = createSpy();
(dummySourceExpression as any).$kind |= ExpressionKind.HasUnbind;
sut.$unbind(LF.fromUnbind);
assert.strictEqual(sut['$scope'], undefined, `sut['$scope']`);
assert.strictEqual(sut['$state'] & State.isBound, 0, `sut['$state'] & State.isBound`);
// expect(unobserveSpy, `unobserveSpy`).to.have.been.calledWith(true);
// expect(unbindSpy, `unbindSpy`).to.have.been.calledWith(LF.fromUnbind, scope, sut);
});
});
$it('uses a user preference control gets dirty checked for non-configurable property', async function ({ host, ctx: { scheduler, lifecycle, container } }) {
const { user } = getViewModel(host);
const userPref = host.querySelector('user-preference');
const indeterminate = userPref.querySelector('#indeterminate');
assert.html.textContent(indeterminate, 'test', 'incorrect text indeterminate');
// assert that it is being dirty checked
const dirtyChecker = container.get(IDirtyChecker);
const dirtyCheckProperty = (dirtyChecker['tracked'] as DirtyCheckProperty[]).find(prop => Object.is(user.arr, prop.obj) && prop.propertyKey === 'indeterminate');
assert.notEqual(dirtyCheckProperty, undefined);
const isDirtySpy = createSpy(dirtyCheckProperty, 'isDirty', true);
// asser disable
DirtyCheckSettings.disabled = true;
isDirtySpy.reset();
await scheduler.yieldAll();
assert.equal(isDirtySpy.calls.length, 0);
DirtyCheckSettings.disabled = false;
// assert rate
await scheduler.yieldAll();
const prevCallCount = isDirtySpy.calls.length;
isDirtySpy.reset();
it(`verify if/else behavior - strategySpec ${strategySpec.t}, duplicateOperationSpec ${duplicateOperationSpec.t}, bindSpec ${bindSpec.t}, mutationSpec ${mutationSpec.t}, flagsSpec ${flagsSpec.t}, `, function () {
const { strategy } = strategySpec;
const { bindTwice, attachTwice, detachTwice, unbindTwice, newScopeForDuplicateBind, newValueForDuplicateBind } = duplicateOperationSpec;
const { ifPropName, elsePropName, ifText, elseText, value1, value2 } = bindSpec;
const { newValue1, newValue2 } = mutationSpec;
const { bindFlags1, attachFlags1, detachFlags1, unbindFlags1, bindFlags2, attachFlags2, detachFlags2, unbindFlags2 } = flagsSpec;
// common stuff
const baseFlags: LifecycleFlags = strategy as unknown as LifecycleFlags;
const proxies = (strategy & BindingStrategy.proxies) > 0;
const container = AuDOMConfiguration.createContainer();
const dom = container.get(IDOM);
const observerLocator = container.get(IObserverLocator);
const lifecycle = container.get(ILifecycle);
const location = AuNode.createRenderLocation();
const location2 = AuNode.createRenderLocation();
const host = AuNode.createHost().appendChild(location.$start).appendChild(location).appendChild(location2.$start).appendChild(location2);
const ifTemplate: ITemplate = {
renderContext: null as any,
dom: null as any,
definition: null as any,
render(controller: IController) {
const text = AuNode.createText();
const wrapper = AuNode.createTemplate().appendChild(text);
it(`verify repeat behavior - strategySpec ${strategySpec.t}, duplicateOperationSpec ${duplicateOperationSpec.t}, bindSpec ${bindSpec.t}, flagsSpec ${flagsSpec.t}, `, function () {
const { strategy } = strategySpec;
const { bindTwice, attachTwice, detachTwice, unbindTwice, newScopeForDuplicateBind } = duplicateOperationSpec;
const { items: $items, flush, mutations } = bindSpec;
const { bindFlags1, attachFlags1, detachFlags1, unbindFlags1, bindFlags2, attachFlags2, detachFlags2, unbindFlags2 } = flagsSpec;
const items = $items.slice();
// common stuff
const baseFlags: LifecycleFlags = strategy as unknown as LifecycleFlags;
const proxies = (strategy & BindingStrategy.proxies) > 0;
const container = AuDOMConfiguration.createContainer();
const dom = container.get(IDOM);
const observerLocator = container.get(IObserverLocator);
const lifecycle = container.get(ILifecycle);
const scheduler = container.get(IScheduler);
const location = AuNode.createRenderLocation();
const host = AuNode.createHost().appendChild(location.$start).appendChild(location);
const itemTemplate: ITemplate = {
renderContext: null as any,
dom: null as any,
definition: null as any,
render(itemRenderable) {
const text = AuNode.createText();
const wrapper = AuNode.createTemplate().appendChild(text);
assert.strictEqual(totalPropObserver['collectionDeps']?.length, 1);
totalPropObserver['propertyDeps'].forEach((observerDep: SetterObserver, idx: number) => {
if (idx === 0) {
assert.instanceOf(observerDep, GetterObserver);
} else {
assert.instanceOf(observerDep, SetterObserver);
}
});
assert.strictEqual(host.textContent, '30' /* idx 0, 2, 4, 6, 8 only */);
component.items[0].isDone = false;
assert.strictEqual(component.activeItems.length, 6);
assert.strictEqual(host.textContent, '30');
ctx.container.get(IScheduler).getRenderTaskQueue().flush();
assert.strictEqual(host.textContent, '31');
}
},
dispatchEventWith(ctx, button, EVENTS.MouseDown);
await ctx.scheduler.yieldRenderTask();
assert.equal(component.hasFocus, false, '+ button@mousedown');
// this is quite convoluted
// and failing unexpectedly, commented out for good
component.hasFocus = true;
input.focus();
dispatchEventWith(ctx, input, EVENTS.Focus, false);
await ctx.scheduler.yieldRenderTask();
// assert.equal(input, ctx.doc.activeElement, 'child > input === doc.activeElement (2)');
// child input got focus
// 1. blur got triggered -> hasFocus to false
// 2. focus got triggered -> hasFocus to true
assert.equal(component.hasFocus, true, 'child > input@focus');
}
},
const app = getViewModel(host);
const tsb = host.querySelector(`tri-state-boolean`);
const labels = toArray(tsb.querySelectorAll('label'));
// assert radio buttons and selection
assert.html.textContent(labels[0], app.noDisplayValue, `incorrect label for noValue`);
assert.html.textContent(labels[1], app.trueValue, `incorrect label for true`);
assert.html.textContent(labels[2], app.falseValue, `incorrect label for false`);
assert.equal(labels[0].querySelector('input').checked, false, `should not have been checked for noValue`);
assert.equal(labels[1].querySelector('input').checked, false, `should not have been checked for true`);
assert.equal(labels[2].querySelector('input').checked, false, `should not have been checked for false`);
// assert if the choice is changed in VM, it is propagated to view
app.likesCake = true;
ctx.scheduler.getRenderTaskQueue().flush();
assert.equal(labels[1].querySelector('input').checked, true, `should have been checked for true`);
// assert that when choice is changed from view, it is propagaetd to VM
labels[2].click();
ctx.scheduler.getRenderTaskQueue().flush();
assert.equal(labels[2].querySelector('input').checked, true, `should have been checked for false`);
assert.equal(app.likesCake, false, 'expected change to porapagate to vm');
});
assert.equal(component.hasFocus, false, 'window@mousedown');
await ctx.scheduler.yieldRenderTask();
component.hasFocus = true;
dispatchEventWith(ctx, ctx.doc.body, EVENTS.MouseDown);
await ctx.scheduler.yieldRenderTask();
assert.equal(component.hasFocus, false, 'document.body@mousedown');
const button = testHost.querySelector('button');
component.hasFocus = true;
dispatchEventWith(ctx, button, EVENTS.MouseDown);
await ctx.scheduler.yieldRenderTask();
assert.equal(component.hasFocus, false, '+ button@mousedown');
// this is quite convoluted
// and failing unexpectedly, commented out for good
component.hasFocus = true;
input.focus();
dispatchEventWith(ctx, input, EVENTS.Focus, false);
await ctx.scheduler.yieldRenderTask();
// assert.equal(input, ctx.doc.activeElement, 'child > input === doc.activeElement (2)');
// child input got focus
// 1. blur got triggered -> hasFocus to false
// 2. focus got triggered -> hasFocus to true
assert.equal(component.hasFocus, true, 'child > input@focus');
}
},