nebula-cms 0.1.0

package/tests/e2e/helpers/mock-adapter.ts

@@ -0,0 +1,166 @@
+import { vi } from 'vitest';
+import type {
+  FileEntry,
+  FileWrite,
+  StorageAdapter,
+} from '../../../src/client/js/storage/adapter';
+
+//////////////////////////////
+// Sample content for pre-populated collections
+//////////////////////////////
+
+/** Sample posts used to pre-populate the mock adapter. */
+const SAMPLE_POSTS: FileEntry[] = [
+  {
+    filename: 'hello-world.md',
+    content: [
+      '---',
+      'title: Hello World',
+      'published: 2024-01-15T10:00:00Z',
+      'draft: false',
+      '---',
+      '',
+      'Welcome to the blog. This is the first post.',
+    ].join('\n'),
+  },
+  {
+    filename: 'second-post.md',
+    content: [
+      '---',
+      'title: Second Post',
+      'published: 2024-02-20T14:30:00Z',
+      'draft: false',
+      '---',
+      '',
+      'This is the second post with more content.',
+    ].join('\n'),
+  },
+  {
+    filename: 'draft-ideas.md',
+    content: [
+      '---',
+      'title: Draft Ideas',
+      'published: 2024-03-01T09:00:00Z',
+      'draft: true',
+      '---',
+      '',
+      'Some ideas for future posts.',
+    ].join('\n'),
+  },
+];
+
+/** Sample pages for a second collection. */
+const SAMPLE_PAGES: FileEntry[] = [
+  {
+    filename: 'about.md',
+    content: ['---', 'title: About', '---', '', 'This is the about page.'].join(
+      '\n',
+    ),
+  },
+];
+
+/**
+ * Creates an in-memory StorageAdapter backed by a Map. Pre-populated with
+ * sample "posts" and "pages" collections containing markdown files with
+ * YAML frontmatter.
+ * @return {{ adapter: StorageAdapter, store: Map<string, Map<string, string>> }} The adapter and its backing store for assertions
+ */
+export function createMockAdapter(): {
+  adapter: StorageAdapter;
+  store: Map<string, Map<string, string>>;
+} {
+  // Outer map: collection name -> inner map (filename -> content)
+  const store = new Map<string, Map<string, string>>();
+
+  // Pre-populate posts
+  const postsMap = new Map<string, string>();
+  for (const entry of SAMPLE_POSTS) {
+    postsMap.set(entry.filename, entry.content);
+  }
+  store.set('posts', postsMap);
+
+  // Pre-populate pages
+  const pagesMap = new Map<string, string>();
+  for (const entry of SAMPLE_PAGES) {
+    pagesMap.set(entry.filename, entry.content);
+  }
+  store.set('pages', pagesMap);
+
+  /**
+   * Gets or creates the inner map for a collection.
+   * @param {string} collection - The collection name
+   * @return {Map<string, string>} The file map for the collection
+   */
+  function getCollection(collection: string): Map<string, string> {
+    let col = store.get(collection);
+    if (!col) {
+      col = new Map<string, string>();
+      store.set(collection, col);
+    }
+    return col;
+  }
+
+  const adapter: StorageAdapter = {
+    listFiles: vi.fn(
+      async (
+        collection: string,
+        extensions: string[],
+      ): Promise<FileEntry[]> => {
+        const col = store.get(collection);
+        if (!col) return [];
+        return Array.from(col.entries())
+          .filter(([filename]) =>
+            extensions.some((ext) => filename.endsWith(ext)),
+          )
+          .map(([filename, content]) => ({
+            filename,
+            content,
+          }));
+      },
+    ),
+
+    readFile: vi.fn(
+      async (collection: string, filename: string): Promise<string> => {
+        const col = store.get(collection);
+        if (!col) throw new Error(`Collection "${collection}" not found`);
+        const content = col.get(filename);
+        if (content === undefined)
+          throw new Error(`File "${filename}" not found in "${collection}"`);
+        return content;
+      },
+    ),
+
+    writeFile: vi.fn(
+      async (
+        collection: string,
+        filename: string,
+        content: string,
+      ): Promise<void> => {
+        const col = getCollection(collection);
+        col.set(filename, content);
+      },
+    ),
+
+    writeFiles: vi.fn(async (files: FileWrite[]): Promise<void> => {
+      for (const file of files) {
+        const col = getCollection(file.collection);
+        col.set(file.filename, file.content);
+      }
+    }),
+
+    deleteFile: vi.fn(
+      async (collection: string, filename: string): Promise<void> => {
+        const col = store.get(collection);
+        if (!col) throw new Error(`Collection "${collection}" not found`);
+        if (!col.has(filename))
+          throw new Error(`File "${filename}" not found in "${collection}"`);
+        col.delete(filename);
+      },
+    ),
+  };
+
+  return { adapter, store };
+}
+
+/** Exported sample data for test assertions. */
+export { SAMPLE_POSTS, SAMPLE_PAGES };

