JavaScript-kod

Medan det mesta av Django-kärnan är Python, innehåller Contrib-apparna admin och gis JavaScript-kod.

Följ dessa kodningsstandarder när du skriver JavaScript-kod för inkludering i Django.

Kod för stil

• Följ den indragningsstil som anges i filen .editorconfig. Vi rekommenderar att du använder en textredigerare med stöd för EditorConfig för att undvika problem med indrag och blanksteg. De flesta JavaScript-filer använder 4 blanksteg för indragning, men det finns några undantag.

• När du namnger variabler, använd camelCase istället för underscore_case. Olika JavaScript-filer använder ibland en annan kodstil. Försök att följa kodstilen för varje fil.

• Använd kodlintaren Biome för att kontrollera koden efter fel och stilproblem. Biome körs av pre-commit-hookarna. Vi rekommenderar också att du installerar ett Biome-tillägg i din textredigerare.

• Om möjligt, skriv kod som fungerar även om sidstrukturen senare ändras med JavaScript. Till exempel, när du binder en klickhanterare, använd $('body').on('click', selector, func) istället för $(selector).click(func). Detta gör det enklare för projekt att utöka Djangos standardbeteende med JavaScript.

JavaScript-uppdateringar

Djangos adminsystem utnyttjar jQuery-ramverket för att öka funktionerna i admingränssnittet. I samband med detta läggs tonvikten på JavaScript-prestanda för admin och minimering av den totala filstorleken för adminmedia.

JavaScript-tester

Djangos JavaScript-tester kan köras i en webbläsare eller från kommandoraden. Testerna finns i en katalog på högsta nivån js_tests.

Skriva tester

Djangos JavaScript-tester använder QUnit. Här är ett exempel på en testmodul:

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);
});

Se dokumentationen för QUnit för information om vilka typer av assertions som stöds av QUnit.

Genomföra tester

JavaScript-testerna kan köras från en webbläsare eller från kommandoraden.

Testning från en webbläsare

Om du vill köra testerna från en webbläsare öppnar du js_tests/tests.html i din webbläsare.

Om du vill mäta kodtäckningen när du kör testerna måste du visa filen via HTTP. Så här visar du kodtäckning:

• Kör python -m http.server från rotkatalogen (inte inifrån js_tests).

• Öppna http://localhost:8000/js_tests/tests.html i din webbläsare.

Testning från kommandoraden

För att köra testerna från kommandoraden måste du ha Node.js installerat.

När du har installerat Node.js installerar du JavaScript-testberoendena genom att köra följande från roten till din Django-kassakontroll:

Linux/macOS

$ npm install

Windows

...\> npm install

Kör sedan testerna med:

Linux/macOS

$ npm test

Windows

...\> npm test