objectui/packages/plugin-editor/src/index.test.ts at cfdfca2f5b671ce2b537f3b19d924badcccfc32d · objectstack-ai/objectui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { describe, it, expect, beforeAll } from 'vitest';
import { ComponentRegistry } from '@object-ui/core';

describe('Plugin Editor', () => {
  // Import all renderers to register them
  beforeAll(async () => {
    await import('./index');
  });

  describe('code-editor component', () => {
    it('should be registered in ComponentRegistry', () => {
      const editorRenderer = ComponentRegistry.get('code-editor');
      expect(editorRenderer).toBeDefined();
    });

    it('should have proper metadata', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      expect(config).toBeDefined();
      expect(config?.label).toBe('Code Editor');
      expect(config?.category).toBe('plugin');
      expect(config?.inputs).toBeDefined();
      expect(config?.defaultProps).toBeDefined();
    });

    it('should have expected inputs', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      const inputNames = config?.inputs?.map((input: any) => input.name) || [];

      expect(inputNames).toContain('value');
      expect(inputNames).toContain('language');
      expect(inputNames).toContain('theme');
      expect(inputNames).toContain('height');
      expect(inputNames).toContain('readOnly');
    });

    it('should have language as enum input', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      const languageInput = config?.inputs?.find((input: any) => input.name === 'language');

      expect(languageInput).toBeDefined();
      expect(languageInput?.type).toBe('enum');
      expect(languageInput?.enum).toBeDefined();
      expect(Array.isArray(languageInput?.enum)).toBe(true);

      const enumValues = languageInput?.enum || [];
      expect(enumValues).toContain('javascript');
      expect(enumValues).toContain('typescript');
      expect(enumValues).toContain('python');
      expect(enumValues).toContain('json');
      expect(enumValues).toContain('html');
      expect(enumValues).toContain('css');
    });

    it('should have theme as enum input', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      const themeInput = config?.inputs?.find((input: any) => input.name === 'theme');

      expect(themeInput).toBeDefined();
      expect(themeInput?.type).toBe('enum');
      expect(themeInput?.enum).toBeDefined();
      expect(Array.isArray(themeInput?.enum)).toBe(true);

      const enumValues = themeInput?.enum || [];
      expect(enumValues).toContain('vs-dark');
      expect(enumValues).toContain('light');
    });

    it('should have sensible default props', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      const defaults = config?.defaultProps;

      expect(defaults).toBeDefined();
      expect(defaults?.value).toBeDefined();
      expect(typeof defaults?.value).toBe('string');
      expect(defaults?.language).toBe('javascript');
      expect(defaults?.theme).toBe('vs-dark');
      expect(defaults?.height).toBe('400px');
      expect(defaults?.readOnly).toBe(false);
    });

    it('should have readOnly as boolean input', () => {
      const config = ComponentRegistry.getConfig('code-editor');
      const readOnlyInput = config?.inputs?.find((input: any) => input.name === 'readOnly');

      expect(readOnlyInput).toBeDefined();
      expect(readOnlyInput?.type).toBe('boolean');
      expect(readOnlyInput?.defaultValue).toBe(false);
    });
  });
});