package/tests/e2e/helpers/test-app.ts

@@ -0,0 +1,155 @@
+import type { Mock } from 'vitest';
+
+//////////////////////////////
+// Mock state type
+//
+// Each test file creates its own mocks via vi.hoisted(). This type
+// describes the shape so helper functions can manipulate mock return
+// values without being tightly coupled to any single test file.
+// Mock names match the getter properties on the exported state objects
+// (backend, content, nav, schema, drafts, editor).
+//////////////////////////////
+
+/**
+ * Shape of the mocks object created by vi.hoisted() in each test file.
+ * Each field is a Vitest Mock function controlling a reactive export.
+ */
+export type E2EMocks = {
+  mockBackendReady: Mock<() => boolean>;
+  mockRoute: Mock;
+  mockCollections: Mock<() => string[]>;
+  mockContentList: Mock;
+  mockLoading: Mock<() => boolean>;
+  mockError: Mock<() => string | null>;
+  mockDrafts: Mock;
+  mockOutdatedMap: Mock<() => Record<string, boolean>>;
+  mockActiveTab: Mock<() => string>;
+  mockGetEditorFile: Mock;
+  mockSchema: Mock;
+  mockCollectionHasDates: Mock<() => boolean>;
+  mockComputePublishDisabled: Mock<() => boolean>;
+};
+
+/**
+ * Resets all mock return values to their disconnected defaults.
+ * Call in beforeEach() to avoid state leaking between tests.
+ * @param {E2EMocks} m - The mocks object to reset
+ * @return {void}
+ */
+export function resetMocks(m: E2EMocks): void {
+  m.mockBackendReady.mockReturnValue(false);
+  m.mockRoute.mockReturnValue({ view: 'home' });
+  m.mockCollections.mockReturnValue([]);
+  m.mockContentList.mockReturnValue([]);
+  m.mockLoading.mockReturnValue(false);
+  m.mockError.mockReturnValue(null);
+  m.mockDrafts.mockReturnValue([]);
+  m.mockOutdatedMap.mockReturnValue({});
+  m.mockActiveTab.mockReturnValue('metadata');
+  m.mockGetEditorFile.mockReturnValue(null);
+  m.mockSchema.mockReturnValue(null);
+  m.mockCollectionHasDates.mockReturnValue(false);
+  m.mockComputePublishDisabled.mockReturnValue(false);
+}
+
+/**
+ * Configures mocks to show the backend as connected with collections visible.
+ * @param {E2EMocks} m - The mocks object
+ * @param {string[]} collections - Collection names to show
+ * @return {void}
+ */
+export function configureConnected(
+  m: E2EMocks,
+  collections: string[] = ['pages', 'posts'],
+): void {
+  m.mockBackendReady.mockReturnValue(true);
+  m.mockCollections.mockReturnValue(collections);
+}
+
+/**
+ * Configures mocks to show a collection selected with content items.
+ * @param {E2EMocks} m - The mocks object
+ * @param {string} collection - The active collection name
+ * @param {Array<{ filename: string, data: Record<string, unknown> }>} items - Content items
+ * @return {void}
+ */
+export function configureCollection(
+  m: E2EMocks,
+  collection: string,
+  items: Array<{ filename: string; data: Record<string, unknown> }> = [],
+): void {
+  configureConnected(m);
+  m.mockRoute.mockReturnValue({ view: 'collection', collection });
+  m.mockContentList.mockReturnValue(items);
+}
+
+/**
+ * Configures mocks to show a file open in the editor.
+ * @param {E2EMocks} m - The mocks object
+ * @param {string} collection - The active collection
+ * @param {string} slug - The file slug (filename without extension)
+ * @param {{ filename: string, body: string, formData: Record<string, unknown>, dirty?: boolean, draftId?: string | null, isNewDraft?: boolean }} file - Editor file state
+ * @return {void}
+ */
+export function configureFileOpen(
+  m: E2EMocks,
+  collection: string,
+  slug: string,
+  file: {
+    filename: string;
+    body: string;
+    formData: Record<string, unknown>;
+    dirty?: boolean;
+    draftId?: string | null;
+    isNewDraft?: boolean;
+  },
+): void {
+  configureConnected(m);
+  m.mockRoute.mockReturnValue({ view: 'file', collection, slug });
+  m.mockContentList.mockReturnValue([
+    { filename: file.filename, data: file.formData },
+  ]);
+  m.mockGetEditorFile.mockReturnValue({
+    filename: file.filename,
+    body: file.body,
+    formData: file.formData,
+    dirty: file.dirty ?? false,
+    saving: false,
+    bodyLoaded: true,
+    draftId: file.draftId ?? null,
+    isNewDraft: file.isNewDraft ?? false,
+  });
+}
+
+/**
+ * Configures mocks to show a draft open in the editor.
+ * @param {E2EMocks} m - The mocks object
+ * @param {string} collection - The active collection
+ * @param {string} draftId - The draft UUID
+ * @param {{ body: string, formData: Record<string, unknown>, dirty?: boolean, filename?: string }} draft - Draft state
+ * @return {void}
+ */
+export function configureDraftOpen(
+  m: E2EMocks,
+  collection: string,
+  draftId: string,
+  draft: {
+    body: string;
+    formData: Record<string, unknown>;
+    dirty?: boolean;
+    filename?: string;
+  },
+): void {
+  configureConnected(m);
+  m.mockRoute.mockReturnValue({ view: 'draft', collection, draftId });
+  m.mockGetEditorFile.mockReturnValue({
+    filename: draft.filename ?? '',
+    body: draft.body,
+    formData: draft.formData,
+    dirty: draft.dirty ?? false,
+    saving: false,
+    bodyLoaded: true,
+    draftId,
+    isNewDraft: true,
+  });
+}

