javascript - Cum să testezi extensiile Chrome?

Există o metodă bună de a face acest lucru? Scriu o extensie care interacționează cu un site web ca script de conținut și salvează date folosind localstorage. Există vreun instrument, cadru, etc. pe care îl pot folosi pentru a testa acest comportament? Îmi dau seama că există unele instrumente generice pentru testarea JavaScript-ului, dar sunt acestea suficient de puternice pentru a testa o extensie? Testarea unităților este cea mai importantă, dar sunt interesat și de alte tipuri de testare (cum ar fi testarea de integrare).

Răspuns #1

Da, cadrele existente sunt destul de utile..

În trecutul recent, am plasat toate testele mele pe o pagină „test” care era încorporată în aplicație, dar nu era accesibilă decât dacă era tastată fizic.

De exemplu, aș avea toate testele într-o pagină accesibilă la chrome-extension://asdasdasdasdad/unittests.html

Testele ar avea acces la localStorage etc. Pentru accesarea scripturilor de conținut, în teorie ai putea testa asta prin IFRAME-uri încorporate în pagina ta de test, totuși acestea sunt teste la nivel de integrare, testele unitare ar necesita să separi asta de paginile reale astfel încât să nu depinzi de ele, la fel și cu accesul la localStorage.

Dacă vrei să testezi pagini direct, poți să orchestrezi extensia ta să deschidă noi tab-uri (chrome.tab.create({"url" : "someurl"})). Pentru fiecare dintre noile tab-uri, scriptul tău de conținut ar trebui să ruleze și poți folosi cadrul tău de testare pentru a verifica dacă codul tău a făcut ceea ce ar fi trebuit să facă.

În ceea ce privește framework-urile, JsUnit sau mai recentul Jasmine ar trebui să funcționeze bine.

Răspunsul #2

Lucrând la mai multe extensii Chrome, am venit cu proiectul sinon-chrome care permite rularea testelor unitare folosind mocha, nodejs și phantomjs.

Practic, creează mock-uri sinon de toate API-urile chrome.* unde poți pune orice răspunsuri JSON prestabilite.

Apoi, îți încarci scripturile folosind vm.runInNewContext al lui Node pentru pagina de fundal și phantomjs pentru afișarea popup-ului/pagina de opțiuni.

Și în cele din urmă, afirmați că API-ul Chrome a fost apelat cu argumentele necesare.

Să luăm un exemplu:
Presupunem că avem o extensie simplă de Chrome care afișează numărul de file deschise pe insigna butonului.

pagina de fundal:

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

Pentru a-l testa avem nevoie de:

  1. simulează chrome.tabs.query pentru a returna un răspuns prestabilit, de exemplu două file.
  2. injecta API-ul nostru chrome.* fals într-un mediu
  3. rulează codul extensiei noastre în acest mediu
  4. afirmă că insigna butonului este egală cu '2'

Fragmentul de cod este următorul:

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"
});

Acum putem să-l învăluim în funcțiile describe..it ale mocha și să rulăm din terminal:

mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

Poți găsi exemplul complet aici.

În plus, sinon-chrome permite declanșarea oricărui eveniment Chrome cu un răspuns predefinit, de exemplu.

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