Added tests for appearance page

src/routes/(edit)/appearance/+page.svelte

@@ -61,6 +61,7 @@
                             {label}
                             <input
                                 type="number"
+                                data-testid={`appearance-${key}`}
                                 {min}
                                 {max}
                                 bind:value={player[key]}
@@ -74,7 +75,11 @@
                     <div>
                         <label>
                             <small>{label}</small>
-                            <input type="text" bind:value={player[key]} />
+                            <input
+                                type="text"
+                                data-testid={`appearance-${key}`}
+                                bind:value={player[key]}
+                            />
                         </label>
                     </div>
                 {/each}
@@ -85,6 +90,7 @@
                             <div class="selector">
                                 <input
                                     type="color"
+                                    data-testid={`appearance-${key}`}
                                     value={player[key].toHex()}
                                     onchange={(e) => {
                                         player[key] = new Color(

test/e2e.test.ts

@@ -5,7 +5,7 @@ import { saveManager } from "../src/lib/save.svelte";
 import editorPage from "../src/routes/(edit)/inventory/+page.svelte";
 import characterPage from "../src/routes/(edit)/character/+page.svelte";
 import craftingPage from "../src/routes/(edit)/(list)/crafting/+page.svelte";
-import exp from "node:constants";
+import appearancePage from "../src/routes/(edit)/appearance/+page.svelte";
 
 describe("Upload save, edit, export", () => {
     beforeAll(async () => {
@@ -100,4 +100,45 @@ describe("Upload save, edit, export", () => {
             saveManager.save.player.craftingRecipes.recipes.Keg,
         ).toBeTruthy();
     });
+
+    it("should be able to change character appearance", async () => {
+        // Need to change Name, Farm Name, Favourite Thing, Skin, Hair, and Accessory
+        // Test before values
+        expect(saveManager.save.player.name).toBe("Test");
+        expect(saveManager.save.player.farmName).toBe("Test");
+        expect(saveManager.save.player.favoriteThing).toBe("Unit Tests");
+        expect(saveManager.save.player.skin).toBe(0);
+        expect(saveManager.save.player.hairstyle).toBe(112);
+        expect(saveManager.save.player.accessory).toBe(25);
+
+        const page = render(appearancePage);
+        const reference = [
+            ["name", "Test2"],
+            ["farmName", "Test2"],
+            ["favoriteThing", "Integration Tests"],
+            ["skin", 1],
+            ["hairstyle", 113],
+            ["accessory", 26],
+        ] as const;
+
+        const inputs = reference.map(
+            ([name, value]) =>
+                [page.getByTestId(`appearance-${name}`), value] as const,
+        );
+
+        for (const [input, value] of inputs) {
+            if (!(input instanceof HTMLInputElement)) {
+                throw new Error("Input not found");
+            }
+            fireEvent.input(input, { target: { value } });
+        }
+
+        // Check after values
+        for (const [name, value] of reference) {
+            expect(saveManager.save.player[name]).toBe(value);
+        }
+
+        const save = saveManager.export();
+        expect(save).toBeTruthy();
+    });
 });