package/tests/e2e/navigation.test.ts

@@ -0,0 +1,358 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import {
+  resetMocks,
+  configureConnected,
+  configureCollection,
+  configureFileOpen,
+} from './helpers/test-app';
+
+/*
+//////////////////////////////
+// Hoisted mocks
+//////////////////////////////
+*/
+
+const mocks = vi.hoisted(() => ({
+  mockBackendReady: vi.fn(() => false),
+  mockRoute: vi.fn(() => ({ view: 'home' as const })),
+  mockCollections: vi.fn(() => [] as string[]),
+  mockContentList: vi.fn(
+    () => [] as Array<{ filename: string; data: Record<string, unknown> }>,
+  ),
+  mockLoading: vi.fn(() => false),
+  mockError: vi.fn(() => null as string | null),
+  mockDrafts: vi.fn(() => []),
+  mockOutdatedMap: vi.fn(() => ({}) as Record<string, boolean>),
+  mockActiveTab: vi.fn(() => 'metadata'),
+  mockGetEditorFile: vi.fn(() => null),
+  mockSchema: vi.fn(() => null),
+  mockCollectionHasDates: vi.fn(() => false),
+  mockComputePublishDisabled: vi.fn(() => false),
+}));
+
+/*
+//////////////////////////////
+// Module mocks
+//////////////////////////////
+*/
+
+vi.mock('virtual:nebula/collections', () => ({
+  default: {
+    pages: '/collections/pages.schema.json',
+    posts: '/collections/posts.schema.json',
+  },
+}));
+vi.mock('virtual:nebula/config', () => ({
+  default: { basePath: '/admin', collectionsPath: '/collections' },
+}));
+vi.mock('../../src/client/js/state/state.svelte', () => ({
+  backend: {
+    get type() {
+      return null;
+    },
+    get ready() {
+      return mocks.mockBackendReady();
+    },
+    get permission() {
+      return 'denied';
+    },
+  },
+  content: {
+    get list() {
+      return mocks.mockContentList();
+    },
+    get loading() {
+      return mocks.mockLoading();
+    },
+    get error() {
+      return mocks.mockError();
+    },
+  },
+  get collections() {
+    return mocks.mockCollections();
+  },
+  storageClient: null,
+  drafts: {
+    get all() {
+      return mocks.mockDrafts();
+    },
+    get outdated() {
+      return mocks.mockOutdatedMap();
+    },
+  },
+  restoreBackend: vi.fn(async () => {}),
+  loadCollection: vi.fn(),
+  reloadCollection: vi.fn(),
+  disconnect: vi.fn(),
+  refreshDrafts: vi.fn(async () => {}),
+  updateContentItem: vi.fn(),
+  pickDirectory: vi.fn(),
+  requestPermission: vi.fn(),
+  connectGitHub: vi.fn(async () => {}),
+}));
+vi.mock('../../src/client/js/state/router.svelte', () => ({
+  initRouter: vi.fn(),
+  nav: {
+    get route() {
+      return mocks.mockRoute();
+    },
+  },
+  navigate: vi.fn(),
+  registerDirtyChecker: vi.fn(),
+  adminPath: vi.fn((...segments) =>
+    segments.length === 0 ? '/admin' : '/admin/' + segments.join('/'),
+  ),
+}));
+vi.mock('../../src/client/js/state/schema.svelte', () => ({
+  fetchSchema: vi.fn(async () => {}),
+  schema: {
+    get active() {
+      return mocks.mockSchema();
+    },
+  },
+  clearSchema: vi.fn(),
+  prefetchAllSchemas: vi.fn(async () => {}),
+  collectionHasDates: mocks.mockCollectionHasDates,
+  getCollectionTitle: vi.fn(() => null),
+  getCollectionDescription: vi.fn(() => null),
+}));
+vi.mock('../../src/client/js/editor/editor.svelte', () => ({
+  preloadFile: vi.fn(async () => {}),
+  loadFileBody: vi.fn(async () => {}),
+  clearEditor: vi.fn(),
+  editor: {
+    get tab() {
+      return mocks.mockActiveTab();
+    },
+    get data() {
+      return {};
+    },
+    get originalFilename() {
+      return '';
+    },
+  },
+  setActiveTab: vi.fn(),
+  getEditorFile: mocks.mockGetEditorFile,
+  loadDraftById: vi.fn(async () => {}),
+  setFilename: vi.fn(),
+  updateBody: vi.fn(),
+  updateFormField: vi.fn(),
+  saveDraftToIDB: vi.fn(async () => {}),
+  saveFile: vi.fn(async () => {}),
+  publishFile: vi.fn(async () => {}),
+  deleteCurrentDraft: vi.fn(async () => {}),
+  applyEditorState: vi.fn(),
+  _getDraftState: vi.fn(() => ({})),
+  _setDraftState: vi.fn(),
+  changeFileFormat: vi.fn(),
+  setDefaultFormat: vi.fn(),
+}));
+vi.mock('../../src/client/js/handlers/admin', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('../../src/client/js/handlers/admin')>();
+  return {
+    ...actual,
+    handleSave: vi.fn(async () => {}),
+    handlePublish: vi.fn(async () => ({ status: 'ok' })),
+    handleDeleteDraft: vi.fn(async () => {}),
+    handleFilenameConfirm: vi.fn(async () => {}),
+    computePublishDisabled: mocks.mockComputePublishDisabled,
+    // Override buildCollectionItems to read from mockCollections — the
+    // module-level getter for `collections` is not a live binding in
+    // vitest's browser mode, so the real function would see an empty array.
+    buildCollectionItems: () =>
+      mocks.mockCollections().map((name: string) => ({
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        href: '/admin/' + name,
+      })),
+  };
+});
+vi.mock('../../src/client/js/utils/sort', () => ({
+  toSortDate: vi.fn(() => undefined),
+  readSortMode: vi.fn(() => 'alpha'),
+  writeSortMode: vi.fn(),
+  createComparator: vi.fn(() => () => 0),
+  SORT_MODES: {
+    alpha: { icon: 'sort_by_alpha', label: 'Alphabetical' },
+    'date-asc': { icon: 'hourglass_arrow_down', label: 'Oldest first' },
+    'date-desc': { icon: 'hourglass_arrow_up', label: 'Newest first' },
+  },
+  SORT_ORDER: ['alpha', 'date-asc', 'date-desc'],
+}));
+vi.mock('../../src/client/js/drafts/storage', () => ({
+  saveDraft: vi.fn(async () => {}),
+  getDraftByFile: vi.fn(async () => null),
+  loadDrafts: vi.fn(async () => []),
+  loadDraft: vi.fn(async () => null),
+  deleteDraft: vi.fn(async () => {}),
+}));
+vi.mock('../../src/client/js/utils/schema-utils', () => ({
+  extractTabs: vi.fn(() => []),
+  getFieldsForTab: vi.fn(() => []),
+  resolveFieldType: vi.fn(() => ({ kind: 'string' })),
+  createDefaultValue: vi.fn(() => ''),
+  getByPath: vi.fn(),
+  setByPath: vi.fn(),
+  isReadOnly: vi.fn(() => false),
+  isNullable: vi.fn(() => false),
+  getProperties: vi.fn(
+    (schema: Record<string, unknown>) => schema['properties'],
+  ),
+  getRequiredFields: vi.fn((schema: Record<string, unknown>) =>
+    Array.isArray(schema['required']) ? schema['required'] : [],
+  ),
+  getLabel: vi.fn((schema: Record<string, unknown>, name: string) =>
+    typeof schema['title'] === 'string' ? schema['title'] : name,
+  ),
+}));
+vi.mock('../../src/client/js/drafts/merge.svelte', () => ({
+  drafts: {
+    get all() {
+      return mocks.mockDrafts();
+    },
+    get outdated() {
+      return mocks.mockOutdatedMap();
+    },
+  },
+  mergeDrafts: vi.fn(async () => {}),
+  refreshDrafts: vi.fn(async () => {}),
+  resetDraftMerge: vi.fn(),
+}));
+
+vi.mock('../../src/client/js/state/theme.svelte', () => ({
+  initTheme: vi.fn(() => () => {}),
+  cycleTheme: vi.fn(),
+  theme: { resolved: 'dark', icon: 'brightness_auto', label: 'Auto' },
+}));
+vi.mock('../../src/client/js/state/dialogs.svelte', () => ({
+  dialog: {
+    get active() {
+      return null;
+    },
+    open: vi.fn(),
+    close: vi.fn(),
+  },
+}));
+
+import Admin from '../../src/client/Admin.svelte';
+
+afterEach(() => cleanup());
+beforeEach(() => resetMocks(mocks));
+
+describe('Navigation', () => {
+  it('shows both sidebars when a collection is selected', () => {
+    configureCollection(mocks, 'posts');
+
+    const { container } = render(Admin);
+
+    const sidebars = container.querySelectorAll('.sidebar');
+    expect(sidebars.length).toBe(2);
+  });
+
+  it('does not render editor area in collection view', () => {
+    configureCollection(mocks, 'posts');
+
+    const { container } = render(Admin);
+
+    expect(container.querySelector('.editor-area')).toBeNull();
+  });
+
+  it('shows content items in the collection sidebar', () => {
+    configureCollection(mocks, 'posts', [
+      { filename: 'hello-world.md', data: { title: 'Hello World' } },
+      { filename: 'second-post.md', data: { title: 'Second Post' } },
+    ]);
+
+    const { container } = render(Admin);
+
+    // Second sidebar has the content items
+    const sidebars = container.querySelectorAll('.sidebar');
+    const contentSidebar = sidebars[1];
+    const links = contentSidebar.querySelectorAll('.sidebar-link');
+    expect(links.length).toBe(2);
+  });
+
+  it('renders content item titles from frontmatter data', () => {
+    configureCollection(mocks, 'posts', [
+      { filename: 'hello.md', data: { title: 'Hello World' } },
+      { filename: 'bye.md', data: { title: 'Goodbye' } },
+    ]);
+
+    const { container } = render(Admin);
+
+    const sidebars = container.querySelectorAll('.sidebar');
+    const links = sidebars[1].querySelectorAll('.sidebar-link');
+    const labels = Array.from(links).map((el) =>
+      el.querySelector('.item-label-text')?.textContent?.trim(),
+    );
+    expect(labels).toContain('Hello World');
+    expect(labels).toContain('Goodbye');
+  });
+
+  it('falls back to filename when title is missing', () => {
+    configureCollection(mocks, 'posts', [
+      { filename: 'no-title.md', data: {} },
+    ]);
+
+    const { container } = render(Admin);
+
+    const sidebars = container.querySelectorAll('.sidebar');
+    const links = sidebars[1].querySelectorAll('.sidebar-link');
+    const label = links[0]
+      .querySelector('.item-label-text')
+      ?.textContent?.trim();
+    expect(label).toBe('no-title.md');
+  });
+
+  it('renders editor area when a file is open', () => {
+    configureFileOpen(mocks, 'posts', 'hello-world', {
+      filename: 'hello-world.md',
+      body: 'Hello content',
+      formData: { title: 'Hello World' },
+    });
+
+    const { container } = render(Admin);
+
+    expect(container.querySelector('.editor-area')).not.toBeNull();
+  });
+
+  it('applies admin--file-open class when editing a file', () => {
+    configureFileOpen(mocks, 'posts', 'hello-world', {
+      filename: 'hello-world.md',
+      body: 'Hello content',
+      formData: { title: 'Hello World' },
+    });
+
+    const { container } = render(Admin);
+
+    expect(container.querySelector('.admin--file-open')).not.toBeNull();
+  });
+
+  it('shows both sidebars and editor area in file view', () => {
+    configureFileOpen(mocks, 'posts', 'hello-world', {
+      filename: 'hello-world.md',
+      body: '',
+      formData: { title: 'Hello World' },
+    });
+
+    const { container } = render(Admin);
+
+    const sidebars = container.querySelectorAll('.sidebar');
+    expect(sidebars.length).toBe(2);
+    expect(container.querySelector('.editor-area')).not.toBeNull();
+  });
+
+  it('highlights active collection in the sidebar via aria-current', () => {
+    configureCollection(mocks, 'posts');
+    mocks.mockCollections.mockReturnValue(['pages', 'posts']);
+
+    const { container } = render(Admin);
+
+    // Active collection is marked with aria-current="page"
+    const activeLink = container.querySelector(
+      '.sidebar-link[aria-current="page"]',
+    );
+    expect(activeLink).not.toBeNull();
+  });
+});