test(ui): add snapshots - WF-125

src/ui/src/components/core/input/CoreCheckboxInput.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it, vi } from "vitest";
+
+import CoreCheckboxInput from "./CoreCheckboxInput.vue";
+import { flushPromises, mount } from "@vue/test-utils";
+import injectionKeys from "@/injectionKeys";
+import { ref } from "vue";
+import { buildMockComponent, buildMockCore, mockProvides } from "@/tests/mocks";
+
+describe("CoreCheckboxInput", () => {
+	it("should render value from the state and forward emit", async () => {
+		const { core, userState } = buildMockCore();
+		userState.value = { key: ["b"] };
+
+		core.addComponent(
+			buildMockComponent({
+				handlers: { "wf-options-change": "python_handler" },
+				binding: {
+					eventType: "",
+					stateRef: "key",
+				},
+			}),
+		);
+
+		const wrapper = mount(CoreCheckboxInput, {
+			global: {
+				provide: {
+					...mockProvides,
+					[injectionKeys.core as symbol]: core,
+					[injectionKeys.evaluatedFields as symbol]: {
+						label: ref("This is the label"),
+						orientation: ref("horizontal"),
+						options: ref({ a: "Option A", b: "Option B" }),
+					},
+				},
+			},
+		});
+
+		await flushPromises();
+
+		const options = wrapper.findAll("input");
+		expect(options).toHaveLength(2);
+
+		const optionA = options.at(0);
+		expect(optionA.attributes().value).toBe("a");
+		expect(optionA.element.checked).toBe(false);
+
+		const optionB = options.at(1);
+		expect(optionB.attributes().value).toBe("b");
+		expect(optionB.element.checked).toBe(true);
+
+		const dispatchEvent = vi.spyOn(wrapper.vm.$el, "dispatchEvent");
+		await optionA.trigger("input");
+		await flushPromises();
+		expect(dispatchEvent).toHaveBeenCalledOnce();
+
+		expect(wrapper.element).toMatchSnapshot();
+	});
+});

src/ui/src/components/core/input/CoreDateInput.spec.ts

@@ -44,5 +44,7 @@ describe("CoreDateInput", () => {
 		await flushPromises();
 
 		expect(dispatchEvent).toHaveBeenCalledOnce();
+
+		expect(wrapper.element).toMatchSnapshot();
 	});
 });

src/ui/src/components/core/input/CoreRadioInput.spec.ts

@@ -52,5 +52,7 @@ describe("CoreRadioInput", () => {
 		await optionA.trigger("input");
 		await flushPromises();
 		expect(dispatchEvent).toHaveBeenCalledOnce();
+
+		expect(wrapper.element).toMatchSnapshot();
 	});
 });

src/ui/src/components/core/input/__snapshots__/CoreCheckboxInput.spec.ts.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CoreCheckboxInput > should render value from the state and forward emit 1`] = `
+<div
+  class="BaseInputWrapper CoreCheckboxInput"
+  data-v-7a72f1be=""
+  data-v-7e12caaf=""
+>
+  <label
+    data-v-7e12caaf=""
+  >
+    This is the label
+  </label>
+  
+  <div
+    class="options horizontal"
+    data-v-7a72f1be=""
+  >
+    
+    <div
+      class="option"
+      data-v-7a72f1be=""
+    >
+      <input
+        data-v-7a72f1be=""
+        type="checkbox"
+        value="a"
+      />
+      <label
+        data-v-7a72f1be=""
+        for="component-id-test:0-option-a"
+      >
+        Option A
+      </label>
+    </div>
+    <div
+      class="option"
+      data-v-7a72f1be=""
+    >
+      <input
+        data-v-7a72f1be=""
+        type="checkbox"
+        value="b"
+      />
+      <label
+        data-v-7a72f1be=""
+        for="component-id-test:0-option-b"
+      >
+        Option B
+      </label>
+    </div>
+    
+  </div>
+  
+</div>
+`;

src/ui/src/components/core/input/__snapshots__/CoreDateInput.spec.ts.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CoreDateInput > should render value from the state and forward emit 1`] = `
+<div
+  class="BaseInputWrapper CoreDateInput"
+  data-v-7e12caaf=""
+  data-v-acf95c76=""
+>
+  <label
+    data-v-7e12caaf=""
+  >
+    This is the label
+  </label>
+  
+  <input
+    data-v-acf95c76=""
+    type="date"
+  />
+  
+</div>
+`;

src/ui/src/components/core/input/__snapshots__/CoreRadioInput.spec.ts.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CoreRadioInput > should render value from the state and forward emit 1`] = `
+<div
+  class="BaseInputWrapper CoreRadioInput"
+  data-v-7e12caaf=""
+  data-v-d075b11d=""
+>
+  <label
+    data-v-7e12caaf=""
+  >
+    This is the label
+  </label>
+  
+  <div
+    class="options horizontal"
+    data-v-d075b11d=""
+  >
+    
+    <div
+      class="option"
+      data-v-d075b11d=""
+    >
+      <input
+        data-v-d075b11d=""
+        id="component-id-test:0-option-a"
+        name="component-id-test:0-options"
+        type="radio"
+        value="a"
+      />
+      <label
+        data-v-d075b11d=""
+        for="component-id-test:0-option-a"
+      >
+        Option A
+      </label>
+    </div>
+    <div
+      class="option"
+      data-v-d075b11d=""
+    >
+      <input
+        data-v-d075b11d=""
+        id="component-id-test:0-option-b"
+        name="component-id-test:0-options"
+        type="radio"
+        value="b"
+      />
+      <label
+        data-v-d075b11d=""
+        for="component-id-test:0-option-b"
+      >
+        Option B
+      </label>
+    </div>
+    
+  </div>
+  
+</div>
+`;