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

Question

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

Answer 1

예, 기존의 프레임 워크가 매우 유용합니다 .. 최근 과거

, 나는 응용 프로그램에 포함되지만 물리적으로 입력하지 않으면되지 도달했다 "테스트"페이지에 내 모든 테스트를 배치했다. 예를 들어

, 나는 당신이 테스트 페이지에서 내장의 IFRAME을 통해 그것을 테스트 할 수 이론적으로 테스트 콘텐츠 스크립트를 액세스하기위한 localStorage 등에 액세스 할 수있는 것 chrome-extension://asdasdasdasdad/unittests.html

에서 액세스 할 수있는 페이지의 모든 테스트를 할 것이다 그러나 이것들은 더 많은 통합 레벨 테스트입니다. 유닛 테스트는 실제 페이지에서 벗어나기 위해 당신이 의존하지 않도록 localStorage에 접근하는 것과 마찬가지로 그것을 필요로합니다.

페이지를 직접 테스트하려는 경우 확장 프로그램을 조정하여 새 탭 (chroma.tab.create ({ "url": "someurl"})을 열 ​​수 있습니다. 콘텐츠 스크립트가 실행해야하는 각각의 새 탭 당신은 당신의 코드가 무엇을해야하는지 완료되었는지 확인하기 위해 테스트 프레임 워크를 사용할 수 있습니다

프레임 워크에 관해서는

, JsUnit 또는 최근 Jasmine을 잘 작동합니다

Answer 2

을 이미 크롬에서 도구를 기존에 관하여 :..

을

1. hrome 개발자 도구에는 로컬 저장소 용 리소스 섹션이 있습니다.

   개발자 도구> 리소스> 로컬 저장소

   거기에 로컬 저장소의 변경 사항을 참조하십시오.

2. console.profile을 사용하여 성능을 테스트하고 런타임 호출 스택을 볼 수 있습니다. 파일 시스템 : 크롬 확장 : 당신은 당신의 파일을 확인하려면이 URL을 사용하여 파일 시스템에 대한

3. 업로드 에드 여부입니다 /// 일시/

는 콘텐츠 스크립트와 로컬 스토리지를 사용하는 경우 배경 페이지/스크립트없이 메시지 전달없이 함께 로컬 저장소에 액세스 할 수 있습니다. 그런 페이지를 테스트하려면 해당 탭에 테스트 스크립트를 삽입해야합니다.

Answer 3

몇 가지 크롬 확장 작업 , nodejs 및 phantomjs을 사용하여 단위 테스트를 실행할 수있는 sinon-chrome 프로젝트를 생각해 냈습니다.

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

다음으로 배경 페이지의 경우 노드 vm.runInNewContext을 사용하고 렌더링 팝업/옵션 페이지의 경우 phantomjs을 사용하여 스크립트를로드합니다.

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

는 다음의 예제를 보자 :
우리가 버튼 배지에서 열린 탭의 수를 표시 간단한 크롬 확장을 가정합니다.

배경 페이지 :

1. 모의 chrome.tabs.query 미리 정의 된 응답을 반환하기 위해, 예를 들면 :

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

   은 우리가 필요로하는 테스트하려면 두 개의 탭. .

2. 우리의 조롱 크롬을 주입 * API를 일부 환경으로 그 버튼 배지는 '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은 사전 정의 된 응답으로 모든 크롬 이벤트를 트리거 할 수 있습니다. sinon.js가 잘 작동하는 것 같지만

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

Answer 4

은 또한 그냥 일반 재스민를 사용하고 당신이 필요로하는 크롬 콜백을 조롱 할 수 있습니다. 예 :

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 

Mock

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

Test

그냥 코드를 실행할 수있는 기본 SpecRunner.html을 수정합니다.