nebula-cms 0.1.0

package/tests/client/components/editor/EditorTabs.test.ts

@@ -0,0 +1,253 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import EditorTabs from '../../../../src/client/components/editor/EditorTabs.svelte';
+
+/**
+ * Tests for the EditorTabs component.
+ * Mocks schema-utils and editor.svelte to control tab data without
+ * triggering Svelte 5 rune initialization in the jsdom environment.
+ */
+
+// vi.hoisted ensures these declarations are available when vi.mock factories run,
+// since vi.mock calls are hoisted to the top of the file by Vitest.
+const { mockActiveTab, mockSetActiveTab, mockExtractTabs, mockEditorFile } =
+  vi.hoisted(() => ({
+    mockActiveTab: vi.fn(() => 'metadata'),
+    mockSetActiveTab: vi.fn(),
+    mockExtractTabs: vi.fn(() => [] as string[]),
+    mockEditorFile: vi.fn(() => null),
+  }));
+
+vi.mock('../../../../src/client/js/utils/schema-utils', () => ({
+  extractTabs: mockExtractTabs,
+}));
+
+vi.mock('../../../../src/client/js/editor/editor.svelte', () => ({
+  editor: {
+    get tab() {
+      return mockActiveTab();
+    },
+    get data() {
+      return {};
+    },
+    get originalFilename() {
+      return '';
+    },
+  },
+  setActiveTab: mockSetActiveTab,
+  getEditorFile: mockEditorFile,
+}));
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('EditorTabs', () => {
+  /*
+  //////////////////////////////
+  // Default tabs
+  //////////////////////////////
+  */
+
+  it('always renders the Metadata and Body tabs', () => {
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels).toContain('Metadata');
+    expect(labels).toContain('Body');
+  });
+
+  it('renders Metadata before Body in tab order', () => {
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels.indexOf('Metadata')).toBeLessThan(labels.indexOf('Body'));
+  });
+
+  /*
+  //////////////////////////////
+  // Schema-derived custom tabs
+  //////////////////////////////
+  */
+
+  it('renders custom tabs returned by extractTabs', () => {
+    mockExtractTabs.mockReturnValueOnce(['seo', 'social']);
+
+    const { container } = render(EditorTabs, {
+      props: {
+        schema: {
+          properties: {
+            seoTitle: { type: 'string', tab: ['seo'] },
+            ogImage: { type: 'string', tab: ['social'] },
+          },
+        },
+      },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels).toContain('Seo');
+    expect(labels).toContain('Social');
+  });
+
+  it('capitalizes custom tab labels', () => {
+    mockExtractTabs.mockReturnValueOnce(['advanced']);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: { properties: {} } },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+    expect(labels).toContain('Advanced');
+  });
+
+  it('renders no custom tabs when schema is null', () => {
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = container.querySelectorAll('.tabs__tab');
+    // Only Metadata and Body should be present
+    expect(buttons.length).toBe(2);
+  });
+
+  /*
+  //////////////////////////////
+  // Active tab state
+  //////////////////////////////
+  */
+
+  it('marks the active tab with tabs__tab--active class', () => {
+    mockActiveTab.mockReturnValue('body');
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const active = buttons.find((b) =>
+      b.classList.contains('tabs__tab--active'),
+    );
+
+    expect(active?.textContent?.trim()).toBe('Body');
+  });
+
+  it('sets aria-selected="true" on the active tab', () => {
+    mockActiveTab.mockReturnValue('metadata');
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const activeBtn = buttons.find(
+      (b) => b.getAttribute('aria-selected') === 'true',
+    );
+
+    expect(activeBtn?.textContent?.trim()).toBe('Metadata');
+  });
+
+  /*
+  //////////////////////////////
+  // Click interaction
+  //////////////////////////////
+  */
+
+  it('calls setActiveTab with the clicked tab identifier', async () => {
+    mockSetActiveTab.mockClear();
+    mockActiveTab.mockReturnValue('metadata');
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(
+      container.querySelectorAll('.tabs__tab'),
+    ) as HTMLButtonElement[];
+    const bodyBtn = buttons.find((b) => b.textContent?.trim() === 'Body')!;
+    await fireEvent.click(bodyBtn);
+
+    expect(mockSetActiveTab).toHaveBeenCalledOnce();
+    expect(mockSetActiveTab).toHaveBeenCalledWith('body');
+  });
+
+  it('calls setActiveTab with "metadata" when the Metadata tab is clicked', async () => {
+    mockSetActiveTab.mockClear();
+    mockActiveTab.mockReturnValue('body');
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(
+      container.querySelectorAll('.tabs__tab'),
+    ) as HTMLButtonElement[];
+    const metaBtn = buttons.find((b) => b.textContent?.trim() === 'Metadata')!;
+    await fireEvent.click(metaBtn);
+
+    expect(mockSetActiveTab).toHaveBeenCalledWith('metadata');
+  });
+
+  /*
+  //////////////////////////////
+  // Body tab visibility by file type
+  //////////////////////////////
+  */
+
+  it('shows the Body tab when the open file is a .md file', () => {
+    mockEditorFile.mockReturnValueOnce({ filename: 'post.md' });
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels).toContain('Body');
+  });
+
+  it('hides the Body tab when the open file is a .json file', () => {
+    mockEditorFile.mockReturnValueOnce({ filename: 'data.json' });
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels).not.toContain('Body');
+  });
+
+  it('shows the Body tab when no file is open (fallback default)', () => {
+    mockEditorFile.mockReturnValueOnce(null);
+    mockExtractTabs.mockReturnValueOnce([]);
+
+    const { container } = render(EditorTabs, {
+      props: { schema: null },
+    });
+
+    const buttons = Array.from(container.querySelectorAll('.tabs__tab'));
+    const labels = buttons.map((b) => b.textContent?.trim());
+
+    expect(labels).toContain('Body');
+  });
+});

