Merge pull request #8 from wuespace/testing

Automated testing

Author: pklaschka

.github/workflows/deno.yml

@@ -0,0 +1,40 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# This workflow will install Deno then run `deno lint` and `deno test`.
+# For more information see: https://github.com/denoland/setup-deno
+
+name: Deno
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v4
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@61fe2df320078202e33d7d5ad347e7dcfa0e8f31 # v1.1.2
+        with:
+          deno-version: v2.x
+
+      - name: Verify formatting
+        run: deno fmt --check
+
+      - name: Run linter
+        run: deno lint
+
+      - name: Run tests
+        run: deno task test

.pre-commit-config.yaml

@@ -34,12 +34,12 @@ repos:
         # pass_filenames: false
         description: "Type-check code using Deno's built-in type checker"
         stages: [pre-commit]
-      # - id: deno-test
-      #   name: deno-test
-      #   entry: deno task test
-      #   language: system
-      #   files: \.(ts|tsx|js|jsx)$
-      #   pass_filenames: false
-      #   always_run: true
-      #   description: "Run tests using Deno's built-in test runner"
-      #   stages: [pre-commit]
+      - id: deno-test
+        name: deno-test
+        entry: deno task test
+        language: system
+        files: \.(ts|tsx|js|jsx)$
+        pass_filenames: false
+        always_run: true
+        description: "Run tests using Deno's built-in test runner"
+        stages: [pre-commit]

deno.json

