Как протестировать хромированные расширения?

Question

Есть ли хороший способ сделать это? Я пишу расширение, которое взаимодействует с веб-сайтом как сценарий контента и сохраняет данные, используя localstorage. Существуют ли какие-либо инструменты, фреймворки и т. Д., Которые я могу использовать для проверки этого поведения? Я понимаю, что есть некоторые общие инструменты для тестирования javascript, но достаточно ли они для тестирования расширения? Модульное тестирование является самым важным, но меня также интересуют другие типы тестирования (например, интеграционное тестирование).

Answer 1

Да, существующие рамки довольно полезны ..

В недавнем прошлом, я поместил все мои тесты на странице «тест», который был встроен в приложение, но не достижимой, если физически не наберется.

Например, я бы все тесты на странице, доступной под chrome-extension://asdasdasdasdad/unittests.html

Тесты будут иметь доступ к localStorage и т.д. Для доступа скрипты содержания, в теории можно проверить, что через встроенные фреймы в тестовой странице , однако это больше тестирование уровня интеграции, модульные тесты потребуют от вас отвлечь это от реальных страниц, чтобы вы не зависели от них, также как и доступ к localStorage.

Если вы хотите протестировать страницы напрямую, вы можете упорядочить расширение, чтобы открыть новые вкладки (chrome.tab.create ({"url": "someurl"}). Для каждой новой вкладки должен запускаться ваш скрипт контента и вы можете использовать среду тестирования, чтобы проверить, что код сделал то, что он должен делать

Как каркасные, JsUnit или более недавнее Jasmine должны работать нормально

Answer 2

О уже существующем инструменте в Chrome:..

1. В c hrome, есть раздел для ресурсов для локального хранилища.

   Developer Tools> Ресурсы> Local Storage

   Смотрите изменения LocalStorage там.

2. Вы можете использовать console.profile для проверки производительности и просмотра стека вызовов времени выполнения.

3. для FileSystem Вы можете использовать этот URL, чтобы проверить файл, это загрузить-редактор или нет: файловой система: хром-расширения: /// временного/

Если вы будете использовать скрипт контента и локальное хранение вместе без фоновой страницы/скрипта и без передачи сообщений локальное хранилище будет доступно только с этого сайта. Итак, чтобы протестировать эти страницы, вы должны ввести тестовый скрипт на эти вкладки.

Answer 3

Работа на нескольких хромированных расширений я придумал sinon-chrome проект, который позволяет запускать юнит-тесты с использованием mocha, nodejs и phantomjs.

Basicaly, он создает синонные издевки всех chrome.* api, где вы можете разместить любые предопределенные ответы json.

Далее вы загружаете свои скрипты с помощью vm.runInNewContext узла для фоновой страницы и phantomjs для страницы всплывающего окна/параметров.

И, наконец, вы утверждаете, что хром-апи был вызван с необходимыми аргументами.

Давайте рассмотрим пример:
Предположим, что мы имеем простое расширение хром, который отображает количество открытых вкладок в кнопку пропуска.

фона страницы:

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

Чтобы проверить это нам нужно:

1. издеваться chrome.tabs.query вернуть предопределенный ответ, например, две вкладки. .
2. впрыснуть наш высмеивал хром * апи в некоторой среде
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" 
}); 

Теперь мы можем обернуть его в 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'}); 

Answer 4

Хотя sinon.js кажется, отлично работает, вы можете просто использовать простой жасмин и издеваться обратные вызовы 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 для запуска кода.