@zlooks.cn/cli 1.0.5 → 1.0.6

package/templates/blog-theme/test/shell.test.tsx.template

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ZlooksRscShellContext } from '@zlooks.cn/ui/shell-context';
+import BlogFrame from '../src/plugin/blog-frame.js';
+
+const navigation = vi.hoisted(() => ({ push: vi.fn(), refresh: vi.fn() }));
+vi.mock('@hile/rsc/client/navigation', () => ({ RscLink: (props: object) => <a {...props} />, useRscNavigation: () => navigation }));
+let host: HTMLDivElement;
+let root: Root;
+const fetchMock = vi.fn();
+const site = {
+  schemaVersion: 2 as const, revision: 1, updatedAt: '2026-09-01T00:00:00.000Z', updatedBy: 'test',
+  value: { identity: { name: '测试站点', homeHref: '/' }, linkGroups: [], legal: {
+    copyright: '测试版权', registrations: [{ id: 'icp', kind: 'icp' as const, number: '测试备案', verificationUrl: 'https://beian.miit.gov.cn/' }],
+  } },
+};
+beforeEach(() => {
+  vi.resetAllMocks();
+  vi.stubGlobal('fetch', fetchMock);
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  host = document.createElement('div'); document.body.append(host); root = createRoot(host);
+});
+afterEach(async () => { await act(() => root.unmount()); host.remove(); vi.unstubAllGlobals(); });
+
+async function render(user: ZlooksRscShellContext['user']) {
+  await act(() => root.render(<BlogFrame navigationPages={[]} shell={{
+    user, origin: 'https://theme.example', pathname: '/blog',
+    navigation: [{ key: 'blog:home', label: '博客', href: '/blog', order: 1 }, { key: 'other', label: '其他功能', href: '/other', order: 2 }],
+  }} site={site}><p>页面内容</p></BlogFrame>));
+}
+function button(label: string) {
+  const found = [...document.querySelectorAll('button')].find((item) => item.getAttribute('aria-label') === label || item.textContent?.trim() === label);
+  expect(found, label).toBeDefined();
+  return found!;
+}
+const authenticated = { status: 'authenticated' as const, user: { label: '测试读者', avatarText: '读' }, accountHref: '/account', logoutHref: '/api/user/logout' };
+
+describe('shared UI shell', () => {
+  it('uses Host navigation and site legal data without an initialization fetch', async () => {
+    await render({ status: 'anonymous', loginMethods: [] });
+    expect(host.querySelector('nav a[href="/other"]')?.textContent).toBe('其他功能');
+    expect(host.querySelectorAll('nav a[href="/blog"]')).toHaveLength(1);
+    expect(host.querySelector('nav a[aria-current="page"]')?.getAttribute('href')).toBe('/blog');
+    expect(host.querySelector('footer')?.textContent).toContain('测试版权');
+    expect(host.querySelector('footer a')?.textContent).toBe('测试备案');
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('opens real shared login methods and navigates through the Host port', async () => {
+    await render({ status: 'anonymous', loginMethods: [{ id: 'password', label: '密码登录', href: '/auth.password' }] });
+    await act(() => button('登录').click());
+    const link = document.querySelector<HTMLAnchorElement>('a[href="/auth.password"]');
+    expect(link).not.toBeNull();
+    await act(() => link!.click());
+    expect(navigation.push).toHaveBeenCalledWith('/auth.password');
+  });
+
+  it('disables account access when the upstream is unavailable', async () => {
+    await render({ status: 'unavailable' });
+    expect(button('账户服务暂不可用').disabled).toBe(true);
+    expect(document.querySelector('[aria-label="登录"]')).toBeNull();
+  });
+
+  it('switches light, dark and system preference through the shared hook', async () => {
+    await render({ status: 'unavailable' });
+    for (const [label, mode] of [['浅色', 'light'], ['深色', 'dark'], ['自动', 'default']] as const) {
+      const control = [...host.querySelectorAll('label')].find((item) => item.textContent === label);
+      expect(control).toBeDefined();
+      await act(() => control!.click());
+      expect(window.localStorage.getItem('zlooks.theme')).toBe(mode);
+      expect(control!.querySelector<HTMLInputElement>('input')?.checked).toBe(true);
+    }
+  });
+
+  it('opens the account menu and confirms logout before requesting and refreshing', async () => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({ code: 0, data: {} }), { status: 200 }));
+    await render(authenticated);
+    await act(() => button('打开测试读者的账户信息').click());
+    expect(document.querySelector('a[href="/account"]')).not.toBeNull();
+    await act(() => button('退出登录').click());
+    expect(fetchMock).not.toHaveBeenCalled();
+    const dialog = [...document.querySelectorAll('[role="dialog"]')].find((item) => item.textContent?.includes('确认退出登录'));
+    expect(dialog?.textContent).toContain('确认退出登录');
+    await act(() => [...dialog!.querySelectorAll('button')].find((item) => item.textContent === '退出登录')!.click());
+    expect(fetchMock).toHaveBeenCalledWith('/api/user/logout', expect.objectContaining({ method: 'POST', credentials: 'same-origin' }));
+    expect(navigation.refresh).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps logout confirmation open and does not refresh when the server rejects it', async () => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({ code: 1, error: '退出暂不可用' }), { status: 503 }));
+    await render(authenticated);
+    await act(() => button('打开测试读者的账户信息').click());
+    await act(() => button('退出登录').click());
+    const dialog = [...document.querySelectorAll('[role="dialog"]')].find((item) => item.textContent?.includes('确认退出登录'))!;
+    await act(() => [...dialog.querySelectorAll('button')].find((item) => item.textContent === '退出登录')!.click());
+    expect(navigation.refresh).not.toHaveBeenCalled();
+    expect(document.body.textContent).toContain('退出暂不可用');
+    expect(dialog.isConnected).toBe(true);
+  });
+});

