이전 튜토리얼: Developing Discourse Plugins - Part 5 - Add an admin interface
Discourse 코드베이스를 위한 두 가지 큰 테스트 스위트가 있다는 것을 아셨나요? 서버 측에서는 Ruby 코드가 rspec를 사용하는 테스트 스위트를 갖추고 있습니다. 브라우저 애플리케이션의 경우, ember-testing이 포함된 qunit 스위트를 사용합니다.
개발 환경이 설정되어 있다고 가정하면, http://localhost:3000/tests URL을 방문하면 브라우저에서 JavaScript 테스트 스위트를 실행하기 시작합니다. 흥미로운 점 중 하나는 화면 오른쪽 하단의 축소된 창에서 애플리케이션이 테스트되는 모습을 볼 수 있다는 것입니다:
Discourse 애플리케이션은 /tests URL을 방문하면 실행이 시작되는 매우 많은 수의 테스트로 구성되어 있습니다. 따라서 현재 작업 중인 플러그인으로 테스트를 필터링하는 것이 도움이 될 수 있습니다. 인터페이스에서 Plugin 드롭다운을 클릭하고 해당 플러그인을 선택하여 이를 수행할 수 있습니다:
플러그인에 인수 테스트(Acceptance Test) 추가하기
먼저, 최신 버전의 Discourse가 체크아웃되어 있는지 확인하세요. 플러그인에서 인수 테스트를 실행할 수 있는 기능은 비교적 새로운 기능이며, 최신 버전으로 체크아웃하지 않으면 테스트가 표시되지 않습니다.
이 글에서는 이 시리즈의 5부에서 작성한 purple-tentacle 플러그인을 위한 인수 테스트를 작성하겠습니다.
인수 테스트를 추가하는 것은 플러그인에 파일을 하나 추가하는 것만큼 쉽습니다. 다음을 생성하세요:
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!");
});
});
테스트를 명확하게 작성하려고 노력했지만, 이전에 인수 테스트를 작성해 본 적이 없다면 다소 혼란스러울 수 있습니다. 많은 유용한 정보가 포함되어 있으므로 인수 테스트에 대한 Ember 문서를 강력하게 읽어보시길 권장합니다.
작성하는 각 테스트에서 무언가를 assert(assert)해야 합니다. 우리의 테스트에서는 문어가 처음에는 숨겨져 있는지, 그리고 버튼을 클릭한 후에만 표시되는지 확인하기 위해 몇 가지 어설션을 수행하려고 합니다.
어설션이 수행되기 전에 취할 동작 집합을 정의하고 싶습니다. 이를 위해 await 키워드를 사용합니다. 이 키워드를 사용하면 각 비동기 헬퍼의 실행이 완료될 때까지 기다립니다.
중요한 첫 번째 동작은 다음과 같습니다: await visit("/admin/plugins/purple-tentacle");. 이는 애플리케이션에서 해당 URL로 이동하도록 테스트에 지시합니다. 그 URL은 문어를 표시하는 페이지였습니다.
보라색 문어 버튼이 나타나는 페이지를 방문한 후, 페이지에 버튼이 존재하는지 확인하고 아직 문어 이미지가 존재하지 않는지 확인하고 싶습니다.
이는 다음 어설션으로 수행됩니다:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
참고. 이전 버전의 purple-tentacle 플러그인은 handlebars 템플릿에 #show-tentacle 요소 ID가 없었습니다. 따라 해보려면 최신 버전을 확인하세요!
그 테스트들이 통과하면 이제 상호작용을 테스트할 차례입니다.
다음 명령어는 await click('#show-tentacle');이며, 이는 테스트 프레임워크에 버튼을 클릭하여 문어를 표시하고 싶다고 알립니다.
버튼 클릭을 시뮬레이션한 후, 다음을 어설션하여 문어가 나타나는지 확인할 수 있습니다:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
별로 어렵지 않나요? 개발 머신에서 http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1을 방문하여 테스트를 직접 시도해 볼 수 있습니다. 보라색 문어가 빠르게 나타나는 것을 볼 수 있으며 모든 테스트가 통과할 것입니다.
PhantomJS를 사용하여 명령줄에서 플러그인 qunit 테스트를 실행하려면 다음을 실행할 수 있습니다
rake plugin:qunit['purple-tentacle']
(여기서 purple-tentacle은 플러그인의 폴더 이름입니다)
테스트 디버깅
플러그인을 작성하는 동안, 테스트는 플러그인의 문제를 식별하는 데 도움이 될 수 있습니다. 테스트를 개발하거나 플러그인 코드를 변경할 때 테스트가 실패할 수 있습니다. 그 이유를 이해하는 데 도움이 되도록, Ember에는 pauseTest()와 resumeTest()라는 좋은 헬퍼들이 있습니다.
이를 활용하려면, 테스트가 일시 중지되기를 원하는 테스트 코드 안에 await pauseTest()를 추가하세요. 이제 브라우저에서 테스트를 실행하면, pauseTest()를 추가한 지점에서 테스트가 자동으로 일시 중지됩니다. 이는 페이지를 검사하거나 문제를 디버깅하는 데 도움이 되는 오류를 확인하는 시간을 제공합니다.
다음 단계
고장난 레코드처럼 들리는 것이 싫지만, 테스트에 대한 Ember 문서는 훌륭합니다. 또한 JavaScript 테스트 디렉터리에서 테스트를 탐색하여 Discourse가 다양한 기능을 어떻게 테스트하는지 살펴보는 것도 좋습니다. 거기서 배울 수 있는 예제가 꽤 많이 있습니다.
즐거운 테스트 시간 되세요!
시리즈의 나머지 부분
1부: 플러그인 기초
2부: 플러그인 아웃렛
3부: 사이트 설정
4부: git 설정
5부: 관리자 인터페이스
6부: 이 주제
7부: 플러그인 게시
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안하세요.
it is an Admin page
)