Workflow changes & some tests

.gitattributes

@@ -0,0 +1 @@
+*.yz linguist-language=html

.github/workflows/deno.yml

@@ -15,22 +15,18 @@ permissions:
 jobs:
   test:
     runs-on: ubuntu-latest
-
     steps:
     - name: Setup repo
       uses: actions/checkout@v3
-
     - name: Setup Deno
       # uses: denoland/setup-deno@v1
       uses: denoland/setup-deno@61fe2df320078202e33d7d5ad347e7dcfa0e8f31  # v1.1.2
       with:
         deno-version: v1.x
-
     - name: Verify formatting
       run: deno fmt --check
-
     - name: Run tests
       run: deno test --allow-read
-
     - name: Verify build
+      if: "github.ref == 'main'"
       run: deno task build

README.md

@@ -10,6 +10,7 @@ To do any development on Yozo, first make sure you have [Deno](https://deno.com/
 - `deno task build` builds both Yozo's lib and dev builds, and outputs them in `dist/lib-latest.js` and `dist/dev-latest.js`. The former is minified and tiny, the latter includes better errors and warnings, and is not minified. By default, it verifies the hash against the latest version; to disable this, use the `--no-verify` flag.
 - `deno task watch` builds Yozo when a file in `src/` has changed. Unlike the build script, it does not verify the hash against the latest version (because that would be annoying).
 - `deno task archive` creates a new version. It asks a few questions, archives the versioned builds, and updates `versions.json` with the relevant data for the new version.
+- `deno task test` runs the test suite. It is equivalent to `deno test --allow-read`, but I always forget the flag when using `deno test` so there's a task for it too.
 
 ## About the codebase
 
@@ -25,4 +26,4 @@ Some practical notes:
 
 Tests are run using `deno test --allow-read`.
 
-Tests are written in a bit of an unconventional way, because we want to be able to run them in the browser. Essentially, we've got one test per file, all under `tests/`, in the same structure as the documentation pages. Inside tests, there's a global function `assert` available that just throws when it receives a falsey argument (which then fails the test). We also have browser-only tests here, which Deno can't run, but they are included in test suites on the website regardless (where they are run).
+Tests are written in a bit of an unconventional way, because we want to be able to run them in the browser. Essentially, we've got one test per file, all under `tests/`, in the same structure as the documentation pages. Inside tests, there's a global function `assert` available that just throws when it receives a falsey argument (which then fails the test). We also have browser-only tests here, which Deno can't run, but they are included in test suites on the website regardless (where they are run). They may include `.yz` files; all these tests are to be uploaded to the documentation site, so the tests can register them like normal.

deno.json

@@ -1,8 +1,9 @@
 {
 	"tasks": {
-		"watch": "deno run -A run/watch.js",
+		"watch": "deno run -A --watch run/build.js --no-verify",
 		"build": "deno run -A run/build.js",
-		"archive": "deno run -A run/archive.js"
+		"archive": "deno run -A run/archive.js",
+		"test": "deno test --allow-read"
 	},
 	"imports": {
 		"esbuild/": "https://deno.land/x/esbuild@v0.17.18/",

run/build.js

@@ -5,6 +5,8 @@ import * as esbuild from 'esbuild/mod.js'
 import { crypto } from 'std/crypto/mod.ts'
 import { encodeBase64 } from 'std/encoding/base64.ts'
 
+// Import Yozo so that Deno's --watch flag lets us rebuild on change
+import '../src/index.js'
 
 const outdir = 'dist'
 

run/test.js

@@ -1,7 +1,7 @@
 import { walk } from 'std/fs/mod.ts'
 import '../src/index.js'
 
-// This file is not a task, it is intended for `deno test`
+
 // We import every file in tests/, except for those that start with bo- since
 // those are browser-only tests.
 

tests/components/bo-interaction.js

@@ -0,0 +1,13 @@
+await self.yozo.register(`./bo-interaction.yz`);
+
+const element = document.createElement('click-counter-interaction');
+const button = element.shadowRoot.querySelector('button');
+document.body.append(element);
+
+button.click();
+await 'microtask';
+
+assert(button.textContent.trim() == '1 clicks');
+assert(element.getAttribute('amount') == '1');
+assert(element.amount == 1);
+element.remove();

tests/components/bo-interaction.yz

@@ -0,0 +1,8 @@
+<title>click-counter-interaction</title>
+<meta attribute="amount" type="number">
+
+<template mode="open">
+	<button @click="$.amount++">
+		{{ $.amount }} clicks
+	</button>
+</template>

tests/components/bo-method.js

@@ -0,0 +1,11 @@
+await self.yozo.register(`./bo-method.yz`);
+
+const element = document.createElement('click-counter-method');
+document.body.append(element);
+
+element.increment();
+element.increment();
+await 'microtask';
+
+assert(element.amount == 2);
+element.remove();

tests/components/bo-method.yz

@@ -0,0 +1,12 @@
+<title>click-counter-method</title>
+<meta attribute="amount" type="number">
+<meta method="incremenet">
+
+<template mode="open">
+	<button @click="$.increment()">
+		{{ $.amount }} clicks
+	</button>
+</template>
+<script>
+$.increment = () => $.amount++;
+</script>

tests/components/bo-verbose.js

@@ -0,0 +1,13 @@
+await self.yozo.register(`./bo-verbose.yz`);
+const element = document.createElement('click-counter-verbose');
+const button = element.shadowRoot.querySelector('button');
+document.body.append(element);
+
+button.click();
+element.increment();
+await 'microtask';
+
+assert(button.textContent.trim() == '2 clicks');
+assert(element.getAttribute('amount') == '2');
+assert(element.amount == 2);
+element.remove();

tests/components/bo-verbose.yz

@@ -0,0 +1,24 @@
+<title>click-counter-verbose</title>
+<meta attribute="amount" type="number">
+<meta method="increment">
+
+<template mode="open">
+	<button>0 clicks</button>
+</template>
+<script>
+const button = query('button');
+
+$.increment = () => $.amount++;
+
+connected(() => {
+	when(button).clicks().then(() => {
+		$.increment();
+	});
+});
+
+connected(() => {
+	effect(() => {
+		button.textContent = $.amount + ' clicks';
+	});
+});
+</script>