[unit-testing] 크롬 확장 프로그램을 테스트하는 방법은 무엇입니까?



Answers

몇 가지 크롬 확장 작업을 통해 저는 mocha , nodejsphantomjs 사용하여 단위 테스트를 실행할 수있는 sinon-chrome 프로젝트를 phantomjs .

Basicaly, 그것은 미리 정의 된 json 응답을 넣을 수있는 모든 chrome.* api 의 sinon mock을 생성합니다.

다음으로 노드의 백그라운드 페이지 용 phantomjs 와 렌더링 팝업 / 옵션 페이지 용 vm.runInNewContext 을 사용하여 스크립트를로드합니다.

그리고 마지막으로 크롬 API가 필요한 인수와 함께 호출되었다고 주장합니다.

예를 들어 보겠습니다.
버튼 배지에 열린 탭의 수를 표시하는 간단한 Chrome 확장 프로그램이 있다고 가정 해 보겠습니다.

배경 페이지 :

chrome.tabs.query({}, function(tabs) {
  chrome.browserAction.setBadgeText({text: String(tabs.length)});
});

테스트하려면 다음이 필요합니다.

  1. 미리 정의 된 응답, 예를 들어 두 개의 탭을 반환하려면 chrome.tabs.query 를보십시오.
  2. 우리의 조롱 한 크롬을 주사하십시오. * api를 어떤 환경에 주입하십시오.
  3. 이 환경에서 확장 코드를 실행하십시오.
  4. 버튼 배지가 '2'와 같다고 단언하십시오.

코드 스 니펫은 다음과 같습니다.

var vm = require('vm');
var fs = require('fs');
var chrome = require('sinon-chrome');

// 1. mock `chrome.tabs.query` to return predefined response 
chrome.tabs.query.yields([
  {id: 1, title: 'Tab 1'}, 
  {id: 2, title: 'Tab 2'}
]);

// 2. inject our mocked chrome.* api into some environment
var context = {
  chrome: chrome;
};

// 3. run our extension code in this environment
var code = fs.readFileSync('src/background.js');
vm.runInNewContext(code, context);

// 4. assert that button badge equals to '2'
sinon.assert.calledOnce(chrome.browserAction.setBadgeText);
sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, {
  text: "2"
});

이제 우리는 그것을 mocha의 describe..it 함수로 감쌀 수 있고 터미널에서 실행할 수 있습니다.

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

here 전체 예제를 찾을 수 있습니다.

또한, sinon-chrome은 사전 정의 된 응답으로 모든 크롬 이벤트를 트리거 할 수 있습니다.

chrome.tab.onCreated.trigger({url: 'http://google.com'});
Question

이것을 할 수있는 좋은 방법이 있습니까? 나는 콘텐츠 스크립트로 웹 사이트와 상호 작용하고 localstorage를 사용하여 데이터를 저장하는 확장 기능을 작성하고 있습니다. 이 동작을 테스트하는 데 사용할 수있는 도구, 프레임 워크 등이 있습니까? 자바 스크립트 테스트를위한 몇 가지 일반적인 도구가 있다는 것을 알고 있지만 확장 기능을 테스트 할 수있는 충분한 능력이 있습니까? 단위 테스트가 가장 중요하지만 다른 유형의 테스트 (예 : 통합 테스트)에도 관심이 있습니다.




sinon.js 작동하는 sinon.js 보이지만, 일반 Jasmine을 사용하고 필요한 Chrome 콜백을 조롱 할 수도 있습니다. 예:

Mock

chrome = {
  runtime: {
    onMessage : {
      addListener : function() {}
    }
  }
}

Test

describe("JSGuardian", function() {

  describe("BlockCache", function() {

    beforeEach(function() {
      this.blockCache = new BlockCache();
    });

    it("should recognize added urls", function() {
      this.blockCache.add("http://some.url");
      expect(this.blockCache.allow("http://some.url")).toBe(false);
    });
} // ... etc

코드를 실행하려면 기본 SpecRunner.html 을 수정하십시오.




Related