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 utiliza rspec. Para o aplicativo do navegador, temos um conjunto qunit que inclui ember-testing.
Supondo que você tenha um ambiente de desenvolvimento configurado, se você visitar a URL http://localhost:3000/tests, iniciará a execução do conjunto de testes JavaScript no seu navegador. Um aspecto divertido é que você pode vê-lo testando o aplicativo em uma janela miniatura no canto inferior direito:
O aplicativo Discourse é construído com muitos testes que começarão a ser executados quando você visitar a URL /tests. Portanto, pode ser útil filtrar seus testes pelo plugin no qual você está trabalhando. Você pode fazer isso na interface clicando no menu suspenso Plugin e selecionando seu plugin:
Adicionando um Teste de Aceitação no seu Plugin
Primeiro, certifique-se de que você possui a versão mais recente do Discourse baixada. A capacidade de executar testes de Aceitação a partir de plugins é um recurso relativamente novo e, se você não baixar 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 criamos na parte 5 desta série.
Adicionar um teste de aceitação é tão fácil 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 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 eles têm muitas informações excelentes.
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 mostrado apenas após clicar no botão.
Queremos definir um conjunto de ações a serem executadas antes que uma afirmação seja feita. Para fazer isso, usamos a palavra-chave await. Ao usar essa palavra-chave, esperamos a conclusão da execução de cada auxiliar assíncrono primeiro.
Nossa primeira ação importante é: await visit("/admin/plugins/purple-tentacle");. Isso diz ao nosso teste para navegar até essa URL em nosso aplicativo. Essa URL era a 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 se o botão existe na página e se 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!
Depois que esses testes forem aprovados, é hora de testar a interação.
O próximo comando é await click('#show-tentacle');, que diz ao nosso framework de teste que queremos clicar no botão e mostrar o tentáculo.
Depois de simular um clique no botão, podemos verificar se o tentáculo aparece afirmando:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Não está ruim, está? Você pode experimentar 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ê verá o tentáculo roxo aparecer rapidamente e todos os testes serão aprovados.
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
Conforme você escreve seus plugins, seus testes podem ajudá-lo a identificar problemas no seu plugin. Ao desenvolver seus testes ou se você fizer alterações no código do seu plugin, os testes podem falhar. Para ajudar a entender o motivo, o Ember possui alguns auxiliares úteis: pauseTest() e resumeTest().
Para utilizá-los, adicione await pauseTest() dentro do código do teste onde você deseja que o teste pause. Agora, quando você executar seu teste no navegador, o teste pausará automaticamente no ponto em que você adicionou pauseTest(). Isso lhe dará uma chance de inspecionar a página ou visualizar quaisquer erros para ajudar na depuração de problemas.
Para onde ir a partir daqui
Eu não gosto de parecer 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 aí dos quais você pode aprender.
Feliz teste!
Mais na série
Parte 1: Noções Básicas de Plugins
Parte 2: Plugin Outlets
Parte 3: Configurações do Site
Parte 4: Configuração do git
Parte 5: Interfaces de Administração
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
)