How to use the @aurelia/kernel.toArray function in @aurelia/kernel

$it(`binds an object array to checkbox-list - ${id}`, function ({ host, ctx }) {
      const app = getViewModel(host);
      const products = app[collProp];
      const inputs: HTMLInputElement[] = toArray(host.querySelectorAll(`checkbox-list #${id} label input[type=checkbox]`));
      const size = products.length;
      assert.equal(inputs.length, size);

      // assert radio buttons and selection
      assert.equal(inputs[0].checked, true, 'checked0');

      // assert if the choice is changed in VM, it is propagated to view
      app[chosenProp].push(products[1]);
      ctx.scheduler.getRenderTaskQueue().flush();
      assert.equal(inputs[0].checked, true, 'checked00');
      assert.equal(inputs[1].checked, true, 'checked1');

      // assert that when choice is changed from view, it is propagaetd to VM
      inputs[0].click();
      inputs[2].click();
      ctx.scheduler.getRenderTaskQueue().flush();

$it(title, function ({ host, ctx }) {
      const app = getViewModel(host);
      const items = app[collProp];
      const select: HTMLSelectElement = host.querySelector(`select-dropdown select#select${id}`);
      const options: HTMLOptionElement[] = toArray(select.querySelectorAll('option'));
      const size = items.length;

      // initial
      assert.equal(options.length, size + 1);
      assert.equal(options[1].selected, true, 'option10');

      // assert if the choice is changed in VM, it is propagated to view
      app[chosenProp].push(items[1].id);
      ctx.scheduler.getRenderTaskQueue().flush();
      assert.equal(options[1].selected, true, 'option11');
      assert.equal(options[2].selected, true, 'option21');

      // assert that when choice is changed from view, it is propagaetd to VM
      options[3].selected = true;
      select.dispatchEvent(new Event('change'));
      ctx.scheduler.getRenderTaskQueue().flush();

// extract the original content, not manipulated by au-i18n
    for (const child of children) {
      if (!Reflect.get(child, marker)) {
        fallBackContents.push(child);
      }
    }

    const template = this.prepareTemplate(content, marker, fallBackContents);

    // difficult to use the set property approach in this case, as most of the properties of Node is readonly
    // const observer = this.observerLocator.getAccessor(LifecycleFlags.none, this.target, '??');
    // observer.setValue(??, flags);

    this.target.innerHTML = '';
    for (const child of toArray(template.content.childNodes)) {
      this.target.appendChild(child);
    }
  }

shadowOptions?: { mode: 'open' | 'closed' } | null,
  hasSlots?: boolean | null,
  strategy?: BindingStrategy | null): TemplateDefinition {

  const def = new DefaultTemplateDefinition();

  // all cases fall through intentionally
  const argLen = arguments.length;
  switch (argLen) {
    case 13: if (strategy != null) def.strategy = ensureValidStrategy(strategy);
    case 12: if (hasSlots != null) def.hasSlots = hasSlots!;
    case 11: if (shadowOptions != null) def.shadowOptions = shadowOptions!;
    case 10: if (containerless != null) def.containerless = containerless!;
    case 9: if (surrogates != null) def.surrogates = toArray(surrogates!);
    case 8: if (dependencies != null) def.dependencies = toArray(dependencies!);
    case 7: if (instructions != null) def.instructions = toArray(instructions!) as ITargetedInstruction[][];
    case 6: if (bindables != null) def.bindables = { ...bindables };
    case 5: if (build != null) def.build = build === true ? buildRequired : build === false ? buildNotRequired : { ...build! };
    case 4: if (cache != null) def.cache = cache!;
    case 3: if (template != null) def.template = template;
    case 2:
      if (ctor != null) {
        if (ctor.bindables) {
          def.bindables = Bindable.for(ctor as unknown as {}).get();
        }
        if (ctor.containerless) {
          def.containerless = ctor.containerless;
        }
        if (ctor.shadowOptions) {
          def.shadowOptions = ctor.shadowOptions as unknown as { mode: 'open' | 'closed' };
        }
        if (ctor.prototype) {

hasSlots?: boolean | null,
  strategy?: BindingStrategy | null,
  childrenObservers?: Record | null): TemplateDefinition {

  const def = new DefaultTemplateDefinition();

  // all cases fall through intentionally
  const argLen = arguments.length;
  switch (argLen) {
    case 14: if (childrenObservers !== null) def.childrenObservers = { ...childrenObservers };
    case 13: if (strategy != null) def.strategy = ensureValidStrategy(strategy);
    case 12: if (hasSlots != null) def.hasSlots = hasSlots!;
    case 11: if (shadowOptions != null) def.shadowOptions = shadowOptions!;
    case 10: if (containerless != null) def.containerless = containerless!;
    case 9: if (surrogates != null) def.surrogates = toArray(surrogates!);
    case 8: if (dependencies != null) def.dependencies = toArray(dependencies!);
    case 7: if (instructions != null) def.instructions = toArray(instructions!) as ITargetedInstruction[][];
    case 6: if (bindables != null) def.bindables = { ...bindables };
    case 5: if (build != null) def.build = build === true ? buildRequired : build === false ? buildNotRequired : { ...build! };
    case 4: if (cache != null) def.cache = cache!;
    case 3: if (template != null) def.template = template;
    case 2:
      if (ctor != null) {
        if (ctor.bindables) {
          def.bindables = Bindable.for(ctor as unknown as {}).get();
        }
        if (ctor.containerless) {
          def.containerless = ctor.containerless;
        }
        if (ctor.shadowOptions) {
          def.shadowOptions = ctor.shadowOptions as unknown as { mode: 'open' | 'closed' };
        }

strategy?: BindingStrategy | null,
  childrenObservers?: Record | null): TemplateDefinition {

  const def = new DefaultTemplateDefinition();

  // all cases fall through intentionally
  const argLen = arguments.length;
  switch (argLen) {
    case 14: if (childrenObservers !== null) def.childrenObservers = { ...childrenObservers };
    case 13: if (strategy != null) def.strategy = ensureValidStrategy(strategy);
    case 12: if (hasSlots != null) def.hasSlots = hasSlots!;
    case 11: if (shadowOptions != null) def.shadowOptions = shadowOptions!;
    case 10: if (containerless != null) def.containerless = containerless!;
    case 9: if (surrogates != null) def.surrogates = toArray(surrogates!);
    case 8: if (dependencies != null) def.dependencies = toArray(dependencies!);
    case 7: if (instructions != null) def.instructions = toArray(instructions!) as ITargetedInstruction[][];
    case 6: if (bindables != null) def.bindables = { ...bindables };
    case 5: if (build != null) def.build = build === true ? buildRequired : build === false ? buildNotRequired : { ...build! };
    case 4: if (cache != null) def.cache = cache!;
    case 3: if (template != null) def.template = template;
    case 2:
      if (ctor != null) {
        if (ctor.bindables) {
          def.bindables = Bindable.for(ctor as unknown as {}).get();
        }
        if (ctor.containerless) {
          def.containerless = ctor.containerless;
        }
        if (ctor.shadowOptions) {
          def.shadowOptions = ctor.shadowOptions as unknown as { mode: 'open' | 'closed' };
        }
        if (ctor.childrenObservers) {

$it(`cards have image`, async function ({ host, ctx }) {
    const images: HTMLImageElement[] = toArray(host.querySelectorAll('cards #cards1 div img'));
    const { heroes } = getViewModel(host);

    for (let i = 0; i < images.length; i++) {
      assert.equal(images[i].src.endsWith(heroes[i].imgSrc), true, `incorrect img src#${i + 1}`);
    }

    heroes[0].imgSrc = undefined;
    await ctx.scheduler.yieldAll();
    assert.equal(images[0].src, '', `expected null img src`);

    const imgSrc = "foobar.jpg";
    heroes[0].imgSrc = imgSrc;
    await ctx.scheduler.yieldAll();
    assert.equal(images[0].src.endsWith(imgSrc), true, `incorrect img src`);
  });

private addContentToTemplate(template: HTMLTemplateElement, content: string | undefined, marker: string) {
    if (content) {
      const addendum = DOM.createDocumentFragment(content) as Node;
      for (const child of toArray(addendum.childNodes)) {
        Reflect.set(child, marker, true);
        template.content.append(child);
      }
      return true;
    }
    return false;
  }