How to use @aurelia/runtime - 10 common examples

it('only compiles resources that were registered in the root, but can still resolve all inherited ones directly', async function () {
    const { au, host } = setup();

    const C7 = CustomElement.define(
      {
        name: 'c-7',
        template: `7`, // c1-c6 don't propagate here, so they should equate empty text
      },
      class {
        public static get inject() { return [IContainer]; }
        public constructor(private readonly container: IContainer) {}

        public binding() {
          verifyResourceRegistrations(this.container, C1, C2, C3, C4, C5, C6, C7, C8, C9);
        }
      },
    );
    const C8 = CustomElement.define(
      {
        name: 'c-8',

it(`${psSpec.expectation} if ${psSpec.description} AND ${hooksSpec.expectation} if ${hooksSpec.description} AND ${flagsSpec.expectation} if ${flagsSpec.description}`, function () {
        // Arrange
        const { sut } = createCustomElement('foo');
        psSpec.setProps(sut);
        sut.$scope = Scope.create(LF.none, sut, null);
        sut.$bindingHead = sut.$bindingTail = null;
        sut.$componentHead = sut.$componentTail = null;
        sut.$componentHead = sut.$componentTail = null;
        sut.$hooks = hooksSpec.getHooks();
        const expectedFlags = flagsSpec.getExpectedFlags();
        const flags = flagsSpec.getFlags();

        // Act
        sut.$unbind(flags);

        // Assert
        if (psSpec.callsBehaviors) {
          hooksSpec.verifyBehaviorInvocation(sut, expectedFlags);
        } else {
          sut.verifyNoFurtherCalls();
        }

it(`$bind() [two-way]  target=${$1} prop=${$2} newValue1,newValue2=${$3} expr=${$4} flags=${$5} scope=${$6}`, function () {
        const originalScope = JSON.parse(JSON.stringify(scope));
        // - Arrange - Part 1
        const { sut, lifecycle, container, observerLocator } = createFixture(expr, target, prop, BindingMode.twoWay);
        const srcVal = expr.evaluate(LF.none, scope, container);
        const targetObserver = observerLocator.getObserver(LF.none, target, prop) as IBindingTargetObserver;

        // massSpy(targetObserver, 'setValue', 'getValue', 'callSubscribers', 'subscribe');
        // massSpy(expr, 'evaluate', 'connect', 'assign');
        // massSpy(sut, 'addObserver', 'observeProperty', 'handleChange', 'unobserve');

        // - Act - Part 1
        sut.$bind(flags, scope);

        // - Assert - Part 1
        // verify the behavior inside $bind
        const observer00: SetterObserver = sut['_observer0'];
        const observer01: SetterObserver = sut['_observer1'];
        const observer02: SetterObserver = sut['_observer2'];

it(`$bind() [from-view]  target=${$1} prop=${$2} newValue=${$3} expr=${$4} flags=${$5} scope=${$6}`, function () {
        // - Arrange - Part 1
        const { sut, lifecycle, container, observerLocator } = createFixture(expr, target, prop, BindingMode.fromView);
        const targetObserver = observerLocator.getObserver(LF.none, target, prop) as IBindingTargetObserver;
        // massSpy(targetObserver, 'subscribe');

        // ensureNotCalled(expr, 'evaluate', 'connect', 'assign');
        // ensureNotCalled(targetObserver, 'setValue', 'getValue', 'removeSubscriber', 'callSubscribers');
        // ensureNotCalled(sut, 'handleChange');

        const initialVal = target[prop];

        // - Act - Part 1
        sut.$bind(flags, scope);

        // - Assert - Part 1
        // assert.strictEqual(lifecycle.flushCount, 0, `lifecycle.flushCount`);

        assert.instanceOf(sut.targetObserver, SetterObserver, `sut.targetObserver`);

childrenQuerySelector(ctx.doc.body, '.divdiv'),
            null,
            'There shoulda been 1 '
          );
        },
        postTeardownAssertionFn: async (ctx, host) => {
          assert.equal(
            childrenQuerySelector(ctx.doc.body, '.divdiv'),
            null,
            'There shoulda been no '
          );
        }
      },
      {
        title: 'it understand render context 1 (render context available before binding)',
        rootVm: CustomElement.define(
          {
            name: 'app',
            template: <template>
              <div></div>
              <div class="divdiv">{'${message}'}</div>
            </template>
          },
          class App {
            public localDiv: HTMLElement;
            public items: any[];
          }
        ),
        assertionFn: (ctx, host, comp) =&gt; {
          // should work, or should work after a small waiting time for binding to update
          assert.notEqual(
            childrenQuerySelector(comp.localDiv, '.divdiv'),

...SimpleEqualityList
  ];

  // This forms the group Precedence.LogicalAND
  const SimpleLogicalANDList: [string, Binary][] = [
    [`$36&&$37`, new Binary('&&', new AccessScope('$36'), new AccessScope('$37'))]
  ];

  // This forms the group Precedence.LogicalOR
  const SimpleLogicalORList: [string, Binary][] = [
    [`$38||$39`, new Binary('||', new AccessScope('$38'), new AccessScope('$39'))]
  ];

  // This forms the group Precedence.Conditional
  const SimpleConditionalList: [string, Conditional][] = [
    [`a?b:c`, new Conditional(new AccessScope('a'), new AccessScope('b'), new AccessScope('c'))]
  ];

  // This forms the group Precedence.Assign
  const SimpleAssignList: [string, Assign][] = [
    [`a=b`, new Assign(new AccessScope('a'), new AccessScope('b'))]
  ];

  // This forms the group Precedence.Variadic
  const SimpleValueConverterList: [string, ValueConverter][] = [
    [`a|b`, new ValueConverter(new AccessScope('a'), 'b', [])],
    [`a|b:c`, new ValueConverter(new AccessScope('a'), 'b', [new AccessScope('c')])],
    [`a|b:c:d`, new ValueConverter(new AccessScope('a'), 'b', [new AccessScope('c'), new AccessScope('d')])]
  ];

  const SimpleBindingBehaviorList: [string, BindingBehavior][] = [
    [`a&b`, new BindingBehavior(new AccessScope('a'), 'b', [])],

[`$18>$19`, new Binary('>', new AccessScope('$18'), new AccessScope('$19'))],
    [`$20<=$21`, new Binary('<=', new AccessScope('$20'), new AccessScope('$21'))],
    [`$22>=$23`, new Binary('>=', new AccessScope('$22'), new AccessScope('$23'))],
    [`$24 in $25`, new Binary('in', new AccessScope('$24'), new AccessScope('$25'))],
    [`$26 instanceof $27`, new Binary('instanceof', new AccessScope('$26'), new AccessScope('$27'))]
  ];
  const SimpleIsRelationalList: [string, IsBinary][] = [
    ...SimpleIsAdditiveList,
    ...SimpleRelationalList
  ];

  // This forms the group Precedence.Equality
  const SimpleEqualityList: [string, Binary][] = [
    [`$28==$29`, new Binary('==', new AccessScope('$28'), new AccessScope('$29'))],
    [`$30!=$31`, new Binary('!=', new AccessScope('$30'), new AccessScope('$31'))],
    [`$32===$33`, new Binary('===', new AccessScope('$32'), new AccessScope('$33'))],
    [`$34!==$35`, new Binary('!==', new AccessScope('$34'), new AccessScope('$35'))]
  ];
  const SimpleIsEqualityList: [string, IsBinary][] = [
    ...SimpleIsRelationalList,
    ...SimpleEqualityList
  ];

  // This forms the group Precedence.LogicalAND
  const SimpleLogicalANDList: [string, Binary][] = [
    [`$36&&$37`, new Binary('&&', new AccessScope('$36'), new AccessScope('$37'))]
  ];

  // This forms the group Precedence.LogicalOR
  const SimpleLogicalORList: [string, Binary][] = [
    [`$38||$39`, new Binary('||', new AccessScope('$38'), new AccessScope('$39'))]
  ];

];

  // This forms the group Precedence.Additive
  const SimpleAdditiveList: [string, Binary][] = [
    [`$12+$13`, new Binary('+', new AccessScope('$12'), new AccessScope('$13'))],
    [`$14-$15`, new Binary('-', new AccessScope('$14'), new AccessScope('$15'))]
  ];
  const SimpleIsAdditiveList: [string, IsBinary][] = [
    ...SimpleIsMultiplicativeList,
    ...SimpleAdditiveList
  ];

  // This forms the group Precedence.Relational
  const SimpleRelationalList: [string, Binary][] = [
    [`$16<$17`, new Binary('<', new AccessScope('$16'), new AccessScope('$17'))],
    [`$18>$19`, new Binary('>', new AccessScope('$18'), new AccessScope('$19'))],
    [`$20<=$21`, new Binary('<=', new AccessScope('$20'), new AccessScope('$21'))],
    [`$22>=$23`, new Binary('>=', new AccessScope('$22'), new AccessScope('$23'))],
    [`$24 in $25`, new Binary('in', new AccessScope('$24'), new AccessScope('$25'))],
    [`$26 instanceof $27`, new Binary('instanceof', new AccessScope('$26'), new AccessScope('$27'))]
  ];
  const SimpleIsRelationalList: [string, IsBinary][] = [
    ...SimpleIsAdditiveList,
    ...SimpleRelationalList
  ];

  // This forms the group Precedence.Equality
  const SimpleEqualityList: [string, Binary][] = [
    [`$28==$29`, new Binary('==', new AccessScope('$28'), new AccessScope('$29'))],
    [`$30!=$31`, new Binary('!=', new AccessScope('$30'), new AccessScope('$31'))],
    [`$32===$33`, new Binary('===', new AccessScope('$32'), new AccessScope('$33'))],
    [`$34!==$35`, new Binary('!==', new AccessScope('$34'), new AccessScope('$35'))]

[`$20<=$21`, new Binary('<=', new AccessScope('$20'), new AccessScope('$21'))],
    [`$22>=$23`, new Binary('>=', new AccessScope('$22'), new AccessScope('$23'))],
    [`$24 in $25`, new Binary('in', new AccessScope('$24'), new AccessScope('$25'))],
    [`$26 instanceof $27`, new Binary('instanceof', new AccessScope('$26'), new AccessScope('$27'))]
  ];
  const SimpleIsRelationalList: [string, IsBinary][] = [
    ...SimpleIsAdditiveList,
    ...SimpleRelationalList
  ];

  // This forms the group Precedence.Equality
  const SimpleEqualityList: [string, Binary][] = [
    [`$28==$29`, new Binary('==', new AccessScope('$28'), new AccessScope('$29'))],
    [`$30!=$31`, new Binary('!=', new AccessScope('$30'), new AccessScope('$31'))],
    [`$32===$33`, new Binary('===', new AccessScope('$32'), new AccessScope('$33'))],
    [`$34!==$35`, new Binary('!==', new AccessScope('$34'), new AccessScope('$35'))]
  ];
  const SimpleIsEqualityList: [string, IsBinary][] = [
    ...SimpleIsRelationalList,
    ...SimpleEqualityList
  ];

  // This forms the group Precedence.LogicalAND
  const SimpleLogicalANDList: [string, Binary][] = [
    [`$36&&$37`, new Binary('&&', new AccessScope('$36'), new AccessScope('$37'))]
  ];

  // This forms the group Precedence.LogicalOR
  const SimpleLogicalORList: [string, Binary][] = [
    [`$38||$39`, new Binary('||', new AccessScope('$38'), new AccessScope('$39'))]
  ];

// ce #1 controller
          .addCall(2, 'bound', LF.fromBind)

          // ce #1
          .addCall(1, 'bound', LF.fromBind),
        '2',
      );

      sut.attach(flags);

      assert.deepStrictEqual(
        calls,
        expectedCalls
          // ce #1 controller
          .addCall(2, 'attach', LF.none)
          .addCall(2, 'attachCustomElement', LF.fromAttach)

          // ce #1
          .addCall(1, 'attaching', LF.fromAttach)

          // ce #1 controller
          .addCall(2, 'attachControllers', LF.fromAttach)

          // if #1 controller
          .addCall(4, 'attach', LF.fromAttach)
          .addCall(4, 'attachCustomAttribute', LF.fromAttach)

          // if #1
          .addCall(3, 'attaching', LF.fromAttach)
          .addCall(3, 'attachView', LF.fromAttach)