Test RedHerb's Vue components - #1218
Conversation
RedHerb is the live reference for extending NeoWiki, but nothing exercised its frontend, so a change to NeoWiki's public API could rot the examples unnoticed. Mount each of its Vue components against the real ext.neowiki API and assert the behaviour an extension author copies them for. The components are ResourceLoader package files: CommonJS closures that pull vue, ext.neowiki and the CodexModule-generated codex.js and icons.json in with require(). A test-only Vite plugin rewrites those two constructs to ES modules and resolves the provided modules as ext.neowiki would, so the examples share the vue and Codex instances the rest of the suite uses and stay copyable into a real extension. ci-ts also runs on tests/RedHerb changes now, so editing an example runs the tests covering it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Closing a dialog through Escape or its close button goes through a different handler than its cancel action, and has to clear the shared state the mount point holds rather than only hide the dialog. Assert the optional state of the color field through CdxField rather than the Codex class name that renders it, and stop pinning the whole style attribute of a swatch when only the color it paints matters. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Building the transformed single-file component with String.replace gave $& and its siblings their substitution meaning, so a script containing one would have been rewritten into something that no longer parses. Narrow the directory check to the contents of the source directory rather than any path starting with its name. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Harness approach: where this PR sits, and an axis the issue did not coverAgainst the plan in the issueThe issue proposed two harness options: A, a vitest workspace with a second project rooted at the This PR is closest to B, and further from A than B is: the specs live inside The alias list and the reuse of the existing A correction to one premiseThe issue notes that RedHerb's CommonJS Options API form is something "the vue plugin handles fine". It does not. The axis the issue did not coverA and B are both node-side. The third option is running the tests through ResourceLoader itself, as a MediaWiki
The tensionCatching NeoWiki breaking its own examples requires running against NeoWiki's real API. Tests somebody can run after Options that resolve it, rather than picking a side:
Worth noting that no node-side option can see the ResourceLoader wiring itself: a file missing from No decision taken here. Happy to reshape this PR toward A, split the harness out first as originally proposed, or
|
Fixes #799
RedHerb is the live reference for extending NeoWiki, but nothing exercised its frontend, so a change to
NeoWiki's public API could rot the examples unnoticed. Each of its Vue components is now mounted against
the real
ext.neowikiAPI, asserting the behaviour an extension author copies it for. The specs sit withNeoWiki's own frontend tests, in
resources/ext.neowiki/tests/RedHerb/, alongside where the PHP examplesare already covered from
tests/phpunit/RedHerb/. The registrationpackage file is driven through
mw.hook( 'neowiki.registration' )the way NeoWiki drives it in production,so the specs cover the wiring as well as the components.
Loading ResourceLoader package files in vitest
RedHerb's resources are ResourceLoader package files: CommonJS closures that pull
vue,ext.neowikiandthe CodexModule-generated
codex.jsandicons.jsonin withrequire(). Vite only understands ES modules,so
resources/ext.neowiki/tests/RedHerb/resourceLoaderCommonJs.tsrewritesrequire()andmodule.exportsfor files under RedHerb's resources directory, and resolves the provided modules asext.neowikiwould. That last partmatters: RedHerb has no
node_modulesof its own, and resolving from its own directory would either failor hand the examples a second copy of vue and Codex.
Keeping the interop in test-only config leaves RedHerb itself untouched, so it stays copyable into a real
extension. The alternative, giving RedHerb its own vitest setup, would have had to reach into
ext.neowiki's TypeScript sources or its build output, which a real extension cannot do either.Test collaborators
The specs use the real composables, registries and value components rather than mocking them, since the
point is to catch NeoWiki changes reaching the examples. Only the store methods that would hit the network
and the sortable drag mechanism are stubbed.
CI
ci-tstriggered onresources/**only, so editing a RedHerb component ran neither the new tests nor theexisting ones. It now also triggers on
tests/RedHerb/**.🤖 Generated with Claude Code