Skip to content

Commit

Permalink
test(ui): add functional tests for JSON viewer - WF-125
Browse files Browse the repository at this point in the history
  • Loading branch information
@madeindjs
madeindjs committed Dec 26, 2024
1 parent ae1a6bd commit 70654ce
Show file tree
Hide file tree
Showing 3 changed files with 362 additions and 0 deletions.
52 changes: 52 additions & 0 deletions src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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();
});
});
30 changes: 30 additions & 0 deletions src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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"]);
});
});
280 changes: 280 additions & 0 deletions src/ui/src/components/shared/SharedJsonViewer/__snapshots__/SharedJsonViewer.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`SharedJsonViewer > should render a nested object 1`] = `
<div
data-v-app=""
>
<details
class="SharedCollapsible"
data-v-11af3d6a=""
data-v-55c4d015=""
disabled="false"
>
<summary
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__title"
data-v-11af3d6a=""
>
<!--v-if-->
<span
data-v-11af3d6a=""
data-v-562f08a9=""
>
Object{2}
</span>
</div>
</summary>
<div
class="content"
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__content"
data-v-11af3d6a=""
>
<div
class="SharedJsonViewerObject"
data-v-4abbcc0e=""
>
<!-- This is a single value, we display it as plain key/value text -->
<!-- This is a an object -->
<details
class="SharedCollapsible"
data-v-11af3d6a=""
data-v-4abbcc0e=""
data-v-55c4d015=""
disabled="false"
>
<summary
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__title"
data-v-11af3d6a=""
>
<span
data-v-11af3d6a=""
>
array
</span>
<span
data-v-11af3d6a=""
data-v-562f08a9=""
>
Array[3]
</span>
</div>
</summary>
<div
class="content"
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__content"
data-v-11af3d6a=""
>
</div>
</div>
</details>
<!-- This is a single value, we display it as plain key/value text -->
<!-- This is a an object -->
<details
class="SharedCollapsible"
data-v-11af3d6a=""
data-v-4abbcc0e=""
data-v-55c4d015=""
disabled="false"
>
<summary
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__title"
data-v-11af3d6a=""
>
<span
data-v-11af3d6a=""
>
nested
</span>
<span
data-v-11af3d6a=""
data-v-562f08a9=""
>
Object{2}
</span>
</div>
</summary>
<div
class="content"
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__content"
data-v-11af3d6a=""
>
</div>
</div>
</details>
</div>
</div>
</div>
</details>
<!--v-if-->
</div>
`;

exports[`SharedJsonViewer > should render an array 1`] = `
<div
data-v-app=""
>
<details
class="SharedCollapsible"
data-v-11af3d6a=""
data-v-55c4d015=""
disabled="false"
>
<summary
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__title"
data-v-11af3d6a=""
>
<!--v-if-->
<span
data-v-11af3d6a=""
data-v-562f08a9=""
>
Array[3]
</span>
</div>
</summary>
<div
class="content"
data-v-55c4d015=""
>
<div
class="SharedJsonViewerCollapsible__content"
data-v-11af3d6a=""
>
<div
class="SharedJsonViewerObject"
data-v-4abbcc0e=""
>
<!-- This is a single value, we display it as plain key/value text -->
<div
class="SharedJsonViewerObject__value"
data-v-4abbcc0e=""
>
<span
data-v-4abbcc0e=""
>
0
</span>
:
<span
class="SharedJsonViewerValue"
data-v-4abbcc0e=""
data-v-e1f0c935=""
>
1
</span>
</div>
<!-- This is a single value, we display it as plain key/value text -->
<div
class="SharedJsonViewerObject__value"
data-v-4abbcc0e=""
>
<span
data-v-4abbcc0e=""
>
1
</span>
:
<span
class="SharedJsonViewerValue"
data-v-4abbcc0e=""
data-v-e1f0c935=""
>
2
</span>
</div>
<!-- This is a single value, we display it as plain key/value text -->
<div
class="SharedJsonViewerObject__value"
data-v-4abbcc0e=""
>
<span
data-v-4abbcc0e=""
>
2
</span>
:
<span
class="SharedJsonViewerValue"
data-v-4abbcc0e=""
data-v-e1f0c935=""
>
3
</span>
</div>
</div>
</div>
</div>
</details>
<!--v-if-->
</div>
`;

0 comments on commit 70654ce

Please sign in to comment.