@webjskit/cli 0.1.0

package/templates/test/browser/example.test.js

@@ -0,0 +1,40 @@
+/**
+ * Example browser test — runs in real Chromium via WTR + Playwright.
+ *
+ * Run:  npx webjs test --browser
+ *       npx wtr
+ *
+ * Tests here have full access to real browser APIs: Shadow DOM,
+ * adoptedStyleSheets, IntersectionObserver, events, etc.
+ */
+
+const assert = {
+  ok: (v, msg) => { if (!v) throw new Error(msg || `Expected truthy`); },
+  equal: (a, b, msg) => { if (a !== b) throw new Error(msg || `Expected ${b}, got ${a}`); },
+};
+
+suite('Example browser tests', () => {
+  test('DOM is real (not jsdom/linkedom)', () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    assert.ok(el.isConnected, 'Element should be connected to real DOM');
+    el.remove();
+  });
+
+  test('Shadow DOM works', () => {
+    const host = document.createElement('div');
+    const shadow = host.attachShadow({ mode: 'open' });
+    shadow.innerHTML = '<p>inside shadow</p>';
+    assert.ok(shadow.querySelector('p'));
+    assert.ok(!host.querySelector('p'), 'Shadow content not in light DOM');
+  });
+
+  // Replace with your component tests:
+  // test('my-widget renders correctly', () => {
+  //   import('../../components/my-widget.ts');
+  //   const el = document.createElement('my-widget');
+  //   document.body.appendChild(el);
+  //   assert.ok(el.shadowRoot);
+  //   el.remove();
+  // });
+});

package/templates/test/e2e/example.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Example E2E test — replace with tests for your user flows.
+ *
+ * Run:  WEBJS_E2E=1 npx webjs test
+ * Or:   WEBJS_E2E=1 node --test test/e2e/*.test.ts
+ *
+ * Requires: puppeteer-core + chromium installed.
+ *   npm i -D puppeteer-core
+ */
+import { test, describe, before, after } from 'node:test';
+import assert from 'node:assert/strict';
+import { spawn } from 'node:child_process';
+import { createServer } from 'node:net';
+
+let browser: any, page: any, serverProcess: any, baseUrl: string;
+
+function freePort(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const srv = createServer();
+    srv.listen(0, () => {
+      const addr = srv.address();
+      const port = typeof addr === 'object' && addr ? addr.port : 0;
+      srv.close(() => resolve(port));
+    });
+    srv.on('error', reject);
+  });
+}
+
+before(async () => {
+  let puppeteer;
+  try { puppeteer = (await import('puppeteer-core')).default; }
+  catch { console.log('# Skipping: puppeteer-core not installed'); return; }
+
+  const port = await freePort();
+  baseUrl = `http://localhost:${port}`;
+
+  serverProcess = spawn('npx', ['webjs', 'dev', '--port', String(port)], {
+    cwd: process.cwd(),
+    env: { ...process.env, __WEBJS_DEV_CHILD: '1' },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  await new Promise<void>((resolve, reject) => {
+    const onData = (chunk: Buffer) => {
+      if (chunk.toString().includes('ready on')) resolve();
+    };
+    serverProcess.stdout?.on('data', onData);
+    serverProcess.stderr?.on('data', onData);
+    setTimeout(() => reject(new Error('Server start timeout')), 15000);
+  });
+
+  browser = await puppeteer.launch({
+    executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium',
+    headless: true,
+    args: ['--no-sandbox'],
+  });
+  page = await browser.newPage();
+});
+
+after(async () => {
+  if (browser) await browser.close();
+  if (serverProcess) serverProcess.kill('SIGTERM');
+});
+
+describe('E2E: App', {
+  skip: !process.env.WEBJS_E2E && 'set WEBJS_E2E=1 to run',
+}, () => {
+
+  test('homepage loads and renders', async () => {
+    await page.goto(baseUrl, { waitUntil: 'domcontentloaded', timeout: 10000 });
+    const title = await page.title();
+    assert.ok(title, 'Page should have a title');
+  });
+
+  test('no JavaScript errors', async () => {
+    const errors: string[] = [];
+    page.on('pageerror', (e: Error) => errors.push(e.message));
+    await page.goto(baseUrl, { waitUntil: 'domcontentloaded', timeout: 10000 });
+    await new Promise(r => setTimeout(r, 2000));
+    assert.equal(errors.length, 0, `JS errors: ${errors.join('; ')}`);
+    page.removeAllListeners('pageerror');
+  });
+
+  // Add your E2E tests here:
+  // test('user can sign up', async () => { ... });
+  // test('user can create a post', async () => { ... });
+});

package/templates/test/unit/example.test.ts

@@ -0,0 +1,24 @@
+/**
+ * Example unit test — replace with tests for your modules.
+ *
+ * Run:  npx webjs test
+ * Or:   node --test test/unit/*.test.ts
+ */
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { html, renderToString } from '@webjskit/core';
+
+test('html template renders correctly', async () => {
+  const result = await renderToString(html`<p>Hello, ${'world'}!</p>`);
+  assert.ok(result.includes('Hello, world!'));
+});
+
+test('example: your first server action test', async () => {
+  // Import your server action:
+  // import { createPost } from '../../modules/posts/actions/create-post.server.ts';
+  //
+  // const result = await createPost({ title: 'Test', body: 'Content' });
+  // assert.equal(result.success, true);
+  // assert.ok(result.data.id);
+  assert.ok(true, 'Replace this with real tests');
+});

package/templates/web-test-runner.config.js

@@ -0,0 +1,26 @@
+/**
+ * Web Test Runner configuration.
+ *
+ * Runs browser tests (components, directives, interactions) in real
+ * Chromium via Playwright. Server tests (actions, queries) use node:test.
+ *
+ * Run:
+ *   npx webjs test              # runs both server + browser tests
+ *   npx webjs test --browser    # browser tests only
+ *   npx webjs test --server     # server tests only
+ */
+import { playwrightLauncher } from '@web/test-runner-playwright';
+
+export default {
+  files: ['test/browser/**/*.test.js'],
+  nodeResolve: true,
+  browsers: [
+    playwrightLauncher({ product: 'chromium' }),
+  ],
+  testFramework: {
+    config: {
+      ui: 'tdd',
+      timeout: 10000,
+    },
+  },
+};