This PR allows themes and theme components to have QUnit tests. To add tests to your theme/component, create a top-level directory in your theme and name it test, and Discourse will save all the files in that directory (and its sub-directories) as “tests files” in the database. While tests files/directories are not required to be organized in a specific way, we recommend that you follow Discourse core’s tests structure.
Writing theme tests should be identical to writing plugins or core tests; all the import statements and APIs that you see in core (or plugins) to define/setup tests should just work in themes.
You do need a working Discourse install to run theme tests, and you have 2 ways to run theme tests:
-
In the browser at the
/qunitroute./qunitwill run tests of all active themes/components as well as core and plugins. The/qunitnow accepts atheme_nameortheme_urlparams that you can use to run tests of a specific theme/component like so:/qunit?theme_name=<your_theme_name>. -
In the command line using the
themes:qunitrake task. This take is meant to run tests of a single theme/component so you need to provide it with a theme name or URL like so:bundle exec rake themes:qunit[name=<theme_name>]orbundle exec rake themes:qunit[url=<theme_url>].
There are some refactors to how Discourse processes JavaScript that comes with themes/components, and these refactors may break your JS customizations:
-
<script type="text/discourse-plugin">tags are now automatically converted to modules. This means that the JavaScript inside those special tags will now be executed with the"use strict"directive, and code that’s not compatible with the"use strict"directive will break. -
Discourse will now start prefixing theme modules names with
discourse/theme-<theme_id>/<module_name>. This will break themes/components that import a module of their own. E.g., if your component has a helper injavascripts/discourse/lib/my-helper.jsand this helper is imported by another file in your component like this:import { xyz } from "discourse/lib/my-helper", thisimportstatement will break. To fix it you need to change it to a relativeimportstatement. See FIX: Compatibility with upcoming core changes by OsamaSayegh · Pull Request #5 · discourse/discourse-gifs · GitHub and FIX: Compatibility with upcoming core changes by OsamaSayegh · Pull Request #2 · discourse/discourse-dice · GitHub for examples.
This PR also improves theme error handling in Discourse. We will now be able to catch errors that occur when theme initializers are run and prevent them from breaking the site and other themes/components.