Полное руководство по тестированию расширений VS Code

Большинство расширений VS Code, представленных на рынке, имеют минимальное тестирование, если оно вообще есть. Официальная документация VS Code рекомендует использовать такие пакеты, как @vscode/test-electron и @vscode/test-web, которые предоставляют ограниченные возможности тестирования и полное отсутствие поддержки тестирования веб-обзоров. Хотя веб-просмотры не являются рекомендуемым подходом к созданию пользовательского интерфейса расширений, они являются неотъемлемой частью поверхности UX во многих расширениях и имеют несколько довольно убедительных примеров использования. Поскольку расширения VS Code становятся важнейшими строительными блоками в работе разработчика, важно, чтобы авторы расширений обеспечивали постоянное качество и преемственность в этой сложной и постоянно меняющейся экосистеме.

Мы рекомендуем использовать общие принципы тестирования, упомянутые в «Практической пирамиде тестирования», где низко висящие плоды и большинство тестов — это модульные тесты. Преимущество юнит-тестов в том, что они проверяют код изолированно, что позволяет избежать зависимостей, характерных для VS Code, и позволяет тестам легко работать в разных средах. Следующий уровень в пирамиде — интеграционное тестирование, которое вносит сложность, требуя, чтобы тесты взаимодействовали с API VS Code или самим приложением.

На этом этапе вы можете спросить себя: «Почему я должен тестировать VS Code? Разве это не работа Microsoft».

Ответ одновременно и да, и нет! Распространенное заблуждение заключается в том, что если разработчики расширений правильно используют API VS Code, то расширение будет «просто работать»™. К сожалению, реальность такова, что ошибки все равно будут возникать (даже если вы используете TypeScript) и могут даже не быть вызваны вашим расширением — но их все равно нужно обнаружить и устранить. По мере роста сложности (и популярности!) вашего расширения время, необходимое для ручной проверки, быстро становится нереальным. Такие простые изменения, как отсутствие свойства вклада в package.json или неработающий слушатель событий, могут нарушить популярный рабочий процесс, привести к путанице, разочарованию и, в конечном счете, к снижению доверия и принятия.

Мы рекомендуем вам сделать небольшую инвестицию и создать несколько сквозных (e2e) тестов! Они могут обнаружить и предупредить вас об изменениях конфигурации или API, которые могут сломать ваше расширение. Используя WebdriverIO (и его новую интеграцию с VS Code), вы можете автоматизировать VS Code как любое другое Electron или веб-приложение (не говоря уже о широкой функциональности, описанной ниже).

Сервис WebdriverIO VS Code помогает:

• 🏗️ Установка VS Code (стабильной, инсайдерской или указанной версии)
• ⬇️ Загрузка Chromedriver, специфичного для данной версии VS Code
• 🚀 Включение доступа к VS Code API из ваших тестов
• 🖥️ Запуск VS Code с пользовательскими настройками (включая поддержку VS Code на Ubuntu, MacOS и Windows)
• 🌐 Подача VS Code с сервера для доступа к нему через любой браузер для тестирования веб-расширений
• 📔 Загрузка объектов страницы с локаторами, соответствующими вашей версии VS Code

Облегчите себе жизнь и запускайте как модульные, так и интеграционные тесты, получайте доступ к API VS Code и автоматизируйте сложные пользовательские потоки или веб-просмотры с помощью одного тестового фреймворка.

Чтобы начать тестирование проекта расширения с помощью WebdriverIO, настройте проект, выполнив следующие действия:

npm create wdio ./

Мастер установки проведет вас через весь процесс. Убедитесь, что вы выбрали TypeScript в качестве компилятора и отказались от объектов страницы (батареи уже включены). Затем убедитесь, что выбрали vscode в списке сервисов:

После того, как мастер установит все необходимые пакеты NPM, вы должны увидеть wdio.conf.ts в корневом каталоге вашего проекта. Откройте файл и обновите свойство capabilities на следующее:
import path from ‘path’

// test/wdio.conf.ts
export const config = {
    // ...
    capabilities: [{
        browserName: 'vscode',
        browserVersion: 'stable',
        'wdio:vscodeOptions': {
            // point to the root directory of your project
            extensionPath: path.join(__dirname, '..'),
        }
    }],
    // ...
};

Это даст команду WebdriverIO загрузить и установить стабильную версию VS Code. Вы также можете выбрать любую произвольную версию VS Code, которую когда-либо выпускали, или инсайдерскую версию. Наконец, давайте создадим демонстрационный тест, чтобы показать, как вывести заголовок приложения, например:

// test/specs/demo.test.ts
describe('My VS Code Extension', () => {
    it('should be able to load VS Code', async () => {
        const workbench = await browser.getWorkbench()
        expect(await workbench.getTitleBar().getTitle())
            .toBe('[Extension Development Host] Visual Studio Code')
    })
})

Теперь вы можете запускать свои тесты, вызывая:

npx wdio run ./test/wdio.conf.ts

Отлично 🎉 Ваш первый демонстрационный тест только что успешно пройден. Мы подготовили подробное руководство по тестированию конкретного расширения из VS Code Marketplace в нашем руководстве по тестированию расширений. Некоторые очень успешные расширения, такие как VS Code Live Server, уже успешно используют эту настройку.

Если у вас возникли вопросы или проблемы с началом написания тестов для вашего расширения, присоединяйтесь к нашему Discord, и мы поможем вам!