pelican-ui

Больше информации и проекте и связанных репозиториях можно найти здесь: pelican-documentation.

Что нужно перед стартом

• Docker (требуется для Dev-контейнера)

Если вы разрабатываете внутри Dev-контейнера

• VSCode
• Расширение Dev Containers

Если вы разрабатываете с использованием старого доброго Node.js (без Dev-контейнеров)

• Node.js (использовалась версия 20.18.0, но более старые версии также должны работать. В идеале устанавливать их с помощью nvm, чтобы можно было легко переключаться между версиями Node.js при необходимости)
• VSCode (опционально, можно использовать любую IDE, но в VSCode настроено форматирование при сохранении изменений по правилам линтинга проекта)

Локальный запуск

Добавьте файл .env на основе .env.example и установите CSP_ENABLED=false для отключения CSP, иначе встраиваемые в режиме разработки Next inline-scripts будут запрещаться и ваш сайт локально не запустится.

Установите необходимые зависимости:

npm ci

Запуск проекта в режиме разработчика:

npm run dev

Чтобы увидеть страницу, откройте в браузере http://localhost:3000.

Запуск повторного создания типов TypeScript по документации strapi swagger

npm run generate-api-types

Запуск скриншотных тестов Playwright (только в Dev-контейнере)

Для запуска дев-сервера, можно выполнить следующий скрипт с тестовыми данными и без взаимодействия с бэкендом. Данный режим рекомендуется использовать для разработки:

npm run dev:static

После успешного запуска дев-сервера (его можно открыть по адресу http://localhost:3000), оставив первый терминал активным в отдельной вкладке терминала, вы можете запустить тесты в headless-режиме (без пользовательского интерфейса браузера), выполнив следующий скрипт:

npm run playwright:run

Если вы хотите работать исключительно внутри Dev-контейнера, вам нужно подключиться к VNC-серверу Dev-контейнера (удаленный рабочий стол) здесь http://localhost:6080/. Пароль: vscode. Выполнив следующую команду, вы должны увидеть интерфейс Playwright:

npm run playwright:open

Обновление базовых скриншотов визуальных тестов

Когда вам нужно обновить уже неактуальные скриншоты, вы можете сделать это с помощью следующей команды:

npm run update-snapshots

Будут заменены только те скриншоты, в которых были расхождения. После визуальной проверки можно закоммитить новые базовые скриншоты.

Просмотр отчета о тестах локально в Dev-контейнере

После выполнения npm run playwright:run вы можете увидеть отчет о запуске тестов. Например, были ли повторные попытки при запуске одного или более тестов. Если тест упал, отчет будет сгенерирован автоматически. Если тест прошел успешно, то отчет можно сгенерировать с помощью команды:

npx playwright show-report

Чтобы просмотреть сгенерированный отчет, нужно запустить следующую команду и смотреть через VNC:

npx playwright open localhost:9323

Запуск E2E тестов Playwright

Перед запуском E2E тестов, вам необходимо запустить UI в режиме работы с API, для этого выполните следующую команду:

npm run dev

Также необходимо запустить CMS

После запуска UI и CMS, можно запускать E2E тесты, для запуска в headless режиме выполните следующую команду:

npm run playwright:run:e2e

Для запуска Е2Е тестов в UI режиме выполните следующую команду:

npm run playwright:open:e2e

Обновление версии Playwright

Версия Playwright должна быть зафиксирована для корректной работы в Dev-контейнере.

Например, вам нужно обновить версию Playwright с 1.48.2 до 1.49.0.

• Проверьте, доступен ли тег новой версии, которая вам нужна, здесь
• Если в новой версии есть выделенный noble докер-образ, обновите его тег в файле devcontainer.json следующим образом:

было:

"image": "mcr.microsoft.com/playwright:v1.48.2-noble",

стало:

"image": "mcr.microsoft.com/playwright:v1.49.0-noble",

• Удалите предыдущую версию пакетов Playwright, выполнив следующие команды:

npm uninstall @playwright/test

• Установите новую точную и зафиксированную версию пакетов Playwright в dev- зависимости, выполнив следующие команды (здесь пример для версии 1.49.0, замените ее на нужную):

npm install -D @playwright/test@1.49.0 --save-exact

Решение возможных проблем:

• Если на windows при выполнении pull у вас будет ошибка, что название какого-то файла слишком длинное выполните следующую команду в powershell подробнее тут:

& git config "--global" core.longpaths true