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 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 em 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 plug-in em que você está trabalhando. Você pode fazer isso na interface clicando na lista suspensa Plug-in e selecionando seu plug-in:
Adicionando um Teste de Aceitação no seu Plug-in
Primeiro, certifique-se de ter a versão mais recente do Discourse verificada. A capacidade de executar testes de Aceitação a partir de plug-ins é 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 plug-in purple-tentacle que escrevemos na parte 5 desta série.
Adicionar um teste de aceitação é tão fácil quanto adicionar um arquivo ao seu plug-in. 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 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 a tentáculo está oculta inicialmente e depois exibida apenas após clicar no botão.
Queremos definir um conjunto de ações a serem tomadas 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 diz ao nosso teste para navegar para essa URL em nosso aplicativo. Essa URL era a que exibia a tentáculo.
Após visitar a página onde o botão da tentáculo roxa aparece, queremos verificar se podemos ver o botão na página existe e que a imagem da 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 plug-in 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 diz ao nosso framework de teste que queremos clicar no botão e exibir a tentáculo.
Após simularmos um clique no botão, podemos verificar se a tentáculo aparece afirmando:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nada mal, não é? 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 a tentáculo roxa aparecer e todos os testes passarão.
Se você quiser executar os testes qunit do plug-in na linha de comando usando PhantomJS, você pode executar
rake plugin:qunit['purple-tentacle']
(onde purple-tentacle é o nome da pasta do seu plug-in)
Depurando seus testes
Enquanto você escreve seus plug-ins, seus testes podem ajudar você a identificar problemas em seu plug-in. Quando você está desenvolvendo seus testes ou se fizer alterações no código do seu plug-in, os testes podem falhar. Para ajudar a entender o porquê, o Ember tem alguns auxiliares úteis: pauseTest() e resumeTest().
Para fazer uso deles, adicione await pauseTest() dentro do seu código de teste onde você gostaria que o teste pausasse. 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 ver quaisquer erros para ajudar a depurar 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 Plug-ins
Parte 2: Pontos de Saída de Plug-ins
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 plug-in
Este documento é controlado por versão - sugira alterações no github.
it is an Admin page
)