src/components/common/__tests__/VnJsonValue.spec.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import VnJsonValue from 'src/components/common/VnJsonValue.vue';
+import { createWrapper } from 'app/test/vitest/helper';
+
+const buildComponent = (props) => {
+    return createWrapper(VnJsonValue, {
+        props,
+    }).wrapper;
+};
+
+describe('VnJsonValue', () => {
+    it('renders null value correctly', async () => {
+        const wrapper = buildComponent({ value: null });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('∅');
+        expect(span.classes()).toContain('json-null');
+    });
+
+    it('renders boolean true correctly', async () => {
+        const wrapper = buildComponent({ value: true });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('✓');
+        expect(span.classes()).toContain('json-true');
+    });
+
+    it('renders boolean false correctly', async () => {
+        const wrapper = buildComponent({ value: false });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('✗');
+        expect(span.classes()).toContain('json-false');
+    });
+
+    it('renders a short string correctly', async () => {
+        const wrapper = buildComponent({ value: 'Hello' });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('Hello');
+        expect(span.classes()).toContain('json-string');
+    });
+
+    it('renders a long string correctly with ellipsis', async () => {
+        const longString = 'a'.repeat(600);
+        const wrapper = buildComponent({ value: longString });
+        const span = wrapper.find('span');
+        expect(span.text()).toContain('...');
+        expect(span.text().length).toBeLessThanOrEqual(515);
+        expect(span.attributes('title')).toBe(longString);
+        expect(span.classes()).toContain('json-string');
+    });
+
+    it('renders a number correctly', async () => {
+        const wrapper = buildComponent({ value: 123.4567 });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('123.457');
+        expect(span.classes()).toContain('json-number');
+    });
+
+    it('renders an integer correctly', async () => {
+        const wrapper = buildComponent({ value: 42 });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('42');
+        expect(span.classes()).toContain('json-number');
+    });
+
+    it('renders a date correctly', async () => {
+        const date = new Date('2023-01-01');
+        const wrapper = buildComponent({ value: date });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('2023-01-01');
+        expect(span.classes()).toContain('json-object');
+    });
+
+    it('renders an object correctly', async () => {
+        const obj = { key: 'value' };
+        const wrapper = buildComponent({ value: obj });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe(obj.toString());
+        expect(span.classes()).toContain('json-object');
+    });
+
+    it('renders an array correctly', async () => {
+        const arr = [1, 2, 3];
+        const wrapper = buildComponent({ value: arr });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe(arr.toString());
+        expect(span.classes()).toContain('json-object');
+    });
+
+    it('updates value when prop changes', async () => {
+        const wrapper = buildComponent({ value: true });
+        await wrapper.setProps({ value: 123 });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe('123');
+        expect(span.classes()).toContain('json-number');
+    });
+});