mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-13 05:15:21 +02:00
Migrate frontend to TypeScript with Deno-based tooling (#209)
* Migrate frontend to TypeScript with Deno-based tooling (#206) Compiles assets/*.ts via sensiolabs/typescript-bundle (standalone SWC binary) and adds Deno for formatting, linting, type-checking, and tests, keeping the project's no-Node/npm approach intact. Wires all four into CI, the Justfile, and the pre-commit hook. * fix: build TypeScript assets before running PHPUnit in CI The tests job ran bin/console sass:build but never typescript:build, so var/typescript/ didn't exist and any page rendering the importmap (e.g. backoffice/base.html.twig) errored during tests. * test: add regression test for backoffice navbar-toggler dead target Guards against the navbar-toggler button pointing at a collapse target (#navbarSupportedContent) that isn't rendered for the current user — the bug hit on the login page before #210 restructured the nav to always render at least one item (the Releases link) regardless of auth state. * fix: stop hand-enumerating TS files for deno check deno check assets/*.ts assets/controllers/*.ts assets/controllers/bo/*.ts was duplicated in CI and the Justfile, and silently misses any new controller subdirectory (fmt/lint/test already recurse assets/ via deno.json). Add a top-level exclude for assets/vendor/ (respected by all deno subcommands, unlike the per-task include/exclude blocks) so deno check assets/ can recurse safely instead. * fix: GitHubReleasesService date parsing and falsy release name - Move the release-mapping array_map inside the try block so a malformed published_at (or any other parse failure) degrades to the same empty-list fallback as an HTTP failure, instead of throwing uncaught out of the cache callback. - Stop treating a release literally named "0" as unnamed — the old `?:` fallback is falsy for that string and silently substituted the tag name instead. - Render release dates in UTC explicitly; Twig's date filter otherwise silently converts to the app's default timezone (Europe/Amsterdam), which could show the wrong calendar day for releases near midnight. * docs: add scope-creep-as-a-service rule to CLAUDE.md Per user instruction: when a review turns up a real bug outside the current task's scope, fix it in the same MR (with a regression test) rather than just reporting it, unless it needs a human design call.
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
import { assertEquals } from '@std/assert';
|
||||
|
||||
// Stimulus's Controller base class constructor only does `this.context = context`
|
||||
// (see @hotwired/stimulus dist/stimulus.js), and none of this controller's methods
|
||||
// touch Stimulus-specific getters (element/scope/targets), so a plain `{}` context
|
||||
// is enough to construct a real instance. `document`/`sessionStorage` are stubbed
|
||||
// since Deno has no browser DOM.
|
||||
class FakeClassList {
|
||||
classes = new Set<string>();
|
||||
toggle(name: string, force?: boolean) {
|
||||
const shouldAdd = force ?? !this.classes.has(name);
|
||||
if (shouldAdd) this.classes.add(name);
|
||||
else this.classes.delete(name);
|
||||
}
|
||||
contains(name: string) {
|
||||
return this.classes.has(name);
|
||||
}
|
||||
}
|
||||
|
||||
const classList = new FakeClassList();
|
||||
let fullscreenElement: unknown = null;
|
||||
const sessionStore = new Map<string, string>();
|
||||
|
||||
// deno-lint-ignore no-explicit-any
|
||||
(globalThis as any).document = {
|
||||
documentElement: { classList },
|
||||
get fullscreenElement() {
|
||||
return fullscreenElement;
|
||||
},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
};
|
||||
// Deno defines a native `sessionStorage` accessor on globalThis (get/set pair), so a
|
||||
// plain assignment would just call through to it instead of replacing it — redefine
|
||||
// the property outright.
|
||||
Object.defineProperty(globalThis, 'sessionStorage', {
|
||||
value: {
|
||||
getItem: (key: string) => sessionStore.get(key) ?? null,
|
||||
setItem: (key: string, value: string) => sessionStore.set(key, value),
|
||||
},
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const { default: FullscreenController } = await import(
|
||||
'./fullscreen_controller.ts'
|
||||
);
|
||||
|
||||
// deno-lint-ignore no-explicit-any
|
||||
function makeController(): any {
|
||||
return new FullscreenController({} as never);
|
||||
}
|
||||
|
||||
Deno.test('syncState adds is-fullscreen when a fullscreen element is set', () => {
|
||||
fullscreenElement = { tagName: 'HTML' };
|
||||
makeController().syncState();
|
||||
assertEquals(classList.contains('is-fullscreen'), true);
|
||||
});
|
||||
|
||||
Deno.test('syncState removes is-fullscreen when there is no fullscreen element', () => {
|
||||
fullscreenElement = null;
|
||||
makeController().syncState();
|
||||
assertEquals(classList.contains('is-fullscreen'), false);
|
||||
});
|
||||
|
||||
Deno.test('onFullscreenChange persists the fullscreen state and syncs classes', () => {
|
||||
fullscreenElement = { tagName: 'HTML' };
|
||||
makeController().onFullscreenChange();
|
||||
assertEquals(sessionStore.get('tvdt-fullscreen'), '1');
|
||||
assertEquals(classList.contains('is-fullscreen'), true);
|
||||
|
||||
fullscreenElement = null;
|
||||
makeController().onFullscreenChange();
|
||||
assertEquals(sessionStore.get('tvdt-fullscreen'), '0');
|
||||
assertEquals(classList.contains('is-fullscreen'), false);
|
||||
});
|
||||
Reference in New Issue
Block a user