package/templates/blog-theme/test/theme-contract.test.ts.template

@@ -0,0 +1,43 @@
+import { readFile, readdir } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const root = resolve(import.meta.dirname, '..');
+
+describe('theme contract', () => {
+  it('keeps one SDK-owned boot composition root', async () => {
+    const services = await readdir(resolve(root, 'src/services'), { recursive: true });
+    expect(services.filter((path) => path.endsWith('.ts'))).toEqual(['blog-theme.boot.ts']);
+    const boot = await readFile(resolve(root, 'src/services/blog-theme.boot.ts'), 'utf8');
+    expect(boot).toContain('@zlooks.cn/blog-theme/runtime');
+    expect(boot).toContain('createBlogThemeBootService');
+  });
+
+  it('declares every Blog route', async () => {
+    const config = JSON.parse(await readFile(resolve(root, 'hile-rsc.json'), 'utf8')) as {
+      readonly pluginId: string;
+      readonly routes: readonly { readonly path: string }[];
+    };
+    expect(config.pluginId).toBe('blog');
+    expect(config.routes.map(({ path }) => path)).toEqual([
+      '/', '/posts/[slug]', '/archives', '/pages/[slug]', '/categories/[slug]', '/tags/[slug]', '/friends',
+    ]);
+  });
+
+  it('uses SDK-owned server data and client interactions', async () => {
+    const page = await readFile(resolve(root, 'src/plugin/page.tsx'), 'utf8');
+    const interactions = await readFile(resolve(root, 'src/plugin/blog-interactions.tsx'), 'utf8');
+    expect(page).toContain('createServiceBackedBlogThemeDataLoader');
+    expect(page).not.toMatch(/@zlooks\.cn\/blog-shared|loadService\(/);
+    expect(interactions).toContain('@zlooks.cn/blog-theme/client');
+    for (const method of ['searchPosts', 'likePost', 'unlikePost', 'listComments', 'createComment']) {
+      expect(interactions).toContain(method);
+    }
+  });
+
+  it('renders Markdown without raw HTML injection', async () => {
+    const interactions = await readFile(resolve(root, 'src/plugin/blog-interactions.tsx'), 'utf8');
+    expect(interactions).toContain('react-markdown');
+    expect(interactions).not.toContain('dangerouslySetInnerHTML');
+  });
+});

package/templates/blog-theme/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2024"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "test/**/*.ts", "test/**/*.tsx", "vitest.config.ts"],
+  "exclude": ["node_modules", "dist", ".hile-rsc"]
+}

package/templates/blog-theme/tsconfig.runtime.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2024",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["node"],
+    "verbatimModuleSyntax": true,
+    "declaration": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/plugin", "node_modules", "dist", ".hile-rsc", "test"]
+}

package/templates/blog-theme/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['test/**/*.test.{ts,tsx}'],
+    server: { deps: { inline: [/@zlooks\.cn\/ui/, /antd/, /@ant-design/, /@rc-component/] } },
+  },
+});