DrSensor / DrSensor/nusa

Scoped Live Testing

Open
#52 1 comment 0 reactions 0 assignees View on GitHub
documentation enhancement
Dominant language
JavaScript
Stars
4
Forks
0
PR merge metrics
No merged PRs in 30d

Description

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:
1. Either inline or import test suite in the linked module. This approach rely on tree shaking mechanism in JS bundler.
```js
import { current, scope, use } from "nusa/std"

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()

expect(this.counter.count).toBe(1);
}
}
```
or
```js
import { current } from "nusa/std"

export default class Counter {
accessor count
increment() {
this.count += +current.target.value
}
}

if (__TEST__) await import("./counter.test.js")
```
```js
import { suite, test } from "@testdeck/jasmine"
import { expect } from "chai"
import { scope, use } from "nusa/std"

import Counter from "./counter.js"

@suite class TestCounter {
counter = use(Counter)
@test count_when_clicked() {
scope(this.counter)
.getElementByTagName("button")[0]
.click()

expect(this.counter.count).toBe(1);
}
}

export default TestCounter // for -ing (optional)
```
2. `` test module. This rely on site generator to remove specific elements based on specific attribute.
```html



++
0

```
then site generator (i.e lume) can remove the testing code like
```ts
if (!DEV) site.process([".html"], ({ document }) => {
document
.querySelectorAll('link[href$=".test.js"]')
.forEach(element => element.remove())
})
```
---
##### Food for Thought
To make it toolless, use [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) to communicate between dev, report, and test environment. For example:
- localhost:3000 - dev environment. No test are running (`__TEST__ === false`). Trigger/send test signal via BroadcastChannel or WebSocket **when** `` intersect with viewport
- localhost:??? - test environment. It might run in:
- headless browser via WebSocket (run in different port i.e localhost:5000)
- or just new tab or popup without spawning new browser instance (communicate via BroadcastChannel, run in same port i.e localhost:3000)
- localhost:3000/.well-known/test-report or inside #44 - view and control how test being run

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.