Slight refactor and add base for tests

package.json

@@ -6,6 +6,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
+    "test": "vitest",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint .",
@@ -16,9 +17,11 @@
   },
   "devDependencies": {
     "@fontsource/poppins": "^5.0.8",
+    "@playwright/test": "^1.40.1",
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.27.4",
     "@tailwindcss/forms": "^0.5.7",
+    "@types/node": "^20.11.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.16",
@@ -30,7 +33,8 @@
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.3.3",
-    "vite": "^4.4.2"
+    "vite": "^4.4.2",
+    "vitest": "^1.2.2"
   },
   "type": "module",
   "dependencies": {

src/lib/auth.ts

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import { getTokensLogin, getTokensRefresh, getUserInfo } from './emel-api/emel-api';
-import { token, user, userCredentials } from './stores';
+import { token, user, userCredentials } from './state';
 
 export async function login(email: string, password: string) {
 	const response = await getTokensLogin(email, password);

src/lib/components/Bike.svelte

@@ -10,12 +10,14 @@
 	import IconSettings from '@tabler/icons-svelte/dist/svelte/icons/IconSettings.svelte';
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
-	import { reserveBike, startTrip, updateActiveTripInfo, type ThrownError } from '../gira-api';
-	import { accountInfo, addErrorMessage, appSettings, currentTrip, type StationInfo } from '$lib/stores';
+	import type { ThrownError } from '../gira-api/api-types';
+	import { accountInfo, addErrorMessage, appSettings, currentTrip, type StationInfo } from '$lib/state';
 	import { currentPos } from '$lib/location';
 	import { fade } from 'svelte/transition';
 	import { distanceBetweenCoords } from '$lib/utils';
 	import { LOCK_DISTANCE_m } from '$lib/constants';
+	import { updateActiveTripInfo } from '$lib/state/helper';
+	import { reserveBike, startTrip } from '$lib/gira-api/api';
 
 	async function checkTripStarted() {
 		if ($currentTrip === null) return;

src/lib/components/ErrorMessage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { errorMessages } from '$lib/stores';
+	import { errorMessages } from '$lib/state';
 	import { flip } from 'svelte/animate';
 	import { fly } from 'svelte/transition';
 </script>

src/lib/components/Floating.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { safeInsets } from '$lib/stores';
+	import { safeInsets } from '$lib/state';
 	import { fade } from 'svelte/transition';
 
 	export let offset = 0, y:number|undefined = 0, left:undefined|number = undefined, right:undefined|number = undefined, bottom = false;

src/lib/components/LocationButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { currentPos, watchPosition } from '$lib/location';
-	import { following } from '$lib/stores';
+	import { following } from '$lib/state';
 	import { Capacitor } from '@capacitor/core';
 	import { Geolocation } from '@capacitor/geolocation';
 	import { draw } from 'svelte/transition';

src/lib/components/Login.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { login } from '$lib/auth';
 	import { onDestroy } from 'svelte';
-	import { userCredentials } from '../stores';
+	import { userCredentials } from '../state';
 	import { Keyboard } from '@capacitor/keyboard';
 
 	let email = '';

src/lib/components/Map.svelte

@@ -2,7 +2,7 @@
 	import { onMount, tick } from 'svelte';
 	import { AttributionControl, GeoJSONSource, Map } from 'maplibre-gl';
 	import type { GeoJSON } from 'geojson';
-	import { currentTrip, stations, selectedStation, token, following } from '$lib/stores';
+	import { currentTrip, stations, selectedStation, token, following } from '$lib/state';
 	import type { Position } from '@capacitor/geolocation';
 	import { fade } from 'svelte/transition';
 	import { pulsingDot } from '$lib/pulsing-dot';

src/lib/components/MenuPage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { safeInsets } from '$lib/stores';
+	import { safeInsets } from '$lib/state';
 	import { fade } from 'svelte/transition';
 </script>
 

src/lib/components/Profile.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { accountInfo, logOut, safeInsets, user } from '$lib/stores';
 	import IconHistory from '@tabler/icons-svelte/dist/svelte/icons/IconHistory.svelte';
 	import IconX from '@tabler/icons-svelte/dist/svelte/icons/IconX.svelte';
 	import IconTool from '@tabler/icons-svelte/dist/svelte/icons/IconTool.svelte';
@@ -10,6 +7,10 @@
 	import IconTicket from '@tabler/icons-svelte/dist/svelte/icons/IconTicket.svelte';
 	import IconLogout2 from '@tabler/icons-svelte/dist/svelte/icons/IconLogout2.svelte';
 	import IconMessageReport from '@tabler/icons-svelte/dist/svelte/icons/IconMessageReport.svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { accountInfo, safeInsets, user } from '$lib/state';
+	import { logOut } from '$lib/state/helper';
 	import SettingsEntry from './SettingsEntry.svelte';
 	import Metric from './Metric.svelte';
 	import History from './settings/History.svelte';

src/lib/components/ProfileButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { user } from '$lib/stores';
+	import { user } from '$lib/state';
 </script>
 
 {#if $user}

src/lib/components/StationMenu.svelte

@@ -2,14 +2,14 @@
 	import { tweened } from 'svelte/motion';
 	import Bike from '$lib/components/Bike.svelte';
 	import { cubicOut } from 'svelte/easing';
-	import { getStationInfo } from '$lib/gira-api';
 	import { onMount } from 'svelte';
-	import { stations, selectedStation, type StationInfo } from '$lib/stores';
+	import { stations, selectedStation, type StationInfo } from '$lib/state';
 	import { tick } from 'svelte';
 	import { currentPos } from '$lib/location';
 	import { distanceBetweenCoords, formatDistance } from '$lib/utils';
 	import { fade } from 'svelte/transition';
 	import BikeSkeleton from './BikeSkeleton.svelte';
+	import { getStationInfo } from '$lib/gira-api/api';
 
 	export let bikeListHeight = 0;
 	export let posTop:number|undefined = 0;

src/lib/components/TripRating.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { addErrorMessage, safeInsets } from '$lib/stores';
+	import { addErrorMessage, safeInsets } from '$lib/state';
 	import IconMoodWrrr from '@tabler/icons-svelte/dist/svelte/icons/IconMoodWrrr.svelte';
 	import IconMoodConfuzed from '@tabler/icons-svelte/dist/svelte/icons/IconMoodConfuzed.svelte';
 	import IconMoodConfuzedFilled from '@tabler/icons-svelte/dist/svelte/icons/IconMoodConfuzedFilled.svelte';
@@ -10,8 +10,8 @@
 	import IconMoodHappy from '@tabler/icons-svelte/dist/svelte/icons/IconMoodHappy.svelte';
 	import IconMoodHappyFilled from '@tabler/icons-svelte/dist/svelte/icons/IconMoodHappyFilled.svelte';
 	import { fade, fly } from 'svelte/transition';
-	import { rateTrip } from '$lib/gira-api';
-	import { tripRating } from '$lib/stores';
+	import { tripRating } from '$lib/state';
+	import { rateTrip } from '$lib/gira-api/api';
 
 	export let code:string;
 	let rating:number;

src/lib/components/TripStatus.svelte

@@ -2,7 +2,7 @@
 	import { fade, fly } from 'svelte/transition';
 	import Metric from '$lib/components/Metric.svelte';
 	import { cubicInOut } from 'svelte/easing';
-	import { following, safeInsets, currentTrip as t } from '$lib/stores';
+	import { following, safeInsets, currentTrip as t } from '$lib/state';
 	import { onMount } from 'svelte';
 	import { KeepAwake } from '@capacitor-community/keep-awake';
 

src/lib/components/settings/About.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { version } from '$app/environment';
-	import { safeInsets } from '$lib/stores';
+	import { safeInsets } from '$lib/state';
 	import MenuPage from '../MenuPage.svelte';
 	async function wait(ms:number) {
 		return new Promise(resolve => setTimeout(resolve, ms));

src/lib/components/settings/History.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getTripHistory } from '$lib/gira-api';
-	import type { TripHistory_TripDetail } from '$lib/gira-api/types';
+	import type { TripHistory_TripDetail } from '$lib/gira-api/api-types';
 	import { onMount } from 'svelte';
 	import HistoryItem from './HistoryItem.svelte';
-	import { safeInsets } from '$lib/stores';
+	import { safeInsets } from '$lib/state';
 	import { fly } from 'svelte/transition';
 	import MenuPage from '../MenuPage.svelte';
+	import { getTripHistory } from '$lib/gira-api/api';
 
 	let trips:TripHistory_TripDetail[] = [];
 	let observed:HTMLDivElement;

src/lib/components/settings/HistoryItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { TripHistory_TripDetail } from '$lib/gira-api/types';
+	import type { TripHistory_TripDetail } from '$lib/gira-api/api-types';
 	import Metric from '../Metric.svelte';
 
 	export let trip: TripHistory_TripDetail|null;

src/lib/components/settings/Settings.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { LOCK_DISTANCE_m } from '$lib/constants';
-	import { appSettings } from '$lib/stores';
+	import { appSettings } from '$lib/state';
 	import MenuPage from '../MenuPage.svelte';
 	import Toggle from '../Toggle.svelte';
 </script>

src/lib/emel-api/emel-api.ts

@@ -1,4 +1,4 @@
-import type { Token } from '$lib/stores';
+import type { Token } from '$lib/state';
 import type { ApiResponse, TokenOpt, UserInfo } from './types';
 
 export async function getTokensLogin(email: string, password: string) {

src/lib/gira-api/__mocks__/api.ts

@@ -0,0 +1,159 @@
+import type { M, Q } from '../api-types';
+
+export async function reserveBike(serialNumber: string): Promise<M<['reserveBike']>> {
+	return {
+		reserveBike: true,
+	};
+}
+
+export async function getStationInfo(stationId: string): Promise<Q<['getBikes', 'getDocks']>> {
+	// TODO
+	return { getBikes: [], getDocks: [] };
+}
+
+export async function cancelBikeReserve(): Promise<M<['cancelBikeReserve']>> {
+	return { cancelBikeReserve: true };
+}
+
+export async function startTrip(): Promise<M<['startTrip']>> {
+	return {
+		startTrip: true,
+	};
+}
+
+export async function rateTrip(tripCode: string, tripRating: number, tripComment?: string, tripAttachment?: File): Promise<M<['rateTrip']>> {
+	return {
+		rateTrip: true,
+	};
+}
+
+export async function tripPayWithNoPoints(tripCode: string): Promise<M<['tripPayWithNoPoints']>> {
+	// TODO check what this actually returns?
+	return {
+		tripPayWithNoPoints: 123,
+	};
+}
+
+export async function tripPayWithPoints(tripCode: string): Promise<M<['tripPayWithPoints']>> {
+	// TODO check what this actually returns?
+	return {
+		tripPayWithPoints: 123,
+	};
+}
+
+export async function fullOnetimeInfo(): Promise<Q<['getStations', 'client', 'activeUserSubscriptions', 'activeTrip', 'unratedTrips', 'tripHistory']>> {
+	return {
+		activeTrip: null,
+		client: [{ balance: 4, bonus: 12345 }],
+		getStations: [{
+			'code': '0000000003',
+			'description': 'Alameda dos Oceanos',
+			'latitude': 38.756161,
+			'longitude': -9.096804,
+			'name': '101 - Alameda dos Oceanos / Rua dos Argonautas',
+			'bikes': 5,
+			'docks': 14,
+			'serialNumber': '1000101',
+			'assetStatus': 'active',
+		},
+		{
+			'code': '0000000005',
+			'description': 'Rua do Fogo de Santelmo',
+			'latitude': 38.761218,
+			'longitude': -9.095019,
+			'name': '103 - Jardim da Água',
+			'bikes': 2,
+			'docks': 17,
+			'serialNumber': '1000103',
+			'assetStatus': 'active',
+		}],
+		activeUserSubscriptions: [
+			{
+				'expirationDate': '2024-10-01T00:00:18Z',
+				'subscriptionStatus': 'paid',
+				'name': 'Passe Anual',
+				'type': 'anual',
+				'active': true,
+			},
+		],
+		unratedTrips: [
+			{
+				'code': 'JWA8FQ1PFL',
+				'startDate': '2024-01-01T13:45:50Z',
+				'endDate': '2024-01-01T14:01:56Z',
+				'rating': null,
+				'startLocation': '0000009904',
+				'endLocation': '0000009905',
+				'cost': 0,
+				'costBonus': 0,
+				'asset': '0000013066',
+			},
+		],
+		tripHistory: (await getTripHistory(0, 10)).tripHistory,
+	};
+}
+
+export async function getTripHistory(pageNum: number, pageSize: number): Promise<Q<['tripHistory']>> {
+	return {
+		tripHistory: [
+			{
+				'code': '6JWFVI9O8N',
+				'startDate': '2024-01-18T20:32:38Z',
+				'endDate': '2024-01-18T20:51:52Z',
+				'rating': 5,
+				'bikeName': 'E0593',
+				'startLocation': '419 - Av. António José de Almeida / Instituto Superior Técnico',
+				'endLocation': '484 - Rua Professor Vieira de Almeida',
+				'bonus': 10,
+				'usedPoints': 0,
+				'cost': 0,
+				'bikeType': 'electric',
+			},
+			{
+				'code': 'JWA8FQ1PFL',
+				'startDate': '2024-01-18T13:45:50Z',
+				'endDate': '2024-01-18T14:01:56Z',
+				'rating': 0,
+				'bikeName': 'E0967',
+				'startLocation': '484 - Rua Professor Vieira de Almeida',
+				'endLocation': '420 - Av. Rovisco Pais / Av. Manuel da Maia',
+				'bonus': 110,
+				'usedPoints': 0,
+				'cost': 0,
+				'bikeType': 'electric',
+			},
+			{
+				'code': '5BRNS2SR5A',
+				'startDate': '2024-01-17T23:23:02Z',
+				'endDate': '2024-01-17T23:32:21Z',
+				'rating': 5,
+				'bikeName': 'E0154',
+				'startLocation': '476 - Av. Professor Gama Pinto / Reitoria',
+				'endLocation': '484 - Rua Professor Vieira de Almeida',
+				'bonus': 10,
+				'usedPoints': 0,
+				'cost': 0,
+				'bikeType': 'electric',
+			},
+			{
+				'code': 'DIIOWVFVSL',
+				'startDate': '2024-01-17T19:28:10Z',
+				'endDate': '2024-01-17T19:35:16Z',
+				'rating': 5,
+				'bikeName': 'E1953',
+				'startLocation': '483 - Rua Professor Francisco Lucas Pires ',
+				'endLocation': '475 - Av. Professor Gama Pinto / Cantina Velha',
+				'bonus': 110,
+				'usedPoints': 0,
+				'cost': 0,
+				'bikeType': 'electric',
+			},
+		],
+	};
+}
+
+export async function getActiveTripInfo(): Promise<Q<['activeTrip']>> {
+	return {
+		activeTrip: null,
+	};
+}

src/lib/gira-api/types.ts → src/lib/gira-api/api-types.ts

@@ -1,3 +1,10 @@
+export type ThrownError = {
+	errors: {message:string}[];
+	status: number;
+};
+export type Q<T extends (keyof Query)[]> = {[K in T[number]]:Query[K]};
+export type M<T extends (keyof Mutation)[]> = {[K in T[number]]:Mutation[K]};
+
 export type Maybe<T> = T | null
 export type Exact<T extends { [key: string]: unknown }> = {
   [K in keyof T]: T[K]