[unit-testing] 크롬 확장 프로그램을 테스트하는 방법?

여러 크롬 확장에서 작업 내가 해낸 sinon-chrome사용하여 단위 테스트를 실행할 수 있습니다 프로젝트 mocha, nodejs및 phantomjs.

기본적으로 chrome.*사전 정의 된 json 응답을 넣을 수있는 모든 API 의 sinon mock을 만듭니다 .

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

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

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

배경 페이지 :

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

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

1. 조롱 chrome.tabs.query두 개의 탭 예, 미리 정의 된 응답을 반환 할 수 있습니다.
2. 조롱 된 chrome.*API를 환경에 주입
3. 이 환경에서 확장 코드를 실행하십시오.
4. 버튼 배지가 ‘2’와 같다고 주장

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

const vm = require('vm');
const fs = require('fs');
const 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
const context = {
  chrome: chrome
};

// 3. run our extension code in this environment
const 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)

여기에서 전체 예제를 찾을 수 있습니다 .

또한 sinon-chrome을 사용하면 사전 정의 된 응답 (예 :

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

답변

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

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

describe("Test suite", function() {

  it("Test case", function() {

    // Set up spies and fake data.
    spyOn(chrome.browserAction, "setPopup");
    spyOn(chrome.identity, "removeCachedAuthToken");
    fakeToken = "faketoken-faketoken-faketoken";
    fakeWindow = jasmine.createSpyObj("window", ["close"]);

    // Call the function under test.
    logout(fakeWindow, fakeToken);

    // Perform assertions.
    expect(chrome.browserAction.setPopup).toHaveBeenCalledWith({popup: ""});
    expect(chrome.identity.removeCachedAuthToken).toHaveBeenCalledWith({token: fakeToken});
    expect(fakeWindow.close.calls.count()).toEqual(1);

  });

});