From d1466746de4eca3920f10103b814d3d95f4bfd46 Mon Sep 17 00:00:00 2001 From: provira Date: Fri, 3 Jan 2025 08:33:38 +0100 Subject: [PATCH 1/2] feat: refs #7078 created test for VnJsonValue --- .../common/__tests__/VnJsonValue.spec.js | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 src/components/common/__tests__/VnJsonValue.spec.js diff --git a/src/components/common/__tests__/VnJsonValue.spec.js b/src/components/common/__tests__/VnJsonValue.spec.js new file mode 100644 index 000000000..19e563a1f --- /dev/null +++ b/src/components/common/__tests__/VnJsonValue.spec.js @@ -0,0 +1,87 @@ +import { mount } from '@vue/test-utils'; +import { describe, it, expect } from 'vitest'; +import VnJsonValue from 'src/components/common/VnJsonValue.vue'; + +const createWrapper = (props) => { + return mount(VnJsonValue, { + props, + }); +}; + +describe('VnJsonValue', () => { + it('renders null value correctly', async () => { + const wrapper = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ 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 = createWrapper({ value: obj }); + const span = wrapper.find('span'); + expect(span.text()).toBe(obj.toString()); + expect(span.classes()).toContain('json-object'); + }); + + it('updates value when prop changes', async () => { + const wrapper = createWrapper({ value: true }); + await wrapper.setProps({ value: 123 }); + const span = wrapper.find('span'); + expect(span.text()).toBe('123'); + expect(span.classes()).toContain('json-number'); + }); +}); From 4834b07d5d381fb17a71db2e7436f9c739439145 Mon Sep 17 00:00:00 2001 From: provira Date: Tue, 7 Jan 2025 06:23:31 +0100 Subject: [PATCH 2/2] fix: refs #7078 added missing case with array --- .../common/__tests__/VnJsonValue.spec.js | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/common/__tests__/VnJsonValue.spec.js b/src/components/common/__tests__/VnJsonValue.spec.js index 19e563a1f..393b39f3a 100644 --- a/src/components/common/__tests__/VnJsonValue.spec.js +++ b/src/components/common/__tests__/VnJsonValue.spec.js @@ -1,37 +1,37 @@ -import { mount } from '@vue/test-utils'; import { describe, it, expect } from 'vitest'; import VnJsonValue from 'src/components/common/VnJsonValue.vue'; +import { createWrapper } from 'app/test/vitest/helper'; -const createWrapper = (props) => { - return mount(VnJsonValue, { +const buildComponent = (props) => { + return createWrapper(VnJsonValue, { props, - }); + }).wrapper; }; describe('VnJsonValue', () => { it('renders null value correctly', async () => { - const wrapper = createWrapper({ value: null }); + 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 = createWrapper({ value: true }); + 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 = createWrapper({ value: false }); + 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 = createWrapper({ value: 'Hello' }); + const wrapper = buildComponent({ value: '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 = createWrapper({ value: longString }); + const wrapper = buildComponent({ value: 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 = createWrapper({ value: 123.4567 }); + 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 = createWrapper({ value: 42 }); + const wrapper = buildComponent({ value: 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 = createWrapper({ value: date }); + const wrapper = buildComponent({ value: date }); const span = wrapper.find('span'); expect(span.text()).toBe('2023-01-01'); expect(span.classes()).toContain('json-object'); @@ -71,14 +71,22 @@ describe('VnJsonValue', () => { it('renders an object correctly', async () => { const obj = { key: 'value' }; - const wrapper = createWrapper({ value: obj }); + 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 = createWrapper({ value: true }); + const wrapper = buildComponent({ value: true }); await wrapper.setProps({ value: 123 }); const span = wrapper.find('span'); expect(span.text()).toBe('123');