chore: align code and tests to dev guidelines (#116)

closes #114 

## Description

Aligns our existing code to our new [Technical
Guidelines](https://github.com/SchwarzIT/onyx/wiki/Technical-Vision-&-Guidelines).

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(<TestInput label="Hello World" />);
+
+  // 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(<TestInput label="Demo" required />);
   const input = component.getByLabel('DemoModel value: "",');
+
+  // ACT
   await input.focus();
   await input.blur();
+
+  // ASSERT
   await expect(component).toContainText("Please fill in this field.");
 });

packages/sit-onyx/src/components/TestInput/TestInput.vue

@@ -136,8 +136,8 @@ watch(
 </script>
 
 <template>
-  <label class="input" :class="{ 'input--touched': isTouched }">
-    <span class="input__label" :class="{ 'input__label--required': props.required }">
+  <label class="onyx-input" :class="{ 'onyx-input--touched': isTouched }">
+    <span class="onyx-input__label" :class="{ 'onyx-input__label--required': props.required }">
       {{ props.label }}
     </span>
     <input
@@ -147,15 +147,15 @@ watch(
       @change="handleChange"
       @blur="isTouched = true"
     />
-    <p v-if="isTouched && !validityState?.valid" class="input__error" aria-live="polite">
+    <p v-if="isTouched && !validityState?.valid" class="onyx-input__error" aria-live="polite">
       {{ errorMessage }}
     </p>
-    <p class="input__info">Model value: "{{ value }}", is valid: {{ validityState?.valid }}</p>
+    <p class="onyx-input__info">Model value: "{{ value }}", is valid: {{ validityState?.valid }}</p>
   </label>
 </template>
 
 <style lang="scss" scoped>
-.input {
+.onyx-input {
   width: max-content;
   display: inline-block;
   font-family: var(--onyx-font-family);

packages/sit-onyx/src/i18n/index.spec.ts

@@ -32,24 +32,39 @@ vi.mock("./locales/en-US.json", () => {
 type TestTranslationKey = ObjectToDottedStrings<OnyxTranslations>;
 type TestMessages = ProvideI18nOptions["messages"];
 
-test("should provide/inject i18n", () => {
+test("should provide/inject i18n with a string", () => {
+  // ARRANGE
   provideI18n({ locale: "test" });
-  let i18n = injectI18n();
 
+  // ACT
+  const i18n = injectI18n();
+
+  // ASSERT
   expect(i18n).toBeDefined();
   expect(i18n.locale.value).toBe("test");
+});
 
+test("should provide/inject i18n with a ref", () => {
+  // ARRANGE
   // should keep locale up to date if a ref is passed as option
   const locale = vue.ref("a");
   provideI18n({ locale });
-  i18n = injectI18n();
 
+  // ACT
+  const i18n = injectI18n();
+
+  // ASSERT
   expect(i18n.locale.value).toBe("a");
+
+  // ACT
   locale.value = "b";
+
+  // ASSERT
   expect(i18n.locale.value).toBe("b");
 });
 
 test("should translate with/without placeholders", () => {
+  // ARRANGE
   provideI18n({
     locale: "en-US",
     messages: {
@@ -62,28 +77,37 @@ test("should translate with/without placeholders", () => {
 
   const { t } = injectI18n();
 
+  // ACT #1
   let message = t.value("plain" as TestTranslationKey);
+  // ASSERT #1
   expect(message).toBe("Hello World");
 
+  // ACT #2
   message = t.value("placeholder" as TestTranslationKey, {
     firstName: "John",
     lastName: "Doe",
   });
+  // ASSERT #2
   expect(message).toBe("Hello John Doe");
 
+  // ACT #3
   // should return empty string for missing translation
   message = t.value("does.not.exist" as TestTranslationKey);
+  // ASSERT #3
   expect(message).toBe("");
 
+  // ACT #4
   // removes the original placeholders if no values were provided (same behavior as "vue-i18n")
   message = t.value("placeholder" as TestTranslationKey, {
     firstName: undefined,
     lastName: undefined,
   });
+  // ASSERT #4
   expect(message).toBe("Hello");
 });
 
 test("should translate with pluralization", () => {
+  // ARRANGE
   provideI18n({
     locale: "en-US",
     messages: {
@@ -97,41 +121,64 @@ test("should translate with pluralization", () => {
 
   const { t } = injectI18n();
 
+  // ACT
   let message = t.value("pluralization" as TestTranslationKey, { n: 0 });
+  // ASSERT
   expect(message).toBe("Zero items");
 
+  // ACT
   message = t.value("pluralization" as TestTranslationKey, { n: 1 });
+  // ASSERT
   expect(message).toBe("1 item");
 
+  // ACT
   message = t.value("pluralization" as TestTranslationKey, { n: 2 });
+  // ASSERT
   expect(message).toBe("2 items");
 
+  // ACT
   message = t.value("pluralization" as TestTranslationKey, { n: -1 });
+  // ASSERT
   expect(message).toBe("-1 items");
 
+  // ACT
   message = t.value("pluralization" as TestTranslationKey);
+  // ASSERT
   expect(message).toBe("1 item");
 
+  // ACT
   message = t.value("pluralizationWithoutZero" as TestTranslationKey, { n: 0 });
+  // ASSERT
   expect(message).toBe("0 items");
 
+  // ACT
   message = t.value("pluralizationWithoutZero" as TestTranslationKey, { n: 1 });
+  // ASSERT
   expect(message).toBe("1 item");
 
+  // ACT
   message = t.value("pluralizationWithoutZero" as TestTranslationKey, { n: 2 });
+  // ASSERT
   expect(message).toBe("2 items");
 
+  // ACT
   message = t.value("withoutPluralization" as TestTranslationKey, { n: 0 });
+  // ASSERT
   expect(message).toBe('0 items and pipe "|" is part of the text');
 
+  // ACT
   message = t.value("withoutPluralization" as TestTranslationKey, { n: 1 });
+  // ASSERT
   expect(message).toBe('1 items and pipe "|" is part of the text');
 
+  // ACT
   message = t.value("withoutPluralization" as TestTranslationKey, { n: 2 });
+  // ASSERT
   expect(message).toBe('2 items and pipe "|" is part of the text');
 });
 
 test("should update translation when locale changes", () => {
+  // ARRANGE
   const locale = vue.ref("en-US");
   provideI18n({
     locale,
@@ -146,15 +193,19 @@ test("should update translation when locale changes", () => {
   });
   const { t } = injectI18n();
 
+  // ACT #1
   const message = vue.computed(() => t.value("helloWorld" as TestTranslationKey));
+  // ASSERT #1
   expect(message.value).toBe("Hello World");
 
+  // ACT #2
   locale.value = "de-DE";
-
+  // ASSERT #2
   expect(message.value).toBe("Hallo Welt");
 });
 
 test("should use English fallback if translation is missing", () => {
+  // ARRANGE
   provideI18n({
     locale: "de-DE",
     messages: {
@@ -165,8 +216,10 @@ test("should use English fallback if translation is missing", () => {
   });
   const { t } = injectI18n();
 
+  // ACT
   const message = t.value("helloWorld" as TestTranslationKey);
 
+  // ASSERT
   // see mock of module "./locales/en-US.json" at the top of the file
   expect(message).toBe("Hello World");
 });