How to use @aurelia/testing - 10 common examples

$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');
          }
        },