Files
TREK/client/tests/unit/stores/settingsStore.test.ts
T
jubnl 0f4766e131 feat(map): open maps framed on their places (builds on #1393) (#1556)
* fix(map): fit MapLibre routes reliably

* fix(map): default planner map to world view

* fix(map): only await route geometry when a route is actually pending

The fit armed a pending route-refit slot on every fitKey change, even with no
route drawn, and only ever cleared it when a route arrived. So a route toggled
on much later — after the user had panned elsewhere — was mistaken for the
awaited geometry and yanked the camera back, and only on the first toggle.

Arm the slot only when a route is already on screen: updateRouteForDay lays down
straight lines in the same batch as the fit and upgrades them to real geometry a
moment later, so an empty route at fit time means none is coming.

* fix(collections): open the empty collection map on the world view

A collection with no mappable places centred on Paris, the same hardcoded
default this branch removes everywhere else.

* feat(map): open the map framed on its places

A trip in Japan opened on the world view at 0,0 and only then animated a fitBounds
flight across the planet — the hardcoded default was the map's answer to a question
its own places already answer.

Each renderer now derives its opening camera from the places it receives, at
construction: MapView for Leaflet, MapViewGL for MapLibre and Mapbox (whose zoom
runs one level below Leaflet's, measuring against a 512px world tile rather than
256px). Doing it at construction is what confines it to load — the map is built
once, and by then the trip's places are in hand. Nothing recomputes it afterwards,
so the camera stays where the user leaves it, and the opening fit stands down
rather than overruling the gentler zoom a lone place opens at.

A trip with no coordinates still falls back to the world view. Collections and the
public shared-trip page frame themselves the same way.

* refactor(settings): drop the default map centre and zoom

Nothing reads them now that every map frames itself on its own places, and a
home-city default was the wrong answer for the next trip on the other side of the
world. The style preview keeps a fixed location of its own: it needs a city to show
label density and 3D buildings, which open ocean cannot.

* fix(map): frame the map the way each renderer can actually draw

Two defects the unit tests missed and running the app exposed.

MapLibre and Mapbox opened on Null Island at zoom 2 regardless of the places: the
effect that mirrors an external centre prop onto the camera also ran on mount, so
it jumped straight to the default nobody passed and threw away the camera the map
had just been built with. It now only responds to actual changes, which is what it
was for. Leaflet was unaffected — its controller already guarded on the centre
changing.

A trip spanning Sydney, Reykjavik and Santiago lost Sydney's marker entirely. The
narrowest arc containing all three crosses the antimeridian, and framing there is
only sound on a renderer that repeats the world: MapLibre and Mapbox draw a marker
on whichever copy is nearest the camera, Leaflet draws one world and puts the
marker at its absolute position — off-screen. Leaflet now spans the long way round,
as L.latLngBounds would. The test that should have caught this wrapped the x-offset
in its own projection helper, quietly assuming behaviour Leaflet does not have; it
now models each renderer's real wrapping.

---------

Co-authored-by: Azalea <noreply@aza.moe>
2026-07-14 19:56:47 +02:00

223 lines
7.9 KiB
TypeScript

import { describe, it, expect, beforeEach } from 'vitest';
import { http, HttpResponse } from 'msw';
import { server } from '../../helpers/msw/server';
import { useSettingsStore } from '../../../src/store/settingsStore';
import { resetAllStores } from '../../helpers/store';
import { buildSettings } from '../../helpers/factories';
beforeEach(() => {
resetAllStores();
});
describe('settingsStore', () => {
describe('FE-SETTINGS-001: loadSettings()', () => {
it('fetches settings and updates store', async () => {
const settings = buildSettings({ default_currency: 'EUR', language: 'de' });
server.use(
http.get('/api/settings', () => HttpResponse.json({ settings }))
);
await useSettingsStore.getState().loadSettings();
const state = useSettingsStore.getState();
expect(state.settings.default_currency).toBe('EUR');
expect(state.settings.language).toBe('de');
expect(state.isLoaded).toBe(true);
});
});
describe('FE-SETTINGS-002: updateSetting() optimistic update', () => {
it('immediately updates local state before API resolves', async () => {
// The store's set() is called synchronously before the first await (settingsApi.set)
// so state is visible without needing to await the full action.
const promise = useSettingsStore.getState().updateSetting('default_currency', 'GBP');
// Check optimistic state — no await needed here
expect(useSettingsStore.getState().settings.default_currency).toBe('GBP');
// Let the API call finish to avoid dangling promises
await promise;
});
});
describe('FE-SETTINGS-003: updateSetting() reverts on API failure', () => {
it('throws when API fails', async () => {
server.use(
http.put('/api/settings', () =>
HttpResponse.json({ error: 'Server error' }, { status: 500 })
)
);
// The store optimistically sets, then throws — the revert is a throw
await expect(
useSettingsStore.getState().updateSetting('default_currency', 'GBP')
).rejects.toThrow();
});
});
describe('FE-SETTINGS-004: Language change', () => {
it('updates language field and localStorage', async () => {
await useSettingsStore.getState().updateSetting('language', 'fr');
const state = useSettingsStore.getState();
expect(state.settings.language).toBe('fr');
expect(localStorage.getItem('app_language')).toBe('fr');
});
});
describe('FE-SETTINGS-005: loadSettings failure', () => {
it('sets isLoaded: true even on API failure (graceful)', async () => {
server.use(
http.get('/api/settings', () =>
HttpResponse.json({ error: 'Server error' }, { status: 500 })
)
);
await useSettingsStore.getState().loadSettings();
const state = useSettingsStore.getState();
expect(state.isLoaded).toBe(true);
});
});
describe('FE-STORE-SETTINGS-006: setLanguageLocal updates state and localStorage', () => {
it('sets language in state and localStorage without an API call', () => {
useSettingsStore.getState().setLanguageLocal('ja');
const state = useSettingsStore.getState();
expect(state.settings.language).toBe('ja');
expect(localStorage.getItem('app_language')).toBe('ja');
});
});
describe('FE-STORE-SETTINGS-007: setLanguageLocal without prior localStorage value', () => {
it('writes to localStorage even when no prior value exists', () => {
localStorage.clear();
useSettingsStore.getState().setLanguageLocal('ko');
const state = useSettingsStore.getState();
expect(state.settings.language).toBe('ko');
expect(localStorage.getItem('app_language')).toBe('ko');
});
});
describe('FE-STORE-SETTINGS-008: updateSettings bulk update', () => {
it('updates multiple settings keys and calls bulk API', async () => {
await useSettingsStore.getState().updateSettings({ dark_mode: true, default_currency: 'JPY' });
const state = useSettingsStore.getState();
expect(state.settings.dark_mode).toBe(true);
expect(state.settings.default_currency).toBe('JPY');
});
});
describe('FE-STORE-SETTINGS-009: updateSettings optimistic update', () => {
it('updates state synchronously before API resolves', async () => {
const promise = useSettingsStore.getState().updateSettings({ dark_mode: true });
expect(useSettingsStore.getState().settings.dark_mode).toBe(true);
await promise;
});
});
describe('FE-STORE-SETTINGS-010: updateSettings API failure throws', () => {
it('throws when bulk API returns 500', async () => {
server.use(
http.post('/api/settings/bulk', () =>
HttpResponse.json({ error: 'Server error' }, { status: 500 })
)
);
await expect(
useSettingsStore.getState().updateSettings({ dark_mode: true })
).rejects.toThrow();
});
});
describe('FE-STORE-SETTINGS-011: updateSetting non-language key does not write to localStorage', () => {
it('does not modify app_language in localStorage', async () => {
const before = localStorage.getItem('app_language');
await useSettingsStore.getState().updateSetting('dark_mode', true);
expect(localStorage.getItem('app_language')).toBe(before);
});
});
describe('FE-STORE-SETTINGS-012: loadSettings merges server values with defaults', () => {
it('preserves default keys not returned by server', async () => {
server.use(
http.get('/api/settings', () =>
HttpResponse.json({ settings: { dark_mode: true } })
)
);
await useSettingsStore.getState().loadSettings();
const state = useSettingsStore.getState();
expect(state.settings.dark_mode).toBe(true);
expect(state.settings.language).toBe('en');
// No display currency of their own: Costs then follows each trip's own currency
// rather than forcing every trip through one code.
expect(state.settings.default_currency).toBe('');
});
});
describe('FE-STORE-SETTINGS-013: updateSetting for time_format', () => {
it('updates time_format in state', async () => {
await useSettingsStore.getState().updateSetting('time_format', '24h');
expect(useSettingsStore.getState().settings.time_format).toBe('24h');
});
});
describe('FE-STORE-SETTINGS-015: setLanguageTransient updates state without touching localStorage', () => {
it('sets language in state but does not write to localStorage', () => {
localStorage.clear();
useSettingsStore.getState().setLanguageTransient('fr');
expect(useSettingsStore.getState().settings.language).toBe('fr');
expect(localStorage.getItem('app_language')).toBeNull();
});
});
describe('FE-STORE-SETTINGS-016: setLanguageTransient rejects unsupported language code', () => {
it('leaves state unchanged for an unknown code', () => {
const before = useSettingsStore.getState().settings.language;
useSettingsStore.getState().setLanguageTransient('xx');
expect(useSettingsStore.getState().settings.language).toBe(before);
});
});
describe('FE-STORE-SETTINGS-017: setLanguageTransient does not overwrite an explicit localStorage choice', () => {
it('localStorage remains unchanged after a transient set', () => {
localStorage.setItem('app_language', 'de');
useSettingsStore.getState().setLanguageTransient('es');
expect(localStorage.getItem('app_language')).toBe('de');
});
});
describe('FE-STORE-SETTINGS-014: updateSetting API failure leaves optimistic state', () => {
it('throws on API failure but keeps the optimistic state', async () => {
server.use(
http.put('/api/settings', () =>
HttpResponse.json({ error: 'Server error' }, { status: 500 })
)
);
await expect(
useSettingsStore.getState().updateSetting('default_currency', 'EUR')
).rejects.toThrow();
expect(useSettingsStore.getState().settings.default_currency).toBe('EUR');
});
});
});