Open DrSensor opened 1 year ago
I've decided to use zora for testing both demo and internal implementation and expose a <button>test</button>
to manually run the tests. Since use()
and scope()
are context specific, it must be used inside callback like @build
decorator or others. So I plan to expose a lifecycle module specifically (but not limited) for testing.
import * as lifecycle from "//esm.run/nusa/lifecycle"
import { current, use } from "//esm.run/nusa/std"
import { test } from "zora"
import Counter from "./module.js"
const testbed = lifecycle.render(() => {
const counter = use(Counter)
const button = current.root.getElementsByTagName("button")[0]
test(name, t => {
button.click()
t.equal(counter.count, 1);
})
lifecycle.clear(testbed)
})
const name = import.meta.url.split("/").at(-2)
<script type=module src=test.js></script>
<script async src=//esm.run/nusa/render-scope></script>
<render-scope>
<link href=module.js>
<template shadowrootmode=closed>
<button :: on:click=increment text:=count/>
</template>
</render-scope>
Run test suite on every live reload only on scope that is in the viewport. There's 2 approach based on how test suites got removed on the production code:
export default class Counter { accessor count increment() { this.count += +current.target.value } }
import { suite, test } from "@testdeck/jasmine" import { expect } from "chai"
if (TEST) @suite class TestCounter { counter = use(Counter) @test count_when_clicked() { scope(this.counter) .getElementByTagName("button")[0] .click()
}
<link>
test module. This rely on site generator to remove specific elements based on specific attribute.then site generator (i.e lume) can remove the testing code like
Food for Thought
To make it toolless, use BroadcastChannel to communicate between dev, report, and test environment. For example:
__TEST__ === false
). Trigger/send test signal via BroadcastChannel or WebSocket when<render-scope>
intersect with viewport