How to use the @aurelia/router.ViewportContent function in @aurelia/router

it('resolves component instance from type', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      // Registration.alias(CustomElement.keyFrom('global'), Global).register(container);

      const viewport = new ViewportContent(Global, null, null, router.container as unknown as IRenderContext);
      const component = viewport.toComponentInstance(router.container as unknown as IRenderContext);
      assert.strictEqual(component.constructor, Global, `component.constructor`);
    });
  });

it('resolves component name from string', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      const viewport = new ViewportContent('global', null, null, router.container as unknown as IRenderContext);
      assert.strictEqual(viewport.toComponentName(), 'global', `viewport.toComponentName()`);
    });
    it('resolves component name from type', async function () {

it('can be created', function () {
    const sut = new ViewportContent();
  });

it('resolves component type from type', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      const viewport = new ViewportContent(Global, null, null, router.container as unknown as IRenderContext);
      assert.strictEqual(viewport.toComponentType(router.container as unknown as IRenderContext), Global, `viewport.toComponentType(router.container as unknown as IRenderContext)`);
    });

it('resolves component instance from string', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      const viewport = new ViewportContent('global', null, null, router.container as unknown as IRenderContext);
      const component = viewport.toComponentInstance(router.container as unknown as IRenderContext);
      assert.strictEqual(component.constructor, Global, `component.constructor`);
    });
    it('resolves component instance from type', async function () {

it('resolves component type from string', async function () {
      const Local = define({ name: 'local', template: 'local' }, null);
      const Global = define({ name: 'global', template: 'global' }, null);
      const { container, router } = await $setup([Local]);

      container.register(Global);
      const viewport = new ViewportContent('global', null, null, router.container as unknown as IRenderContext);
      assert.strictEqual(viewport.toComponentType(router.container as unknown as IRenderContext), Global, `viewport.toComponentType(router.container as unknown as IRenderContext)`);
    });
    it('resolves component type from type', async function () {