mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-24 21:25:22 +00:00
## Summary Implements the customizer v2 per the [approved spec](docs/specs/customizer-rework.md), replacing the v1 customizer's scattered state management with a clean event-driven architecture. Resolves #502. ## What Changed ### New: `public/customize-v2.js` Complete rewrite of the customizer as a self-contained IIFE with: - **Single localStorage key** (`cs-theme-overrides`) replacing 7 scattered keys - **Three state layers:** server defaults (immutable) → user overrides (delta) → effective config (computed) - **Full data flow pipeline:** `write → read-back → merge → atomic SITE_CONFIG assign → apply CSS → dispatch theme-changed` - **Color picker optimistic CSS** (Decision #12): `input` events update CSS directly for responsiveness; `change` events trigger the full pipeline - **Override indicator dots** (●) on each field — click to reset individual values - **Section-level override count badges** on tabs - **Browser-local banner** in panel header: "These settings are saved in your browser only" - **Auto-save status indicator** in footer: "All changes saved" / "Saving..." / "⚠️ Storage full" - **Export/Import** with full shape validation (`validateShape()`) - **Presets** flow through the standard pipeline (`writeOverrides(presetData) → pipeline`) - **One-time migration** from 7 legacy localStorage keys (exact field mapping per spec) - **Validation** on all writes: color format, opacity range, timestamp enum values - **QuotaExceededError handling** with visible user warning ### Modified: `public/app.js` Replaced ~80 lines of inline theme application code with a 15-line `_customizerV2.init(cfg)` call. The customizer v2 handles all merging, CSS application, and global state updates. ### Modified: `public/index.html` Swapped `customize.js` → `customize-v2.js` script tag. ### Added: `docs/specs/customizer-rework.md` The full approved spec, included in the repo for reference. ## Migration On first page load: 1. Checks if `cs-theme-overrides` already exists → skip if yes 2. Reads all 7 legacy keys (`meshcore-user-theme`, `meshcore-timestamp-*`, `meshcore-heatmap-opacity`, `meshcore-live-heatmap-opacity`) 3. Maps them to the new delta format per the spec's field-by-field mapping 4. Writes to `cs-theme-overrides`, removes all legacy keys 5. Continues with normal init Users with existing customizations will see them preserved automatically. ## Dark/Light Mode - `theme` section stores light mode overrides, `themeDark` stores dark mode overrides - `meshcore-theme` localStorage key remains **separate** (view preference, not customization) - Switching modes re-runs the full pipeline with the correct section ## Testing - All existing tests pass (`test-packet-filter.js`, `test-aging.js`, `test-frontend-helpers.js`) - Old `customize.js` is NOT modified — left in place for reference but no longer loaded ## Not in Scope (per spec) - Undo/redo stack - Cross-tab synchronization - Server-side admin import endpoint - Map config / geo-filter overrides --------- Co-authored-by: you <you@example.com>
This commit is contained in:
Kpa-clawbot
@@ -0,0 +1,568 @@
|
||||
# Customizer Rework Spec
|
||||
|
||||
## Overview
|
||||
|
||||
The current customizer (`public/customize.js`) suffers from fundamental state management issues documented in [issue #284](https://github.com/Kpa-clawbot/CoreScope/issues/284). State is scattered across 7 localStorage keys, CSS updates bypass the data layer, and there's no single source of truth for the effective configuration.
|
||||
|
||||
This spec defines a clean rework based on event-driven state management with a single data flow path. The goal: predictable state, minimal storage footprint, portable config format, and zero ambiguity about which values are active and why.
|
||||
|
||||
## Design Decisions
|
||||
|
||||
These are agreed and final. Do not reinterpret or deviate.
|
||||
|
||||
1. **Three state layers:** server defaults (immutable after fetch), user overrides (delta in localStorage), effective config (computed via merge, never stored directly).
|
||||
2. **Single data flow:** user action → debounce (~300ms) → write delta to localStorage → read back from localStorage → merge with server defaults → apply CSS variables. No shortcuts, no optimistic CSS updates (see Decision #12 for the one exception).
|
||||
3. **One localStorage key:** `cs-theme-overrides` — replaces the current 7 scattered keys (`meshcore-user-theme`, `meshcore-timestamp-mode`, `meshcore-timestamp-timezone`, `meshcore-timestamp-format`, `meshcore-timestamp-custom-format`, `meshcore-heatmap-opacity`, `meshcore-live-heatmap-opacity`).
|
||||
4. **Universal format:** same shape as the server's `ThemeResponse` plus additional keys. Works identically for user export, admin `theme.json`, and user import.
|
||||
5. **User overrides always win** in merge — `merge(serverDefaults, userOverrides)` = effective config.
|
||||
6. **Override indicator:** shown in customizer panel ONLY when override value differs from current server default.
|
||||
7. **No silent pruning:** overrides stay in localStorage until the user explicitly resets them (per-field reset or full reset). The delta may contain values that happen to match current server defaults — that's fine. User intent is preserved; nothing silently disappears.
|
||||
8. **Per-field reset:** remove a single key from the delta → re-merge → re-apply CSS.
|
||||
9. **Full reset:** `localStorage.removeItem('cs-theme-overrides')` → re-merge (effective = server defaults) → re-apply CSS.
|
||||
10. **Export = dump delta object as JSON download. Import = validate shape, write to localStorage, trigger re-merge.**
|
||||
11. **No CSS magic:** CSS variables ONLY update after the localStorage round-trip completes. No optimistic updates (see Decision #12 for the one exception).
|
||||
12. **Color picker optimistic CSS exception:** For continuous inputs (color pickers, sliders), CSS is updated optimistically during `input` events for visual responsiveness. The localStorage write only happens on `change` event (mouseup/blur). On `change`, the full pipeline runs: write → read → merge → apply (which will match the optimistic state). If the user refreshes mid-drag before `change` fires, the change is lost — this is acceptable. This is the ONLY exception to the localStorage-first rule.
|
||||
|
||||
## Dark/Light Mode
|
||||
|
||||
The customizer treats light and dark mode as separate override sections:
|
||||
|
||||
- **`theme`** stores light mode color overrides.
|
||||
- **`themeDark`** stores dark mode color overrides.
|
||||
- When the user changes a color in the customizer, it writes to whichever section matches their current mode: `theme` if light, `themeDark` if dark.
|
||||
- The dark/light mode toggle preference (`meshcore-theme` localStorage key) is **separate** from the delta object. It is a view preference, not a customization — it is not stored in `cs-theme-overrides`.
|
||||
- The customizer UI shows color fields for the currently active mode only. Switching modes re-renders the color fields with values from the matching section.
|
||||
|
||||
## Presets
|
||||
|
||||
The existing preset themes are preserved and flow through the standard pipeline:
|
||||
|
||||
**Available presets:** Default, Ocean, Forest, Sunset, Monochrome.
|
||||
|
||||
**How presets work:**
|
||||
- Clicking a preset writes its values to localStorage via the same pipeline as any other change: preset data → `writeOverrides()` → read back → merge → apply CSS.
|
||||
- Presets are NOT special — they are pre-built delta objects applied through the standard flow.
|
||||
- Each preset contains both `theme` (light) and `themeDark` (dark) sections, plus any other overrides the preset defines (e.g., `nodeColors`).
|
||||
- **"Reset to Default"** = clear all overrides (equivalent to full reset: `localStorage.removeItem('cs-theme-overrides')` → re-merge → apply).
|
||||
|
||||
**Preset data format:** Same shape as the delta object. Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"theme": {
|
||||
"accent": "#0077b6",
|
||||
"navBg": "#03045e",
|
||||
"background": "#f0f7fa"
|
||||
},
|
||||
"themeDark": {
|
||||
"accent": "#48cae4",
|
||||
"navBg": "#03045e",
|
||||
"background": "#0a1929"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Applying a preset **replaces** the entire delta (it's a `writeOverrides(presetData)`, not a merge onto existing overrides). The user can then further customize individual fields on top.
|
||||
|
||||
## Data Model
|
||||
|
||||
### Delta Object Format
|
||||
|
||||
The user override delta is a sparse object — it only contains fields the user has explicitly changed. The shape mirrors the server's `ThemeResponse` (from `/api/config/theme`) plus additional client-only sections:
|
||||
|
||||
```json
|
||||
{
|
||||
"branding": {
|
||||
"siteName": "string — site name override",
|
||||
"tagline": "string — tagline override",
|
||||
"logoUrl": "string — custom logo URL",
|
||||
"faviconUrl": "string — custom favicon URL"
|
||||
},
|
||||
"theme": {
|
||||
"accent": "string — CSS color, light mode accent",
|
||||
"accentHover": "string — CSS color, light mode accent hover",
|
||||
"navBg": "string — CSS color, nav background",
|
||||
"navBg2": "string — CSS color, nav secondary background",
|
||||
"navText": "string — CSS color, nav text",
|
||||
"navTextMuted": "string — CSS color, nav muted text",
|
||||
"background": "string — CSS color, page background",
|
||||
"text": "string — CSS color, body text",
|
||||
"textMuted": "string — CSS color, muted text",
|
||||
"border": "string — CSS color, borders",
|
||||
"surface1": "string — CSS color, surface level 1",
|
||||
"surface2": "string — CSS color, surface level 2",
|
||||
"cardBg": "string — CSS color, card backgrounds",
|
||||
"contentBg": "string — CSS color, content area background",
|
||||
"detailBg": "string — CSS color, detail pane background",
|
||||
"inputBg": "string — CSS color, input backgrounds",
|
||||
"rowStripe": "string — CSS color, alternating row stripe",
|
||||
"rowHover": "string — CSS color, row hover highlight",
|
||||
"selectedBg": "string — CSS color, selected row background",
|
||||
"statusGreen": "string — CSS color, healthy status",
|
||||
"statusYellow": "string — CSS color, degraded status",
|
||||
"statusRed": "string — CSS color, critical status",
|
||||
"font": "string — CSS font-family for body text",
|
||||
"mono": "string — CSS font-family for monospace"
|
||||
},
|
||||
"themeDark": {
|
||||
"/* same keys as theme — dark mode overrides */"
|
||||
},
|
||||
"nodeColors": {
|
||||
"repeater": "string — CSS color",
|
||||
"companion": "string — CSS color",
|
||||
"room": "string — CSS color",
|
||||
"sensor": "string — CSS color",
|
||||
"observer": "string — CSS color"
|
||||
},
|
||||
"typeColors": {
|
||||
"ADVERT": "string — CSS color",
|
||||
"GRP_TXT": "string — CSS color",
|
||||
"TXT_MSG": "string — CSS color",
|
||||
"ACK": "string — CSS color",
|
||||
"REQUEST": "string — CSS color",
|
||||
"RESPONSE": "string — CSS color",
|
||||
"TRACE": "string — CSS color",
|
||||
"PATH": "string — CSS color",
|
||||
"ANON_REQ": "string — CSS color"
|
||||
},
|
||||
"home": {
|
||||
"heroTitle": "string",
|
||||
"heroSubtitle": "string",
|
||||
"steps": "[array of {emoji, title, description}]",
|
||||
"checklist": "[array of strings]",
|
||||
"footerLinks": "[array of {label, url}]"
|
||||
},
|
||||
"timestamps": {
|
||||
"defaultMode": "string — 'ago' | 'absolute'",
|
||||
"timezone": "string — 'local' | 'utc'",
|
||||
"formatPreset": "string — 'iso' | 'iso-seconds' | 'locale'",
|
||||
"customFormat": "string — custom strftime-style format"
|
||||
},
|
||||
"heatmapOpacity": "number — 0.0 to 1.0",
|
||||
"liveHeatmapOpacity": "number — 0.0 to 1.0"
|
||||
}
|
||||
```
|
||||
|
||||
**Rules:**
|
||||
- All sections and keys are optional. An empty object `{}` means "no overrides."
|
||||
- The `timestamps`, `heatmapOpacity`, and `liveHeatmapOpacity` keys are client-only extensions — not part of the server's `ThemeResponse`, but included in the universal format for portability.
|
||||
|
||||
### localStorage Key
|
||||
|
||||
**Key:** `cs-theme-overrides`
|
||||
**Value:** JSON string of the delta object above.
|
||||
**Absent key** = no overrides = effective config equals server defaults.
|
||||
|
||||
### Dark/Light Mode Preference
|
||||
|
||||
**Key:** `meshcore-theme`
|
||||
**Value:** `"dark"` or `"light"` (or absent = follow system preference).
|
||||
**This key is NOT part of the delta object.** It controls which mode is active, not which colors are used. The delta stores overrides for both modes independently in `theme` and `themeDark`.
|
||||
|
||||
## Data Flow Diagrams
|
||||
|
||||
### Page Load
|
||||
|
||||
```
|
||||
┌─────────────┐ ┌──────────────────┐ ┌─────────────────┐
|
||||
│ Fetch │ │ Read localStorage │ │ Migration check │
|
||||
│ /api/config/ │ │ cs-theme-overrides│ │ (one-time) │
|
||||
│ theme │ └────────┬─────────┘ └────────┬────────┘
|
||||
└──────┬──────┘ │ │
|
||||
│ │ ┌────────────────────┘
|
||||
▼ ▼ ▼
|
||||
serverDefaults userOverrides (possibly migrated)
|
||||
│ │
|
||||
▼ ▼
|
||||
┌──────────────────────────────────────┐
|
||||
│ computeEffective(server, userOverrides) │
|
||||
└──────────────┬───────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────────────┐
|
||||
│ window.SITE_CONFIG = effective │ ← atomic assignment
|
||||
└──────────────┬───────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────┐
|
||||
│ applyCSS(effective) │ ← sets CSS vars on :root for current mode
|
||||
└──────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────┐
|
||||
│ dispatch 'theme-changed' │ ← bare signal, no payload
|
||||
└──────────────────────────────┘
|
||||
```
|
||||
|
||||
### User Change (e.g., picks new accent color)
|
||||
|
||||
```
|
||||
User action (input/click)
|
||||
│
|
||||
▼
|
||||
debounce(300ms)
|
||||
│
|
||||
▼
|
||||
setOverride('theme', 'accent', '#ff0000')
|
||||
│
|
||||
├─► readOverrides() ← read current delta from localStorage
|
||||
│ │
|
||||
│ ▼
|
||||
├─► update delta object ← set delta.theme.accent = '#ff0000'
|
||||
│ │
|
||||
│ ▼
|
||||
├─► writeOverrides(delta) ← serialize & write to localStorage
|
||||
│ │
|
||||
│ ▼
|
||||
├─► readOverrides() ← read BACK from localStorage (round-trip)
|
||||
│ │
|
||||
│ ▼
|
||||
├─► computeEffective(server, delta)
|
||||
│ │
|
||||
│ ▼
|
||||
├─► window.SITE_CONFIG = effective ← atomic assignment
|
||||
│ │
|
||||
│ ▼
|
||||
└─► applyCSS(effective) ← CSS vars updated on :root
|
||||
│
|
||||
▼
|
||||
dispatch 'theme-changed'
|
||||
```
|
||||
|
||||
**Color picker / slider exception:** During continuous `input` events (drag), CSS is updated optimistically (directly setting `--var` on `:root`) without the localStorage round-trip. The full pipeline above only runs on the `change` event (mouseup/blur).
|
||||
|
||||
### Per-Field Reset
|
||||
|
||||
```
|
||||
User clicks reset icon on a field
|
||||
│
|
||||
▼
|
||||
clearOverride('theme', 'accent')
|
||||
│
|
||||
├─► readOverrides()
|
||||
├─► delete delta.theme.accent
|
||||
├─► if delta.theme is empty, delete delta.theme
|
||||
├─► writeOverrides(delta)
|
||||
├─► readOverrides() ← round-trip
|
||||
├─► computeEffective(server, delta)
|
||||
├─► window.SITE_CONFIG = effective
|
||||
└─► applyCSS(effective)
|
||||
│
|
||||
▼
|
||||
dispatch 'theme-changed'
|
||||
```
|
||||
|
||||
### Full Reset
|
||||
|
||||
```
|
||||
User clicks "Reset All"
|
||||
│
|
||||
▼
|
||||
localStorage.removeItem('cs-theme-overrides')
|
||||
│
|
||||
▼
|
||||
computeEffective(server, {}) ← no overrides = server defaults
|
||||
│
|
||||
▼
|
||||
window.SITE_CONFIG = effective
|
||||
│
|
||||
▼
|
||||
applyCSS(effective)
|
||||
│
|
||||
▼
|
||||
dispatch 'theme-changed'
|
||||
```
|
||||
|
||||
### Export
|
||||
|
||||
```
|
||||
User clicks "Export"
|
||||
│
|
||||
▼
|
||||
readOverrides()
|
||||
│
|
||||
▼
|
||||
JSON.stringify(delta, null, 2)
|
||||
│
|
||||
▼
|
||||
trigger download as .json file
|
||||
```
|
||||
|
||||
### Import
|
||||
|
||||
```
|
||||
User selects .json file
|
||||
│
|
||||
▼
|
||||
parse JSON
|
||||
│
|
||||
▼
|
||||
validateShape(parsed) ← check structure, validate values
|
||||
│
|
||||
├─► invalid → show error, abort
|
||||
│
|
||||
▼ valid
|
||||
writeOverrides(parsed)
|
||||
│
|
||||
▼
|
||||
readOverrides() ← round-trip
|
||||
│
|
||||
▼
|
||||
computeEffective(server, delta)
|
||||
│
|
||||
▼
|
||||
window.SITE_CONFIG = effective
|
||||
│
|
||||
▼
|
||||
applyCSS(effective)
|
||||
│
|
||||
▼
|
||||
dispatch 'theme-changed'
|
||||
```
|
||||
|
||||
## Function Signatures
|
||||
|
||||
### `readOverrides() → object`
|
||||
|
||||
Reads `cs-theme-overrides` from localStorage, parses as JSON. Returns empty object `{}` on missing key, parse error, or non-object value. Never throws.
|
||||
|
||||
### `writeOverrides(delta: object) → void`
|
||||
|
||||
Serializes `delta` to JSON and writes to `cs-theme-overrides` in localStorage. If `delta` is empty (`{}`), removes the key entirely.
|
||||
|
||||
**Validation on write:**
|
||||
- Color values must match: `#hex` (3, 4, 6, or 8 digit), `rgb()`, `rgba()`, `hsl()`, `hsla()`, or CSS named colors. Invalid color values are rejected (not written) with `console.warn`.
|
||||
- Numeric values (`heatmapOpacity`, `liveHeatmapOpacity`) must be finite numbers in the range 0–1. Invalid values are rejected with `console.warn`.
|
||||
- Timestamp enum values are validated against known options (`defaultMode`: `'ago'`/`'absolute'`; `timezone`: `'local'`/`'utc'`; `formatPreset`: `'iso'`/`'iso-seconds'`/`'locale'`). Invalid values are rejected with `console.warn`.
|
||||
|
||||
**Quota error handling:**
|
||||
- Wrap `localStorage.setItem` in try/catch.
|
||||
- On `QuotaExceededError`: show a visible warning to the user ("Storage full — changes may not be saved"), log to console.
|
||||
- Do NOT silently swallow the error.
|
||||
|
||||
### `computeEffective(serverConfig: object, userOverrides: object) → object`
|
||||
|
||||
Deep merges `userOverrides` onto `serverConfig`. For each section (e.g., `theme`, `nodeColors`), if `userOverrides` has the section, its keys override the corresponding `serverConfig` keys. Top-level non-object keys (e.g., `heatmapOpacity`) are directly overridden.
|
||||
|
||||
Returns a new object — neither input is mutated.
|
||||
|
||||
**Merge rules:**
|
||||
- Object sections: shallow merge per section (`Object.assign({}, server.theme, user.theme)`)
|
||||
- Array sections (e.g., `home.steps`): full replacement (user array wins entirely, no element-level merge)
|
||||
- Scalar sections (e.g., `heatmapOpacity`): direct replacement
|
||||
|
||||
After computing the effective config, writes it to `window.SITE_CONFIG` atomically (single assignment, not piecemeal mutations).
|
||||
|
||||
### `applyCSS(effectiveConfig: object) → void`
|
||||
|
||||
Maps effective config values to CSS custom properties on `:root`. Behavior:
|
||||
|
||||
1. Reads the current mode (light/dark) from the `meshcore-theme` localStorage key, falling back to system preference (`prefers-color-scheme`).
|
||||
2. Applies the matching section's values: `theme` for light mode, `themeDark` for dark mode.
|
||||
3. Also applies mode-independent values: node colors as `--node-{role}`, type colors as `--type-{name}`, font families as `--font-body` and `--font-mono`.
|
||||
4. Does NOT generate dual CSS rule blocks — only the current mode's values are applied to `:root`.
|
||||
5. On dark/light mode toggle, `applyCSS` is called again to re-apply the correct section.
|
||||
|
||||
Updates the `<style>` element (create if absent, reuse if present). Dispatches a `theme-changed` CustomEvent on `window` after applying.
|
||||
|
||||
### `theme-changed` Event
|
||||
|
||||
- `theme-changed` is a bare `CustomEvent` with no payload (matches current behavior).
|
||||
- After each merge cycle, the effective config is written to `window.SITE_CONFIG` atomically (single assignment).
|
||||
- `window.SITE_CONFIG` is the canonical readable source for effective config throughout the app. All existing listeners that read from `SITE_CONFIG` continue to work without changes.
|
||||
|
||||
### `setOverride(section: string, key: string, value: any) → void`
|
||||
|
||||
Sets a single override. For nested sections (e.g., `section='theme'`, `key='accent'`), sets `delta[section][key] = value`. For top-level scalars (e.g., `section=null`, `key='heatmapOpacity'`), sets `delta[key] = value`.
|
||||
|
||||
Follows the full data flow: read → update → write → read-back → merge → apply CSS → dispatch `theme-changed`. Debounced at ~300ms (the debounce wraps the write-through-to-CSS portion).
|
||||
|
||||
### `clearOverride(section: string, key: string) → void`
|
||||
|
||||
Removes a single key from the delta. If the section becomes empty after removal, removes the section too. Triggers the full data flow (no debounce — resets should feel instant).
|
||||
|
||||
### `migrateOldKeys() → object | null`
|
||||
|
||||
One-time migration. Checks for any of the 7 legacy localStorage keys. If found:
|
||||
1. Reads all legacy values
|
||||
2. Maps them into the new delta format (see Migration Plan)
|
||||
3. Writes the merged delta to `cs-theme-overrides`
|
||||
4. Removes all 7 legacy keys
|
||||
5. Returns the migrated delta
|
||||
|
||||
Returns `null` if no legacy keys found.
|
||||
|
||||
### `validateShape(obj: any) → { valid: boolean, errors: string[] }`
|
||||
|
||||
Validates that an imported object conforms to the expected shape:
|
||||
- Must be a plain object
|
||||
- Top-level keys must be from the known set: `branding`, `theme`, `themeDark`, `nodeColors`, `typeColors`, `home`, `timestamps`, `heatmapOpacity`, `liveHeatmapOpacity`
|
||||
- Section values must be objects (where expected) or correct scalar types
|
||||
- Color values are validated: must match `#hex` (3, 4, 6, or 8 digit), `rgb()`, `rgba()`, `hsl()`, `hsla()`, or CSS named colors
|
||||
- Numeric values (`heatmapOpacity`, `liveHeatmapOpacity`) must be finite numbers in range 0–1
|
||||
- Timestamp enum values validated against known options
|
||||
|
||||
Unknown top-level keys cause a warning but don't fail validation (forward compatibility).
|
||||
|
||||
## Migration Plan
|
||||
|
||||
On first page load, before the normal init flow:
|
||||
|
||||
1. Check if `cs-theme-overrides` already exists → if yes, skip migration.
|
||||
2. Check if ANY of the 7 legacy keys exist in localStorage.
|
||||
3. If legacy keys found, build a delta object using the exact mapping below:
|
||||
|
||||
### Field-by-Field Migration Mapping
|
||||
|
||||
```
|
||||
meshcore-user-theme (JSON) → parse, map directly:
|
||||
.branding → delta.branding
|
||||
.theme → delta.theme
|
||||
.themeDark → delta.themeDark
|
||||
.nodeColors → delta.nodeColors
|
||||
.typeColors → delta.typeColors
|
||||
.home → delta.home
|
||||
(any other keys are dropped)
|
||||
|
||||
meshcore-timestamp-mode → delta.timestamps.defaultMode
|
||||
meshcore-timestamp-timezone → delta.timestamps.timezone
|
||||
meshcore-timestamp-format → delta.timestamps.formatPreset
|
||||
meshcore-timestamp-custom-format → delta.timestamps.customFormat
|
||||
meshcore-heatmap-opacity → delta.heatmapOpacity (parseFloat)
|
||||
meshcore-live-heatmap-opacity → delta.liveHeatmapOpacity (parseFloat)
|
||||
```
|
||||
|
||||
4. Write the assembled delta to `cs-theme-overrides`.
|
||||
5. Delete all 7 legacy keys.
|
||||
6. Continue with normal init.
|
||||
|
||||
**Edge cases:**
|
||||
- If `meshcore-user-theme` contains invalid JSON, skip it (log a warning to console).
|
||||
- If a legacy value is empty string or null, skip that field.
|
||||
- Migration runs exactly once — the presence of `cs-theme-overrides` (even as `{}`) prevents re-migration.
|
||||
|
||||
## `allowCustomFormat` — User Preferences Trump
|
||||
|
||||
The server-side `allowCustomFormat` gate is not enforced client-side. If a user imports a delta with a custom format, it's applied regardless. The server controls what formats are available in the UI (whether the custom format input field is shown), but does not block stored preferences.
|
||||
|
||||
## Override Indicator UX
|
||||
|
||||
In the customizer panel, each field that has an active override (value differs from server default) shows a visual indicator:
|
||||
|
||||
- **Indicator:** A small dot or icon (e.g., `●` or a reset arrow `↺`) adjacent to the field label.
|
||||
- **Color:** Use the accent color to draw attention without being noisy.
|
||||
- **Behavior:** Clicking the indicator resets that single field (calls `clearOverride`).
|
||||
- **Tooltip:** "Reset to server default" or "This value differs from the server default."
|
||||
- **Absence:** Fields matching the server default show no indicator — clean and minimal.
|
||||
|
||||
**Section-level indicator:** If any field in a section (e.g., "Theme Colors") is overridden, the tab/section header shows a count badge (e.g., "Theme Colors (3)").
|
||||
|
||||
**"Reset All" button:** Always visible at bottom of panel. Confirms before executing (`localStorage.removeItem` + re-merge).
|
||||
|
||||
## UX Requirements
|
||||
|
||||
### Browser-Local Banner
|
||||
|
||||
The customizer panel must display a persistent, always-visible notice:
|
||||
|
||||
> **"These settings are saved in your browser only and don't affect other users."**
|
||||
|
||||
This is NOT a tooltip, NOT a dismissible popup — it must be always visible in the panel header or footer area. Users must understand at a glance that their changes are local.
|
||||
|
||||
### Auto-Save Indicator
|
||||
|
||||
Show a persistent status in the customizer panel footer, Google Docs style — subtle but always present:
|
||||
|
||||
- **Default state:** "All changes saved" (muted text)
|
||||
- **During debounce:** "Saving..." (muted text)
|
||||
- **On quota error:** "⚠️ Storage full — changes may not be saved" (red text, persistent until resolved)
|
||||
|
||||
The indicator reflects the actual state of the localStorage write, not just the UI action.
|
||||
|
||||
## Server Compatibility
|
||||
|
||||
The delta format is intentionally shaped to be a valid subset of the server's `theme.json` admin config file. This means:
|
||||
|
||||
- **User export → admin import:** An admin can take a user's exported JSON and drop it into `theme.json` as server defaults. The `timestamps`, `heatmapOpacity`, and `liveHeatmapOpacity` keys are ignored by the current server (it doesn't read them from `theme.json`), but they don't cause errors.
|
||||
- **Admin config → user import:** A `theme.json` file can be imported as user overrides. Unknown server-only keys are ignored by the client.
|
||||
- **Round-trip safe:** Export → import produces identical delta (assuming no server default changes between operations).
|
||||
|
||||
The server's `ThemeResponse` struct currently returns: `branding`, `theme`, `themeDark`, `nodeColors`, `typeColors`, `home`. The client-only extensions (`timestamps`, `heatmapOpacity`, `liveHeatmapOpacity`) are additive — they extend the format without conflicting.
|
||||
|
||||
## Testing Requirements
|
||||
|
||||
### Unit Tests (Node.js, no browser required)
|
||||
|
||||
1. **`readOverrides`**
|
||||
- Returns `{}` when key is absent
|
||||
- Returns `{}` when key contains invalid JSON
|
||||
- Returns `{}` when key contains a non-object (string, array, number)
|
||||
- Returns parsed object when key contains valid JSON object
|
||||
|
||||
2. **`writeOverrides`**
|
||||
- Writes serialized JSON to localStorage
|
||||
- Removes key when delta is empty `{}`
|
||||
- Round-trips correctly (write → read = identical object)
|
||||
- Rejects invalid color values with console.warn
|
||||
- Rejects out-of-range numeric values with console.warn
|
||||
- Rejects invalid timestamp enum values with console.warn
|
||||
- Handles QuotaExceededError gracefully (warns user, does not throw)
|
||||
|
||||
3. **`computeEffective`**
|
||||
- Returns server defaults when overrides is `{}`
|
||||
- Overrides a single key in a section
|
||||
- Overrides multiple keys across sections
|
||||
- Does not mutate either input
|
||||
- Handles missing sections in overrides gracefully
|
||||
- Array values (e.g., `home.steps`) are fully replaced, not merged
|
||||
- Top-level scalars (`heatmapOpacity`) are directly replaced
|
||||
|
||||
4. **`setOverride` / `clearOverride`**
|
||||
- Setting a value stores it in the delta
|
||||
- Clearing a key removes it from delta
|
||||
- Clearing the last key in a section removes the section
|
||||
- Full data flow executes (CSS vars updated)
|
||||
|
||||
5. **`migrateOldKeys`**
|
||||
- Migrates all 7 keys correctly using exact field mapping
|
||||
- Handles partial migration (only some keys present)
|
||||
- Handles invalid JSON in `meshcore-user-theme`
|
||||
- Removes all legacy keys after migration
|
||||
- Skips migration if `cs-theme-overrides` already exists
|
||||
- Returns null when no legacy keys found
|
||||
- Drops unknown keys from `meshcore-user-theme`
|
||||
|
||||
6. **`validateShape`**
|
||||
- Accepts valid delta objects
|
||||
- Accepts empty object
|
||||
- Rejects non-objects (string, array, null)
|
||||
- Warns on unknown top-level keys (doesn't reject)
|
||||
- Validates section types (object vs scalar)
|
||||
- Rejects invalid color values
|
||||
- Rejects out-of-range opacity values
|
||||
- Rejects invalid timestamp enum values
|
||||
|
||||
### Browser/E2E Tests (Playwright)
|
||||
|
||||
1. **Customizer opens and shows current values** — fields reflect effective config.
|
||||
2. **Changing a color updates CSS variable** — after debounce, `:root` has new value.
|
||||
3. **Override indicator appears** when value differs from server default.
|
||||
4. **Per-field reset** removes override, reverts to server default, indicator disappears.
|
||||
5. **Full reset** clears all overrides, all fields show server defaults.
|
||||
6. **Export** downloads a JSON file with current delta.
|
||||
7. **Import** applies overrides from uploaded JSON file.
|
||||
8. **Migration** — set legacy keys, reload, verify they're migrated and removed.
|
||||
9. **Preset application** — clicking a preset applies its colors, fields update.
|
||||
10. **Dark/light mode toggle** — switching mode re-applies correct section's CSS vars.
|
||||
11. **Browser-local banner** — verify persistent notice is visible in customizer panel.
|
||||
12. **Auto-save indicator** — verify status text updates during and after changes.
|
||||
|
||||
## What's NOT In Scope
|
||||
|
||||
- **Undo/redo stack** — could be added as P2. For v1, per-field reset to server default is the only revert mechanism.
|
||||
- **Cross-tab synchronization** — two tabs editing simultaneously may clobber each other's changes. Acceptable for v1.
|
||||
- **Server-side timestamp config** (`allowCustomFormat` gate) — remains server-only, not exposed in the customizer delta. The server controls UI availability but does not block stored preferences (see `allowCustomFormat` section above).
|
||||
- **Admin import endpoint** — no server API for uploading `theme.json` via the UI. Admins edit the file directly. Future work.
|
||||
- **Map config overrides** (`mapDefaults.center`, `mapDefaults.zoom`) — separate concern, not part of theme. Future work.
|
||||
- **Geo-filter config** — server-only. Not in scope.
|
||||
- **Per-page layout preferences** (column widths, sort orders) — separate from theming. Future work.
|
||||
+16
-85
@@ -136,13 +136,6 @@ function getTimestampCustomFormat() {
|
||||
function pad2(v) { return String(v).padStart(2, '0'); }
|
||||
function pad3(v) { return String(v).padStart(3, '0'); }
|
||||
|
||||
function mergeUserHomeConfig(siteConfig, userTheme) {
|
||||
if (!siteConfig || !userTheme || !userTheme.home || typeof userTheme.home !== 'object') return siteConfig;
|
||||
const serverHome = (siteConfig.home && typeof siteConfig.home === 'object') ? siteConfig.home : {};
|
||||
siteConfig.home = Object.assign({}, serverHome, userTheme.home);
|
||||
return siteConfig;
|
||||
}
|
||||
|
||||
function formatIsoLike(d, timezone, includeMs) {
|
||||
const useUtc = timezone === 'utc';
|
||||
const year = useUtc ? d.getUTCFullYear() : d.getFullYear();
|
||||
@@ -794,92 +787,30 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
debouncedOnWS(function () { updateNavStats(); });
|
||||
|
||||
// --- Theme Customization ---
|
||||
// Fetch theme config and apply branding/colors before first render
|
||||
// Fetch theme config and apply via customizer v2 pipeline
|
||||
fetch('/api/config/theme', { cache: 'no-store' }).then(r => r.json()).then(cfg => {
|
||||
window.SITE_CONFIG = cfg || {};
|
||||
if (!window.SITE_CONFIG.timestamps) window.SITE_CONFIG.timestamps = {};
|
||||
const tsCfg = window.SITE_CONFIG.timestamps;
|
||||
// Normalize timestamp defaults
|
||||
cfg = cfg || {};
|
||||
if (!cfg.timestamps) cfg.timestamps = {};
|
||||
const tsCfg = cfg.timestamps;
|
||||
if (tsCfg.defaultMode !== 'absolute' && tsCfg.defaultMode !== 'ago') tsCfg.defaultMode = 'ago';
|
||||
if (tsCfg.timezone !== 'utc' && tsCfg.timezone !== 'local') tsCfg.timezone = 'local';
|
||||
if (tsCfg.formatPreset !== 'iso' && tsCfg.formatPreset !== 'iso-seconds' && tsCfg.formatPreset !== 'locale') tsCfg.formatPreset = 'iso';
|
||||
if (typeof tsCfg.customFormat !== 'string') tsCfg.customFormat = '';
|
||||
tsCfg.allowCustomFormat = tsCfg.allowCustomFormat === true;
|
||||
|
||||
// User's localStorage preferences take priority over server config
|
||||
const userTheme = (() => { try { return JSON.parse(localStorage.getItem('meshcore-user-theme') || '{}'); } catch { return {}; } })();
|
||||
window._SITE_CONFIG_ORIGINAL_HOME = JSON.parse(JSON.stringify(window.SITE_CONFIG.home || {}));
|
||||
mergeUserHomeConfig(window.SITE_CONFIG, userTheme);
|
||||
|
||||
// Apply CSS variable overrides from theme config (skipped if user has local overrides)
|
||||
if (!userTheme.theme && !userTheme.themeDark) {
|
||||
const dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
|
||||
(document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
const themeData = dark ? { ...(cfg.theme || {}), ...(cfg.themeDark || {}) } : (cfg.theme || {});
|
||||
const root = document.documentElement.style;
|
||||
const varMap = {
|
||||
accent: '--accent', accentHover: '--accent-hover',
|
||||
navBg: '--nav-bg', navBg2: '--nav-bg2', navText: '--nav-text', navTextMuted: '--nav-text-muted',
|
||||
background: '--surface-0', text: '--text', textMuted: '--text-muted', border: '--border',
|
||||
statusGreen: '--status-green', statusYellow: '--status-yellow', statusRed: '--status-red',
|
||||
surface1: '--surface-1', surface2: '--surface-2', surface3: '--surface-3',
|
||||
cardBg: '--card-bg', contentBg: '--content-bg', inputBg: '--input-bg',
|
||||
rowStripe: '--row-stripe', rowHover: '--row-hover', detailBg: '--detail-bg',
|
||||
selectedBg: '--selected-bg', sectionBg: '--section-bg',
|
||||
font: '--font', mono: '--mono'
|
||||
};
|
||||
for (const [key, cssVar] of Object.entries(varMap)) {
|
||||
if (themeData[key]) root.setProperty(cssVar, themeData[key]);
|
||||
}
|
||||
// Derived vars
|
||||
if (themeData.background) root.setProperty('--content-bg', themeData.contentBg || themeData.background);
|
||||
if (themeData.surface1) root.setProperty('--card-bg', themeData.cardBg || themeData.surface1);
|
||||
// Nav gradient
|
||||
if (themeData.navBg) {
|
||||
const nav = document.querySelector('.top-nav');
|
||||
if (nav) nav.style.background = `linear-gradient(135deg, ${themeData.navBg} 0%, ${themeData.navBg2 || themeData.navBg} 50%, ${themeData.navBg} 100%)`;
|
||||
}
|
||||
// Customizer v2: set server defaults and run full pipeline
|
||||
// (reads localStorage overrides → merges → sets SITE_CONFIG → applies CSS → dispatches theme-changed)
|
||||
if (window._customizerV2) {
|
||||
window._customizerV2.init(cfg);
|
||||
} else {
|
||||
// Fallback if customize-v2.js didn't load
|
||||
window.SITE_CONFIG = cfg;
|
||||
}
|
||||
|
||||
// Apply node color overrides (skip if user has local preferences)
|
||||
if (cfg.nodeColors && !userTheme.nodeColors) {
|
||||
for (const [role, color] of Object.entries(cfg.nodeColors)) {
|
||||
if (window.ROLE_COLORS && role in window.ROLE_COLORS) window.ROLE_COLORS[role] = color;
|
||||
if (window.ROLE_STYLE && window.ROLE_STYLE[role]) window.ROLE_STYLE[role].color = color;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply type color overrides (skip if user has local preferences)
|
||||
if (cfg.typeColors && !userTheme.typeColors) {
|
||||
for (const [type, color] of Object.entries(cfg.typeColors)) {
|
||||
if (window.TYPE_COLORS && type in window.TYPE_COLORS) window.TYPE_COLORS[type] = color;
|
||||
}
|
||||
if (window.syncBadgeColors) window.syncBadgeColors();
|
||||
}
|
||||
|
||||
// Apply branding (skip if user has local preferences)
|
||||
if (cfg.branding && !userTheme.branding) {
|
||||
if (cfg.branding.siteName) {
|
||||
document.title = cfg.branding.siteName;
|
||||
const brandText = document.querySelector('.brand-text');
|
||||
if (brandText) brandText.textContent = cfg.branding.siteName;
|
||||
}
|
||||
if (cfg.branding.logoUrl) {
|
||||
const brandIcon = document.querySelector('.brand-icon');
|
||||
if (brandIcon) {
|
||||
const img = document.createElement('img');
|
||||
img.src = cfg.branding.logoUrl;
|
||||
img.alt = cfg.branding.siteName || 'Logo';
|
||||
img.style.height = '24px';
|
||||
img.style.width = 'auto';
|
||||
brandIcon.replaceWith(img);
|
||||
}
|
||||
}
|
||||
if (cfg.branding.faviconUrl) {
|
||||
const favicon = document.querySelector('link[rel="icon"]');
|
||||
if (favicon) favicon.href = cfg.branding.faviconUrl;
|
||||
}
|
||||
}
|
||||
}).catch(() => { window.SITE_CONFIG = { timestamps: { defaultMode: 'ago', timezone: 'local', formatPreset: 'iso', customFormat: '', allowCustomFormat: false } }; }).finally(() => {
|
||||
}).catch(() => {
|
||||
window.SITE_CONFIG = { timestamps: { defaultMode: 'ago', timezone: 'local', formatPreset: 'iso', customFormat: '', allowCustomFormat: false } };
|
||||
if (window._customizerV2) window._customizerV2.init(window.SITE_CONFIG);
|
||||
}).finally(() => {
|
||||
if (!location.hash || location.hash === '#/') location.hash = '#/home';
|
||||
else navigate();
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -86,7 +86,7 @@
|
||||
|
||||
<script src="vendor/qrcode.js"></script>
|
||||
<script src="roles.js?v=__BUST__"></script>
|
||||
<script src="customize.js?v=__BUST__" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="customize-v2.js?v=__BUST__" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="region-filter.js?v=__BUST__"></script>
|
||||
<script src="hop-resolver.js?v=__BUST__"></script>
|
||||
<script src="hop-display.js?v=__BUST__"></script>
|
||||
|
||||
@@ -0,0 +1,408 @@
|
||||
/* Unit tests for customizer v2 core functions */
|
||||
'use strict';
|
||||
const vm = require('vm');
|
||||
const fs = require('fs');
|
||||
const assert = require('assert');
|
||||
|
||||
let passed = 0, failed = 0;
|
||||
function test(name, fn) {
|
||||
try { fn(); passed++; console.log(` ✅ ${name}`); }
|
||||
catch (e) { failed++; console.log(` ❌ ${name}: ${e.message}`); }
|
||||
}
|
||||
|
||||
function makeSandbox() {
|
||||
const storage = {};
|
||||
const localStorage = {
|
||||
_data: storage,
|
||||
getItem(k) { return k in storage ? storage[k] : null; },
|
||||
setItem(k, v) { storage[k] = String(v); },
|
||||
removeItem(k) { delete storage[k]; },
|
||||
clear() { for (const k in storage) delete storage[k]; }
|
||||
};
|
||||
const ctx = {
|
||||
window: {
|
||||
addEventListener: () => {},
|
||||
dispatchEvent: () => {},
|
||||
SITE_CONFIG: {},
|
||||
_SITE_CONFIG_ORIGINAL_HOME: null,
|
||||
},
|
||||
document: {
|
||||
readyState: 'loading',
|
||||
createElement: (tag) => ({
|
||||
id: '', textContent: '', innerHTML: '', className: '',
|
||||
setAttribute: () => {}, appendChild: () => {},
|
||||
style: {}, addEventListener: () => {},
|
||||
querySelectorAll: () => [], querySelector: () => null,
|
||||
}),
|
||||
head: { appendChild: () => {} },
|
||||
getElementById: () => null,
|
||||
addEventListener: () => {},
|
||||
querySelectorAll: () => [],
|
||||
querySelector: () => null,
|
||||
documentElement: {
|
||||
style: { setProperty: () => {}, removeProperty: () => {}, getPropertyValue: () => '' },
|
||||
dataset: { theme: 'dark' },
|
||||
getAttribute: () => 'dark',
|
||||
},
|
||||
},
|
||||
console,
|
||||
localStorage,
|
||||
setTimeout: (fn) => fn(),
|
||||
clearTimeout: () => {},
|
||||
Date, Math, Array, Object, JSON, String, Number, Boolean,
|
||||
parseInt, parseFloat, isNaN, Infinity, NaN, undefined,
|
||||
MutationObserver: class { observe() {} },
|
||||
HashChangeEvent: class {},
|
||||
CustomEvent: class CustomEvent { constructor(type, opts) { this.type = type; this.detail = opts && opts.detail; } },
|
||||
getComputedStyle: () => ({ getPropertyValue: () => '' }),
|
||||
};
|
||||
ctx.window.localStorage = localStorage;
|
||||
ctx.self = ctx.window;
|
||||
return ctx;
|
||||
}
|
||||
|
||||
function loadCustomizer() {
|
||||
const ctx = makeSandbox();
|
||||
const code = fs.readFileSync('public/customize-v2.js', 'utf8');
|
||||
vm.createContext(ctx);
|
||||
vm.runInContext(code, ctx, { filename: 'customize-v2.js' });
|
||||
return { ctx, api: ctx.window._customizerV2, ls: ctx.localStorage };
|
||||
}
|
||||
|
||||
console.log('\n📋 Customizer V2 — Core Function Tests\n');
|
||||
|
||||
// ── readOverrides ──
|
||||
console.log('readOverrides:');
|
||||
test('returns {} when key is absent', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const result = api.readOverrides();
|
||||
assert.strictEqual(JSON.stringify(result), '{}');
|
||||
});
|
||||
|
||||
test('returns {} when key contains invalid JSON', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', 'not json{{{');
|
||||
assert.strictEqual(JSON.stringify(api.readOverrides()), '{}');
|
||||
});
|
||||
|
||||
test('returns {} when key contains a non-object (string)', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', '"just a string"');
|
||||
assert.strictEqual(JSON.stringify(api.readOverrides()), '{}');
|
||||
});
|
||||
|
||||
test('returns {} when key contains an array', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', '[1,2,3]');
|
||||
assert.strictEqual(JSON.stringify(api.readOverrides()), '{}');
|
||||
});
|
||||
|
||||
test('returns {} when key contains a number', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', '42');
|
||||
assert.strictEqual(JSON.stringify(api.readOverrides()), '{}');
|
||||
});
|
||||
|
||||
test('returns parsed object when valid', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
const data = { theme: { accent: '#ff0000' } };
|
||||
ls.setItem('cs-theme-overrides', JSON.stringify(data));
|
||||
assert.deepStrictEqual(api.readOverrides(), data);
|
||||
});
|
||||
|
||||
// ── writeOverrides ──
|
||||
console.log('\nwriteOverrides:');
|
||||
test('writes serialized JSON to localStorage', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
const data = { theme: { accent: '#ff0000' } };
|
||||
api.writeOverrides(data);
|
||||
assert.deepStrictEqual(JSON.parse(ls.getItem('cs-theme-overrides')), data);
|
||||
});
|
||||
|
||||
test('removes key when delta is empty {}', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', '{"theme":{}}');
|
||||
api.writeOverrides({});
|
||||
assert.strictEqual(ls.getItem('cs-theme-overrides'), null);
|
||||
});
|
||||
|
||||
test('round-trips correctly (write → read = identical)', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const data = { theme: { accent: '#abc', text: '#def' }, nodeColors: { repeater: '#111' } };
|
||||
api.writeOverrides(data);
|
||||
assert.deepStrictEqual(api.readOverrides(), data);
|
||||
});
|
||||
|
||||
test('strips invalid color values silently', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
api.writeOverrides({ theme: { accent: 'not-a-color' } });
|
||||
// Invalid color is stripped by _validateDelta; remaining empty object is stored as '{}'
|
||||
const stored = JSON.parse(ls.getItem('cs-theme-overrides'));
|
||||
assert.strictEqual(stored.theme, undefined);
|
||||
});
|
||||
|
||||
test('strips out-of-range opacity', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
api.writeOverrides({ heatmapOpacity: 1.5 });
|
||||
const stored1 = JSON.parse(ls.getItem('cs-theme-overrides'));
|
||||
assert.strictEqual(stored1.heatmapOpacity, undefined);
|
||||
api.writeOverrides({ heatmapOpacity: -0.1 });
|
||||
const stored2 = JSON.parse(ls.getItem('cs-theme-overrides'));
|
||||
assert.strictEqual(stored2.heatmapOpacity, undefined);
|
||||
});
|
||||
|
||||
test('accepts valid opacity', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
api.writeOverrides({ heatmapOpacity: 0.5 });
|
||||
const stored = JSON.parse(ls.getItem('cs-theme-overrides'));
|
||||
assert.strictEqual(stored.heatmapOpacity, 0.5);
|
||||
});
|
||||
|
||||
// ── computeEffective ──
|
||||
console.log('\ncomputeEffective:');
|
||||
test('returns server defaults when overrides is {}', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { theme: { accent: '#aaa', text: '#bbb' }, nodeColors: { repeater: '#ccc' } };
|
||||
const result = api.computeEffective(defaults, {});
|
||||
assert.deepStrictEqual(result, defaults);
|
||||
});
|
||||
|
||||
test('overrides a single key in a section', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { theme: { accent: '#aaa', text: '#bbb' } };
|
||||
const result = api.computeEffective(defaults, { theme: { accent: '#ff0000' } });
|
||||
assert.strictEqual(result.theme.accent, '#ff0000');
|
||||
assert.strictEqual(result.theme.text, '#bbb');
|
||||
});
|
||||
|
||||
test('overrides multiple keys across sections', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { theme: { accent: '#aaa' }, nodeColors: { repeater: '#bbb' } };
|
||||
const result = api.computeEffective(defaults, { theme: { accent: '#111' }, nodeColors: { repeater: '#222' } });
|
||||
assert.strictEqual(result.theme.accent, '#111');
|
||||
assert.strictEqual(result.nodeColors.repeater, '#222');
|
||||
});
|
||||
|
||||
test('does not mutate either input', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { theme: { accent: '#aaa' } };
|
||||
const overrides = { theme: { accent: '#bbb' } };
|
||||
const defCopy = JSON.stringify(defaults);
|
||||
const ovrCopy = JSON.stringify(overrides);
|
||||
api.computeEffective(defaults, overrides);
|
||||
assert.strictEqual(JSON.stringify(defaults), defCopy);
|
||||
assert.strictEqual(JSON.stringify(overrides), ovrCopy);
|
||||
});
|
||||
|
||||
test('handles missing sections in overrides gracefully', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { theme: { accent: '#aaa' }, nodeColors: { repeater: '#bbb' } };
|
||||
const result = api.computeEffective(defaults, { theme: { accent: '#ccc' } });
|
||||
assert.strictEqual(result.nodeColors.repeater, '#bbb');
|
||||
});
|
||||
|
||||
test('array values in home are fully replaced, not merged', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { home: { steps: [{ emoji: '1', title: 'a', description: 'b' }], heroTitle: 'X' } };
|
||||
const overrides = { home: { steps: [{ emoji: '2', title: 'c', description: 'd' }, { emoji: '3', title: 'e', description: 'f' }] } };
|
||||
const result = api.computeEffective(defaults, overrides);
|
||||
assert.strictEqual(result.home.steps.length, 2);
|
||||
assert.strictEqual(result.home.steps[0].emoji, '2');
|
||||
assert.strictEqual(result.home.heroTitle, 'X'); // untouched
|
||||
});
|
||||
|
||||
test('top-level scalars are directly replaced', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const defaults = { heatmapOpacity: 0.5 };
|
||||
const result = api.computeEffective(defaults, { heatmapOpacity: 0.8 });
|
||||
assert.strictEqual(result.heatmapOpacity, 0.8);
|
||||
});
|
||||
|
||||
// ── validateShape ──
|
||||
console.log('\nvalidateShape:');
|
||||
test('accepts valid delta objects', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const result = api.validateShape({ theme: { accent: '#fff' }, heatmapOpacity: 0.5 });
|
||||
assert.strictEqual(result.valid, true);
|
||||
});
|
||||
|
||||
test('accepts empty object', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.validateShape({}).valid, true);
|
||||
});
|
||||
|
||||
test('rejects non-objects (string)', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.validateShape('hello').valid, false);
|
||||
});
|
||||
|
||||
test('rejects non-objects (array)', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.validateShape([1, 2]).valid, false);
|
||||
});
|
||||
|
||||
test('rejects non-objects (null)', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.validateShape(null).valid, false);
|
||||
});
|
||||
|
||||
test('warns on unknown top-level keys', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const result = api.validateShape({ unknownKey: {} });
|
||||
// Unknown keys produce a console.warn but validateShape still returns valid
|
||||
assert.strictEqual(result.valid, true);
|
||||
assert.strictEqual(result.errors.length, 0);
|
||||
});
|
||||
|
||||
test('validates section types (rejects non-object section)', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const result = api.validateShape({ theme: 'not an object' });
|
||||
assert.strictEqual(result.valid, false);
|
||||
});
|
||||
|
||||
test('accepts valid rgb() color values in theme', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const result = api.validateShape({ theme: { accent: 'rgb(1,2,3)' } });
|
||||
assert.strictEqual(result.valid, true);
|
||||
});
|
||||
|
||||
test('rejects out-of-range opacity values', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.validateShape({ heatmapOpacity: 2.0 }).valid, false);
|
||||
assert.strictEqual(api.validateShape({ liveHeatmapOpacity: -1 }).valid, false);
|
||||
});
|
||||
|
||||
// ── migrateOldKeys ──
|
||||
console.log('\nmigrateOldKeys:');
|
||||
test('migrates all 7 keys correctly', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('meshcore-user-theme', JSON.stringify({ theme: { accent: '#f00' }, branding: { siteName: 'Test' } }));
|
||||
ls.setItem('meshcore-timestamp-mode', 'absolute');
|
||||
ls.setItem('meshcore-timestamp-timezone', 'utc');
|
||||
ls.setItem('meshcore-timestamp-format', 'iso-seconds');
|
||||
ls.setItem('meshcore-timestamp-custom-format', 'YYYY-MM-DD');
|
||||
ls.setItem('meshcore-heatmap-opacity', '0.7');
|
||||
ls.setItem('meshcore-live-heatmap-opacity', '0.3');
|
||||
const result = api.migrateOldKeys();
|
||||
assert.strictEqual(result.theme.accent, '#f00');
|
||||
assert.strictEqual(result.branding.siteName, 'Test');
|
||||
assert.strictEqual(result.timestamps.defaultMode, 'absolute');
|
||||
assert.strictEqual(result.timestamps.timezone, 'utc');
|
||||
assert.strictEqual(result.heatmapOpacity, 0.7);
|
||||
assert.strictEqual(result.liveHeatmapOpacity, 0.3);
|
||||
// Legacy keys removed
|
||||
assert.strictEqual(ls.getItem('meshcore-user-theme'), null);
|
||||
assert.strictEqual(ls.getItem('meshcore-timestamp-mode'), null);
|
||||
// New key written
|
||||
assert.notStrictEqual(ls.getItem('cs-theme-overrides'), null);
|
||||
});
|
||||
|
||||
test('handles partial migration (only some keys)', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('meshcore-timestamp-mode', 'ago');
|
||||
const result = api.migrateOldKeys();
|
||||
assert.strictEqual(result.timestamps.defaultMode, 'ago');
|
||||
assert.strictEqual(ls.getItem('meshcore-timestamp-mode'), null);
|
||||
});
|
||||
|
||||
test('handles invalid JSON in meshcore-user-theme', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('meshcore-user-theme', '{bad json');
|
||||
const result = api.migrateOldKeys();
|
||||
// Should not crash, returns delta (possibly empty besides what was valid)
|
||||
assert(result !== null);
|
||||
assert.strictEqual(ls.getItem('meshcore-user-theme'), null);
|
||||
});
|
||||
|
||||
test('skips migration if cs-theme-overrides already exists', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', '{"theme":{}}');
|
||||
ls.setItem('meshcore-user-theme', JSON.stringify({ theme: { accent: '#f00' } }));
|
||||
const result = api.migrateOldKeys();
|
||||
assert.strictEqual(result, null);
|
||||
// Legacy key NOT removed (migration skipped entirely)
|
||||
assert.notStrictEqual(ls.getItem('meshcore-user-theme'), null);
|
||||
});
|
||||
|
||||
test('returns null when no legacy keys found', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.migrateOldKeys(), null);
|
||||
});
|
||||
|
||||
test('drops unknown keys from meshcore-user-theme', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('meshcore-user-theme', JSON.stringify({ theme: { accent: '#f00' }, unknownStuff: 'hi' }));
|
||||
const result = api.migrateOldKeys();
|
||||
assert.strictEqual(result.theme.accent, '#f00');
|
||||
assert.strictEqual(result.unknownStuff, undefined);
|
||||
});
|
||||
|
||||
// ── THEME_CSS_MAP completeness ──
|
||||
console.log('\nTHEME_CSS_MAP:');
|
||||
test('includes surface3 mapping', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.THEME_CSS_MAP.surface3, '--surface-3');
|
||||
});
|
||||
|
||||
test('includes sectionBg mapping', () => {
|
||||
const { api } = loadCustomizer();
|
||||
assert.strictEqual(api.THEME_CSS_MAP.sectionBg, '--section-bg');
|
||||
});
|
||||
|
||||
test('matches all keys from old app.js varMap', () => {
|
||||
const { api } = loadCustomizer();
|
||||
const expectedKeys = [
|
||||
'accent', 'accentHover', 'navBg', 'navBg2', 'navText', 'navTextMuted',
|
||||
'background', 'text', 'textMuted', 'border',
|
||||
'statusGreen', 'statusYellow', 'statusRed',
|
||||
'surface1', 'surface2', 'surface3',
|
||||
'cardBg', 'contentBg', 'inputBg',
|
||||
'rowStripe', 'rowHover', 'detailBg',
|
||||
'selectedBg', 'sectionBg',
|
||||
'font', 'mono'
|
||||
];
|
||||
for (const key of expectedKeys) {
|
||||
assert(key in api.THEME_CSS_MAP, `Missing key: ${key}`);
|
||||
}
|
||||
});
|
||||
|
||||
// ── _isOverridden tests ──
|
||||
console.log('\n_isOverridden (value comparison):');
|
||||
|
||||
test('returns false when no overrides exist', () => {
|
||||
const { api } = loadCustomizer();
|
||||
api.init({ theme: { accent: '#aaa' } });
|
||||
assert.strictEqual(api.isOverridden('theme', 'accent'), false);
|
||||
});
|
||||
|
||||
test('returns false when override matches server default', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#aaa' } }));
|
||||
api.init({ theme: { accent: '#aaa' } });
|
||||
assert.strictEqual(api.isOverridden('theme', 'accent'), false);
|
||||
});
|
||||
|
||||
test('returns true when override differs from server default', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#bbb' } }));
|
||||
api.init({ theme: { accent: '#aaa' } });
|
||||
assert.strictEqual(api.isOverridden('theme', 'accent'), true);
|
||||
});
|
||||
|
||||
test('returns false for key not in overrides', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#bbb' } }));
|
||||
api.init({ theme: { accent: '#aaa', border: '#ccc' } });
|
||||
assert.strictEqual(api.isOverridden('theme', 'border'), false);
|
||||
});
|
||||
|
||||
test('returns true when server has no default for overridden key', () => {
|
||||
const { api, ls } = loadCustomizer();
|
||||
ls.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#bbb' } }));
|
||||
api.init({});
|
||||
assert.strictEqual(api.isOverridden('theme', 'accent'), true);
|
||||
});
|
||||
|
||||
// ── Summary ──
|
||||
console.log(`\n${passed + failed} tests: ${passed} passed, ${failed} failed\n`);
|
||||
process.exit(failed > 0 ? 1 : 0);
|
||||
+251
-5
@@ -85,7 +85,7 @@ async function run() {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
await page.evaluate(() => {
|
||||
localStorage.removeItem('meshcore-user-theme');
|
||||
localStorage.removeItem('cs-theme-overrides');
|
||||
window.SITE_CONFIG = window.SITE_CONFIG || {};
|
||||
window.SITE_CONFIG.home = {
|
||||
heroTitle: 'Server Hero (E2E)',
|
||||
@@ -122,18 +122,18 @@ async function run() {
|
||||
const homeTab = page.locator('.cust-tab[data-tab="home"]');
|
||||
await homeTab.waitFor({ state: 'visible', timeout: 10000 });
|
||||
await homeTab.click();
|
||||
const heroInput = page.locator('#cust-heroTitle');
|
||||
const heroInput = page.locator('[data-cv2-field="home.heroTitle"]');
|
||||
if (await heroInput.count() === 0) {
|
||||
console.log(' ⏭️ #cust-heroTitle not found — TODO: requires running server');
|
||||
console.log(' ⏭️ home.heroTitle input not found — TODO: requires running server');
|
||||
return;
|
||||
}
|
||||
await heroInput.waitFor({ state: 'visible', timeout: 10000 });
|
||||
await heroInput.fill(editedHero);
|
||||
await page.waitForTimeout(700); // autoSave debounce is 500ms
|
||||
await page.waitForTimeout(700); // debounce is 300ms, allow margin
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
const persistedHero = await page.evaluate(() => {
|
||||
try {
|
||||
const saved = JSON.parse(localStorage.getItem('meshcore-user-theme') || '{}');
|
||||
const saved = JSON.parse(localStorage.getItem('cs-theme-overrides') || '{}');
|
||||
return saved && saved.home ? saved.home.heroTitle : '';
|
||||
} catch {
|
||||
return '';
|
||||
@@ -1015,6 +1015,252 @@ async function run() {
|
||||
assert(hexDump, 'Hex dump should be visible after selecting a packet');
|
||||
});
|
||||
|
||||
// --- Group: Customizer v2 E2E tests ---
|
||||
|
||||
await test('Customizer v2: setOverride persists and applies CSS', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
// Clear any existing overrides
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
// Set an override via the API
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
window._customizerV2.setOverride('theme', 'accent', '#ff0000');
|
||||
// Wait for debounce
|
||||
return new Promise(resolve => setTimeout(() => {
|
||||
const stored = JSON.parse(localStorage.getItem('cs-theme-overrides') || '{}');
|
||||
const cssVal = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
|
||||
resolve({ stored, cssVal });
|
||||
}, 500));
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(result.stored.theme && result.stored.theme.accent === '#ff0000',
|
||||
'Override not persisted to localStorage');
|
||||
assert(result.cssVal === '#ff0000',
|
||||
`CSS variable --accent expected #ff0000 but got "${result.cssVal}"`);
|
||||
// Cleanup
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: clearOverride resets to server default', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
// Get the server default accent
|
||||
window._customizerV2.setOverride('theme', 'accent', '#ff0000');
|
||||
return new Promise(resolve => setTimeout(() => {
|
||||
window._customizerV2.clearOverride('theme', 'accent');
|
||||
const stored = JSON.parse(localStorage.getItem('cs-theme-overrides') || '{}');
|
||||
const hasAccent = stored.theme && stored.theme.hasOwnProperty('accent');
|
||||
resolve({ hasAccent });
|
||||
}, 500));
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(!result.hasAccent, 'accent should be removed from overrides after clearOverride');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: full reset clears all overrides', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
localStorage.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#ff0000' }, nodeColors: { repeater: '#00ff00' } }));
|
||||
// Simulate full reset
|
||||
localStorage.removeItem('cs-theme-overrides');
|
||||
const stored = localStorage.getItem('cs-theme-overrides');
|
||||
return { stored };
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(result.stored === null, 'cs-theme-overrides should be null after full reset');
|
||||
});
|
||||
|
||||
await test('Customizer v2: export produces valid JSON', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
// Set some overrides
|
||||
localStorage.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#123456' } }));
|
||||
const delta = window._customizerV2.readOverrides();
|
||||
const json = JSON.stringify(delta, null, 2);
|
||||
try { JSON.parse(json); return { valid: true, hasAccent: delta.theme && delta.theme.accent === '#123456' }; }
|
||||
catch { return { valid: false }; }
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(result.valid, 'Exported JSON must be valid');
|
||||
assert(result.hasAccent, 'Exported JSON must contain the stored override');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: import applies overrides', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
localStorage.removeItem('cs-theme-overrides');
|
||||
const importData = { theme: { accent: '#abcdef' }, nodeColors: { repeater: '#112233' } };
|
||||
const validation = window._customizerV2.validateShape(importData);
|
||||
if (!validation.valid) return { error: 'Validation failed: ' + validation.errors.join(', ') };
|
||||
window._customizerV2.writeOverrides(importData);
|
||||
const stored = window._customizerV2.readOverrides();
|
||||
return { accent: stored.theme && stored.theme.accent, repeater: stored.nodeColors && stored.nodeColors.repeater };
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(result.accent === '#abcdef', 'Imported accent should be #abcdef');
|
||||
assert(result.repeater === '#112233', 'Imported repeater should be #112233');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: migration from legacy keys', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
// Clear new key so migration can run
|
||||
localStorage.removeItem('cs-theme-overrides');
|
||||
// Set legacy keys
|
||||
localStorage.setItem('meshcore-user-theme', JSON.stringify({ theme: { accent: '#aabb01' }, branding: { siteName: 'LegacyName' } }));
|
||||
localStorage.setItem('meshcore-timestamp-mode', 'absolute');
|
||||
localStorage.setItem('meshcore-heatmap-opacity', '0.5');
|
||||
// Run migration
|
||||
const migrated = window._customizerV2.migrateOldKeys();
|
||||
const stored = window._customizerV2.readOverrides();
|
||||
const legacyGone = localStorage.getItem('meshcore-user-theme') === null &&
|
||||
localStorage.getItem('meshcore-timestamp-mode') === null &&
|
||||
localStorage.getItem('meshcore-heatmap-opacity') === null;
|
||||
return {
|
||||
migrated: !!migrated,
|
||||
accent: stored.theme && stored.theme.accent,
|
||||
siteName: stored.branding && stored.branding.siteName,
|
||||
tsMode: stored.timestamps && stored.timestamps.defaultMode,
|
||||
opacity: stored.heatmapOpacity,
|
||||
legacyGone
|
||||
};
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
assert(result.migrated, 'migrateOldKeys should return non-null');
|
||||
assert(result.accent === '#aabb01', 'Theme accent should be migrated');
|
||||
assert(result.siteName === 'LegacyName', 'Branding should be migrated');
|
||||
assert(result.tsMode === 'absolute', 'Timestamp mode should be migrated');
|
||||
assert(result.opacity === 0.5, 'Heatmap opacity should be migrated');
|
||||
assert(result.legacyGone, 'Legacy keys should be removed after migration');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: browser-local banner visible', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
// Open customizer
|
||||
const toggleSel = '#customizeToggle, button[title*="ustom" i], [class*="customize"]';
|
||||
const btn = await page.$(toggleSel);
|
||||
if (!btn) { console.log(' ⏭️ Customizer toggle not found'); return; }
|
||||
await btn.click();
|
||||
await page.waitForSelector('.cv2-local-banner', { timeout: 5000 });
|
||||
const bannerText = await page.$eval('.cv2-local-banner', el => el.textContent);
|
||||
assert(bannerText.includes('browser only'), `Banner should mention "browser only" but got "${bannerText}"`);
|
||||
});
|
||||
|
||||
await test('Customizer v2: auto-save status indicator', async () => {
|
||||
// Panel should already be open from previous test
|
||||
const statusEl = await page.$('#cv2-save-status');
|
||||
if (!statusEl) { console.log(' ⏭️ Save status element not found'); return; }
|
||||
const statusText = await page.$eval('#cv2-save-status', el => el.textContent);
|
||||
assert(statusText.includes('saved') || statusText.includes('Saving'),
|
||||
`Status should show save state but got "${statusText}"`);
|
||||
});
|
||||
|
||||
await test('Customizer v2: override indicator appears and disappears', async () => {
|
||||
// Set override BEFORE page load so _renderTheme sees it during init
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.evaluate(() => {
|
||||
// Force light mode so theme tab renders 'theme' section (not 'themeDark')
|
||||
localStorage.setItem('meshcore-theme', 'light');
|
||||
localStorage.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#ff0000' } }));
|
||||
});
|
||||
// Reload so customizer v2 initializes with the override in place
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
// Ensure light mode is active (CI headless may default to dark)
|
||||
await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'light'));
|
||||
const result = await page.evaluate(() => {
|
||||
if (!window._customizerV2) return { error: 'customizerV2 not loaded' };
|
||||
return { ok: true };
|
||||
});
|
||||
assert(!result.error, result.error || '');
|
||||
// Open customizer and check for override dot
|
||||
const toggleSel = '#customizeToggle, button[title*="ustom" i], [class*="customize"]';
|
||||
const btn = await page.$(toggleSel);
|
||||
if (!btn) { console.log(' ⏭️ Customizer toggle not found'); return; }
|
||||
await btn.click();
|
||||
await page.waitForSelector('.cust-overlay', { timeout: 5000 });
|
||||
// Click theme tab
|
||||
const themeTab = await page.$('.cust-tab[data-tab="theme"]');
|
||||
if (themeTab) await themeTab.click();
|
||||
await page.waitForTimeout(200);
|
||||
// Check for override dot
|
||||
const dots = await page.$$('.cv2-override-dot');
|
||||
assert(dots.length > 0, 'Override dot should be visible when overrides exist');
|
||||
// Clear overrides and reload to verify dots disappear
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
const btn2 = await page.$(toggleSel);
|
||||
if (btn2) await btn2.click();
|
||||
await page.waitForSelector('.cust-overlay', { timeout: 5000 });
|
||||
const themeTab2 = await page.$('.cust-tab[data-tab="theme"]');
|
||||
if (themeTab2) await themeTab2.click();
|
||||
await page.waitForTimeout(200);
|
||||
const dotsAfter = await page.$$('.cv2-override-dot');
|
||||
assert(dotsAfter.length === 0, 'Override dots should disappear after clearing overrides');
|
||||
});
|
||||
|
||||
await test('Customizer v2: presets apply through standard pipeline', async () => {
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
const toggleSel = '#customizeToggle, button[title*="ustom" i], [class*="customize"]';
|
||||
const btn = await page.$(toggleSel);
|
||||
if (!btn) { console.log(' ⏭️ Customizer toggle not found'); return; }
|
||||
await btn.click();
|
||||
await page.waitForSelector('.cust-overlay', { timeout: 5000 });
|
||||
// Click theme tab
|
||||
const themeTab = await page.$('.cust-tab[data-tab="theme"]');
|
||||
if (themeTab) await themeTab.click();
|
||||
await page.waitForTimeout(200);
|
||||
// Click ocean preset
|
||||
const oceanBtn = await page.$('.cust-preset-btn[data-preset="ocean"]');
|
||||
if (!oceanBtn) { console.log(' ⏭️ Ocean preset button not found'); return; }
|
||||
await oceanBtn.click();
|
||||
await page.waitForTimeout(300);
|
||||
const result = await page.evaluate(() => {
|
||||
const stored = JSON.parse(localStorage.getItem('cs-theme-overrides') || '{}');
|
||||
const cssAccent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim();
|
||||
return { hasTheme: !!stored.theme, cssAccent };
|
||||
});
|
||||
assert(result.hasTheme, 'Preset should write theme to localStorage');
|
||||
assert(result.cssAccent.length > 0, 'CSS accent should be set after preset');
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
await test('Customizer v2: page load applies overrides from localStorage', async () => {
|
||||
// Set overrides BEFORE navigating
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.evaluate(() => {
|
||||
localStorage.setItem('cs-theme-overrides', JSON.stringify({ theme: { accent: '#ee1122' } }));
|
||||
});
|
||||
// Reload to trigger init with overrides
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('nav, .navbar, .nav, [class*="nav"]');
|
||||
await page.waitForTimeout(500); // allow pipeline to run
|
||||
const cssAccent = await page.evaluate(() =>
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--accent').trim()
|
||||
);
|
||||
assert(cssAccent === '#ee1122', `Page load should apply override accent #ee1122 but got "${cssAccent}"`);
|
||||
await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
|
||||
});
|
||||
|
||||
// Extract frontend coverage if instrumented server is running
|
||||
try {
|
||||
const coverage = await page.evaluate(() => window.__coverage__);
|
||||
|
||||
+56
-265
@@ -1942,263 +1942,87 @@ console.log('\n=== analytics.js: sortChannels ===');
|
||||
}
|
||||
|
||||
|
||||
// ===== CUSTOMIZE.JS: initState merge behavior =====
|
||||
console.log('\n=== customize.js: initState merge behavior ===');
|
||||
// ===== CUSTOMIZE-V2.JS: core behavior =====
|
||||
console.log('\n=== customize-v2.js: core behavior ===');
|
||||
{
|
||||
function loadCustomizeExports(ctx) {
|
||||
const src = fs.readFileSync('public/customize.js', 'utf8');
|
||||
const withExports = src.replace(
|
||||
/\}\)\(\);\s*$/,
|
||||
'window.__customizeExport = { initState: initState, autoSave: autoSave, getState: function () { return state; }, getDefaults: function () { return deepClone(DEFAULTS); }, setInitialized: function (v) { _initialized = !!v; } };})();'
|
||||
);
|
||||
vm.runInContext(withExports, ctx);
|
||||
function loadCustomizeV2(ctx) {
|
||||
const src = fs.readFileSync('public/customize-v2.js', 'utf8');
|
||||
vm.runInContext(src, ctx);
|
||||
for (const k of Object.keys(ctx.window)) ctx[k] = ctx.window[k];
|
||||
return ctx.window.__customizeExport;
|
||||
return ctx.window._customizerV2;
|
||||
}
|
||||
|
||||
test('autoSave no-ops before initialization on panel open path', () => {
|
||||
test('readOverrides returns empty object when no localStorage data', () => {
|
||||
const ctx = makeSandbox();
|
||||
let saveTimerCalls = 0;
|
||||
ctx.setTimeout = function () { saveTimerCalls++; return 1; };
|
||||
ctx.clearTimeout = function () {};
|
||||
ctx.window.SITE_CONFIG = { home: { heroTitle: 'Server Hero' } };
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
ex.setInitialized(false);
|
||||
ex.autoSave();
|
||||
assert.strictEqual(saveTimerCalls, 0);
|
||||
assert.strictEqual(ctx.localStorage.getItem('meshcore-user-theme'), null);
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
const overrides = v2.readOverrides();
|
||||
assert.strictEqual(Object.keys(overrides).length, 0);
|
||||
});
|
||||
|
||||
test('server home config survives customizer open without modification', () => {
|
||||
test('writeOverrides + readOverrides roundtrip', () => {
|
||||
const ctx = makeSandbox();
|
||||
let saveTimerCalls = 0;
|
||||
ctx.setTimeout = function () { saveTimerCalls++; return 1; };
|
||||
ctx.clearTimeout = function () {};
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ emoji: 'S', title: 'Server Step', description: 'server' }],
|
||||
checklist: [{ question: 'Server Q', answer: 'Server A' }],
|
||||
footerLinks: [{ label: 'Server Link', url: '#/server' }]
|
||||
}
|
||||
};
|
||||
const before = JSON.stringify(ctx.window.SITE_CONFIG.home);
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
ex.setInitialized(false);
|
||||
ex.autoSave();
|
||||
assert.strictEqual(saveTimerCalls, 0);
|
||||
assert.strictEqual(JSON.stringify(ctx.window.SITE_CONFIG.home), before);
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
v2.writeOverrides({ theme: { accent: '#ff0000' } });
|
||||
const result = v2.readOverrides();
|
||||
assert.strictEqual(result.theme.accent, '#ff0000');
|
||||
});
|
||||
|
||||
test('post-init autoSave exports user theme without mutating SITE_CONFIG.home', () => {
|
||||
test('computeEffective merges server defaults with overrides', () => {
|
||||
const ctx = makeSandbox();
|
||||
let saveTimerCalls = 0;
|
||||
ctx.setTimeout = function (fn) { saveTimerCalls++; fn(); return 1; };
|
||||
ctx.clearTimeout = function () {};
|
||||
ctx.HashChangeEvent = function HashChangeEvent(type) { this.type = type; };
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ emoji: 'S', title: 'Server Step', description: 'server' }],
|
||||
checklist: [{ question: 'Server Q', answer: 'Server A' }],
|
||||
footerLinks: [{ label: 'Server Link', url: '#/server' }]
|
||||
}
|
||||
};
|
||||
const before = JSON.stringify(ctx.window.SITE_CONFIG.home);
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
ex.setInitialized(true);
|
||||
ex.autoSave();
|
||||
const saved = ctx.localStorage.getItem('meshcore-user-theme');
|
||||
assert.strictEqual(saveTimerCalls, 1);
|
||||
assert(saved && saved.length > 0, 'Expected autoSave to persist user theme');
|
||||
assert.strictEqual(JSON.stringify(ctx.window.SITE_CONFIG.home), before);
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
const server = { theme: { accent: '#111111', navBg: '#222222' } };
|
||||
const overrides = { theme: { accent: '#ff0000' } };
|
||||
const effective = v2.computeEffective(server, overrides);
|
||||
assert.strictEqual(effective.theme.accent, '#ff0000');
|
||||
assert.strictEqual(effective.theme.navBg, '#222222');
|
||||
});
|
||||
|
||||
test('partial local checklist does not wipe steps/footerLinks and keeps server colors', () => {
|
||||
test('isValidColor accepts hex, rgb, hsl, and named colors', () => {
|
||||
const ctx = makeSandbox();
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ emoji: '🧪', title: 'Server Step', description: 'from server' }],
|
||||
checklist: [{ question: 'Server Q', answer: 'Server A' }],
|
||||
footerLinks: [{ label: 'Server Link', url: '#/server' }]
|
||||
},
|
||||
theme: { accent: '#123456', navBg: '#222222' },
|
||||
nodeColors: { repeater: '#aa0000' }
|
||||
};
|
||||
ctx.localStorage.setItem('meshcore-user-theme', JSON.stringify({
|
||||
home: { checklist: [{ question: 'Local Q', answer: 'Local A' }] }
|
||||
}));
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
const state = ex.getState();
|
||||
assert.strictEqual(state.home.checklist[0].question, 'Local Q');
|
||||
assert.strictEqual(state.home.steps[0].title, 'Server Step');
|
||||
assert.strictEqual(state.home.footerLinks[0].label, 'Server Link');
|
||||
assert.strictEqual(state.home.heroTitle, 'Server Hero');
|
||||
assert.strictEqual(state.theme.accent, '#123456');
|
||||
assert.strictEqual(state.nodeColors.repeater, '#aa0000');
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
assert.strictEqual(v2.isValidColor('#ff0000'), true);
|
||||
assert.strictEqual(v2.isValidColor('#abc'), true);
|
||||
assert.strictEqual(v2.isValidColor('rgb(255, 0, 0)'), true);
|
||||
assert.strictEqual(v2.isValidColor('hsl(0, 100%, 50%)'), true);
|
||||
assert.strictEqual(v2.isValidColor('red'), true);
|
||||
assert.strictEqual(v2.isValidColor('notacolor'), false);
|
||||
assert.strictEqual(v2.isValidColor(123), false);
|
||||
});
|
||||
|
||||
test('server values survive when localStorage has partial overrides', () => {
|
||||
test('validateShape reports invalid color values', () => {
|
||||
const ctx = makeSandbox();
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ emoji: '1️⃣', title: 'Server Step', description: 'server' }],
|
||||
footerLinks: [{ label: 'Server Footer', url: '#/s' }]
|
||||
},
|
||||
theme: { accent: '#111111', navBg: '#222222', navText: '#333333' },
|
||||
typeColors: { ADVERT: '#00aa00', REQUEST: '#aa00aa' }
|
||||
};
|
||||
ctx.localStorage.setItem('meshcore-user-theme', JSON.stringify({
|
||||
home: { heroTitle: 'Local Hero' },
|
||||
theme: { accent: '#999999' },
|
||||
typeColors: { ADVERT: '#ff00ff' }
|
||||
}));
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
const state = ex.getState();
|
||||
assert.strictEqual(state.home.heroTitle, 'Local Hero');
|
||||
assert.strictEqual(state.home.heroSubtitle, 'Server Subtitle');
|
||||
assert.strictEqual(state.home.steps[0].title, 'Server Step');
|
||||
assert.strictEqual(state.home.footerLinks[0].label, 'Server Footer');
|
||||
assert.strictEqual(state.theme.accent, '#999999');
|
||||
assert.strictEqual(state.theme.navBg, '#222222');
|
||||
assert.strictEqual(state.typeColors.ADVERT, '#ff00ff');
|
||||
assert.strictEqual(state.typeColors.REQUEST, '#aa00aa');
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
const valid = v2.validateShape({ theme: { accent: '#ff0000', navBg: '#222222' } });
|
||||
assert.strictEqual(valid.valid, true);
|
||||
const invalid = v2.validateShape({ theme: { accent: '#ff0000', navBg: 'not-a-color' } });
|
||||
assert.ok(invalid.errors.length > 0, 'should report invalid color');
|
||||
assert.ok(invalid.errors[0].includes('navBg'), 'error should mention navBg');
|
||||
});
|
||||
|
||||
test('full localStorage values override server config', () => {
|
||||
test('migrateOldKeys reads legacy localStorage keys', () => {
|
||||
const ctx = makeSandbox();
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ emoji: 'S', title: 'Server Step', description: 'server' }],
|
||||
checklist: [{ question: 'Server Q', answer: 'Server A' }],
|
||||
footerLinks: [{ label: 'Server Link', url: '#/server' }]
|
||||
},
|
||||
theme: { accent: '#101010' }
|
||||
};
|
||||
ctx.localStorage.setItem('meshcore-user-theme', JSON.stringify({
|
||||
home: {
|
||||
heroTitle: 'Local Hero',
|
||||
heroSubtitle: 'Local Subtitle',
|
||||
steps: [{ emoji: 'L', title: 'Local Step', description: 'local' }],
|
||||
checklist: [{ question: 'Local Q', answer: 'Local A' }],
|
||||
footerLinks: [{ label: 'Local Link', url: '#/local' }]
|
||||
},
|
||||
theme: { accent: '#abcdef', navBg: '#fedcba' }
|
||||
}));
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
const state = ex.getState();
|
||||
assert.strictEqual(state.home.heroTitle, 'Local Hero');
|
||||
assert.strictEqual(state.home.heroSubtitle, 'Local Subtitle');
|
||||
assert.strictEqual(state.home.steps[0].title, 'Local Step');
|
||||
assert.strictEqual(state.home.checklist[0].question, 'Local Q');
|
||||
assert.strictEqual(state.home.footerLinks[0].label, 'Local Link');
|
||||
assert.strictEqual(state.theme.accent, '#abcdef');
|
||||
assert.strictEqual(state.theme.navBg, '#fedcba');
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
ctx.localStorage.setItem('meshcore-theme', 'dark');
|
||||
const v2 = loadCustomizeV2(ctx);
|
||||
// migrateOldKeys should handle legacy keys without crashing
|
||||
v2.migrateOldKeys();
|
||||
});
|
||||
|
||||
test('initState uses _SITE_CONFIG_ORIGINAL_HOME to bypass contaminated SITE_CONFIG.home', () => {
|
||||
// Simulates: app.js called mergeUserHomeConfig which mutated SITE_CONFIG.home.steps = []
|
||||
// The original server steps must still be recoverable via _SITE_CONFIG_ORIGINAL_HOME
|
||||
test('THEME_CSS_MAP includes surface3 and sectionBg', () => {
|
||||
const ctx = makeSandbox();
|
||||
ctx.setTimeout = function (fn) { fn(); return 1; };
|
||||
ctx.clearTimeout = function () {};
|
||||
// SITE_CONFIG.home is contaminated — steps wiped by mergeUserHomeConfig at page load
|
||||
ctx.window.SITE_CONFIG = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
steps: [] // contaminated — user had steps:[] in localStorage at page load
|
||||
}
|
||||
};
|
||||
// app.js snapshots original before mutation
|
||||
ctx.window._SITE_CONFIG_ORIGINAL_HOME = {
|
||||
heroTitle: 'Server Hero',
|
||||
steps: [{ emoji: '🧪', title: 'Original Step', description: 'from server' }]
|
||||
};
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
const state = ex.getState();
|
||||
assert.strictEqual(state.home.steps.length, 1, 'should restore from snapshot, not contaminated SITE_CONFIG');
|
||||
assert.strictEqual(state.home.steps[0].title, 'Original Step');
|
||||
});
|
||||
|
||||
test('initState uses DEFAULTS.home when no SITE_CONFIG and no snapshot', () => {
|
||||
const ctx = makeSandbox();
|
||||
ctx.setTimeout = function (fn) { fn(); return 1; };
|
||||
ctx.clearTimeout = function () {};
|
||||
// No SITE_CONFIG at all — pure DEFAULTS
|
||||
const ex = loadCustomizeExports(ctx);
|
||||
ex.initState();
|
||||
const state = ex.getState();
|
||||
assert.ok(state.home.steps.length > 0, 'should use DEFAULTS.home.steps when no server config');
|
||||
assert.strictEqual(state.home.steps[0].title, 'Join the Bay Area MeshCore Discord');
|
||||
ctx.CustomEvent = function (type) { this.type = type; };
|
||||
const src = fs.readFileSync('public/customize-v2.js', 'utf8');
|
||||
assert.ok(src.includes("surface3: '--surface-3'"), 'surface3 must map to --surface-3');
|
||||
assert.ok(src.includes("sectionBg: '--section-bg'"), 'sectionBg must map to --section-bg');
|
||||
});
|
||||
}
|
||||
|
||||
// ===== APP.JS: home rehydration merge =====
|
||||
console.log('\n=== app.js: home rehydration merge ===');
|
||||
{
|
||||
test('mergeUserHomeConfig layers local home overrides on server home', () => {
|
||||
const ctx = makeSandbox();
|
||||
loadInCtx(ctx, 'public/roles.js');
|
||||
loadInCtx(ctx, 'public/app.js');
|
||||
const merged = ctx.mergeUserHomeConfig(
|
||||
{
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ title: 'Server Step' }],
|
||||
footerLinks: [{ label: 'Server Link' }]
|
||||
}
|
||||
},
|
||||
{
|
||||
home: {
|
||||
heroSubtitle: 'Local Subtitle',
|
||||
checklist: [{ question: 'Local Q', answer: 'Local A' }]
|
||||
}
|
||||
}
|
||||
);
|
||||
assert.strictEqual(merged.home.heroTitle, 'Server Hero');
|
||||
assert.strictEqual(merged.home.heroSubtitle, 'Local Subtitle');
|
||||
assert.strictEqual(merged.home.steps[0].title, 'Server Step');
|
||||
assert.strictEqual(merged.home.footerLinks[0].label, 'Server Link');
|
||||
assert.strictEqual(merged.home.checklist[0].question, 'Local Q');
|
||||
});
|
||||
|
||||
test('mergeUserHomeConfig handles refresh-style localStorage payload', () => {
|
||||
const ctx = makeSandbox();
|
||||
loadInCtx(ctx, 'public/roles.js');
|
||||
loadInCtx(ctx, 'public/app.js');
|
||||
ctx.localStorage.setItem('meshcore-user-theme', JSON.stringify({
|
||||
home: { heroTitle: 'Local Hero' }
|
||||
}));
|
||||
const cfg = {
|
||||
home: {
|
||||
heroTitle: 'Server Hero',
|
||||
heroSubtitle: 'Server Subtitle',
|
||||
steps: [{ title: 'Server Step' }]
|
||||
}
|
||||
};
|
||||
const userTheme = JSON.parse(ctx.localStorage.getItem('meshcore-user-theme') || '{}');
|
||||
const merged = ctx.mergeUserHomeConfig(cfg, userTheme);
|
||||
assert.strictEqual(merged.home.heroTitle, 'Local Hero');
|
||||
assert.strictEqual(merged.home.heroSubtitle, 'Server Subtitle');
|
||||
assert.strictEqual(merged.home.steps[0].title, 'Server Step');
|
||||
});
|
||||
}
|
||||
// ===== APP.JS: home rehydration merge (mergeUserHomeConfig removed — dead code) =====
|
||||
|
||||
// ===== CHANNELS.JS: WS Region Filter helper =====
|
||||
console.log('\n=== channels.js: shouldProcessWSMessageForRegion ===');
|
||||
@@ -4098,40 +3922,7 @@ console.log('\n=== app.js: debounce ===');
|
||||
});
|
||||
}
|
||||
|
||||
// ===== APP.JS: mergeUserHomeConfig edge cases =====
|
||||
console.log('\n=== app.js: mergeUserHomeConfig edge cases ===');
|
||||
{
|
||||
const ctx = makeSandbox();
|
||||
loadInCtx(ctx, 'public/roles.js');
|
||||
loadInCtx(ctx, 'public/app.js');
|
||||
const merge = ctx.mergeUserHomeConfig;
|
||||
|
||||
test('returns siteConfig when userTheme is null', () => {
|
||||
const cfg = { home: { heroTitle: 'Test' } };
|
||||
assert.strictEqual(merge(cfg, null), cfg);
|
||||
});
|
||||
|
||||
test('returns siteConfig when userTheme has no home', () => {
|
||||
const cfg = { home: { heroTitle: 'Test' } };
|
||||
assert.strictEqual(merge(cfg, { theme: {} }), cfg);
|
||||
});
|
||||
|
||||
test('returns siteConfig when siteConfig is null', () => {
|
||||
assert.strictEqual(merge(null, { home: { heroTitle: 'X' } }), null);
|
||||
});
|
||||
|
||||
test('creates home on siteConfig when missing', () => {
|
||||
const cfg = {};
|
||||
merge(cfg, { home: { heroTitle: 'New' } });
|
||||
assert.strictEqual(cfg.home.heroTitle, 'New');
|
||||
});
|
||||
|
||||
test('userTheme.home non-object is ignored', () => {
|
||||
const cfg = { home: { heroTitle: 'Test' } };
|
||||
assert.strictEqual(merge(cfg, { home: 'string' }), cfg);
|
||||
assert.strictEqual(cfg.home.heroTitle, 'Test');
|
||||
});
|
||||
}
|
||||
// ===== APP.JS: mergeUserHomeConfig removed (dead code) =====
|
||||
|
||||
// ===== APP.JS: formatAbsoluteTimestamp with custom format =====
|
||||
console.log('\n=== app.js: formatAbsoluteTimestamp (custom format) ===');
|
||||
|
||||
Reference in New Issue
Block a user