# documentação Django 3.1.9.dev

# JavaScript

Embora a maior parte do núcleo do Django seja escrito em Python, alguns apps como o `admin` e `gis` contém código JavaScript.

Por favor siga esses padrões de código quando estiver escrevendo código em JavaScript para inclusão no Django.

## Estilo de código

- Por favor adapte-se ao estilo de identação ditado no arquivo `.editorconfig`. Nós recomendamos usar o editor de textos com suporte a EditorConfig para evitar problemas com identação e espaços em branco. A maioria dos arquivos JavaScript usam 4 espaços para identação, mas existem algumas exceções.
- Quando estiver nomeando variáveis, use `camelCase` ao invés de `underscore_case`. Arquivos JavaScript diferentes algumas vezes usam estilos de código diferentes. Por favor tente se adequar aos padrões de estilo de cada arquivo.
- Use the ESLint code linter to check your code for bugs and style errors. ESLint will be run when you run the JavaScript tests. We also recommended installing a ESLint plugin in your text editor.
- Where possible, write code that will work even if the page structure is later changed with JavaScript. For instance, when binding a click handler, use `$('body').on('click', selector, func)` instead of `$(selector).click(func)`. This makes it easier for projects to extend Django’s default behavior with JavaScript.

## Patches JavaScript

O admin do Django usa o framework jQuery para aumentar as capacidades da interface de administração. Além disso, existe uma ênfase na performance do JavaScript do admin e em minimizar o tamanho de arquivos de media do admin. Servir versões comprimidas ou “minificadas” dos arquivos JavaScript é considerado uma boa prática nesse quesito.

Por isso, patches para arquivos JavaScript devem incluir tanto código original para futuro desenvolvimento (e.g. `foo.js`), quanto uma versão comprimida para uso em produção (e.g. `foo.min.js`). Quaisquer links para o arquivo no projeto devem apontar para a versão comprimida.

### Comprimindo JavaScript

Para simplificar o processo de fornecimento de código JavaScript otimizado, O Django inclui um script Python extremamente útil que deve ser utilizado na criação da versão “minificada”. Para executá-lo:

/ 

    $ python django/contrib/admin/bin/compress.py

    ...\> py django\contrib\admin\bin\compress.py

Behind the scenes, `compress.py` is a front-end for Google’s Closure Compiler which is written in Java. The Closure Compiler library is not bundled with Django, but will be installed automatically by `npm`. The Closure Compiler library requires Java 7 or higher.

Por favor não se esqueça de rodar o `compress.py` e incluir o `diff` dos scripts minificados quando estiver enviando os seus patches para o JavaScript do Django.

## Testes JavaScript

Os testes para o JavaScript do Django podem ser rodados em um browser ou diretamente da linha de comando. Os testes estão localizados no diretório `js_tests`.

### Escrevendo testes

Os testes em JavaScript do Django utilizam QUnit. Segue um exemplo de teste de um módulo.

    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.

### Rodando testes

Os testes JavaScript pode ser executados de um browser ou diretamente da linha de comando.

#### Testando a partir de um navegador web

Para executar os testes através de um browser, abra o arquivo `js_tests/tests.html` dentro do seu browser.

Para medir a cobertura de código quando estiver executando os testes, você precisará visualizar o arquivo através de um servidor HTTP. Para ver a cobertura de código:

- Execute `python -m http.server` from the root directory (not from inside `js_tests`).
- Acesse o endereço http://localhost:8000/js_tests/tests.html no seu browser.

#### Testando a partir da linha de comando

Para executar os testes da linha de comando, você precisará ter o Node.js instalado.

After installing `Node.js`, install the JavaScript test dependencies by running the following from the root of your Django checkout:

/ 

    $ npm install

    ...\> npm install

E então rode os testes com:

/ 

    $ npm test

    ...\> npm test