@@ -5,12 +5,14 @@
   "tasks": {
     "dev": "deno run -A --watch example/main.tsx",
     "cli": "deno run -A --watch cli.ts",
-    "update:i18n": "deno run -A example/i18n.ts"
+    "update:i18n": "deno run -A example/i18n.ts",
+    "test": "deno test -A"
   },
   "exports": "./lib/mod.ts",
   "imports": {
     "@hono/hono": "jsr:@hono/hono@4",
     "@std/assert": "jsr:@std/assert@1",
+    "@std/expect": "jsr:@std/expect@^1.0.17",
     "@std/fs": "jsr:@std/fs@^1.0.20",
     "typescript": "npm:typescript@^5.9.3",
     "@wuespace/honolate": "./lib/mod.ts"

deno.lock

@@ -20,7 +20,7 @@
 				<name>main</name>
 				<children>
 					<concept_node>
-						<name>ABC {0} DEF</name>
+						<name>Hello world!</name>
 						<description/>
 						<comment/>
 						<translations>
@@ -35,7 +35,22 @@
 						</translations>
 					</concept_node>
 					<concept_node>
-						<name>Hello world!</name>
+						<name>Lazy term</name>
+						<description/>
+						<comment/>
+						<translations>
+							<translation>
+								<language>de-DE</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>en-US</language>
+								<approved>false</approved>
+							</translation>
+						</translations>
+					</concept_node>
+					<concept_node>
+						<name>This text contains {0} \{} curly braces and \\{\{}}\{0}.</name>
 						<description/>
 						<comment/>
 						<translations>
@@ -50,17 +65,17 @@
 						</translations>
 					</concept_node>
 					<concept_node>
-						<name>Welcome to the {{}}}}{{ {0} {1} {{0}} {{1}} homepage {0}!</name>
+						<name>Untranslated text</name>
 						<description/>
 						<comment/>
 						<translations>
 							<translation>
 								<language>de-DE</language>
-								<approved>true</approved>
+								<approved>false</approved>
 							</translation>
 							<translation>
 								<language>en-US</language>
-								<approved>true</approved>
+								<approved>false</approved>
 							</translation>
 						</translations>
 					</concept_node>

example/locales/babeledit-project.babel

@@ -1,5 +1,6 @@
 {
-  "ABC {0} DEF": "Deutsches ABC {0} DEF",
   "Hello world!": "Hallo Welt!",
-  "Welcome to the {{}}}}{{ {0} {1} {{0}} {{1}} homepage {0}!": "Willkommen zur {{}}}}{{ {0} {1} {{0}} {{1}} Homepage {0}!"
+  "Lazy term": "Fauler Begriff",
+  "This text contains {0} \\{} curly braces and \\\\{\\{}}\\{0}.": "Dieser Text enthält {0} \\{} geschweifte Klammern und \\\\{\\{}}\\{0}.",
+  "Untranslated text": ""
 }

example/locales/de.json

@@ -1,5 +1,6 @@
 {
-  "ABC {0} DEF": "ABC {0} DEF",
   "Hello world!": "Hello world!",
-  "Welcome to the {{}}}}{{ {0} {1} {{0}} {{1}} homepage {0}!": "Welcome to the {{}}}}{{ {0} {1} {{0}} {{1}} homepage {0}!"
+  "Lazy term": "Lazy term",
+  "This text contains {0} \\{} curly braces and \\\\{\\{}}\\{0}.": "This text contains {0} \\{} curly braces and \\\\{\\{}}\\{0}.",
+  "Untranslated text": "Untranslated text"
 }

example/locales/en.json

@@ -1,35 +1,43 @@
 import { Hono } from "@hono/hono";
 import { jsxRenderer } from "@hono/hono/jsx-renderer";
-// import { languageDetector } from '@hono/hono/language';
-import { t } from "@wuespace/honolate";
+import { lt, t, useLocale } from "@wuespace/honolate";
 import { withI18n } from "./i18n.ts";
 
-const app = new Hono();
+const lazyTerm = lt`Lazy term`;
 
-app.use(
-  "*",
-  // languageDetector({
-  // 	supportedLanguages: ['en', 'ar', 'ja', 'de'], // Must include fallback
-  // 	fallbackLanguage: 'en', // Required
-  // }),
-  withI18n,
-  jsxRenderer(),
-);
+export const app = new Hono()
+  .use(
+    withI18n,
+    jsxRenderer(),
+  )
+  .get("/text", (c) => c.text(t`Hello world!`))
+  .get("/locale", (c) => c.text(useLocale()))
+  .get("/render", (c) => c.render(<h1>{t`Hello world!`}</h1>))
+  .get("/component", (c) => c.render(<Component />))
+  .get("/async-component", (c) => {
+    return c.render(<AsyncComponent />);
+  })
+  .get("/async-component-alt", async (c) => {
+    const component = await AsyncComponent();
+    return c.render(component);
+  })
+  .get("/untranslated", (c) => c.text(t`Untranslated text`))
+  .get("/lazy", (c) => c.text(t(lazyTerm)))
+  .get(
+    "/escape-test",
+    (c) => c.text(t`This text contains ${1} {} curly braces and \\{{}}{0}.`),
+  )
+  .notFound((c) => c.text("Not Found", 404));
 
-app.get("/", (c) => {
-  return c.render(
-    <div>
-      {t`Welcome to the {{}}}}{{ {0} {1} {{0}} {{1}} homepage ${c.req.url}!`}
-      {t`Hello world!`}
-      {t`Test: ${<code>{t`Hello!`}</code>}`}
-      <LocalePrinter />
-    </div>,
-  );
-});
+import.meta.main && Deno.serve(app.fetch);
 
-function LocalePrinter() {
-  const locale = t`ABC ${3} DEF`;
-  return <div>Current locale: {locale}</div>;
+function Component() {
+  const greeting = t`Hello world!`;
+  return <h1>{greeting}</h1>;
 }
 
-Deno.serve(app.fetch);
+async function AsyncComponent() {
+  await Promise.resolve();
+  const greeting = t`Hello world!`;
+  return <h1>{greeting}</h1>;
+}

example/main.tsx

@@ -0,0 +1,90 @@
+import { testClient } from "@hono/hono/testing";
+import { expect } from "@std/expect";
+import { describe, it } from "node:test";
+import { app } from "../example/main.tsx";
+
+const testApp = testClient(app);
+
+describe("Hono + Honolate E2E", () => {
+  describe("t function in different contexts", () => {
+    const paths = [
+      "text",
+      "render",
+      "component",
+      "async-component",
+      "async-component-alt",
+    ] as const;
+    for (const path of paths) {
+      it(`GET /${path} should return localized 'Hello world!'`, async () => {
+        const resDefault = await (await testApp[path].$get({})).text();
+        const resEn = await (await testApp[path].$get({
+          query: { lang: "en" },
+        })).text();
+        const resDe = await (await testApp[path].$get({
+          query: { lang: "de" },
+        })).text();
+
+        expect(resDefault).toContain("Hello world!");
+        expect(resEn).toContain("Hello world!");
+        expect(resDe).toContain("Hallo Welt!");
+      });
+    }
+  });
+  describe("Untranslated text", () => {
+    it("GET /untranslated should return untranslated text", async () => {
+      const resDefault = await (await testApp.untranslated.$get({})).text();
+      const resEn = await (await testApp.untranslated.$get({
+        query: { lang: "en" },
+      })).text();
+      const resDe = await (await testApp.untranslated.$get({
+        query: { lang: "de" },
+      })).text();
+
+      expect(resDefault).toBe("Untranslated text");
+      expect(resEn).toBe("Untranslated text");
+      expect(resDe).toBe("Untranslated text");
+    });
+  });
+  describe("Lazy translation term", () => {
+    it("GET /lazy should return localized lazy term", async () => {
+      const resDefault = await (await testApp.lazy.$get({})).text();
+      const resEn = await (await testApp.lazy.$get({
+        query: { lang: "en" },
+      })).text();
+      const resDe = await (await testApp.lazy.$get({
+        query: { lang: "de" },
+      })).text();
+
+      expect(resDefault).toBe("Lazy term");
+      expect(resEn).toBe("Lazy term");
+      expect(resDe).toBe("Fauler Begriff");
+    });
+  });
+  describe("Escape test", () => {
+    it("GET /escape-test should return correctly escaped text", async () => {
+      const res = await (await testApp["escape-test"].$get({})).text();
+      expect(res).toBe("This text contains 1 {} curly braces and \\{{}}{0}.");
+      const resDe = await (await testApp["escape-test"].$get({
+        query: { lang: "de" },
+      })).text();
+      expect(resDe).toBe(
+        "Dieser Text enthält 1 {} geschweifte Klammern und \\{{}}{0}.",
+      );
+    });
+  });
+  describe("Locale", () => {
+    it("GET /locale should return correct locale", async () => {
+      const resDefault = await (await testApp.locale.$get({})).text();
+      const resEn = await (await testApp.locale.$get({
+        query: { lang: "en" },
+      })).text();
+      const resDe = await (await testApp.locale.$get({
+        query: { lang: "de" },
+      })).text();
+
+      expect(resDefault).toBe("en");
+      expect(resEn).toBe("en");
+      expect(resDe).toBe("de");
+    });
+  });
+});