+
+ );
+}
+
+const getAdvancedInfoIcon = (type: AdvancedInfoType) => {
+ switch (type) {
+ case "Pressure":
+ return
+ {getAdvancedInfoIcon(type)}
+ {type}
+
+
+ {value}
+
+
+ {
+ setQuery(e.target.value);
+ setOpen(true);
+ setActiveIndex(-1);
+ }}
+ onKeyDown={handleKeyDown}
+ onFocus={() => suggestions.length > 0 && setOpen(true)}
+ placeholder="Search for a city (e.g. London)"
+ role="combobox"
+ aria-expanded={open}
+ aria-autocomplete="list"
+ aria-controls="search-suggestions"
+ aria-activedescendant={activeIndex >= 0 ? `suggestion-${activeIndex}` : undefined}
+ className="w-full px-4 py-3 rounded-xl shadow-md text-lg outline-none focus:ring-2 focus:ring-blue-400"
+ />
+
+ {open && (
+
+ );
+};
+
+function formatLocation(loc: GeoLocation): string {
+ const parts = [loc.name];
+ if (loc.state) parts.push(loc.state);
+ parts.push(loc.country);
+ return parts.join(", ");
+}
diff --git a/src/components/SuggestionsList.tsx b/src/components/SuggestionsList.tsx
new file mode 100644
index 0000000..1d6502a
--- /dev/null
+++ b/src/components/SuggestionsList.tsx
@@ -0,0 +1,58 @@
+import { type GeoLocation } from "../types/GeoLocation";
+
+interface SuggestionsListProps {
+ suggestions: GeoLocation[];
+ loading: boolean;
+ query: string;
+ activeIndex: number;
+ onSelect: (location: GeoLocation) => void;
+}
+
+export const SuggestionsList = ({
+ suggestions,
+ loading,
+ query,
+ activeIndex,
+ onSelect,
+}: SuggestionsListProps) => {
+ if (!query.trim()) return null;
+
+ return (
+ -
+ {loading && (
+
- Searching... + )} + {!loading && suggestions.length === 0 && query.trim().length > 1 && ( +
- No cities found + )} + {!loading && + suggestions.map((loc, index) => ( +
- + + + ))} +
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Temperature.test.tsx b/src/components/Temperature.test.tsx
new file mode 100644
index 0000000..48cab5b
--- /dev/null
+++ b/src/components/Temperature.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { Temperature } from "./Temperature";
+
+describe("Temperature", () => {
+ const defaultProps = {
+ current: 20,
+ feelsLike: 18,
+ tempMin: 15,
+ tempMax: 25,
+ };
+
+ it("renders the section label", () => {
+ render(
+
+
+
+
+
+
+ Sunrise
+
+
+ {formatTime(sunriseTime, timezoneOffset)}
+
+
+
+
+
+
+ Sunset
+
+
+ {formatTime(sunsetTime, timezoneOffset)}
+
+
+
);
+}
\ No newline at end of file
diff --git a/src/components/WeatherCard.fixtures.tsx b/src/components/WeatherCard.fixtures.tsx
new file mode 100644
index 0000000..98d7769
--- /dev/null
+++ b/src/components/WeatherCard.fixtures.tsx
@@ -0,0 +1,22 @@
+import type { WeatherData } from "../types/WeatherData";
+
+export const mockWeatherData: WeatherData = {
+ coord: { lon: 14.42, lat: 50.09 },
+ weather: [{ id: 800, main: "Clear", description: "clear sky", icon: "01d" }],
+ main: {
+ temp: 20,
+ feels_like: 18,
+ temp_min: 15,
+ temp_max: 25,
+ pressure: 1013,
+ humidity: 55,
+ sea_level: 1013,
+ grnd_level: 1000,
+ },
+ visibility: 10000,
+ wind: { speed: 3.5, deg: 180 },
+ sys: { country: "CZ", sunrise: 1620000000, sunset: 1620050000 },
+ timezone: 7200,
+ id: 3067696,
+ name: "Prague",
+};
\ No newline at end of file
diff --git a/src/components/WeatherCard.test.tsx b/src/components/WeatherCard.test.tsx
new file mode 100644
index 0000000..65073d4
--- /dev/null
+++ b/src/components/WeatherCard.test.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { WeatherCard } from "./WeatherCard";
+import { useWeather } from "../hooks/useWeather";
+import { mockWeatherData } from "./WeatherCard.fixtures";
+
+vi.mock("../hooks/useWeather");
+vi.mock("./WeatherCardSkeleton", () => ({
+ WeatherCardSkeleton: () => ,
+}));
+
+beforeEach(() => {
+ vi.mocked(useWeather).mockReturnValue({ data: null, loading: false, error: null });
+});
+
+describe("WeatherCard", () => {
+ it("shows the skeleton while loading", () => {
+ vi.mocked(useWeather).mockReturnValue({ data: null, loading: true, error: null });
+ render(
+
+
+
+
+
+
+ {current}°C
+
+ Current
+
+
+
+ Feels like {feelsLike}°C
+
+
+ {tempMin}°C - {tempMax}°C
+
+
- (loadCities);
+
+ const save = (updatedCities: string[]) => {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(updatedCities));
+ setCities(updatedCities);
+ };
+
+ const addCity = (city: string) => {
+ const normalized = city.toLowerCase();
+ if (!cities.some((c) => c.toLowerCase() === normalized)) {
+ save([city, ...cities]);
+ }
+ };
+
+ const removeCity = (city: string) => {
+ save(cities.filter((c) => c !== city));
+ };
+
+ return { cities, addCity, removeCity };
+};
diff --git a/src/hooks/useSuggestions.test.ts b/src/hooks/useSuggestions.test.ts
new file mode 100644
index 0000000..ed156ea
--- /dev/null
+++ b/src/hooks/useSuggestions.test.ts
@@ -0,0 +1,119 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { useSuggestions } from "./useSuggestions";
+import type { GeoLocation } from "../types/GeoLocation";
+
+const mockLocations: GeoLocation[] = [
+ { name: "Prague", lat: 50.09, lon: 14.42, country: "CZ", state: "Bohemia" },
+ { name: "Prague", lat: 41.66, lon: -72.43, country: "US", state: "Oklahoma" },
+];
+
+beforeEach(() => {
+ vi.stubGlobal("fetch", vi.fn());
+});
+
+describe("useSuggestions", () => {
+ it("starts with empty suggestions and loading=false", () => {
+ const { result } = renderHook(() => useSuggestions(""));
+ expect(result.current.suggestions).toEqual([]);
+ expect(result.current.loading).toBe(false);
+ });
+
+ it("clears suggestions and stays not loading when query is empty", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockLocations,
+ } as Response);
+
+ const { result, rerender } = renderHook(({ q }) => useSuggestions(q, 0), {
+ initialProps: { q: "Prague" },
+ });
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+ expect(result.current.suggestions).toHaveLength(2);
+
+ rerender({ q: "" });
+
+ await waitFor(() => {
+ expect(result.current.suggestions).toEqual([]);
+ expect(result.current.loading).toBe(false);
+ });
+ });
+
+ it("sets loading=true while debounce is pending", () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockLocations,
+ } as Response);
+
+ const { result } = renderHook(() => useSuggestions("Pra", 500));
+ expect(result.current.loading).toBe(true);
+ });
+
+ it("fetches and returns suggestions after debounce", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockLocations,
+ } as Response);
+
+ const { result } = renderHook(() => useSuggestions("Prague", 0));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.suggestions).toEqual(mockLocations);
+ expect(fetch).toHaveBeenCalledOnce();
+ });
+
+ it("deduplicates locations with the same name, country, and state", async () => {
+ const duplicated: GeoLocation[] = [
+ ...mockLocations,
+ { name: "Prague", lat: 50.1, lon: 14.5, country: "CZ", state: "Bohemia" },
+ ];
+
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => duplicated,
+ } as Response);
+
+ const { result } = renderHook(() => useSuggestions("Prague", 0));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.suggestions).toHaveLength(2);
+ });
+
+ it("returns empty suggestions on fetch error", async () => {
+ vi.mocked(fetch).mockRejectedValue(new Error("Network error"));
+
+ const { result } = renderHook(() => useSuggestions("Prague", 0));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.suggestions).toEqual([]);
+ });
+
+ it("returns empty suggestions when response is not ok", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: false,
+ } as Response);
+
+ const { result } = renderHook(() => useSuggestions("Prague", 0));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.suggestions).toEqual([]);
+ });
+
+ it("trims whitespace from the query before fetching", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockLocations,
+ } as Response);
+
+ renderHook(() => useSuggestions(" Prague ", 0));
+
+ await waitFor(() => expect(fetch).toHaveBeenCalledOnce());
+
+ const url = vi.mocked(fetch).mock.calls[0][0] as string;
+ expect(url).toContain(encodeURIComponent("Prague"));
+ });
+});
diff --git a/src/hooks/useSuggestions.ts b/src/hooks/useSuggestions.ts
new file mode 100644
index 0000000..3e1b4a9
--- /dev/null
+++ b/src/hooks/useSuggestions.ts
@@ -0,0 +1,46 @@
+import { useState, useEffect, useRef } from "react";
+import { type GeoLocation } from "../types/GeoLocation";
+import { OPEN_WEATHER_API_KEY, OPEN_WEATHER_BASE_URL } from "../utils/api";
+import { dedupLocations } from "../utils/dedupLocations";
+
+export const useSuggestions = (query: string, debounceMs = 300) => {
+ const [suggestions, setSuggestions] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const debounceRef = useRef>(null);
+
+ useEffect(() => {
+ const controller = new AbortController();
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+
+ if (!query.trim()) {
+ setSuggestions([]);
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+
+ debounceRef.current = setTimeout(async () => {
+ try {
+ const res = await fetch(
+ `${OPEN_WEATHER_BASE_URL}/geo/1.0/direct?q=${encodeURIComponent(query.trim())}&limit=5&appid=${OPEN_WEATHER_API_KEY}`,
+ { signal: controller.signal }
+ );
+ if (!res.ok) throw new Error("Geocoding request failed");
+ const data: GeoLocation[] = await res.json();
+ setSuggestions(dedupLocations(data));
+ } catch {
+ if (!controller.signal.aborted) setSuggestions([]);
+ } finally {
+ if (!controller.signal.aborted) setLoading(false);
+ }
+ }, debounceMs);
+
+ return () => {
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ controller.abort();
+ };
+ }, [query, debounceMs]);
+
+ return { suggestions, loading };
+};
\ No newline at end of file
diff --git a/src/hooks/useWeather.fixtures.ts b/src/hooks/useWeather.fixtures.ts
new file mode 100644
index 0000000..5ee54a0
--- /dev/null
+++ b/src/hooks/useWeather.fixtures.ts
@@ -0,0 +1,22 @@
+import type { WeatherData } from "../types/WeatherData";
+
+export const mockWeatherData: WeatherData = {
+ coord: { lon: 14.42, lat: 50.09 },
+ weather: [{ id: 800, main: "Clear", description: "clear sky", icon: "01d" }],
+ main: {
+ temp: 20,
+ feels_like: 19,
+ temp_min: 18,
+ temp_max: 22,
+ pressure: 1013,
+ humidity: 50,
+ sea_level: 1013,
+ grnd_level: 1000,
+ },
+ visibility: 10000,
+ wind: { speed: 3.5, deg: 180 },
+ sys: { country: "CZ", sunrise: 1620000000, sunset: 1620050000 },
+ timezone: 7200,
+ id: 3067696,
+ name: "Prague",
+};
\ No newline at end of file
diff --git a/src/hooks/useWeather.test.ts b/src/hooks/useWeather.test.ts
new file mode 100644
index 0000000..06aea3e
--- /dev/null
+++ b/src/hooks/useWeather.test.ts
@@ -0,0 +1,83 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { useWeather } from "./useWeather";
+import { mockWeatherData } from "./useWeather.fixtures";
+
+beforeEach(() => {
+ vi.stubGlobal("fetch", vi.fn());
+});
+
+describe("useWeather", () => {
+ it("starts with loading=true and no data", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockWeatherData,
+ } as Response);
+
+ const { result } = renderHook(() => useWeather("Prague,CZ"));
+
+ expect(result.current.loading).toBe(true);
+ expect(result.current.data).toBeNull();
+ expect(result.current.error).toBeNull();
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+ });
+
+ it("returns data on successful fetch", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockWeatherData,
+ } as Response);
+
+ const { result } = renderHook(() => useWeather("Prague,CZ"));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.data).toEqual(mockWeatherData);
+ expect(result.current.error).toBeNull();
+ });
+
+ it("sets error when response is not ok", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: false,
+ status: 404,
+ statusText: "Not Found",
+ } as Response);
+
+ const { result } = renderHook(() => useWeather("Unknown"));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.data).toBeNull();
+ expect(result.current.error).toBe("Failed to fetch weather: 404 Not Found");
+ });
+
+ it("sets error when fetch throws", async () => {
+ vi.mocked(fetch).mockRejectedValue(new Error("Network error"));
+
+ const { result } = renderHook(() => useWeather("Prague,CZ"));
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+
+ expect(result.current.data).toBeNull();
+ expect(result.current.error).toBe("Network error");
+ });
+
+ it("refetches when city changes", async () => {
+ vi.mocked(fetch).mockResolvedValue({
+ ok: true,
+ json: async () => mockWeatherData,
+ } as Response);
+
+ const { result, rerender } = renderHook(({ city }) => useWeather(city), {
+ initialProps: { city: "Prague,CZ" },
+ });
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+ expect(fetch).toHaveBeenCalledTimes(1);
+
+ rerender({ city: "Barcelona,ES" });
+
+ await waitFor(() => expect(result.current.loading).toBe(false));
+ expect(fetch).toHaveBeenCalledTimes(2);
+ });
+});
diff --git a/src/hooks/useWeather.ts b/src/hooks/useWeather.ts
new file mode 100644
index 0000000..bff6371
--- /dev/null
+++ b/src/hooks/useWeather.ts
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+import { type WeatherData } from "../types/WeatherData";
+import { OPEN_WEATHER_API_KEY, OPEN_WEATHER_BASE_URL } from "../utils/api";
+
+export const useWeather = (city: string) => {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const controller = new AbortController();
+
+ const getData = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const res = await fetch(
+ `${OPEN_WEATHER_BASE_URL}/data/2.5/weather?q=${encodeURIComponent(city.trim())}&appid=${OPEN_WEATHER_API_KEY}&units=metric`,
+ { signal: controller.signal }
+ );
+ if (!res.ok) {
+ throw new Error(`Failed to fetch weather: ${res.status} ${res.statusText}`);
+ }
+ const parsedData = await res.json();
+ setData(parsedData);
+ } catch (err) {
+ if (controller.signal.aborted) return;
+ setError(err instanceof Error ? err.message : "Unknown error");
+ } finally {
+ if (!controller.signal.aborted) setLoading(false);
+ }
+ };
+
+ getData();
+
+ return () => controller.abort();
+ }, [city]);
+
+ return { data, loading, error };
+};
diff --git a/src/types/GeoLocation.ts b/src/types/GeoLocation.ts
new file mode 100644
index 0000000..ab28f01
--- /dev/null
+++ b/src/types/GeoLocation.ts
@@ -0,0 +1,8 @@
+export interface GeoLocation {
+ name: string;
+ local_names?: Record;
+ lat: number;
+ lon: number;
+ country: string;
+ state?: string;
+}
diff --git a/src/types/WeatherData.ts b/src/types/WeatherData.ts
new file mode 100644
index 0000000..097a67c
--- /dev/null
+++ b/src/types/WeatherData.ts
@@ -0,0 +1,35 @@
+export type WeatherData = {
+ coord: {
+ lon: number;
+ lat: number;
+ };
+ weather: {
+ id: number;
+ main: string;
+ description: string;
+ icon: string;
+ }[];
+ main: {
+ temp: number;
+ feels_like: number;
+ temp_min: number;
+ temp_max: number;
+ pressure: number;
+ humidity: number;
+ sea_level: number;
+ grnd_level: number;
+ };
+ visibility: number;
+ wind: {
+ speed: number;
+ deg: number;
+ };
+ sys: {
+ country: string;
+ sunrise: number;
+ sunset: number;
+ };
+ timezone: number;
+ id: number;
+ name: string;
+};
\ No newline at end of file
diff --git a/src/utils/api.ts b/src/utils/api.ts
new file mode 100644
index 0000000..4c70b15
--- /dev/null
+++ b/src/utils/api.ts
@@ -0,0 +1,7 @@
+export const OPEN_WEATHER_API_KEY = import.meta.env.VITE_OPEN_WEATHER_API_KEY;
+
+if (!OPEN_WEATHER_API_KEY) {
+ throw new Error("Missing VITE_OPEN_WEATHER_API_KEY environment variable.");
+}
+
+export const OPEN_WEATHER_BASE_URL = "https://api.openweathermap.org";
diff --git a/src/utils/dedupLocations.test.ts b/src/utils/dedupLocations.test.ts
new file mode 100644
index 0000000..f59f0c4
--- /dev/null
+++ b/src/utils/dedupLocations.test.ts
@@ -0,0 +1,54 @@
+import { dedupLocations } from "./dedupLocations";
+import type { GeoLocation } from "../types/GeoLocation";
+
+const loc = (
+ name: string,
+ country: string,
+ state?: string
+): GeoLocation => ({ name, country, state, lat: 0, lon: 0 });
+
+describe("dedupLocations", () => {
+ it("returns empty array for empty input", () => {
+ expect(dedupLocations([])).toEqual([]);
+ });
+
+ it("returns locations unchanged when there are no duplicates", () => {
+ const locations = [loc("Prague", "CZ"), loc("Barcelona", "ES")];
+ expect(dedupLocations(locations)).toEqual(locations);
+ });
+
+ it("removes duplicate locations with same name, country, and state", () => {
+ const locations = [
+ loc("Springfield", "US", "IL"),
+ loc("Springfield", "US", "IL"),
+ ];
+ expect(dedupLocations(locations)).toEqual([loc("Springfield", "US", "IL")]);
+ });
+
+ it("keeps locations with the same name but different countries", () => {
+ const locations = [loc("London", "GB"), loc("London", "CA")];
+ expect(dedupLocations(locations)).toEqual(locations);
+ });
+
+ it("keeps locations with the same name and country but different states", () => {
+ const locations = [
+ loc("Springfield", "US", "IL"),
+ loc("Springfield", "US", "MO"),
+ ];
+ expect(dedupLocations(locations)).toEqual(locations);
+ });
+
+ it("treats undefined and missing state the same way", () => {
+ const locations = [
+ loc("Dubai", "AE"),
+ loc("Dubai", "AE", undefined),
+ ];
+ expect(dedupLocations(locations)).toHaveLength(1);
+ });
+
+ it("preserves the first occurrence when deduplicating", () => {
+ const first = { ...loc("Prague", "CZ"), lat: 50.08 };
+ const second = { ...loc("Prague", "CZ"), lat: 99 };
+ expect(dedupLocations([first, second])).toEqual([first]);
+ });
+});
diff --git a/src/utils/dedupLocations.ts b/src/utils/dedupLocations.ts
new file mode 100644
index 0000000..829277b
--- /dev/null
+++ b/src/utils/dedupLocations.ts
@@ -0,0 +1,11 @@
+import type { GeoLocation } from "../types/GeoLocation";
+
+export function dedupLocations(locations: GeoLocation[]): GeoLocation[] {
+ const seen = new Set();
+ return locations.filter((loc) => {
+ const key = `${loc.name}|${loc.country}|${loc.state ?? ""}`;
+ if (seen.has(key)) return false;
+ seen.add(key);
+ return true;
+ });
+}
\ No newline at end of file
diff --git a/src/utils/formatTime.test.ts b/src/utils/formatTime.test.ts
new file mode 100644
index 0000000..33996d5
--- /dev/null
+++ b/src/utils/formatTime.test.ts
@@ -0,0 +1,25 @@
+import { formatTime } from "./formatTime";
+
+describe("formatTime", () => {
+ it("returns a string containing hours and minutes", () => {
+ const result = formatTime(1620000000, 0);
+
+ expect(result).toMatch(/^\d{1,2}:\d{2}\s?(AM|PM)?$/);
+ });
+
+ it("returns different times for different timestamps", () => {
+ const t1 = formatTime(1620000000, 0);
+ const t2 = formatTime(1620003600, 0); // 1 hour later
+ expect(t1).not.toBe(t2);
+ });
+
+ it("returns the same time for the same timestamp", () => {
+ expect(formatTime(1620000000, 0)).toBe(formatTime(1620000000, 0));
+ });
+
+ it("adjusts time based on timezone offset", () => {
+ const utcTime = formatTime(1620000000, 0);
+ const offsetTime = formatTime(1620000000, 3600); // UTC+1
+ expect(utcTime).not.toBe(offsetTime);
+ });
+});
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
new file mode 100644
index 0000000..b657450
--- /dev/null
+++ b/src/utils/formatTime.ts
@@ -0,0 +1,8 @@
+export const formatTime = (timestamp: number, timezoneOffset: number) => {
+ const localMs = (timestamp + timezoneOffset) * 1000;
+ return new Date(localMs).toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ timeZone: "UTC",
+ });
+};
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index a9b5a59..f84d8bc 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,7 +5,7 @@
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
- "types": ["vite/client"],
+ "types": ["vite/client", "vitest/globals"],
"skipLibCheck": true,
/* Bundler mode */
@@ -24,5 +24,5 @@
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
- "include": ["src"]
+ "include": ["src", "vitest.ts"]
}
diff --git a/vite.config.ts b/vite.config.ts
index 4ff4f8f..994863f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,13 @@
-import { defineConfig } from "vite";
+import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
+ test: {
+ environment: "jsdom",
+ globals: true,
+ setupFiles: ["./vitest.ts"],
+ },
});
diff --git a/vitest.ts b/vitest.ts
new file mode 100644
index 0000000..d0de870
--- /dev/null
+++ b/vitest.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
-
+
- 
-
-
-
- {data.name}
-
- {data.weather[0].description}
-
-
-
+
);
-};
-
-export default WeatherCard;
+};
\ No newline at end of file
diff --git a/src/components/WeatherCardError.test.tsx b/src/components/WeatherCardError.test.tsx
new file mode 100644
index 0000000..15298b1
--- /dev/null
+++ b/src/components/WeatherCardError.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { WeatherCardError } from "./WeatherCardError";
+
+describe("WeatherCardError", () => {
+ it("renders the 'Weather Unavailable' heading", () => {
+ render(
-
-
+
-
-
-
-
-
-
- {data.main.temp}°C
-
- Current
-
-
-
- Feels like {data.main.feels_like}°C
-
-
- {data.main.temp_min}°C - {data.main.temp_max}°C
-
-
-
-
-
-
-
-
-
- {data.main.pressure} hPa
-
-
-
-
-
-
-
- {data.main.humidity}%
-
-
-
-
-
-
-
- {data.wind.speed} m/s
-
- {data.wind.deg}°
-
-
+
-
-
- {(data.visibility / 1_000).toFixed(1)} km
-
-
-
+
-
-
-
-
-
-
- Sunrise
-
-
- {formatTime(data.sys.sunrise)}
-
-
-
-
-
-
- Sunset
-
-
- {formatTime(data.sys.sunset)}
-
-
+ {city && onRemove && (
+
+ );
+};
diff --git a/src/components/WeatherCardHeader.test.tsx b/src/components/WeatherCardHeader.test.tsx
new file mode 100644
index 0000000..2533da4
--- /dev/null
+++ b/src/components/WeatherCardHeader.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { WeatherCardHeader } from "./WeatherCardHeader";
+
+describe("WeatherCardHeader", () => {
+ const defaultProps = {
+ cityName: "Prague",
+ weatherDescription: "clear sky",
+ icon: "01d",
+ };
+
+ it("renders the city name", () => {
+ render(
+
+
+
+
+
+ Weather Unavailable
+ {error}
+ ⚠️
+
+
);
+}
\ No newline at end of file
diff --git a/src/components/WeatherCardSkeleton.tsx b/src/components/WeatherCardSkeleton.tsx
new file mode 100644
index 0000000..d225bbd
--- /dev/null
+++ b/src/components/WeatherCardSkeleton.tsx
@@ -0,0 +1,59 @@
+const Skeleton = ({ className }: { className?: string }) => (
+
+);
+
+export const WeatherCardSkeleton = () => {
+ return (
+
+ 
+ )}
+
+
+
+ {icon && (
+ {cityName}
+
+ {weatherDescription}
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/constants.ts b/src/constants.ts
deleted file mode 100644
index 737af1e..0000000
--- a/src/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const OPEN_WEATHER_API_KEY = "deb39e87582e3f10df3332a768ac7cc9";
diff --git a/src/hooks/useCities.test.ts b/src/hooks/useCities.test.ts
new file mode 100644
index 0000000..ef4e2c2
--- /dev/null
+++ b/src/hooks/useCities.test.ts
@@ -0,0 +1,88 @@
+import { renderHook, act } from "@testing-library/react";
+import { useCities } from "./useCities";
+
+const STORAGE_KEY = "weather-cities";
+const DEFAULT_CITIES = ["Prague,CZ", "Barcelona,ES", "Banff,CA", "Dubai,AE"];
+
+beforeEach(() => {
+ localStorage.clear();
+});
+
+describe("useCities", () => {
+ it("loads default cities when localStorage is empty", () => {
+ const { result } = renderHook(() => useCities());
+ expect(result.current.cities).toEqual(DEFAULT_CITIES);
+ });
+
+ it("persists default cities to localStorage on first load", () => {
+ renderHook(() => useCities());
+ expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual(DEFAULT_CITIES);
+ });
+
+ it("loads cities from localStorage when present", () => {
+ const saved = ["Tokyo,JP", "Sydney,AU"];
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
+
+ const { result } = renderHook(() => useCities());
+ expect(result.current.cities).toEqual(saved);
+ });
+
+ it("addCity prepends a new city", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.addCity("Tokyo,JP"));
+
+ expect(result.current.cities[0]).toBe("Tokyo,JP");
+ expect(result.current.cities).toHaveLength(DEFAULT_CITIES.length + 1);
+ });
+
+ it("addCity does not add a duplicate city", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.addCity("Prague,CZ"));
+
+ expect(result.current.cities).toHaveLength(DEFAULT_CITIES.length);
+ });
+
+ it("addCity does not add a case-insensitive duplicate", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.addCity("prague,cz"));
+
+ expect(result.current.cities).toHaveLength(DEFAULT_CITIES.length);
+ });
+
+ it("addCity persists to localStorage", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.addCity("Tokyo,JP"));
+
+ expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toContain("Tokyo,JP");
+ });
+
+ it("removeCity removes the specified city", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.removeCity("Prague,CZ"));
+
+ expect(result.current.cities).not.toContain("Prague,CZ");
+ expect(result.current.cities).toHaveLength(DEFAULT_CITIES.length - 1);
+ });
+
+ it("removeCity persists to localStorage", () => {
+ const { result } = renderHook(() => useCities());
+
+ act(() => result.current.removeCity("Prague,CZ"));
+
+ expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).not.toContain("Prague,CZ");
+ });
+
+ it("falls back to default cities when localStorage contains invalid JSON", () => {
+ localStorage.setItem(STORAGE_KEY, "not-valid-json{{{");
+
+ const { result } = renderHook(() => useCities());
+
+ expect(result.current.cities).toEqual(DEFAULT_CITIES);
+ expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual(DEFAULT_CITIES);
+ });
+});
diff --git a/src/hooks/useCities.ts b/src/hooks/useCities.ts
new file mode 100644
index 0000000..1ca199c
--- /dev/null
+++ b/src/hooks/useCities.ts
@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+const STORAGE_KEY = "weather-cities";
+const DEFAULT_CITIES = ["Prague,CZ", "Barcelona,ES", "Banff,CA", "Dubai,AE"];
+
+function loadCities(): string[] {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ try {
+ return JSON.parse(stored);
+ } catch {
+ localStorage.removeItem(STORAGE_KEY);
+ }
+ }
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_CITIES));
+ return DEFAULT_CITIES;
+}
+
+export const useCities = () => {
+ const [cities, setCities] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+
+ ))}
+
+
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+ ))}
+
+
+