diff --git a/blog/vscode-extension.mdx b/blog/vscode-extension.mdx new file mode 100644 index 0000000..b86a337 --- /dev/null +++ b/blog/vscode-extension.mdx @@ -0,0 +1,125 @@ +--- +title: Расширение для VS Code +slug: vscode-extension +hide_table_of_contents: false +date: 2024-09-25T22:00 +--- + +import Admonition from "@theme/Admonition"; + +Для Testplane реализовали расширение для [VS Code][vscode] с помощью которого можно запускать тесты, собирать проект с нуля и удобно работать с REPL режимом. + + + +### Установка + +Установите расширение со страницы [VS Code Marketplace][vscode-testplane-marketplace] или на вкладке расширений в VS Code IDE. + +![Расширение в VS Code IDE](/img/blog/vscode-extension/testplane-in-extensions-panel.png) + +После установки откройте vscode в чистом проекте и в панеле управления введите: + +``` +Install Testplane +``` + +![Установка Testplane](/img/blog/vscode-extension/testplane-in-command-panel.png) + +### Запуск тестов + +#### Из сайдбара в панеле для тестирования + +Панель для тестирования можно открыть кликнув на значок тестирования в панели действий. + +![Открытие панели для тестирования](/img/blog/vscode-extension/testing-side-bar.png) + +В левой части экрана отображается сайдбар с деревом всех прочитанных тестов. В дереве сверху вниз отображаются: + +- название папки; +- название файла; +- название сьюта (`describe` при использовании [bdd интерфейса][mocha-bdd-interface]); +- название теста (`it` при использовании [bdd интерфейса][mocha-bdd-interface]); +- название браузера. + +У каждого из элементов дерева отображается кнопка `Run Test` с помощью которой можно запустить тесты. Если нажать на `Run Test` у элемента: + +- папки, файла или сьюта, то запустятся все дочерние тесты во всех браузерах; +- теста, то запустится выбранный тест во всех браузерах; +- браузера, то запустится один тест в одном браузере. + +Пример запуска тестов из сайдбара: + + + +Так же можно выполнить запуск всех тестов с помощью кнопки `Run Tests`. + +#### Из текстового редактора + +Если в текстовом редакторе открыть Testplane тест, то рядом с каждым сьютом (`describe`) и тестом (`it`) будет отображаться зеленый треугольник для запуска сьюта/теста. Если нажать левой кнопкой мыши, то запустится тест во всех браузерах и после его выполнения отобразится результат в виде иконки. +Если нажать на зеленый треугольник правой клавишей мыши, то можно запустить тест в одном из браузеров. + +Пример запуска тестов из текстового редактора: + + + +#### С настройкой `devtools` + +В сайдбаре в панели для тестирования так же отображается секция с названием Testplane в которой отображаются настройки, которые можно включить и выключить. При клике в чекбокс `Enable devtools` и последующем запуске тестов, браузеры будут подниматься с использованием CDP протокола (вне зависимости, что указано в конфиге). Подробнее про этот режим можно прочитать тут. + +![Включение опции devtools](/img/blog/vscode-extension/enable-devtools.png) + +#### С настройкой `REPL` + +ри клике в чекбокс `Enable REPL` и последующем запуске теста (в REPL режиме можно одновременно запустить только один тест), он будет запущен в специальном REPL режиме . Подробнее про этот режим можно прочитать тут. + +![Включение опции REPL](/img/blog/vscode-extension/enable-repl.png) + +### Фильтрация тестов в сайдбаре панели тестирования + +Чтобы в дереве отобразить только тесты в определенном браузере необходимо ввести тег `@testplane:browser:your_browser_name` в инпут фильтрации. Чтобы появился саджест можно просто написать `@browser`. Там же можно использовать несколько тегов. + +![Фильтр дерева тестов по указанном браузеру](/img/blog/vscode-extension/filter_sidebar_by_browser.png) + +Так же в инпуте с фильтрацией можно использовать следующие значения: + +- строка с названием элемента дерева (папка/файл/сьют/тест/браузер); +- тег `@doc` - для отображения тестов из активного файла в текстовом редакторе; +- тег `@openedFiles` - для отображения тестов во всех открытых файлах в текстовом редакторе; +- тег `@executed` - для отображения выполняющихся тестов; +- тег `@failed` - для отображения упавших тестов. + +### Перезапуск Testplane + +С помощью кнопки `Refresh Tests` в сайдбаре можно перезапустить Testplane. В этом случае перечитается конфиг и тесты. Пригодится в случае если вы добавили новый тест в файл (вотчинг тестовых файлов пока не поддерживается) или произошла какая-то критическая ошибка. +Так же обновление дерева тестов выполняется автоматически при изменении конфига. + +![Обновление дерева тестов](/img/blog/vscode-extension/refresh-tests.png) + +### Текущие ограничения + +- версия testplane должна быть 8.20.0 и старше (с версиями ниже запуск тестов работать не будет); +- не поддержаны debug и continuous (auto-run) режимы; +- нет вотчинга добавления/удаления тестов и файлов; +- использование кастомных интерфейсов mocha может приводить к некорректному отображению иконок с зеленой стрелкой для запуска тестов из текстового редактора. + +### Заключение + +Данная функциональность предоставляет нашим пользователям новые возможности: + +- возможность запуска тестов прямо из IDE и просмотр результата выполнения; +- возможность переопределить опции `devtools` и `repl` в UI VS Code без изменения конфига; +- автоматически подхватывать изменения внесенные в конфиг Testplane. + +Устанавливайте расширение Testplane для VS Code и приходите с фидбеком. В случае обнаружения проблем, приходите в [issue github](https://github.com/gemini-testing/testplane/issues) — мы вам обязательно поможем! + +[vscode]: https://code.visualstudio.com/ +[vscode-testplane-marketplace]: https://marketplace.visualstudio.com/items?itemName=gemini-testing.vscode-testplane +[mocha-bdd-interface]: https://mochajs.org/#bdd diff --git a/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx b/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx new file mode 100644 index 0000000..cf010ef --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-blog/vscode-extension.mdx @@ -0,0 +1 @@ +VS Code extension diff --git a/static/img/blog/vscode-extension/enable-devtools.png b/static/img/blog/vscode-extension/enable-devtools.png new file mode 100644 index 0000000..efeecde Binary files /dev/null and b/static/img/blog/vscode-extension/enable-devtools.png differ diff --git a/static/img/blog/vscode-extension/enable-repl.png b/static/img/blog/vscode-extension/enable-repl.png new file mode 100644 index 0000000..a32664b Binary files /dev/null and b/static/img/blog/vscode-extension/enable-repl.png differ diff --git a/static/img/blog/vscode-extension/filter_sidebar_by_browser.png b/static/img/blog/vscode-extension/filter_sidebar_by_browser.png new file mode 100644 index 0000000..1a52857 Binary files /dev/null and b/static/img/blog/vscode-extension/filter_sidebar_by_browser.png differ diff --git a/static/img/blog/vscode-extension/refresh-tests.png b/static/img/blog/vscode-extension/refresh-tests.png new file mode 100644 index 0000000..566c356 Binary files /dev/null and b/static/img/blog/vscode-extension/refresh-tests.png differ diff --git a/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png b/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png new file mode 100644 index 0000000..b3e997c Binary files /dev/null and b/static/img/blog/vscode-extension/run-all-tests-from-sidebar.png differ diff --git a/static/img/blog/vscode-extension/testing-sidebar.png b/static/img/blog/vscode-extension/testing-sidebar.png new file mode 100644 index 0000000..9021131 Binary files /dev/null and b/static/img/blog/vscode-extension/testing-sidebar.png differ diff --git a/static/img/blog/vscode-extension/testplane-in-command-panel.png b/static/img/blog/vscode-extension/testplane-in-command-panel.png new file mode 100644 index 0000000..6c554cf Binary files /dev/null and b/static/img/blog/vscode-extension/testplane-in-command-panel.png differ diff --git a/static/img/blog/vscode-extension/testplane-install.png b/static/img/blog/vscode-extension/testplane-install.png new file mode 100644 index 0000000..8077e7d Binary files /dev/null and b/static/img/blog/vscode-extension/testplane-install.png differ diff --git a/static/video/blog/vscode-extension/run-tests-from-editor.mp4 b/static/video/blog/vscode-extension/run-tests-from-editor.mp4 new file mode 100644 index 0000000..1d311f4 Binary files /dev/null and b/static/video/blog/vscode-extension/run-tests-from-editor.mp4 differ diff --git a/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 b/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 new file mode 100644 index 0000000..7e40387 Binary files /dev/null and b/static/video/blog/vscode-extension/run-tests-from-sidebar.mp4 differ