Tutorial anterior: Developing Discourse Plugins - Part 5 - Add an admin interface
Você sabia que o Discourse possui dois grandes conjuntos de testes para sua base de código? No lado do servidor, nosso código Ruby possui um conjunto de testes que usa o rspec. Para o aplicativo do navegador, temos um conjunto qunit que inclui o ember-testing.
Assumindo que você tenha um ambiente de desenvolvimento configurado, se você visitar o URL http://localhost:3000/tests, começará a executar o conjunto de testes JavaScript no seu navegador. Um aspecto interessante é que você pode vê-lo testando o aplicativo em uma janela em miniatura no canto inferior direito:
O aplicativo Discourse é construído com muitos testes que começarão a ser executados quando você visitar o URL /tests. Portanto, pode ser útil filtrar seus testes pelo plugin em que você está trabalhando. Você pode fazer isso na interface clicando na lista suspensa Plugin e selecionando seu plugin:
Adicionando um Teste de Aceitação no seu Plugin
Primeiro, certifique-se de ter a versão mais recente do Discourse verificada (checkout). A capacidade de executar testes de aceitação a partir de plugins é um recurso relativamente novo, e se você não verificar a versão mais recente, seus testes não aparecerão.
Para este artigo, vou escrever um teste de aceitação para o plugin purple-tentacle que escrevemos na parte 5 desta série.
Adicionar um teste de aceitação é tão simples quanto adicionar um arquivo ao seu plugin. Crie o seguinte:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
Tentei escrever o teste de uma forma clara, mas pode ser um pouco confuso se você nunca escreveu um teste de aceitação antes. Eu recomendo fortemente que você leia a documentação do Ember sobre testes de aceitação, pois ela contém muitas informações úteis.
Em cada teste que escrevemos, precisamos assert (afirmar) algo. Em nosso teste, queremos fazer algumas afirmações para verificar se o tentáculo está oculto inicialmente e depois exibido apenas após clicar no botão.
Queremos definir um conjunto de ações a serem realizadas antes que uma afirmação seja feita. Para fazer isso, usamos a palavra-chave await. Ao usar essa palavra-chave, aguardamos a execução de cada auxiliar assíncrono terminar primeiro.
Nossa primeira ação de importância é: await visit("/admin/plugins/purple-tentacle");. Isso informa ao nosso teste para navegar para esse URL em nosso aplicativo. Esse URL era o que exibia o tentáculo.
Após visitar a página onde o botão do tentáculo roxo aparece, queremos verificar se podemos ver o botão na página existe e que a imagem do tentáculo ainda não existe.
Isso é feito pelas seguintes afirmações:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.S. a versão anterior do plugin purple-tentacle não tinha o id do elemento #show-tentacle no modelo handlebars. Confira a versão mais recente para acompanhar!
Uma vez que esses testes passem, é hora de testar a interação.
O próximo comando é await click('#show-tentacle'); que informa ao nosso framework de teste que queremos clicar no botão e exibir o tentáculo.
Após simularmos um clique no botão, podemos verificar se o tentáculo aparece afirmando:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nada mal, certo? Você pode tentar o teste você mesmo visitando http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 em sua máquina de desenvolvimento. Você deverá ver rapidamente o tentáculo roxo aparecer e todos os testes passarão.
Se você quiser executar os testes qunit do plugin na linha de comando usando o PhantomJS, você pode executar
rake plugin:qunit['purple-tentacle']
(onde purple-tentacle é o nome da pasta do seu plugin)
Depurando seus testes
Enquanto você escreve seus plugins, seus testes podem ajudar você a identificar problemas em seu plugin. Quando você está desenvolvendo seus testes ou se fizer alterações no código do seu plugin, os testes podem falhar. Para ajudar a entender o porquê, o Ember tem alguns auxiliares úteis: pauseTest() e resumeTest().
Para utilizá-los, adicione await pauseTest() dentro do seu código de teste onde você deseja que o teste seja pausado. Agora, quando você executar seu teste no navegador, o teste será automaticamente pausado no ponto onde você adicionou pauseTest(). Isso lhe dará a chance de inspecionar a página ou ver quaisquer erros para ajudar na depuração de problemas.
Para onde ir a partir daqui
Odio soar como um disco riscado, mas a documentação do Ember sobre testes é excelente. Você também pode querer ver como o Discourse testa várias funcionalidades navegando pelos testes em nosso diretório de testes JavaScript. Temos vários exemplos lá dos quais você pode aprender.
Boa sorte com os testes!
Mais na série
Parte 1: Noções básicas de plugins
Parte 2: Pontos de saída de plugins (Plugin Outlets)
Parte 3: Configurações do site
Parte 4: Configuração do git
Parte 5: Interfaces administrativas
Parte 6: Este tópico
Parte 7: Publique seu plugin
Este documento é controlado por versão - sugira alterações no github.
it is an Admin page
)