How to use the @aurelia/testing.assert.html function in @aurelia/testing

$it('changes in bound VM properties are correctly reflected in the read-only-texts', function ({ host, ctx }) {
    ((host.querySelector('button#staticTextChanger') as unknown) as HTMLButtonElement).click();
    ctx.scheduler.getRenderTaskQueue().flush();

    assert.html.textContent('read-only-text#text0', 'text0', 'incorrect text for read-only-text#text0', host);
    assert.html.textContent('read-only-text#text1', 'text1', 'incorrect text for read-only-text#text1', host);
    assert.html.textContent('read-only-text#text2', 'newText2', 'incorrect text for read-only-text#text2', host);
    assert.html.textContent('read-only-text#text3', 'newText3', 'incorrect text for read-only-text#text3', host);
  });

$it('binds interpolated string to read-only-texts', function ({ host, ctx }) {
    const el = host.querySelector('#interpolated-text');
    const vm = getViewModel(host);
    assert.html.textContent(el, `interpolated: ${vm.text4}${vm.text5}`, `incorrect text`);

    const text1 = 'hello',
      text2 = 'world';

    vm.text4 = text1;
    ctx.scheduler.getRenderTaskQueue().flush();
    assert.html.textContent(el, `interpolated: ${text1}${vm.text5}`, `incorrect text - change1`, host);

    vm.text5 = text2;
    ctx.scheduler.getRenderTaskQueue().flush();
    assert.html.textContent(el, `interpolated: ${text1}${text2}`, `incorrect text - change2`, host);
  });

assertFn: (ctx, host, component) => {
        assert.html.textContent(host, 'i-0');
        const dirtyChecker = ctx.container.get(IDirtyChecker) as any;
        assert.strictEqual(dirtyChecker['tracked'].length, 0);

        component.itemNames.splice(0, 1, '00');
        assert.html.textContent(host, 'i-0');
        ctx.container.get(IScheduler).getRenderTaskQueue().flush();
        assert.html.textContent(host, '00');
      }
    }

backgroundColor: 'rgb(0, 0, 255)',
          borderTopWidth: '1px',
          borderBottomWidth: '1px',
          borderRightWidth: '1px',
          borderLeftWidth: '1px',
          borderTopStyle: 'solid',
          borderBottomStyle: 'solid',
          borderRightStyle: 'solid',
          borderLeftStyle: 'solid',
          borderTopColor: 'rgb(0, 255, 0)',
          borderBottomColor: 'rgb(0, 255, 0)',
          borderRightColor: 'rgb(0, 255, 0)',
          borderLeftColor: 'rgb(0, 255, 0)',
        },
        `style ${id} - post change`);
      assert.html.notComputedStyle(
        para,
        { fontWeight: '700' },
        `font-weight ${id} - post change`);
    }
  });

.container
          .get(IObserverLocator)
          .getObserver(
            LifecycleFlags.none,
            component,
            'total'
          ) as GetterObserver;

        assert.strictEqual(observer['propertyDeps']?.length, 17);
        assert.strictEqual(observer['collectionDeps']?.length, 1);

        observer['propertyDeps'].forEach((observerDep: SetterObserver) => {
          assert.instanceOf(observerDep, SetterObserver);
        });

        assert.html.textContent(host, '4');
        component.items[1].isDone = true;
        assert.html.textContent(host, '4');
        ctx.container.get(IScheduler).getRenderTaskQueue().flush();
        assert.html.textContent(host, '5');
      }
    },

async function ({ host, ctx }) {
        const container1 = host.querySelector('cards #cards1');
        const container2 = host.querySelector('cards #cards2');
        const cards1 = toArray(container1.querySelectorAll('div'));
        const cards2 = toArray(container2.querySelectorAll('div'));

        assert.html.computedStyle(container1, { display: 'flex' }, 'incorrect container1 display');
        assert.html.computedStyle(container2, { display: 'flex' }, 'incorrect container2 display');
        assert.equal(cards1.every((card) => card.querySelector('footer').classList.contains('foo-bar')), true);
        assert.html.computedStyle(cards1[0], { backgroundColor: selectedHeaderColor }, 'incorrect selected background1 - container1');
        assert.html.computedStyle(cards1[0].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color1 - container1');
        assert.html.computedStyle(cards2[0], { backgroundColor: selectedHeaderColor }, 'incorrect selected background1 - container2');
        assert.html.computedStyle(cards2[0].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color1 - container2');

        cards1[1].click();
        await ctx.scheduler.yieldAll();

        assert.html.computedStyle(cards1[0], { backgroundColor: 'rgba(0, 0, 0, 0)' }, 'incorrect background1 - container1');
        assert.html.computedStyle(cards1[0].querySelector('span'), { color: 'rgb(0, 0, 0)' }, 'incorrect color1 - container1');
        assert.html.computedStyle(cards1[1], { backgroundColor: selectedHeaderColor }, 'incorrect selected background2 - container1');
        assert.html.computedStyle(cards1[1].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color2 - container1');

        assert.html.computedStyle(cards2[0], { backgroundColor: 'rgba(0, 0, 0, 0)' }, 'incorrect background1 - container2');
        assert.html.computedStyle(cards2[0].querySelector('span'), { color: 'rgb(0, 0, 0)' }, 'incorrect color1 - container2');
        assert.html.computedStyle(cards2[1], { backgroundColor: selectedHeaderColor }, 'incorrect selected background2 - container2');
        assert.html.computedStyle(cards2[1].querySelector('span'), { color: selectedDetailsColor }, 'incorrect selected color2 - container2');
      },
      { useCSSModule }));

assertFn: (ctx, host, component) => {
        assert.html.textContent(host, 'i-0');
        const dirtyChecker = ctx.container.get(IDirtyChecker) as any;
        assert.strictEqual(dirtyChecker['tracked'].length, 0);

        component.itemNames.splice(0, 1, '00');
        assert.html.textContent(host, 'i-0');
        ctx.container.get(IScheduler).getRenderTaskQueue().flush();
        assert.html.textContent(host, '00');
      }
    }

component,
            'total'
          ) as GetterObserver;

        assert.strictEqual(observer['propertyDeps']?.length, 17);
        assert.strictEqual(observer['collectionDeps']?.length, 1);

        observer['propertyDeps'].forEach((observerDep: SetterObserver) => {
          assert.instanceOf(observerDep, SetterObserver);
        });

        assert.html.textContent(host, '4');
        component.items[1].isDone = true;
        assert.html.textContent(host, '4');
        ctx.container.get(IScheduler).getRenderTaskQueue().flush();
        assert.html.textContent(host, '5');
      }
    },

const linex = demo.querySelector('#linex');

    const { line, ec } = vm;
    const getEcYSqNum = () => Math.pow(ec.x, 3) - ec.a * ec.x + ec.b;
    const getEcYsq = () => getEcYSqNum().toString();
    const getEcY = () => Math.sqrt(getEcYSqNum()).toString();
    const getLinex = () => ((line.y - line.intercept) / line.slope).toString();

    assert.html.textContent(ecYSq, getEcYsq(), 'ecysq1');
    assert.html.textContent(ecY, getEcY(), 'ecy1');
    assert.html.textContent(linex, getLinex(), 'linex1');

    line.slope = 4;
    ec.a = 10;
    ctx.scheduler.getRenderTaskQueue().flush();
    assert.html.textContent(ecYSq, getEcYsq(), 'ecysq2');
    assert.html.textContent(ecY, getEcY(), 'ecy2');
    assert.html.textContent(linex, getLinex(), 'linex2');
  });