lowlighter · lowlighter · Oct 8, 2024 · Oct 8, 2024
diff --git a/@mizu/test/deno.jsonc b/@mizu/test/deno.jsonc
@@ -0,0 +1,7 @@
+{
+  "name": "@mizu/test",
+  "version": "0.1.0",
+  "exports": {
+    ".": "./mod.ts"
+  }
+}
diff --git a/@mizu/test/mod.html b/@mizu/test/mod.html
@@ -0,0 +1,28 @@
+<mizu-directive id="test" directory="test">
+  <code #name><span class="hljs-keyword">~test</span><wbr /><span class="muted">="expression"</span></code>
+  <p #description>
+    Special directive for testing purposes.
+  </p>
+  <code #example *skip>
+    <samp ~test[TESTING].text="'...'">
+      <!--...-->
+    </samp>
+  </code>
+  <mizu-warn #note>
+    Intended for testing purposes only. This is provided for developers that want to test their custom directives in isolation, without having to rely on other directives.
+  </mizu-warn>
+  <mizu-modifier #modifier>
+    <span #type>string</span>
+    Any existing <a href="/#concept-phase">Phase</a> name (e.g. <code>~test[testing]</code>, defaults to <code *code[ts]>Phase.TESTING</code>). Directive will be executed during the specified phase before any other directive of said phase, which can be used to simulate specific
+    scenarios.
+  </mizu-modifier>
+  <mizu-modifier #modifier name="text">
+    Set element's <var><a href="https://developer.mozilla.org/docs/Web/API/Node/textContent">textContent</a></var> with expression result.
+  </mizu-modifier>
+  <mizu-modifier #modifier name="eval">
+    Evaluate a JavaScript expression in the context of the element.
+  </mizu-modifier>
+  <mizu-modifier #modifier name="comment">
+    Change the element to a <var><a href="https://developer.mozilla.org/docs/Web/API/Comment">Comment</a></var> if expression is truthy (and revert it back otherwise).
+  </mizu-modifier>
+</mizu-directive>
diff --git a/@mizu/test/mod.ts b/@mizu/test/mod.ts
@@ -0,0 +1,72 @@
+// Imports
+import { type Directive, type NonVoid, Phase } from "@mizu/mizu/core/engine"
+export type * from "@mizu/mizu/core/engine"
+
+/** Delta for {@linkcode Phase} to prevent collisions when {@linkcode Directive.multiple} is not enabled. */
+const PHASE_TESTING_DELTA = -0.5
+
+/** `~test` typings. */
+export const typings = {
+  modifiers: {
+    text: { type: Boolean },
+    comment: { type: Boolean },
+    eval: { type: Boolean },
+  },
+} as const
+
+/** `~test` directive. */
+export const _test = {
+  name: /^~test/,
+  phase: Phase.TESTING,
+  typings,
+  multiple: true,
+  async execute(renderer, element, { attributes, ...options }) {
+    const returned = {} as NonVoid<Awaited<ReturnType<NonNullable<Directive["execute"]>>>>
+    for (const attribute of attributes) {
+      const parsed = renderer.parseAttribute(attribute, this.typings, { modifiers: true })
+      // Skip if tag does not match current phase
+      parsed.tag ??= Phase[Phase.TESTING]
+      if ((parsed.tag) && (this.phase !== (Phase[parsed.tag.toLocaleUpperCase() as keyof typeof Phase] + PHASE_TESTING_DELTA))) {
+        continue
+      }
+      // Handle comment elements
+      if (renderer.isComment(element)) {
+        // Uncomment element on falsy `comment` modifier value
+        if ((parsed.modifiers.comment) && (!await renderer.evaluate(element, attribute.value || "'true'", options))) {
+          returned.element = renderer.uncomment(element)
+          element = returned.element
+        }
+        // Set comment content on any `~test` directive
+        renderer.setAttribute(element, attribute.name, attribute.value)
+        continue
+      } // Handle HTML elements
+      else if (renderer.isHtmlElement(element)) {
+        // Comment element on truthy `comment` modifier value
+        if ((parsed.modifiers.comment) && (await renderer.evaluate(element, attribute.value || "'true'", options))) {
+          returned.element = renderer.comment(element, { expression: attribute.value, directive: attribute.name })
+          element = returned.element
+          continue
+        }
+        // Set text content on `text` modifier value
+        if (parsed.modifiers.text) {
+          element.textContent = `${await renderer.evaluate(element, attribute.value, options)}`
+          continue
+        }
+        // Evaluate attribute value on `eval` modifier value
+        if (parsed.modifiers.eval) {
+          await renderer.evaluate(element, attribute.value, options)
+          continue
+        }
+      }
+    }
+    return returned
+  },
+} as Directive<null, typeof typings> & { name: RegExp }
+
+/** `~test` directives. */
+const _tests = Object.entries(Phase)
+  .filter(([, value]) => (Number.isFinite(value)) && (Number(value) > Phase.META))
+  .map(([key, value]) => ({ ..._test, name: new RegExp(`${_test.name.source}(?<${key.toLocaleLowerCase()}>)`), phase: (value as number) + PHASE_TESTING_DELTA })) as Array<typeof _test>
+
+/** Default exports. */
+export default _tests
diff --git a/@mizu/test/mod_test.html b/@mizu/test/mod_test.html
@@ -0,0 +1,67 @@
+<load directives="@mizu/test"></load>
+
+<test name="[~test] with `text` modifier evaluates and sets `Element.textContent`">
+  <render>
+    <p ~test.text="'f'+'o'.repeat(2)"></p>
+  </render>
+  <expect>
+    <p>foo</p>
+  </expect>
+</test>
+
+<test name="[~test] with `comment` modifier changes `HTMLElement` to `Comment`">
+  <render>
+    <p ~test.comment></p>
+  </render>
+  <expect>
+    <!--[~test.comment=""]-->
+  </expect>
+  <render>
+    <p ~test.comment ~test.text="'bar'"></p>
+  </render>
+  <expect>
+    <!--[~test.comment=""] [~test.text="'bar'"]-->
+  </expect>
+  <script>
+    context.value = true
+  </script>
+  <render>
+    <p ~test.comment="value"></p>
+  </render>
+  <expect>
+    <!--[~test.comment="value"]-->
+  </expect>
+  <script>
+    context.value = false
+  </script>
+  <render></render>
+  <expect>
+    <p></p>
+  </expect>
+  <render>
+    <p ~test.comment="false"></p>
+  </render>
+  <expect>
+    <p></p>
+  </expect>
+</test>
+
+<test name="[~test] with `eval` modifier evaluates expression">
+  <render>
+    <div>
+      <p ~test.eval="this.remove()"></p>
+    </div>
+  </render>
+  <expect>
+    <div></div>
+  </expect>
+</test>
+
+<test name="[~test] with `[tag]` executes directive as specified `Phase`">
+  <render>
+    <p ~test[postprocessing].text="'foo'" ~test[preprocessing].text="'bar'"></p>
+  </render>
+  <expect>
+    <p>foo</p>
+  </expect>
+</test>
diff --git a/@mizu/test/mod_test.ts b/@mizu/test/mod_test.ts
@@ -0,0 +1 @@
+await import("@mizu/mizu/core/testing").then(({ test }) => test(import.meta))
diff --git a/deno.jsonc b/deno.jsonc
@@ -93,15 +93,15 @@
     // "@mizu/if",
     // "@mizu/is",
     // "@mizu/markdown",
-    "@mizu/mizu"
+    "@mizu/mizu",
     // "@mizu/model",
     // "@mizu/once",
     // "@mizu/ref",
     // "@mizu/refresh",
     // "@mizu/set",
     // "@mizu/show",
     // "@mizu/skip",
-    // "@mizu/test",
+    "@mizu/test"
     // "@mizu/text",
     // "@mizu/toc"
   ],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		await import("@mizu/mizu/core/testing").then(({ test }) => test(import.meta))