How to use the @aurelia/testing.TestContext.createHTMLTestContext function in @aurelia/testing

function createFixture() {
    const ctx = TestContext.createHTMLTestContext();
    const { lifecycle, scheduler, dom } = ctx;
    // const originalWnd = ctx.wnd;

    // const mockWnd = new MockWindow(originalWnd, originalWnd.history, originalWnd.location);
    // const addEventListener = createSpy(mockWnd, 'addEventListener');
    // const removeEventListener = createSpy(mockWnd, 'removeEventListener');

    // (DOM as Writable).window = mockWnd;

    const sut = new BrowserNavigator(scheduler, dom);
    const mockBrowserHistoryLocation = new MockBrowserHistoryLocation();
    mockBrowserHistoryLocation.changeCallback = sut.handlePopstate;
    sut.history = mockBrowserHistoryLocation as any;
    sut.location = mockBrowserHistoryLocation as any;

    function tearDown() {

it(title, async function () {
      let host: HTMLElement;
      try {
        const ctx = TestContext.createHTMLTestContext();
        const aurelia = new Aurelia(ctx.container);
        host = ctx.createElement('div');

        ctx.container.register(...resources);

        const Root = CustomElement.define(
          { name: 'app', template },
          root === undefined ? class App {} : root
        );

        aurelia.app({ host: host, component: Root });

        aurelia.start();

        await assertFn(ctx, host, aurelia.container.get(Root));

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]));
    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, strategy: BindingStrategy.proxies }, $class);
    const component = new App();

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

    return {
      ctx: ctx,
      au,
      container,

it(title, function () {
      const ctx = TestContext.createHTMLTestContext();
      const el = ctx.createElementFromMarkup(`<div style="${staticStyle}"></div>`);
      const sut = new StyleAttributeAccessor(ctx.scheduler, LifecycleFlags.none, el);
      sut.setValue(input, LifecycleFlags.fromBind);

      const actual = sut.getValue();
      assert.strictEqual(actual, expected);
    });
  }

function createFixture(hasSubscriber: boolean, value: any, prop: string) {
      const ctx = TestContext.createHTMLTestContext();
      const { container, lifecycle, observerLocator, scheduler } = ctx;

      const el = ctx.createElementFromMarkup(`<input type="checkbox">`) as ObservedInputElement;
      el[prop] = value;
      ctx.doc.body.appendChild(el);

      const sut = observerLocator.getObserver(LF.none, el, 'checked') as CheckedObserver;
      observerLocator.getObserver(LF.none, el, prop);

      const subscriber = { handleChange: createSpy() };
      if (hasSubscriber) {
        sut.subscribe(subscriber);
      }

      return { ctx, value, container, lifecycle, observerLocator, scheduler, el, sut, subscriber };
    }

beforeEach(function () {
    ctx = TestContext.createHTMLTestContext();
  });

function createFixture() {
        const ctx = TestContext.createHTMLTestContext();
        const { container, observerLocator } = ctx;

        const el = ctx.createElementFromMarkup(`<input type="${inputType}">`) as HTMLInputElement;
        ctx.doc.body.appendChild(el);

        const sut = observerLocator.getObserver(LF.none, el, 'value') as ValueAttributeObserver;

        const subscriber = { handleChange: createSpy() };
        sut.subscribe(subscriber);

        return { ctx, container, observerLocator, el, sut, subscriber };
      }

function createFixture(hasSubscriber: boolean, value: any, prop: string) {
      const ctx = TestContext.createHTMLTestContext();
      const { container, lifecycle, observerLocator, scheduler } = ctx;

      const el = ctx.createElementFromMarkup(`<input type="checkbox">`) as ObservedInputElement;
      el[prop] = value;
      ctx.doc.body.appendChild(el);

      const sut = observerLocator.getObserver(LF.none, el, 'checked') as CheckedObserver;
      observerLocator.getObserver(LF.none, el, prop);

      const subscriber = { handleChange: createSpy() };
      if (hasSubscriber) {
        sut.subscribe(subscriber);
      }

      return { ctx, value, container, lifecycle, observerLocator, scheduler, el, sut, subscriber };
    }

it.skip('render hook', async function () {

    const ctx = TestContext.createHTMLTestContext();
    const App = CustomElement.define({
      name: 'app',
      template: `<template></template>`
    },                                       class {
      public $nodes: INodeSequence;
      public render() {
        this.$nodes = new NodeSequenceFactory(ctx.dom, 'foo').createNodeSequence();
      }
    });

    const au = new Aurelia(ctx.container);

    const host = ctx.createElement('div');
    const component = new App();

    au.app({ host, component });

function setup() {
    resetId('au$component');

    const ctx = TestContext.createHTMLTestContext();
    const { container, lifecycle, dom, scheduler } = ctx;
    const templateFactory = container.get(ITemplateFactory);
    const renderContext = new RenderContext(dom, container, null);
    const $loc = h('div');
    const host = h('div', null, $loc);
    const loc = dom.convertToRenderLocation($loc);
    const calls = container.get(CallCollection);

    recordCalls(Controller, calls);
    recordCalls(If, calls);

    return {
      ctx,
      calls,
      container,
      scheduler,