unit testing - extensions - ¿Cómo probar las extensiones de Chrome?

extensiones chromium

Question

¿Existe una forma correcta de hacer esto? Estoy escribiendo una extensión que interactúa con un sitio web como una secuencia de comandos de contenido y guarda datos mediante el almacenamiento local. ¿Hay herramientas, marcos, etc. que pueda usar para probar este comportamiento? Me doy cuenta de que hay algunas herramientas genéricas para probar javascript, pero ¿son esas las suficientes para probar una extensión? Las pruebas unitarias son las más importantes, pero también me interesan otros tipos de pruebas (como las pruebas de integración).

Answer 1

Acerca de la herramienta ya existente en Chrome:

1. En la herramienta de desarrollo de Chrome, hay una sección de Recursos para el almacenamiento local.

   Herramientas del desarrollador> Recursos> Almacenamiento local

   Ver los cambios de almacenamiento local allí.

2. Puede usar console.profile para probar el rendimiento y ver la pila de llamadas en tiempo de ejecución.

3. para fileSystem Puede usar esta URL para verificar que su archivo esté cargado o no: filesystem: chrome-extension: /// temporary /

Si usa script de contenido y almacenamiento local juntos sin página de fondo / script y sin mensaje, solo se podrá acceder al almacenamiento local desde ese sitio. Por lo tanto, para probar esas páginas, debe insertar su script de prueba en esas pestañas.

Answer 2

Descubrí que puedo usar el controlador web Selenium para iniciar una nueva instancia del navegador con una extensión preinstalada y pyautogui para clics, porque Selenium no puede controlar la "vista" de la extensión. Después de los clics puede hacer capturas de pantalla y compararlas con las esperadas, esperando el 95% de similitud (porque en diferentes navegadores es aceptable el marcado de movimientos a unos pocos píxeles).

Answer 3

Mientras que sinon.js parece funcionar muy bien, también puedes usar jazmín simple y burlar las devoluciones de llamada de Chrome que necesites. Ejemplo:

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

Simplemente modifique el SpecRunner.html predeterminado para ejecutar su código.

Answer 4

Sí, los marcos existentes son bastante útiles.

En el pasado reciente, coloqué todas mis pruebas en una página de "prueba" que estaba incrustada en la aplicación pero no accesible a menos que esté físicamente tipada.

Por ejemplo, tendría todas las pruebas en una página accesible bajo chrome-extension://asdasdasdasdad/unittests.html

Las pruebas tendrían acceso a localStorage etc. Para acceder a scripts de contenido, en teoría podría probar eso a través de IFRAME incrustadas en su página de prueba; sin embargo, estas son más pruebas de nivel de integración, las pruebas unitarias requerirían que abstraiga eso de las páginas reales para que usted no depende de ellos, del mismo modo que tiene acceso a localStorage.

Si desea probar páginas directamente, puede orquestar su extensión para abrir pestañas nuevas (chrome.tab.create ({"url": "someurl"}). Para cada una de las pestañas nuevas debe ejecutar su script de contenido y puede usar su marco de prueba para verificar que su código haya hecho lo que debería hacer.

En cuanto a los frameworks, JsUnit o Jasmine más reciente deberían funcionar bien.

Answer 5

Trabajando en varias extensiones de cromo, se me ocurrió el proyecto sinon-chrome que permite ejecutar pruebas unitarias usando mocha , nodejs y phantomjs .

Básicamente, crea sinsontes de todos los chrome.* api donde puedes poner cualquier respuesta json predefinida.

A continuación, cargue sus scripts utilizando vm.runInNewContext del nodo para la página de fondo y phantomjs para la página emergente / opciones de renderizado.

Y finalmente, afirmas que se llamó a Chrome API con los argumentos necesarios.

Tomemos un ejemplo:
Supongamos que tenemos una extensión simple de Chrome que muestra el número de pestañas abiertas en la insignia del botón.

página de fondo:

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

Para probarlo, necesitamos:

1. chrome.tabs.query para devolver una respuesta predefinida, por ejemplo, dos pestañas.
2. inyecta nuestra aplicación cromeada. * api en algún entorno
3. ejecuta nuestro código de extensión en este entorno
4. afirmar que la insignia del botón es igual a ''2''

El fragmento de código es el siguiente:

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

Ahora podemos envolverlo en las funciones de describe..it de Mocha y ejecutarlo desde la terminal

$ mocha

background page
  ✓ should display opened tabs count in button badge

1 passing (98ms)

Puedes encontrar un ejemplo completo here .

Además, sinon-chrome permite activar cualquier evento de cromo con una respuesta predefinida, por ejemplo

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