test: refs #6994 add json-link front test

src/components/common/VnJsonValue.vue

@@ -4,7 +4,7 @@ import { toDateString } from 'src/filters';
 import { useDescriptorStore } from 'src/stores/useDescriptorStore';
 
 const props = defineProps({
-    value: { type: [String, Number, Boolean, Object], default: undefined },
+    value: { type: Object, default: undefined },
     name: { type: String, default: undefined },
 });
 
@@ -32,6 +32,7 @@ const updateValue = () => {
                         Math.round((propsValue.value + Number.EPSILON) * 1000) / 1000
                     ).toString();
                 }
+                cssClass = isLink(cssClass);
                 break;
             case 'boolean':
                 t = propsValue.value ? '✓' : '✗';
@@ -40,8 +41,9 @@ const updateValue = () => {
             case 'string':
                 t =
                     propsValue.value.length <= maxStrLen
-                        ? propsValue
+                        ? propsValue.value
                         : propsValue.value.substring(0, maxStrLen) + '...';
+                cssClass = isLink(cssClass);
                 break;
             case 'object':
                 if (propsValue.value instanceof Date) {
@@ -56,6 +58,11 @@ const updateValue = () => {
     }
 };
 
+function isLink(cssClass) {
+    if (!descriptorStore.has(props.name)) return cssClass;
+    return 'link json-link';
+}
+
 watch(() => props.value, updateValue);
 
 updateValue();
@@ -63,10 +70,9 @@ updateValue();
 
 <template>
     <span
-        :title="type === 'string' && value.length > maxStrLen ? value : ''"
+        :title="type === 'string' && propsValue.length > maxStrLen ? propsValue : ''"
         :class="{
             [cssClass]: t !== '',
-            'link json-link': descriptorStore.has(name),
         }"
     >
         {{ t }}

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

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import VnJsonValue from 'src/components/common/VnJsonValue.vue';
 import { createWrapper } from 'app/test/vitest/helper';
+import VnJsonValue from 'src/components/common/VnJsonValue.vue';
 
 const buildComponent = (props) => {
     return createWrapper(VnJsonValue, {
@@ -10,28 +10,28 @@ const buildComponent = (props) => {
 
 describe('VnJsonValue', () => {
     it('renders null value correctly', async () => {
-        const wrapper = buildComponent({ value: null });
+        const wrapper = buildComponent({ value: { val: 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 wrapper = buildComponent({ value: { val: 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 wrapper = buildComponent({ value: { val: 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 wrapper = buildComponent({ value: { val: 'Hello' } });
         const span = wrapper.find('span');
         expect(span.text()).toBe('Hello');
         expect(span.classes()).toContain('json-string');
@@ -39,7 +39,7 @@ describe('VnJsonValue', () => {
 
     it('renders a long string correctly with ellipsis', async () => {
         const longString = 'a'.repeat(600);
-        const wrapper = buildComponent({ value: longString });
+        const wrapper = buildComponent({ value: { val: longString } });
         const span = wrapper.find('span');
         expect(span.text()).toContain('...');
         expect(span.text().length).toBeLessThanOrEqual(515);
@@ -48,14 +48,14 @@ describe('VnJsonValue', () => {
     });
 
     it('renders a number correctly', async () => {
-        const wrapper = buildComponent({ value: 123.4567 });
+        const wrapper = buildComponent({ value: { val: 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 wrapper = buildComponent({ value: { val: 42 } });
         const span = wrapper.find('span');
         expect(span.text()).toBe('42');
         expect(span.classes()).toContain('json-number');
@@ -63,7 +63,7 @@ describe('VnJsonValue', () => {
 
     it('renders a date correctly', async () => {
         const date = new Date('2023-01-01');
-        const wrapper = buildComponent({ value: date });
+        const wrapper = buildComponent({ value: { val: date } });
         const span = wrapper.find('span');
         expect(span.text()).toBe('2023-01-01');
         expect(span.classes()).toContain('json-object');
@@ -71,7 +71,7 @@ describe('VnJsonValue', () => {
 
     it('renders an object correctly', async () => {
         const obj = { key: 'value' };
-        const wrapper = buildComponent({ value: obj });
+        const wrapper = buildComponent({ value: { val: obj } });
         const span = wrapper.find('span');
         expect(span.text()).toBe(obj.toString());
         expect(span.classes()).toContain('json-object');
@@ -79,15 +79,23 @@ describe('VnJsonValue', () => {
 
     it('renders an array correctly', async () => {
         const arr = [1, 2, 3];
-        const wrapper = buildComponent({ value: arr });
+        const wrapper = buildComponent({ value: { val: arr } });
         const span = wrapper.find('span');
         expect(span.text()).toBe(arr.toString());
         expect(span.classes()).toContain('json-object');
     });
 
+    it('renders an link(descriptor) correctly', async () => {
+        const id = 1;
+        const wrapper = buildComponent({ value: { val: id }, name: 'claimFk' });
+        const span = wrapper.find('span');
+        expect(span.text()).toBe(id.toString());
+        expect(span.classes()).toContain('json-link');
+    });
+
     it('updates value when prop changes', async () => {
-        const wrapper = buildComponent({ value: true });
+        const wrapper = buildComponent({ value: { val: true } });
-        await wrapper.setProps({ value: 123 });
+        await wrapper.setProps({ value: { val: 123 } });
         const span = wrapper.find('span');
         expect(span.text()).toBe('123');
         expect(span.classes()).toContain('json-number');