@object-ui/types 3.0.3 → 3.1.0

package/src/__tests__/dashboard-config.test.ts

@@ -0,0 +1,208 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Tests for DashboardConfig types and Zod validation schemas.
+ */
+import { describe, it, expect } from 'vitest';
+import type {
+  DashboardConfig,
+  DashboardWidgetConfig,
+  DashboardColorVariant,
+  DashboardWidgetType,
+} from '../designer';
+import {
+  DashboardConfigSchema,
+  DashboardWidgetConfigSchema,
+} from '../zod/index.zod';
+
+describe('DashboardConfig TypeScript Types', () => {
+  it('should accept a minimal DashboardConfig', () => {
+    const config: DashboardConfig = {};
+    expect(config).toBeDefined();
+  });
+
+  it('should accept a full DashboardConfig', () => {
+    const config: DashboardConfig = {
+      id: 'dash-1',
+      title: 'Sales Dashboard',
+      description: 'Overview of sales pipeline',
+      columns: 12,
+      gap: 16,
+      refreshInterval: 30,
+      widgets: [
+        {
+          id: 'w1',
+          title: 'Total Revenue',
+          type: 'metric',
+          object: 'deals',
+          valueField: 'amount',
+          aggregate: 'sum',
+          colorVariant: 'success',
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+        },
+      ],
+      globalFilters: [['status', '=', 'active']],
+      dateRange: {
+        enabled: true,
+        field: 'created_at',
+        presets: ['today', 'this_week', 'this_month'],
+      },
+      userFilters: [
+        { field: 'region', label: 'Region', type: 'select' },
+      ],
+      showHeader: true,
+      showFilters: true,
+      showDateRange: true,
+      headerActions: [
+        { label: 'Export', action: 'export', icon: 'Download', variant: 'outline' },
+      ],
+      aria: { label: 'Sales dashboard', description: 'Interactive sales overview' },
+    };
+    expect(config.widgets).toHaveLength(1);
+    expect(config.widgets![0].type).toBe('metric');
+  });
+
+  it('should allow DashboardWidgetType values', () => {
+    const types: DashboardWidgetType[] = [
+      'metric', 'bar', 'line', 'pie', 'donut', 'area', 'scatter', 'table', 'list', 'custom',
+    ];
+    expect(types).toHaveLength(10);
+  });
+
+  it('should allow DashboardColorVariant values', () => {
+    const colors: DashboardColorVariant[] = [
+      'default', 'blue', 'teal', 'orange', 'purple', 'success', 'warning', 'danger',
+    ];
+    expect(colors).toHaveLength(8);
+  });
+
+  it('should allow DashboardWidgetConfig with all properties', () => {
+    const widget: DashboardWidgetConfig = {
+      id: 'w1',
+      title: 'Revenue Chart',
+      description: 'Monthly revenue',
+      type: 'bar',
+      object: 'deals',
+      filter: [['status', '=', 'closed']],
+      categoryField: 'month',
+      valueField: 'amount',
+      aggregate: 'sum',
+      chartConfig: { stacked: true },
+      colorVariant: 'blue',
+      layout: { x: 0, y: 0, w: 6, h: 4 },
+      actionUrl: '/deals',
+    };
+    expect(widget.id).toBe('w1');
+  });
+});
+
+describe('DashboardConfig Zod Validation', () => {
+  it('should validate a minimal DashboardConfig', () => {
+    const result = DashboardConfigSchema.safeParse({});
+    expect(result.success).toBe(true);
+  });
+
+  it('should validate a complete DashboardConfig', () => {
+    const result = DashboardConfigSchema.safeParse({
+      id: 'dash-1',
+      title: 'Sales Dashboard',
+      description: 'Overview of sales pipeline',
+      columns: 12,
+      gap: 16,
+      refreshInterval: 30,
+      widgets: [
+        {
+          id: 'w1',
+          title: 'Total Revenue',
+          type: 'metric',
+          colorVariant: 'success',
+          layout: { x: 0, y: 0, w: 3, h: 2 },
+        },
+      ],
+      showHeader: true,
+      showFilters: true,
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should reject invalid column count', () => {
+    const result = DashboardConfigSchema.safeParse({ columns: 0 });
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject negative gap', () => {
+    const result = DashboardConfigSchema.safeParse({ gap: -1 });
+    expect(result.success).toBe(false);
+  });
+
+  it('should validate DashboardWidgetConfigSchema', () => {
+    const result = DashboardWidgetConfigSchema.safeParse({
+      id: 'w1',
+      title: 'Revenue',
+      type: 'bar',
+      object: 'deals',
+      colorVariant: 'blue',
+      layout: { x: 0, y: 0, w: 6, h: 4 },
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should reject DashboardWidgetConfigSchema without id', () => {
+    const result = DashboardWidgetConfigSchema.safeParse({
+      title: 'Revenue',
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject invalid colorVariant', () => {
+    const result = DashboardWidgetConfigSchema.safeParse({
+      id: 'w1',
+      colorVariant: 'invalid-color',
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('should validate dateRange configuration', () => {
+    const result = DashboardConfigSchema.safeParse({
+      dateRange: {
+        enabled: true,
+        field: 'created_at',
+        presets: ['today', 'this_week'],
+      },
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should validate userFilters configuration', () => {
+    const result = DashboardConfigSchema.safeParse({
+      userFilters: [
+        { field: 'region', label: 'Region', type: 'select' },
+        { field: 'status' },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should validate headerActions configuration', () => {
+    const result = DashboardConfigSchema.safeParse({
+      headerActions: [
+        { label: 'Export', action: 'export', icon: 'Download', variant: 'outline' },
+        { label: 'Refresh' },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it('should validate aria accessibility attributes', () => {
+    const result = DashboardConfigSchema.safeParse({
+      aria: { label: 'Sales dashboard', description: 'Interactive overview' },
+    });
+    expect(result.success).toBe(true);
+  });
+});

package/src/__tests__/examples-metadata-compliance.test.ts

@@ -0,0 +1,264 @@
+/**
+ * Examples Metadata Spec Compliance Tests
+ *
+ * Validates that all defineStack configurations in examples/ conform to the
+ * ObjectStack spec protocol. Ensures required fields are present and correctly
+ * typed across objects, views, dashboards, pages, apps, and manifests.
+ */
+import { describe, it, expect } from 'vitest';
+import { ObjectStackDefinitionSchema } from '@objectstack/spec';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Validate a defineStack result against the Zod schema */
+function expectValidStack(config: unknown, name: string) {
+  const result = ObjectStackDefinitionSchema.safeParse(config);
+  if (!result.success) {
+    const issues = result.error.issues.map(
+      (i) => `  [${i.path.join('.')}] ${i.message}`
+    );
+    throw new Error(
+      `${name} failed spec validation:\n${issues.join('\n')}`
+    );
+  }
+  expect(result.success).toBe(true);
+}
+
+// ---------------------------------------------------------------------------
+// Structural helpers — verify required keys exist on metadata objects
+// ---------------------------------------------------------------------------
+
+function assertDashboards(dashboards: any[], label: string) {
+  for (const d of dashboards) {
+    expect(d).toHaveProperty('name');
+    expect(d).toHaveProperty('label');
+    expect(d).toHaveProperty('description');
+    expect(Array.isArray(d.widgets)).toBe(true);
+
+    for (const w of d.widgets) {
+      // defineStack normalizes widgets — id may be stripped, but title/type/layout should remain
+      expect(w).toHaveProperty('title');
+      expect(w).toHaveProperty('type');
+      expect(w).toHaveProperty('layout');
+    }
+  }
+}
+
+function assertManifest(manifest: any) {
+  expect(manifest).toHaveProperty('id');
+  expect(manifest).toHaveProperty('version');
+  expect(manifest).toHaveProperty('type', 'app');
+  expect(manifest).toHaveProperty('name');
+  expect(manifest).toHaveProperty('description');
+}
+
+function assertNavigation(items: any[]) {
+  for (const item of items) {
+    expect(item).toHaveProperty('id');
+    expect(item).toHaveProperty('type');
+    expect(item).toHaveProperty('label');
+    if (item.children) {
+      assertNavigation(item.children);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('Example: todo', () => {
+  let config: any;
+
+  it('should import cleanly', async () => {
+    const mod = await import('../../../../examples/todo/objectstack.config');
+    config = mod.default;
+    expect(config).toBeDefined();
+  });
+
+  it('should pass ObjectStackDefinitionSchema validation', () => {
+    expectValidStack(config, 'todo');
+  });
+
+  it('should have explicit views', () => {
+    expect(Array.isArray(config.views)).toBe(true);
+    expect(config.views.length).toBeGreaterThan(0);
+  });
+
+  it('objects should have name, label, and fields', () => {
+    for (const obj of config.objects) {
+      expect(obj).toHaveProperty('name');
+      expect(obj).toHaveProperty('label');
+      expect(obj).toHaveProperty('fields');
+    }
+  });
+
+  it('dashboards should have name, label, description, and valid widgets', () => {
+    assertDashboards(config.dashboards, 'todo');
+  });
+
+  it('pages should have name, label, type, and regions', () => {
+    for (const page of config.pages ?? []) {
+      expect(page).toHaveProperty('name');
+      expect(page).toHaveProperty('label');
+      expect(page).toHaveProperty('type');
+      expect(page).toHaveProperty('regions');
+    }
+  });
+
+  it('manifest should have required fields', () => {
+    assertManifest(config.manifest);
+  });
+
+  it('apps navigation items should have id/type/label', () => {
+    for (const app of config.apps) {
+      assertNavigation(app.navigation ?? []);
+    }
+  });
+});
+
+describe('Example: kitchen-sink', () => {
+  let config: any;
+
+  it('should import cleanly', async () => {
+    const mod = await import(
+      '../../../../examples/kitchen-sink/objectstack.config'
+    );
+    config = mod.default;
+    expect(config).toBeDefined();
+  });
+
+  it('should pass ObjectStackDefinitionSchema validation', () => {
+    expectValidStack(config, 'kitchen-sink');
+  });
+
+  it('objects should have name, label, and fields', () => {
+    for (const obj of config.objects) {
+      expect(obj).toHaveProperty('name');
+      expect(obj).toHaveProperty('label');
+      expect(obj).toHaveProperty('fields');
+    }
+  });
+
+  it('should have explicit views', () => {
+    expect(Array.isArray(config.views)).toBe(true);
+    expect(config.views.length).toBeGreaterThan(0);
+  });
+
+  it('dashboards should have name, label, description, and valid widgets', () => {
+    assertDashboards(config.dashboards, 'kitchen-sink');
+  });
+
+  it('pages should have name, label, type, and regions', () => {
+    for (const page of config.pages ?? []) {
+      expect(page).toHaveProperty('name');
+      expect(page).toHaveProperty('label');
+      expect(page).toHaveProperty('type');
+      expect(page).toHaveProperty('regions');
+    }
+  });
+
+  it('manifest should have required fields', () => {
+    assertManifest(config.manifest);
+  });
+
+  it('apps navigation items should have id/type/label', () => {
+    for (const app of config.apps) {
+      assertNavigation(app.navigation ?? []);
+    }
+  });
+});
+
+describe('Example: crm', () => {
+  let config: any;
+
+  it('should import cleanly', async () => {
+    const mod = await import('../../../../examples/crm/objectstack.config');
+    config = mod.default;
+    expect(config).toBeDefined();
+  });
+
+  it('should pass ObjectStackDefinitionSchema validation', () => {
+    expectValidStack(config, 'crm');
+  });
+
+  it('objects should have name, label, and fields', () => {
+    for (const obj of config.objects) {
+      expect(obj).toHaveProperty('name');
+      expect(obj).toHaveProperty('label');
+      expect(obj).toHaveProperty('fields');
+    }
+  });
+
+  it('should have explicit views', () => {
+    expect(Array.isArray(config.views)).toBe(true);
+    expect(config.views.length).toBeGreaterThan(0);
+  });
+
+  it('dashboards should have name, label, description, and valid widgets', () => {
+    assertDashboards(config.dashboards, 'crm');
+  });
+
+  it('pages should have name, label, type, and regions', () => {
+    for (const page of config.pages ?? []) {
+      expect(page).toHaveProperty('name');
+      expect(page).toHaveProperty('label');
+      expect(page).toHaveProperty('type');
+      expect(page).toHaveProperty('regions');
+    }
+  });
+
+  it('manifest should have required fields', () => {
+    assertManifest(config.manifest);
+  });
+
+  it('apps navigation items should have id/type/label', () => {
+    for (const app of config.apps) {
+      assertNavigation(app.navigation ?? []);
+    }
+  });
+});
+
+describe('Example: msw-todo', () => {
+  let config: any;
+
+  it('should import cleanly', async () => {
+    const mod = await import(
+      '../../../../examples/msw-todo/objectstack.config'
+    );
+    config = mod.default;
+    expect(config).toBeDefined();
+  });
+
+  it('should pass ObjectStackDefinitionSchema validation', () => {
+    expectValidStack(config, 'msw-todo');
+  });
+
+  it('should have explicit views', () => {
+    expect(Array.isArray(config.views)).toBe(true);
+    expect(config.views.length).toBeGreaterThan(0);
+  });
+
+  it('objects should use ObjectSchema.create (have normalized defaults)', () => {
+    for (const obj of config.objects) {
+      // ObjectSchema.create populates normalized defaults like active, isSystem, datasource
+      expect(obj).toHaveProperty('name');
+      expect(obj).toHaveProperty('label');
+      expect(obj).toHaveProperty('fields');
+      expect(obj).toHaveProperty('active', true);
+      expect(obj).toHaveProperty('datasource', 'default');
+    }
+  });
+
+  it('manifest should have required fields', () => {
+    assertManifest(config.manifest);
+  });
+
+  it('apps navigation items should have id/type/label', () => {
+    for (const app of config.apps) {
+      assertNavigation(app.navigation ?? []);
+    }
+  });
+});