From 94c0451bed6af495039e2a64d03b70863f663c61 Mon Sep 17 00:00:00 2001
From: OlliL <lehmann@ans-netz.de>
Date: Sat, 27 Jul 2024 00:14:11 +0200
Subject: [PATCH] more tests....

---
 src/components/InputStandard.vue              | 15 +++-
 src/components/SelectStandard.vue             | 16 +++-
 src/tests/TestUtil.ts                         | 21 +++++
 src/tests/components/InputStandard.test.ts    | 80 +++++++++++++++++++
 .../views/moneyflow/CreateMoneyflow.test.ts   | 20 +----
 5 files changed, 127 insertions(+), 25 deletions(-)
 create mode 100644 src/tests/TestUtil.ts
 create mode 100644 src/tests/components/InputStandard.test.ts

diff --git a/src/components/InputStandard.vue b/src/components/InputStandard.vue
index b378544..7745ab9 100644
--- a/src/components/InputStandard.vue
+++ b/src/components/InputStandard.vue
@@ -39,7 +39,14 @@
 <script lang="ts" setup>
 import { useField } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
-import { computed, onMounted, ref, type PropType, type Ref } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  type PropType,
+  type Ref,
+} from "vue";
 import { any, type ZodType } from "zod";
 
 import {
@@ -131,13 +138,15 @@ const errorData = computed((): ErrorData => {
 
 const alignmentClass = props.align ? "text-" + props.align : "";
 
-const fieldRef = ref(null);
+const fieldRef = ref<HTMLInputElement | null>(null);
 
 onMounted(() => {
   fieldValue.value = props.modelValue;
 
   if (props.focus) {
-    (fieldRef.value as any).focus();
+    nextTick(() => {
+      if (fieldRef.value) fieldRef.value.focus();
+    });
   }
 });
 </script>
diff --git a/src/components/SelectStandard.vue b/src/components/SelectStandard.vue
index be56f4d..15495ba 100644
--- a/src/components/SelectStandard.vue
+++ b/src/components/SelectStandard.vue
@@ -29,7 +29,15 @@
 <script lang="ts" setup>
 import { useField } from "vee-validate";
 import { toTypedSchema } from "@vee-validate/zod";
-import { computed, onMounted, ref, watch, type PropType, type Ref } from "vue";
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+  type PropType,
+  type Ref,
+} from "vue";
 import { any, type ZodType } from "zod";
 
 import type { SelectBoxValue } from "@/model/SelectBoxValue";
@@ -105,11 +113,13 @@ const errorData = computed((): ErrorData => {
   );
 });
 
-const fieldRef = ref(null);
+const fieldRef = ref<HTMLSelectElement | null>(null);
 
 onMounted(() => {
   if (props.focus) {
-    (fieldRef.value as any).focus();
+    nextTick(() => {
+      if (fieldRef.value) fieldRef.value.focus();
+    });
   }
 });
 
diff --git a/src/tests/TestUtil.ts b/src/tests/TestUtil.ts
new file mode 100644
index 0000000..5bd3012
--- /dev/null
+++ b/src/tests/TestUtil.ts
@@ -0,0 +1,21 @@
+import { fireEvent, waitFor } from "@testing-library/vue";
+import { expect } from "vitest";
+
+export async function waitForInputHasValue(
+  item: HTMLInputElement,
+  value: string,
+  message?: string,
+) {
+  await waitFor(() => {
+    expect(item.value, message).toBe(value);
+  });
+}
+
+export async function setInputValueAndWait(
+  item: HTMLInputElement,
+  value: string,
+  message?: string,
+) {
+  fireEvent.update(item, value);
+  await waitForInputHasValue(item, value, message);
+}
diff --git a/src/tests/components/InputStandard.test.ts b/src/tests/components/InputStandard.test.ts
new file mode 100644
index 0000000..4be706f
--- /dev/null
+++ b/src/tests/components/InputStandard.test.ts
@@ -0,0 +1,80 @@
+import { computed, ref } from "vue";
+import { string } from "zod";
+import InputStandard from "@/components/InputStandard.vue";
+import { render, screen, waitFor } from "@testing-library/vue";
+import { expect, test } from "vitest";
+import { globErr } from "@/tools/views/ZodUtil";
+import { setInputValueAndWait, waitForInputHasValue } from "../TestUtil";
+import "@testing-library/jest-dom/vitest";
+
+test("error message and regular label get set correctly", async () => {
+  const schema = string(globErr("my error")).min(5);
+  render(InputStandard, {
+    props: {
+      id: "inputStandard",
+      validationSchema: schema,
+      fieldLabel: "regular label",
+    },
+  });
+  const inputStandard = screen.getByTestId<HTMLInputElement>("inputStandard");
+  setInputValueAndWait(inputStandard, "1234");
+  await screen.findByLabelText("my error");
+  setInputValueAndWait(inputStandard, "12345");
+  await screen.findByLabelText("regular label");
+});
+
+test("computed schema also works", async () => {
+  const len = ref(5);
+  const schema = computed(() => string(globErr("my error")).min(len.value));
+  render(InputStandard, {
+    props: {
+      id: "inputStandard",
+      validationSchemaRef: schema,
+      fieldLabel: "regular label",
+    },
+  });
+  const inputStandard = screen.getByTestId<HTMLInputElement>("inputStandard");
+  setInputValueAndWait(inputStandard, "1234");
+  await screen.findByLabelText("my error");
+  setInputValueAndWait(inputStandard, "12345");
+  await screen.findByLabelText("regular label");
+  len.value = 6;
+  await screen.findByLabelText("my error");
+});
+
+test("untouched field shows regular label", async () => {
+  const schema = string(globErr("my error")).min(5);
+  render(InputStandard, {
+    props: {
+      id: "inputStandard",
+      validationSchema: schema,
+      fieldLabel: "regular label",
+    },
+  });
+  screen.getByTestId<HTMLInputElement>("inputStandard");
+  await screen.findByLabelText("regular label");
+});
+
+test("check that update:modelValue gets emitted", async () => {
+  const { emitted } = render(InputStandard, {
+    props: {
+      id: "inputStandard",
+      modelValue: "abcd",
+    },
+  });
+  const inputStandard = screen.getByTestId<HTMLInputElement>("inputStandard");
+  waitForInputHasValue(inputStandard, "abcd");
+  setInputValueAndWait(inputStandard, "1234");
+  expect((emitted()["update:modelValue"][0] as Array<string>)[0]).toBe("1234");
+});
+
+test("check focus", async () => {
+  render(InputStandard, {
+    props: {
+      id: "inputStandard",
+      focus: true,
+    },
+  });
+  const inputStandard = screen.getByTestId<HTMLInputElement>("inputStandard");
+  await waitFor(() => expect(document.activeElement).toBe(inputStandard));
+});
diff --git a/src/tests/views/moneyflow/CreateMoneyflow.test.ts b/src/tests/views/moneyflow/CreateMoneyflow.test.ts
index 28f7e1b..25b1e01 100644
--- a/src/tests/views/moneyflow/CreateMoneyflow.test.ts
+++ b/src/tests/views/moneyflow/CreateMoneyflow.test.ts
@@ -19,6 +19,7 @@ import {
 } from "@/stores/UserSessionStore";
 import { createPinia, setActivePinia } from "pinia";
 import "@testing-library/jest-dom/vitest";
+import { setInputValueAndWait, waitForInputHasValue } from "@/tests/TestUtil";
 
 vi.mock("@/service/PreDefMoneyflowService");
 vi.mock("@/service/PostingAccountService");
@@ -461,16 +462,6 @@ const waitForOptionSelected = async (
   });
 };
 
-const waitForInputHasValue = async (
-  item: HTMLInputElement,
-  value: string,
-  message?: string,
-) => {
-  await waitFor(() => {
-    expect(item.value, message).toBe(value);
-  });
-};
-
 const selectOptionAndWait = async (
   item: HTMLSelectElement,
   value: string,
@@ -479,12 +470,3 @@ const selectOptionAndWait = async (
   fireEvent.update(item, value);
   await waitForOptionSelected(item, value, message);
 };
-
-const setInputValueAndWait = async (
-  item: HTMLInputElement,
-  value: string,
-  message?: string,
-) => {
-  fireEvent.update(item, value);
-  await waitForInputHasValue(item, value, message);
-};