While most of Django core is Python, the admin
and gis
contrib apps
contain JavaScript code.
Please follow these coding standards when writing JavaScript code for inclusion in Django.
.editorconfig
file. We recommend using a text editor with EditorConfig support to avoid
indentation and whitespace issues. Most of the JavaScript files use 4 spaces
for indentation, but there are some exceptions.camelCase
instead of underscore_case
.
Different JavaScript files sometimes use a different code style. Please try to
conform to the code style of each file.$('body').on('click', selector, func)
instead of
$(selector).click(func)
. This makes it easier for projects to extend
Django’s default behavior with JavaScript.Django’s admin system leverages the jQuery framework to increase the capabilities of the admin interface. In conjunction, there is an emphasis on admin JavaScript performance and minimizing overall admin media file size.
Django’s JavaScript tests can be run in a browser or from the command line. The tests are located in a top level js_tests directory.
Django’s JavaScript tests use QUnit. Here is an example test module:
QUnit.module('magicTricks', {
beforeEach: function() {
const $ = django.jQuery;
$('#qunit-fixture').append('<button class="button"></button>');
}
});
QUnit.test('removeOnClick removes button on click', function(assert) {
const $ = django.jQuery;
removeOnClick('.button');
assert.equal($('.button').length, 1);
$('.button').click();
assert.equal($('.button').length, 0);
});
QUnit.test('copyOnClick adds button on click', function(assert) {
const $ = django.jQuery;
copyOnClick('.button');
assert.equal($('.button').length, 1);
$('.button').click();
assert.equal($('.button').length, 2);
});
Please consult the QUnit
documentation for information on the types of
assertions supported by QUnit.
The JavaScript tests may be run from a web browser or from the command line.
To run the tests from a web browser, open up js_tests/tests.html in your browser.
To measure code coverage when running the tests, you need to view that file over HTTP. To view code coverage:
python -m http.server
from the root directory (not from inside
js_tests
).To run the tests from the command line, you need to have Node.js installed.
After installing Node.js
, install the JavaScript test dependencies by
running the following from the root of your Django checkout:
$ npm install
...\> npm install
Then run the tests with:
$ npm test
...\> npm test
Jan 24, 2024