diff --git a/packages/sit-onyx/src/components/TestInput/TestInput.spec.tsx b/packages/sit-onyx/src/components/TestInput/TestInput.spec.tsx index 2d667e2536..00f727b5f0 100644 --- a/packages/sit-onyx/src/components/TestInput/TestInput.spec.tsx +++ b/packages/sit-onyx/src/components/TestInput/TestInput.spec.tsx @@ -2,15 +2,23 @@ import { expect, test } from "@playwright/experimental-ct-vue"; import TestInput from "./TestInput.vue"; test("should display label", async ({ mount }) => { + // ARRANGE const component = await mount(); + + // ASSERT await expect(component).toContainText("Hello World"); await expect(component).toHaveScreenshot("default.png"); }); test("should validate required inputs", async ({ mount }) => { + // ARRANGE const component = await mount(); const input = component.getByLabel('DemoModel value: "",'); + + // ACT await input.focus(); await input.blur(); + + // ASSERT await expect(component).toContainText("Please fill in this field."); }); diff --git a/packages/sit-onyx/src/components/TestInput/TestInput.vue b/packages/sit-onyx/src/components/TestInput/TestInput.vue index 8562a096a0..3af6eb077a 100644 --- a/packages/sit-onyx/src/components/TestInput/TestInput.vue +++ b/packages/sit-onyx/src/components/TestInput/TestInput.vue @@ -136,8 +136,8 @@ watch( - - + + {{ props.label }} - + {{ errorMessage }} - Model value: "{{ value }}", is valid: {{ validityState?.valid }} + Model value: "{{ value }}", is valid: {{ validityState?.valid }}
+
{{ errorMessage }}
Model value: "{{ value }}", is valid: {{ validityState?.valid }}