Extension:GrowthExperiments/Technical documentation/Frontend

Client modules map
Disclaimer: the table is not updated since May 2022

Unit testing
The GrowthExperiments extension client code can and should be tested with one of MediaWiki's preferred runners: jest or qunit. Specifically Jest is used for running Vue components unit tests and QUnit for running other Javascript scripts. QUnit tests live under the folder  whereas Jest tests are normally placed in source directories by the side of the script they are testing. The current CI setup (tbd: add reference to doc/sources) will execute both kinds of tests whenever a change is pushed to gerrit. Sadly there's not a single command (yet) to run them all from a developer environment.

QUnit
For running QUnit tests use  from the root mediawiki directory.

Jest
For running Jest tests use the NPM script  from the GrowthExperiments extension directory.

Snapshot testing
Jest supports snapshot testing which is a useful feature to make sure UIs do not change unexpectedly. To create a snapshot file from a component for the first time use. To update an existing snapshot based on source component changes use

Testing a Codex patch in the frontend documentation
Pull the relevant Codex patch

Build all Codex packages since the build of  may depend on the build of

Link the local package into your package

All  or   statements should work as expected. Relative imports in  files should also continue to work, eg:

VitePress projects
On VitePress projects only files within the root directory are allowed to be served by default. Assuming the codex repository folder is a sibling of the target project to test, the vite config can be modified to temporary allow serving files from outside its root.

This change should not be pushed to the remote repository.

Unlinking
To revert your project to use the original Codex version:

See npm-link

Trouble shooting
VitePress creates a cache dependency directory which isn't updated on unlinking operations. You can just flush its content and the cache will be populated again with the current packages from node_modules.

Pre-steps ( developed in the VitePress sandbox in the prototyping phase )
This is a backlog of issues found while trying to integrate a Vue component developed with VitePress and Codex into GrowthExperiments. TODO: add links to phab tasks.


 * 1) Integrate with a MW-compatible i18n system
 * 2) Meet, at least, the UX excellence level of OOUI version of the implemented component
 * 3) Adapt component styles and user interactions (eg: swipe) for RTL languages
 * 4) Image loading performance
 * 5) Documentation on the component

Steps ( developed in MW in the integration phase )

 * 1) Compile the Vue code
 * 2) Load it through RL
 * 3) Testing? Regression?