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 tem um conjunto de testes que usa rspec. Para a aplicação do navegador, temos um conjunto qunit que inclui ember-testing.
Assumindo 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 ver a aplicação sendo testada em uma janela em miniatura no canto inferior direito:
A aplicação Discourse é construída 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 em que 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 ter a versão mais recente do Discourse clonada. A capacidade de executar testes de Aceitação a partir de plugins é um recurso relativamente novo, e se você não clonar 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("O botão do polvo roxo funciona", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "mostra o botão do polvo roxo");
assert.ok(!exists(".tentacle"), "o polvo ainda não está visível");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "o polvo quer dominar o mundo!");
});
});
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 ela contém muitas informações úteis.
Em cada teste que escrevemos, precisamos fazer alguma assert (afirmação). Em nosso teste, queremos fazer algumas afirmações para verificar se o polvo está oculto inicialmente e só aparece depois de clicar no botão.
Queremos definir um conjunto de ações a serem realizadas antes de uma afirmação ser feita. Para isso, usamos a palavra-chave await. Ao usar essa palavra-chave, aguardamos a conclusão da execução de cada auxiliar assíncrono.
Nossa primeira ação de importância é: await visit("/admin/plugins/purple-tentacle");. Isso informa ao nosso teste para navegar até essa URL em nossa aplicação. Essa URL era a que exibia o polvo.
Depois de visitar a página onde o botão do polvo roxo aparece, queremos verificar se o botão está visível na página e se a imagem do polvo ainda não existe.
Isso é feito pelas seguintes afirmações:
assert.ok(exists("#show-tentacle"), "mostra o botão do polvo roxo");
assert.ok(!exists(".tentacle"), "o polvo ainda não está visível");
P.S. a versão anterior do plugin purple-tentacle não tinha o id do elemento #show-tentacle no template handlebars. Confira a versão mais recente para acompanhar!
Depois que esses testes passarem, é hora de testar a interação.
O próximo comando é await click('#show-tentacle');, que informa ao nosso framework de testes que queremos clicar no botão e mostrar o polvo.
Depois de simular um clique no botão, podemos verificar se o polvo aparece fazendo a afirmação:
assert.ok(exists(".tentacle"), "o polvo quer dominar o mundo!");
Não está tão ruim, 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ê deve ver rapidamente o polvo roxo aparecer e todos os testes passarão.
Se você quiser executar os testes qunit do plugin na linha de comando usando 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 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 código do seu teste onde você deseja que o teste pause. Agora, quando você executar seu teste no navegador, o teste pausará automaticamente no ponto onde você adicionou pauseTest(). Isso dará a você a chance de inspecionar a página ou visualizar 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.
Boas testagens!
Mais na série
Parte 1: Noções básicas de plugins
Parte 2: Pontos de saída de plugins
Parte 3: Configurações do site
Parte 4: Configuração do git
Parte 5: Interfaces de administrador
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
)