From 70654ce36a6c6bd739e2bf7a4c77f77360ef0501 Mon Sep 17 00:00:00 2001 From: Alexandre Rousseau Date: Thu, 26 Dec 2024 12:53:40 +0100 Subject: [PATCH] test(ui): add functional tests for JSON viewer - WF-125 --- .../SharedJsonViewer/SharedJsonViewer.spec.ts | 52 ++++ .../SharedJsonViewerObject.spec.ts | 30 ++ .../SharedJsonViewer.spec.ts.snap | 280 ++++++++++++++++++ 3 files changed, 362 insertions(+) create mode 100644 src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.spec.ts create mode 100644 src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.spec.ts create mode 100644 src/ui/src/components/shared/SharedJsonViewer/__snapshots__/SharedJsonViewer.spec.ts.snap diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.spec.ts b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.spec.ts new file mode 100644 index 000000000..c334aa088 --- /dev/null +++ b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.spec.ts @@ -0,0 +1,52 @@ +import { describe, expect, it } from "vitest"; +import SharedJsonViewer from "./SharedJsonViewer.vue"; +import SharedJsonViewerValue from "./SharedJsonViewerValue.vue"; +import SharedJsonViewerObject from "./SharedJsonViewerObject.vue"; +import { mount } from "@vue/test-utils"; + +describe("SharedJsonViewer", () => { + it("should render a string", () => { + const wrapper = mount(SharedJsonViewer, { + propsData: { data: "string" }, + }); + const jsonValue = wrapper.getComponent(SharedJsonViewerValue); + expect(jsonValue.text()).toBe('"string"'); + }); + + it("should render a boolean", () => { + const wrapper = mount(SharedJsonViewer, { propsData: { data: true } }); + const jsonValue = wrapper.getComponent(SharedJsonViewerValue); + expect(jsonValue.text()).toBe("true"); + }); + + it("should render a null", () => { + const wrapper = mount(SharedJsonViewer, { propsData: { data: null } }); + const jsonValue = wrapper.getComponent(SharedJsonViewerValue); + expect(jsonValue.text()).toBe("null"); + }); + + it("should render an object", () => { + const data = { a: "a", b: "b" }; + const wrapper = mount(SharedJsonViewer, { propsData: { data } }); + const jsonObject = wrapper.getComponent(SharedJsonViewerObject); + expect(jsonObject.props().data).toStrictEqual(data); + + expect(wrapper.findAllComponents(SharedJsonViewerValue)).toHaveLength( + 2, + ); + }); + + it("should render a nested object", async () => { + const data = { array: [1, 2, 3], nested: { foo: "bar", a: { b: 2 } } }; + const wrapper = mount(SharedJsonViewer, { propsData: { data } }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it("should render an array", async () => { + const data = [1, 2, 3]; + const wrapper = mount(SharedJsonViewer, { propsData: { data } }); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.spec.ts b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.spec.ts new file mode 100644 index 000000000..c18a087b6 --- /dev/null +++ b/src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.spec.ts @@ -0,0 +1,30 @@ +import { describe, expect, it } from "vitest"; +import SharedJsonViewerObject from "./SharedJsonViewerObject.vue"; +import { flushPromises, mount } from "@vue/test-utils"; +import SharedJsonViewerCollapsible from "./SharedJsonViewerCollapsible.vue"; +import SharedJsonViewer from "./SharedJsonViewer.vue"; + +describe("SharedJsonViewerObject", () => { + it("should expand a key", async () => { + const data = { array: [1, 2, 3], obj: { a: 1, b: 2, c: 3 } }; + const wrapper = mount(SharedJsonViewerObject, { props: { data } }); + + const collapsers = wrapper.findAllComponents( + SharedJsonViewerCollapsible, + ); + expect(collapsers).toHaveLength(2); + + const arrayCollapser = collapsers.at(0); + + expect(arrayCollapser.props().open).toBeFalsy(); + + arrayCollapser.vm.$emit("toggle", true); + await flushPromises(); + + expect(arrayCollapser.props().open).toBeTruthy(); + + const arrayElement = wrapper.getComponent(SharedJsonViewer); + expect(arrayElement.props().data).toStrictEqual(data.array); + expect(arrayElement.props().path).toStrictEqual(["array"]); + }); +}); diff --git a/src/ui/src/components/shared/SharedJsonViewer/__snapshots__/SharedJsonViewer.spec.ts.snap b/src/ui/src/components/shared/SharedJsonViewer/__snapshots__/SharedJsonViewer.spec.ts.snap new file mode 100644 index 000000000..624df5618 --- /dev/null +++ b/src/ui/src/components/shared/SharedJsonViewer/__snapshots__/SharedJsonViewer.spec.ts.snap @@ -0,0 +1,280 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`SharedJsonViewer > should render a nested object 1`] = ` +
+ + +
+ + +
+ + + Object{2} + +
+ + +
+ +
+ +
+ + + + + +
+ + +
+ + array + + + Array[3] + +
+ + +
+ +
+ + +
+ +
+
+ + + + + + +
+ + +
+ + nested + + + Object{2} + +
+ + +
+ +
+ + +
+ +
+
+ + + +
+ +
+ +
+
+ + + +
+`; + +exports[`SharedJsonViewer > should render an array 1`] = ` +
+ + +
+ + +
+ + + Array[3] + +
+ + +
+ +
+ +
+ + + +
+ + 0 + + : + + 1 + +
+ + + +
+ + 1 + + : + + 2 + +
+ + + +
+ + 2 + + : + + 3 + +
+ + +
+ +
+ +
+
+ + + +
+`;