Test/tour details

client/src/views/TourDetail.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import { render, screen } from "@testing-library/vue";
+import type { TourLog } from "@utpost/shared";
+import TourDetail from "./TourDetail.vue";
+
+vi.mock("vue-router", () => ({
+  useRoute: () => ({ params: { id: "1" } }),
+}));
+
+const mockedFetch = vi.fn();
+
+// Kontraktet styr mockdatan: glömmer vi ett fält så säger typecheck ifrån.
+const log = (
+  id: number,
+  elevation_m: number | null,
+  heart_rate: number | null,
+): TourLog => ({
+  id,
+  tour_id: 1,
+  recorded_at: "2026-09-01T08:00:00.000Z",
+  lat: 67.9,
+  lon: 18.5,
+  elevation_m,
+  heart_rate,
+  note: null,
+});
+
+// "Låtsassvar" från fetch
+const respondWith = (data: unknown, ok = true, status = 200) =>
+  ({ ok, status, json: async () => data }) as Response;
+
+describe("TourDetail", () => {
+  beforeEach(() => {
+    vi.stubGlobal("fetch", mockedFetch);
+    vi.spyOn(console, "error").mockImplementation(() => {}); // tysta förväntade fel
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    mockedFetch.mockReset();
+  });
+
+  it("hoppar över mätpunkter utan höjd och visar streck i listan", async () => {
+    mockedFetch.mockResolvedValue(
+      respondWith({
+        id: 1,
+        title: "Kebnekaise runt",
+        distance_m: 12345,
+        notes: null,
+        logs: [log(1, 100, 80), log(2, null, null), log(3, 150, 90)],
+      }),
+    );
+
+    render(TourDetail);
+    await screen.findByText("Kebnekaise runt");
+
+    expect(screen.getByText(/50 höjdmeter/)).toBeInTheDocument();
+    expect(screen.getByText(/– m · – slag\/min/)).toBeInTheDocument();
+  });
+
+  it("visar ett fel när servern svarar 500", async () => {
+    mockedFetch.mockResolvedValue(respondWith({}, false, 500));
+
+    render(TourDetail);
+
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Kunde inte ladda turen.",
+    );
+  });
+});

client/src/views/TourDetail.vue

@@ -1,19 +1,26 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watchEffect } from "vue";
 import { useRoute } from "vue-router";
+import type { Tour, TourLog } from "@utpost/shared";
+import { elevationGain } from "../lib/tours";
+
+// Tour från kontraktet, plus mätpunkterna som API:et skickar med
+type TourWithLogs = Tour & { logs: TourLog[] };
 
 const route = useRoute();
-const tourDetails = ref(null);
+const tourDetails = ref<TourWithLogs | null>(null);
 const loading = ref(true);
-const errorParagraph = ref(null);
+const errorParagraph = ref<string | null>(null);
 
 watchEffect(async () => {
   try {
     const response = await fetch(
-      `http://localhost:4000/api/tours/${route.params.id}`,
+      `http://localhost:4000/api/tours/${String(route.params.id)}`,
     );
-    const data = await response.json();
-    tourDetails.value = data;
+    if (!response.ok) {
+      throw new Error(`API svarade ${response.status}`);
+    }
+    tourDetails.value = (await response.json()) as TourWithLogs;
   } catch (error) {
     console.error("Kunde inte hämta turens detaljer", error);
     errorParagraph.value = "Kunde inte ladda turen.";
@@ -22,19 +29,15 @@ watchEffect(async () => {
   }
 });
 
-const climb = computed(() => {
-  if (!tourDetails.value) return 0;
-  return tourDetails.value.logs.reduce((sum, log, i) => {
-    if (i === 0) return sum;
-    const diff = log.elevation_m - tourDetails.value.logs[i - 1].elevation_m;
-    return diff > 0 ? sum + diff : sum;
-  }, 0);
-});
+const climb = computed<number>(() =>
+  tourDetails.value ? elevationGain(tourDetails.value.logs) : 0,
+);
 </script>
+
 <template>
   <p v-if="loading">Laddar turen...</p>
-  <p v-else-if="errorParagraph">{{ errorParagraph }}</p>
-  <div v-else>
+  <p v-else-if="errorParagraph" role="alert">{{ errorParagraph }}</p>
+  <div v-else-if="tourDetails">
     <h1>{{ tourDetails.title }}</h1>
     <p class="muted">
       {{ Math.round(tourDetails.distance_m / 100) / 10 }} km ·
@@ -45,9 +48,10 @@ const climb = computed(() => {
     <ol class="logs">
       <li v-for="log in tourDetails.logs" :key="log.id">
         {{ new Date(log.recorded_at).toLocaleTimeString("sv-SE") }} ·
-        {{ log.elevation_m }} m · {{ log.heart_rate }} slag/min
+        {{ log.elevation_m ?? "–" }} m · {{ log.heart_rate ?? "–" }} slag/min
       </li>
     </ol>
   </div>
 </template>
+
 <style scoped></style>

shared/src/types.ts

@@ -14,6 +14,16 @@ export interface Guide {
   updated_at: string;
 }
 
+export interface Tour {
+  id: number
+  user_id: number
+  guide_id: number | null
+  title: string
+  started_at: string
+  distance_m: number
+  notes: string | null
+}
+
 export interface User {
     id: number,
     email: string,