add vue wrapper

Author: danielleroux

apps/vue-starter/tests/Forms.spec.ts

@@ -1,9 +1,12 @@
 import { expect, test } from "vitest";
 import { render } from "vitest-browser-vue";
 import Forms from "./../src/pages/forms/FormsPage.vue";
+import Wrapper from "./Wrapper";
 
 test("renders forms page", async () => {
-  const { getByText, getByRole } = await render(Forms);
+  const { getByText, getByRole } = await render(Wrapper, {
+    props: { component: Forms },
+  });
 
   await expect.element(getByText("Forms")).toBeInTheDocument();
   await expect
@@ -12,7 +15,9 @@ test("renders forms page", async () => {
 });
 
 test("selects an inspection type and sets the select value", async () => {
-  const { getByLabelText, getByRole } = await render(Forms);
+  const { getByLabelText, getByRole } = await render(Wrapper, {
+    props: { component: Forms },
+  });
 
   const inspectionType = getByLabelText("Inspection Type");
   await inspectionType.click();
@@ -22,7 +27,9 @@ test("selects an inspection type and sets the select value", async () => {
 });
 
 test("changes the inspection mode radio button", async () => {
-  const { getByRole } = await render(Forms);
+  const { getByRole } = await render(Wrapper, {
+    props: { component: Forms },
+  });
 
   const offlineSampling = getByRole("radio", { name: "Offline sampling" });
   await offlineSampling.click();

apps/vue-starter/tests/Wrapper.ts

@@ -0,0 +1,28 @@
+import "@siemens/ix/dist/siemens-ix/siemens-ix.css";
+import { defineComponent, h, toRaw, type Component, type PropType } from "vue";
+
+function setIxThemeAttributes() {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  document.documentElement.setAttribute("data-ix-theme", "classic");
+  document.documentElement.setAttribute("data-ix-color-schema", "dark");
+}
+
+setIxThemeAttributes();
+
+export default defineComponent({
+  name: "Wrapper",
+  props: {
+    component: {
+      type: Object as PropType<Component>,
+      required: true,
+    },
+  },
+  setup(props) {
+    setIxThemeAttributes();
+
+    return () => h(toRaw(props.component));
+  },
+});