objectui/packages/plugin-charts/src/index.test.ts at 10ec2d341a6eecaa610ff985daa1134f5a9b3e72 · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import { describe, it, expect, beforeAll } from 'vitest';
import { ComponentRegistry } from '@object-ui/core';

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

  describe('chart-bar component', () => {
    it('should be registered in ComponentRegistry', () => {
      const chartBarRenderer = ComponentRegistry.get('chart-bar');
      expect(chartBarRenderer).toBeDefined();
    });

    it('should have proper metadata', () => {
      const config = ComponentRegistry.getConfig('chart-bar');
      expect(config).toBeDefined();
      expect(config?.label).toBe('Bar Chart');
      expect(config?.category).toBe('plugin');
      expect(config?.inputs).toBeDefined();
      expect(config?.defaultProps).toBeDefined();
    });

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

      expect(inputNames).toContain('data');
      expect(inputNames).toContain('dataKey');
      expect(inputNames).toContain('xAxisKey');
      expect(inputNames).toContain('height');
      expect(inputNames).toContain('color');
    });

    it('should have data as required input', () => {
      const config = ComponentRegistry.getConfig('chart-bar');
      const dataInput = config?.inputs?.find((input: any) => input.name === 'data');

      expect(dataInput).toBeDefined();
      expect(dataInput?.required).toBe(true);
      expect(dataInput?.type).toBe('array');
    });

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

      expect(defaults).toBeDefined();
      expect(defaults?.dataKey).toBe('value');
      expect(defaults?.xAxisKey).toBe('name');
      expect(defaults?.height).toBe(400);
      expect(defaults?.color).toBe('#8884d8');
      expect(defaults?.data).toBeDefined();
      expect(Array.isArray(defaults?.data)).toBe(true);
      expect(defaults?.data.length).toBeGreaterThan(0);
    });
  });

  describe('chart (advanced) component', () => {
    it('should be registered in ComponentRegistry', () => {
      const chartRenderer = ComponentRegistry.get('chart');
      expect(chartRenderer).toBeDefined();
    });

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

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

      expect(inputNames).toContain('chartType');
      expect(inputNames).toContain('data');
      expect(inputNames).toContain('config');
      expect(inputNames).toContain('xAxisKey');
      expect(inputNames).toContain('series');
      expect(inputNames).toContain('className');
    });

    it('should have chartType as enum input', () => {
      const config = ComponentRegistry.getConfig('chart');
      const chartTypeInput = config?.inputs?.find((input: any) => input.name === 'chartType');

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

      const enumValues = chartTypeInput?.enum?.map((e: any) => e.value) || [];
      expect(enumValues).toContain('bar');
      expect(enumValues).toContain('line');
      expect(enumValues).toContain('area');
    });

    it('should have data and series as required inputs', () => {
      const config = ComponentRegistry.getConfig('chart');
      const dataInput = config?.inputs?.find((input: any) => input.name === 'data');
      const seriesInput = config?.inputs?.find((input: any) => input.name === 'series');

      expect(dataInput?.required).toBe(true);
      expect(seriesInput?.required).toBe(true);
    });

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

      expect(defaults).toBeDefined();
      expect(defaults?.chartType).toBe('bar');
      expect(defaults?.xAxisKey).toBe('name');
      expect(defaults?.data).toBeDefined();
      expect(Array.isArray(defaults?.data)).toBe(true);
      expect(defaults?.data.length).toBeGreaterThan(0);
      expect(defaults?.config).toBeDefined();
      expect(typeof defaults?.config).toBe('object');
      expect(defaults?.series).toBeDefined();
      expect(Array.isArray(defaults?.series)).toBe(true);
      expect(defaults?.series.length).toBeGreaterThan(0);
    });
  });
});