package/tests/client/components/editor/EditorToolbar.test.ts

@@ -0,0 +1,252 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, fireEvent } from '@testing-library/svelte';
+import EditorToolbar from '../../../../src/client/components/editor/EditorToolbar.svelte';
+import { makeEditorFile } from './fixtures';
+
+/**
+ * Tests for the EditorToolbar component.
+ * The component imports state modules directly rather than receiving props,
+ * so we mock each module to control rendering and verify interactions.
+ */
+
+// vi.hoisted ensures these declarations are available when vi.mock factories run,
+// since vi.mock calls are hoisted to the top of the file by Vitest.
+const {
+  mockGetEditorFile,
+  mockHandleSave,
+  mockHandlePublish,
+  mockOpenDialog,
+  mockComputePublishDisabled,
+} = vi.hoisted(() => ({
+  mockGetEditorFile: vi.fn(),
+  mockHandleSave: vi.fn(),
+  mockHandlePublish: vi.fn(() => Promise.resolve({ status: 'ok' as const })),
+  mockOpenDialog: vi.fn(),
+  mockComputePublishDisabled: vi.fn(() => false),
+}));
+
+vi.mock('../../../../src/client/js/editor/editor.svelte', () => ({
+  getEditorFile: mockGetEditorFile,
+}));
+
+vi.mock('../../../../src/client/js/state/router.svelte', () => ({
+  nav: {
+    get route() {
+      return { view: 'file', collection: 'posts', slug: 'hello' };
+    },
+  },
+}));
+
+vi.mock('../../../../src/client/js/state/schema.svelte', () => ({
+  schema: {
+    get active() {
+      return null;
+    },
+  },
+}));
+
+vi.mock('../../../../src/client/js/handlers/admin', () => ({
+  handleSave: mockHandleSave,
+  handlePublish: mockHandlePublish,
+  computePublishDisabled: mockComputePublishDisabled,
+}));
+
+vi.mock('../../../../src/client/js/state/dialogs.svelte', () => ({
+  dialog: {
+    open: mockOpenDialog,
+  },
+}));
+
+// Prevent accumulated renders from bleeding between tests
+afterEach(() => cleanup());
+
+describe('EditorToolbar', () => {
+  /*
+  //////////////////////////////
+  // Renders when file is open
+  //////////////////////////////
+  */
+
+  it('renders the toolbar header when a file is open', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.toolbar')).not.toBeNull();
+  });
+
+  it('renders nothing when no file is open', () => {
+    mockGetEditorFile.mockReturnValue(null);
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.toolbar')).toBeNull();
+  });
+
+  /*
+  //////////////////////////////
+  // Title display
+  //////////////////////////////
+  */
+
+  it('shows the title from formData when present', () => {
+    mockGetEditorFile.mockReturnValue(
+      makeEditorFile({ formData: { title: 'My Great Post' } }),
+    );
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.toolbar__title')?.textContent).toContain(
+      'My Great Post',
+    );
+  });
+
+  it('falls back to the filename when formData has no title', () => {
+    mockGetEditorFile.mockReturnValue(
+      makeEditorFile({ filename: 'my-post.md' }),
+    );
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.toolbar__title')?.textContent).toContain(
+      'my-post.md',
+    );
+  });
+
+  it('shows "Untitled Draft" when there is no title and no filename', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ filename: '' }));
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.toolbar__title')?.textContent).toContain(
+      'Untitled Draft',
+    );
+  });
+
+  /*
+  //////////////////////////////
+  // Save button
+  //////////////////////////////
+  */
+
+  it('renders the Save button', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+
+    const { container } = render(EditorToolbar);
+
+    const saveBtn = container.querySelector('.btn--save-outline');
+    expect(saveBtn).not.toBeNull();
+  });
+
+  it('disables Save when file is not dirty', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ dirty: false }));
+
+    const { container } = render(EditorToolbar);
+
+    const saveBtn = container.querySelector(
+      '.btn--save-outline',
+    ) as HTMLButtonElement;
+    expect(saveBtn?.disabled).toBe(true);
+  });
+
+  it('calls handleSave when the Save button is clicked', async () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ dirty: true }));
+
+    const { container } = render(EditorToolbar);
+
+    await fireEvent.click(container.querySelector('.btn--save-outline')!);
+    expect(mockHandleSave).toHaveBeenCalledOnce();
+  });
+
+  /*
+  //////////////////////////////
+  // Publish button
+  //////////////////////////////
+  */
+
+  it('renders the Publish button', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.btn--primary')).not.toBeNull();
+  });
+
+  it('disables the Publish button when computePublishDisabled returns true', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+    mockComputePublishDisabled.mockReturnValue(true);
+
+    const { container } = render(EditorToolbar);
+
+    const publishBtn = container.querySelector(
+      '.btn--primary',
+    ) as HTMLButtonElement;
+    expect(publishBtn?.disabled).toBe(true);
+
+    mockComputePublishDisabled.mockReturnValue(false);
+  });
+
+  it('enables the Publish button when not disabled and not saving', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ saving: false }));
+    mockComputePublishDisabled.mockReturnValue(false);
+
+    const { container } = render(EditorToolbar);
+
+    const publishBtn = container.querySelector(
+      '.btn--primary',
+    ) as HTMLButtonElement;
+    expect(publishBtn?.disabled).toBe(false);
+  });
+
+  it('calls handlePublish when the Publish button is clicked', async () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+
+    const { container } = render(EditorToolbar);
+
+    await fireEvent.click(container.querySelector('.btn--primary')!);
+    expect(mockHandlePublish).toHaveBeenCalledOnce();
+  });
+
+  it('shows filename dialog when publish needs a filename', async () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile());
+    mockHandlePublish.mockResolvedValueOnce({ status: 'needs-filename' });
+
+    const { container } = render(EditorToolbar);
+
+    await fireEvent.click(container.querySelector('.btn--primary')!);
+    expect(mockOpenDialog).toHaveBeenCalledWith('filename');
+  });
+
+  /*
+  //////////////////////////////
+  // Delete Draft button
+  //////////////////////////////
+  */
+
+  it('renders the Delete Draft button when draftId is set', () => {
+    mockGetEditorFile.mockReturnValue(
+      makeEditorFile({ draftId: 'draft-abc-123' }),
+    );
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.btn--danger-outline')).not.toBeNull();
+  });
+
+  it('does not render the Delete Draft button when draftId is null', () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ draftId: null }));
+
+    const { container } = render(EditorToolbar);
+
+    expect(container.querySelector('.btn--danger-outline')).toBeNull();
+  });
+
+  it('calls showDeleteDialog when the Delete Draft button is clicked', async () => {
+    mockGetEditorFile.mockReturnValue(makeEditorFile({ draftId: 'draft-abc' }));
+
+    const { container } = render(EditorToolbar);
+
+    await fireEvent.click(container.querySelector('.btn--danger-outline')!);
+    expect(mockOpenDialog).toHaveBeenCalledWith('delete');
+  });
+});

package/tests/client/components/editor/fixtures.ts

@@ -0,0 +1,31 @@
+/* Shared test fixtures for editor component tests. */
+
+/**
+ * Builds a minimal EditorFile fixture with sensible defaults.
+ * @param {Partial<Record<string, unknown>>} overrides - Fields to override on the default file
+ * @return {Record<string, unknown>} A minimal EditorFile-like object
+ */
+export function makeEditorFile(
+  overrides: Partial<{
+    filename: string;
+    dirty: boolean;
+    saving: boolean;
+    draftId: string | null;
+    formData: Record<string, unknown>;
+    body: string;
+    bodyLoaded: boolean;
+    isNewDraft: boolean;
+  }> = {},
+) {
+  return {
+    filename: 'my-post.md',
+    dirty: false,
+    saving: false,
+    draftId: null,
+    formData: {},
+    body: '',
+    bodyLoaded: true,
+    isNewDraft: false,
+    ...overrides,
+  };
+}