How to use the @aurelia/runtime.CustomElement.define function in @aurelia/runtime

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',

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'),

async function createFixture(template: string | Node, $class: Constructable | null, ...registrations: any[]) {
    const ctx = TestContext.createHTMLTestContext();
    const { container, lifecycle, observerLocator } = ctx;
    registrations = Array.from(new Set([...registrations, Blur, Focus]));
    container.register(...registrations);
    const testHost = ctx.doc.body.appendChild(ctx.createElement('div'));
    const appHost = testHost.appendChild(ctx.createElement('app'));
    const au = new Aurelia(container);
    const App = CustomElement.define({ name: 'app', template }, $class);
    const component = new App();

    au.app({ host: appHost, component });
    await au.start().wait();

    return {
      ctx: ctx,
      au,
      container,
      lifecycle,
      testHost: testHost,
      appHost,
      component: component as T,
      observerLocator,
      dispose: async () => {
        await au.stop().wait();

it(`${x.it} STRICT MODE `, async function () {
        const strict = CustomElement.define({ name: 'strict', template: `${x.interpolation}`, isStrictBinding: true }, x.app);
        const { tearDown, appHost } = createFixture(`<template></template>`, class { }, [strict]);
        assert.strictEqual(appHost.textContent, x.expectedStrictMode.toString(), `host.textContent`);
        await tearDown();
      });
    }

it('returns the right instruction', async function () {
      const tests = [
        { useHref: true, href: true, goto: true, result: 'goto' },
        { useHref: true, href: false, goto: true, result: 'goto' },
        { useHref: true, href: true, goto: false, result: 'href' },
        { useHref: true, href: false, goto: false, result: null },

        { useHref: false, href: true, goto: true, result: 'goto' },
        { useHref: false, href: false, goto: true, result: 'goto' },
        { useHref: false, href: true, goto: false, result: null },
        { useHref: false, href: false, goto: false, result: null },
      ];

      for (const test of tests) {
        const App = CustomElement.define({
          name: 'app',
          template: `<a>Link</a>`
        });

        const { sut, tearDown, ctx } = await setupApp(App);
        const { doc } = ctx;

        const anchor = doc.getElementsByTagName('A')[0];

        const evt = new MouseEvent('click', { cancelable: true });
        let info: AnchorEventInfo | null = { shouldHandleEvent: false, instruction: null, anchor: null };

        const origHandler = sut['handler'];
        (sut as Writable)['handler'] = ev =&gt; {
          origHandler(ev);
          ev.preventDefault();

it("3201 _", function () {
    const { au, host } = createFixture();
    const App = CustomElement.define(
      {
        name: "app",
        template: `<div>\${i}</div>`
      },
      class {
        items = [3, 2, 0, 1];
      }
    );
    const component = new App();
    au.app({ host, component });
    au.start();
    assert.strictEqual(host.textContent, '3201');
    component.items.sort();
    assert.strictEqual(host.textContent, '0123');
  });
  it("3210 _", function () {

it("tag$03 text$03 _", function () {
        const { au, host } = createFixture();
        const MyFoo = CustomElement.define({ name: "my-foo", template: "<template>${msg}</template>" }, class {
            static bindables = ["msg", "not", "item"];
            msg = "";
            not = "";
            item = "";
        });
        au.register(MyFoo);
        const App = CustomElement.define({ name: "app", template: "<template></template>" }, class {
            msg = "a";
        });
        const component = new App();
        au.app({ host, component });
        verify(au, host, "a");
    });
    it("tag$04 text$03 _", function () {

it('navigates to locally registered dep - nested', async function () {
      const Local2 = CustomElement.define({ name: 'local2', template: 'local2' }, class { });
      const Local1 = CustomElement.define({ name: 'local1', template: 'local1', dependencies: [Local2] }, null);
      const { scheduler, host, router, $teardown } = await $setup([Local1]);

      await $goto('local1/local2', router, scheduler);

      assert.match(host.textContent, /.*local1.*local2.*/, `host.textContent`);

      await $teardown();
    });

const Foo = CustomElement.define({ name: 'foo', template: '<template>Viewport: foo <a href="baz@foo"><span>baz</span></a></template>' });
    const Bar = CustomElement.define({ name: 'bar', template: `<template>Viewport: bar Parameter id: [\${id}] Parameter name: [\${name}] </template>` }, class {
      public static parameters = ['id', 'name'];
      public id = 'no id';
      public name = 'no name';
      public enter(params) {
        if (params.id) { this.id = params.id; }
        if (params.name) { this.name = params.name; }
      }
    });
    const Baz = CustomElement.define({ name: 'baz', template: `<template>Viewport: baz Parameter id: [\${id}] </template>` }, class {
      public static parameters = ['id'];
      public id = 'no id';
      public enter(params) { if (params.id) { this.id = params.id; } }
    });
    const Qux = CustomElement.define({ name: 'qux', template: '<template>Viewport: qux</template>' }, class {
      public canEnter() { return true; }
      public canLeave() {
        if (quxCantLeave &gt; 0) {
          quxCantLeave--;
          return false;
        } else {
          return true;
        }
      }
      public enter() { return true; }
      public leave() { return true; }
    });
    const Quux = CustomElement.define({ name: 'quux', template: '<template>Viewport: quux</template>' });
    const Corge = CustomElement.define({ name: 'corge', template: '<template>Viewport: corgeViewport: dummy</template>' });

    const Uier = CustomElement.define({ name: 'uier', template: '<template>Viewport: uier</template>' }, class {

function defineAndRegisterHost(template: string, container: IContainer) {
    class HostElement {
      public oneCount = 1;
      public twoCount = 1;
    }

    const element = CustomElement.define({
      name: 'host-element',
      template
    }, HostElement);

    container.register(element);

    return element;
  }