mocha-dark

v8.3.2

Published

2 years ago

Dark color scheme for Mocha, the simple, flexible, fun JavaScript test framework for The Browser

Downloads

0High
0Medium
0Low

bcowgi11

mocha dark theme scheme style accessible prefers-color-scheme test bdd tdd tap testing

mocha-dark version: 8.3.2

☕️ A dark color scheme for Mocha, the Simple, flexible, fun JavaScript test framework for Node.js & The Browser. ☕️

Motivation

To provide a dark color scheme for the browser based Mocha test runner. For accessibility, for those who have visual difficulties or for those who just prefer a dark color theme when viewing their test results.

Features

In this release (version: 8.3.2) we provide a replacement for mocha.css and mocha.js with a dark color scheme for use in Mocha browser based tests.

Contains both default (light) and dark scheme.
It detects the CSS media query prefers-color-scheme setting on startup if your Operating System sets it and there is no override.
It changes to dark or light as your OS changes the preferes-color-scheme setting if no override is stored.
The user can make the page render dark on startup.
The user can click to toggle the scheme and have the setting remembered.
When you change the scheme the circular progress indicator now re-renders correctly without a reload.
Color scheme setting is remembered for file:// protocol as well as web server pages.

Issues

None known. Please report any you discover.

Usage

After installing mocha-dark you need to replace mocha/mocha.css with mocha-dark/mocha.css within any *.html testing files in your project.

And mocha/mocha.js with mocha-dark/mocha.js within any *.html testing files or any *.js files you use to import mocha.js in your project.

This could be simply accomplished with a single command:

perl -i -pne 's{mocha/mocha\.(css|js)}{mocha-dark/mocha.$1}g' test/*.html

Then you can set the dark scheme on startup by adding a class="mocha-dark" to the body element of your *.html pages.

Again a single command can do that:

perl -i -pne 's{<body>}{<body class="mocha-dark">}g' test/*.html

It is then simpler to switch back to the default scheme:

perl -i -pne 's{"mocha-dark"}{"mocha-light"}g' test/*.html

To automate this process when you run your tests you can add an additional target to your package.json

// in package.json:
"scripts": {
  "test": "mocha ...",
  "pretest:light": "perl -i -pne 's{\"mocha-dark\"}{\"mocha-light\"}g' test/*.html",
  "test:light": "npm test"
  "pretest:dark": "perl -i -pne 's{\"mocha-light\"}{\"mocha-dark\"}g' test/*.html",
  "test:dark": "npm test"
}

Then you run the dark tests with:

npm run test:dark

And back to the light tests with:

npm run test:light

Changing Scheme in the Browser

Once you are viewing the tests in the browser you can toggle the color scheme by clicking on the circular progress indicator at top right of the page.

The currently clicked setting is remembered using browser localStorage so it will persist forever and work on pages loaded from file:// or loaded from web servers.

Alternatively, you can toggle the color scheme using a command in the Javascript console:

mocha.updateColorScheme('mocha-dark') // or mocha-light

And you can remove the setting from localStorage completely with:

mocha.updateColorScheme()

Color Scheme Differences

Mocha Dark Theme

Mocha Default Theme

Release History

2.2.5 initial package matching an old version of mocha and providing only the dark scheme.
2.3.4 release to match Mocha release with both light/dark CSS and mocha-dark class on body element and cookie setting to remember change to chosen scheme.
2.4.5 release to match Mocha release using localStorage instead of cookie to save settings.
3.2.0 release to match Mocha release hover and tooltip on progress indicator, replay color change.
8.3.0 release to match Mocha release progress indicator re-renders, CSS prefers-color-scheme media query, features complete.
8.3.2 release to match Mocha release added png logo image, updated chai

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme