Слияние кода завершено, страница обновится автоматически
Данный документ содержит подробную информацию о тестировании и сборке вашего кода AMP.
Содержание- Тестовые команды
Перед выполнением этих команд убедитесь, что у вас установлен Node.js. Для получения инструкций обратитесь к разделу One-time setup в руководстве по быстрому началу работы.Професиональный совет: Чтобы увидеть полный список команд amp и их флагов, выполните команду amp --help. | Команда | Описание |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| amp | Запускает сервер разработки, лениво компилирует JS-файлы и расширения при запросе и следит за изменениями. Используйте это для разработки. |
| amp --extensions=amp-foo,amp-bar | То же, что и amp. Предварительно компилирует указанные расширения и лениво компилирует другие файлы при запросе. |
| amp --extensions_from=examples/foo.amp.html | То же, что и amp. Предварительно компилирует расширения в указанном примерном файле и лениво компилирует другие файлы при запросе. |
| amp --minified | То же, что и amp. Компилирует и обслуживает минифицированные бинарники. Может использоваться вместе с --extensions и --extensions_from. | |
| amp --version_override=<version_override> | Запускает "watch" и "serve". Переопределяет версию, записанную в AMP_CONFIG. |
| amp dist | Компилирует минифицированные AMP-бинарники и применяет AMP_CONFIG к файлам выполнения. |```
amp dist --watch
Собирает минифицированные AMP-бинарные файлы и следит за изменениями.```
amp dist --noconfig
Собирает минифицированные AMP-бинарные файлы без применения конфигурации AMP_CONFIG к файлам выполнения.
amp dist --extensions=amp-foo,amp-bar
Собирает минифицированные AMP-бинарные файлы, включая только указанные расширения.
amp dist --extensions_from=examples/foo.amp.html
Собирает минифицированные AMP-бинарные файлы, включая только расширения из указанных примеров.
amp dist --noextensions
Собирает минифицированные AMP-бинарные файлы без сборки каких-либо расширений.
amp dist --core_runtime_only
Собирает минифицированные AMP-бинарные файлы только для основного времени выполнения. Может быть объединен с --extensions и --extensions_from.```
amp dist --fortesting
Собирает минифицированные AMP-бинарные файлы для локального тестирования. (Позволяет использовать случаи, такие как рекламу, твиты и т. д., чтобы работать с минифицированными источниками. Переопределяет TESTING_HOST, если указан. По умолчанию использует производственное AMP_CONFIG.) | `amp dist --fortesting --config=<config>` | Создает минифицированные бинарные файлы AMP для локального тестирования с указанным `AMP_CONFIG`. `config` может быть `prod` или `canary`. (По умолчанию `prod`. ) |
| `amp dist --version_override=<version_override>` | Создает минифицированные бинарные файлы AMP и переопределяет версию, записанную в AMP_CONFIG. |
| `amp lint` | Проверяет JS-файлы с помощью ESLint. |
| `amp lint --watch` | Наблюдает за изменениями в файлах и проверяет их с помощью ESLint. |
| `amp lint --fix` | Автоматически исправляет простые предупреждения/ошибки линтера. | | `amp lint --files=<files-path-glob>` | Проверяет только указанные файлы. Может использоваться вместе с `--fix`. |
| `amp lint --local_changes` | Проверяет только файлы, изменившиеся в локальной ветке. Может использоваться вместе с `--fix`. |
| `amp prettify` | Проверяет не-JS-файлы с помощью Prettier. |
| Команда | Описание |
| --- | --- |
| `amp prettify --fix` | Автоматически исправляет простые ошибки форматирования. |
| `amp prettify --files=<путь-к-файлам>` | Проверяет только указанные файлы. Может использоваться вместе с `--fix`. |
| `amp prettify --local_changes` | Проверяет только файлы, изменившиеся в локальной ветке. Может использоваться вместе с `--fix`. |
| `amp build` | Собирает незаминифицированные AMP-бинарники. |
| `amp build --watch` | Собирает незаминифицированные AMP-бинарники и следит за ними на изменения. |
| `amp build --extensions=amp-foo,amp-bar` | Собирает незаминифицированные AMP-бинарники, но только с указанными расширениями. |
| `amp build --extensions_from=examples/foo.amp.html` | Собирает незаминифицированные AMP-бинарники, но только с расширениями, необходимыми для загрузки указанных примеров. |
| `amp build --noextensions` | Строит незаминифицированные AMP-бинарники без расширений. | |
| `amp build --core_runtime_only` | Строит незаминифицированные AMP-бинарники только для основного времени выполнения. |
| `amp build --fortesting` | Строит незаминифицированные AMP-бинарники и устанавливает поле `test` в `AMP_CONFIG` на `true`. |
| `amp build --version_override=<version_override>` | Строит незаминифицированные AMP-бинарники с указанной версией. |
| `amp check-links --files=<files-path-glob>` | Отчет о неработоспособных ссылках в файлах `.md`. |
| `amp check-links --local_changes` | Отчет о неработоспособных ссылках в файлах `.md`, измененных в локальной ветке. |
| `amp clean` | Удаляет выходные данные сборки. | | `amp css` | Перекомпилирует CSS в каталог сборки и строит встроенный CSS в JS-файлы для библиотеки AMP. ```
| Команда `amp compile-jison` | Компилирует парсеры jison для расширений в директорию сборки. |
| Команда `amp pr-check` | Запускает все проверки CircleCI локально. |
| Команда `amp pr-check --nobuild` | Запускает все проверки CircleCI локально, но пропускает шаг `amp build`. |
| Команда `amp pr-check --files=<test-files-path-glob>` | Запускает все проверки CircleCI локально и ограничивает тесты только файлами, предоставленными в качестве аргумента. |
| Команда `amp unit` | Запускает модульные тесты в Chrome (не требует сборки библиотеки AMP). |
| Команда `amp unit --local_changes` | Запускает модульные тесты, напрямую затронутые измененными файлами в локальной ветке, в Chrome. || Команда `amp integration` | Запускает интеграционные тесты в Chrome после сборки несжатого runtime с версией `prod` конфигурации `AMP_CONFIG`. |
| Команда `amp integration --minified` | То же самое, что и выше, но сборка сжатого runtime. |
```| Команда | Описание |
| --- | --- |
| `amp integration --config=<config>` | То же самое, но `config` может быть `prod` или `canary`. (По умолчанию используется `prod`. ) |
| `amp integration --nobuild` | То же самое, но пропускает сборку runtime. |
| `amp [unit\|integration] --verbose` | Запускает тесты в Chrome с включенным логированием. |
| `amp [unit\|integration] --coverage` | Запускает тесты охвата кода. После запуска отчет будет доступен по адресу test/coverage/index.html |
| `amp [unit\|integration] --watch` | Наблюдает за изменениями в файлах и запускает соответствующие тесты в Chrome. |
| `amp [unit\|integration] --watch --verbose` | То же самое, что и `watch`, но с включенным логированием. |
| `amp [unit\|integration] --safari` | Запускает тесты в Safari. |
| `amp [unit\|integration] --firefox` | Запускает тесты в Firefox. |```
| Команда | Описание |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `amp [unit\|integration] --edge` | Запускает тесты в Edge. |```markdown
| Команда | Описание |
| --- | --- |
| `amp [unit\|integration] --files=<test-files-path-glob>` | Запускает конкретные тестовые файлы. |
| `amp [unit\|integration] --testnames` | Выводит имя каждого запускаемого теста и печатает сводку в конце. |
| `amp serve` | Поднимает контент из корневой директории репозитория по адресу http://localhost:8000/. Примеры находятся по адресу http://localhost:8000/examples/. По умолчанию поднимает несжатые бинарники. |
| `amp serve --minified` | То же самое, что и `serve`, но поднимает сжатые бинарники. |
| `amp serve --cdn` | То же самое, что и `serve`, но поднимает бинарники CDN. |
| `amp serve --rtv <rtv_number>` | То же самое, что и `serve`, но поднимает бинарники с указанным 15-значным RTV. |
``````| `amp serve --esm` | То же самое, что и `serve`, но подаёт модульные двоичные файлы ESM. Использует новые трансформации на основе TypeScript. _В разработке._ |
| `amp serve --quiet` | То же самое, что и `serve`, но с отключённым логированием. |
| `amp serve --port <port>` | То же самое, что и `serve`, но использует номер порта, отличный от стандартного 8000. |
| `amp storybook` | Подаёт Storybooks для [изолированного тестирования компонентов.](#isolated-component-testing) |
| `amp storybook --storybook_env <storybook_env>` | Подаёт Storybook для конкретной среды (`amp`, `preact`). |
| `amp storybook --build [--storybook_env <storybook_env>]` | Строит один или несколько Storybooks в статическую директорию. |
| `amp check-types` | Проверяет наличие ошибок, связанных с типированием Closure. Выполняется автоматически при пуше. |
``````markdown
| Команда | Описание |
| --- | --- |
| `amp dep-check` | Выполняет проверку зависимостей для каждого модуля. Выполняется автоматически при пуше. |
| `amp presubmit` | Выполняет проверку файлов на наличие запрещенных и обязательных терминов. Запускается автоматически при отправке. |
| `amp validator` | Строит и проверяет AMP валидатор. Запускается автоматически при отправке. |
| `amp ava` | Выполняет тесты для задач и кода offline/node с использованием [ava](https://github.com/avajs/ava). |
| `amp todos:find-closed` | Находит `TODO` в коде для задач, которые были закрыты. |
| `amp visual-diff` | Выполняет все тесты визуального сравнения на безголовом экземпляре локального Chrome после сборки минифицированного runtime с версией `prod` конфигурации `AMP_CONFIG`. Требует установки переменной окружения `PERCY_TOKEN` или передачи задачи с помощью `--percy_token`. |
```| `amp visual-diff --config=<config>` | То же самое, но `config` может быть `prod` или `canary`. (По умолчанию `prod`). |
| `amp visual-diff --nobuild` | То же самое, но пропускает сборку runtime. |
| `amp visual-diff --chrome_debug --webserver_debug` | То же самое, но с дополнительным логированием. |
```Флаги отладки можно использовать независимо.
|
| `amp visual-diff --grep=<regular-expression-pattern>` | То же самое, но выполняет только те тесты, чьи имена соответствуют шаблону регулярного выражения. |
| `amp firebase` | Создает папку `firebase` и копирует все файлы из `examples` и `test/manual` для развертывания в Firebase. |
| `amp firebase --file path/to/file` | То же самое, но копирует указанный файл в качестве `firebase/index.html`. |
| | `amp firebase --minified` | То же самое, что и `amp firebase`, но использует минифицированные файлы вида `/dist/v0/amp-component-name.min.js` вместо неминифицированных файлов вида `/dist/v0/amp-component-name.max.js`. |
| `amp firebase --nobuild` | То же самое, что и `amp firebase`, но пропускает сборку времени выполнения. |
| `amp e2e` | Запускает все тесты на уровне "end-to-end" в Chrome после сборки неминифицированного времени выполнения с версией `AMP_CONFIG` под названием `prod`. |
| `amp e2e --minified` | То же самое, но собирает минифицированное время выполнения. |
| `amp e2e --config=<config>` | То же самое, но `config` может быть `prod` или `canary`. (По умолчанию используется `prod`. ) |
| `amp e2e --nobuild` | То же самое, но пропускает сборку времени выполнения. | | `amp e2e --files=<test-files-path-glob>` | Запускает end-to-end тесты из указанных файлов на последней версии браузера Chrome. |
| `amp e2e --testnames` | Выводит имя каждого теста, который запускается, и печатает сводку в конце. |
| `amp e2e --engine=ENGINE` | Запускает end-to-end тесты с указанным Web Driver движком. Допустимые значения: `puppeteer` и `selenium`. |
| `amp e2e --headless` | Запускает end-to-end тесты в безголовом режиме браузера. |
| `amp e2e --watch` | Наблюдает за изменениями в тестовых файлах, запускает тесты при обнаружении изменений. |
| `amp check-sourcemaps` | Проверяет правильность сгенерированных sourcemaps во время минификации. |
| **Профессиональный совет:** Все вышеуказанные команды могут быть выполнены в режиме отладки с помощью `node --inspect`. |Это позволит отладчику Chrome останавливаться на утверждениях `debugger;`, после чего можно будет проверять локальное состояние с помощью инструментов разработчика.Например, чтобы отладить `amp serve`, выполните следующую команду:
```sh
node --inspect $(which amp) serve
Для ручного тестирования соберите AMP и запустите сервер Node.js, выполнив команду amp.
Существует 5 режимов обслуживания:
amp.amp --minified.amp serve --cdn.001907161745080. Запустите режим RTV, выполнив команду amp serve --rtv <rtv_number>.amp dist --fortesting --esm, а затем запустите режим ESM, выполнив команду amp serve --esm. Этот режим новый и находится в активной разработке.
Чтобы переключиться на другой режим обслуживания во время выполнения, перейдите по адресу http://localhost:8000/serve_mode=MODE и установите MODE одним из следующих значений: default, compiled, cdn или <RTV_NUMBER>.
Содержимое в директории examples доступно по адресу: http://localhost:8000/examples/### Прокси документа
AMP поставляется с локальным прокси для тестирования производственных документов AMP с локальной версией JS.
Для любого публичного документа AMP, например: http://output.jsbin.com/pegizoq/quiet,
Вы можете получить к нему доступ с помощью локальной версии JS, используя форму по адресу
http://localhost:8000 или напрямую по адресу прокси:
http://localhost:8000/proxy/output.jsbin.com/pegizoq/quiet.
Примечание: Локальный прокси будет служить минифицированным или незаминифицированным JS в зависимости от текущего режима обслуживания. Когда режим обслуживания cdn, локальный прокси будет служить удалённым JS. При доступе к минифицированному JS убедитесь, что вы выполнили команду amp dist с флагом --fortesting, чтобы не удалять локальные пути. (Мы удаляем часть кода для уменьшения размера файла перед развертыванием в продакшен.) Если исходный ресурс использует HTTPS, URL будут выглядеть так: http://localhost:8000/proxy/s/output.jsbin.com/pegizoq/quiet.
Если вы работаете над рекламными объявлениями AMPHTML, вы можете использовать локальную A4A обёртку для тестирования локальных и производственных AMP документов с локальной версией JS.
A4A может быть запущена в одном из следующих двух режимов:
http://localhost:8000/a4a/...
http://localhost:8000/a4a-3p/...Поддерживаются следующие формы:При доступе к минифицированному JS убедитесь, что вы запускаете amp dist с флагом --fortesting, чтобы мы не удаляли пути к localhost. (Мы удаляем часть кода для уменьшения размера файла перед развертыванием в продакшн)
Если исходный ресурс использует HTTPS, URL будут выглядеть так: https://localhost:8000/a4a[-3p]/proxy/s/output.jsbin.com/pegizoq/quiet
Обратите внимание, что все документы предполагаются с "фиктивной" подписью. Таким образом, эта функциональность доступна только в режиме localDev.
Кроме того, можно предоставить следующие параметры запроса:
width - ширина элемента amp-ad (по умолчанию "300")height - высота элемента amp-ad (по умолчанию "250")offset - смещение для смещения элемента amp-ad вниз по странице (по умолчанию "0px"). Может использоваться для перемещения объявления за пределы области видимости, например, используя offset=150vh.Если вы работаете над рекламными объявлениями AMP In-a-box, вы можете использовать локальную обёртку In-a-box для тестирования локальных и производственных AMP документов с локальной версией JS.
Поддерживаются следующие формы:
локальный документ: http://localhost:8000/inabox/examples/animations.amp.html
проксируемый документ с локальными источниками: http://localhost:8000/inabox/proxy/output.jsbin.com/pegizoq/quietКроме того, можно предоставить следующие параметры запроса:
width - ширина элемента iframe (по умолчанию "300")
height - высота элемента iframe (по умолчанию "250")
offset - смещение для смещения элемента iframe вниз по странице (по умолчанию "0px"). Может использоваться для перемещения объявления за пределы области видимости, например, используя offset=150vh.
Для тестирования документов на произвольных URL с вашей текущей локальной версией AMP runtime мы создали расширение для Chrome.
Кроме сборки AMP runtime и выполнения amp [unit|integration], автоматические тесты, выполняемые на CircleCI, включают набор визуальных тестов на различия, чтобы убедиться, что новый коммит в ветку main не приводит к непреднамеренным изменениям в том, как страницы отображаются. Тесты загружают несколько хорошо известных страниц в браузере и сравнивают результаты с известными хорошими версиями тех же страниц.
Используемый технологический стек включает:
ampproject/amphtml на GitHub связан с проектом Percy с таким же названием. Вы увидите проверку под названием percy/amphtml в вашем PR. Если ваш PR приводит к визуальным различиям, нажав на ссылку details, вы увидите снимки экрана с выделенными различиями.Когда выполнение тестов завершается неудачей из-за наличия визуальных различий, нажмите ссылку details рядом с percy/amphtml в вашем PR и изучите результаты. По умолчанию Percy выделяет изменения между снимками экрана красным цветом. Нажав на новый снимок экрана, вы увидите его в чистом виде. Если различия указывают на проблему, вероятно, связанную с вашим PR, вы можете попробовать выполнить визуальные тесты локально для отладки (см. раздел ниже). Однако, если вы уверены, что проблема не связана с вашим PR, вы можете нажать зелёную кнопку Approve на Percy для одобрения снимков экрана и разблокировки вашего PR для слияния.### Нестабильные тесты
Если тест Percy не проходит и вы хотите запустить повторный запуск, сделать это можно не изнутри Percy. Вместо этого, из вашего PR на GitHub, нажмите на ссылку details рядом с CircleCI PR Check и затем нажмите на Visual Diff Tests, чтобы загрузить запуск CircleCI для вашего PR. На странице задания нажмите кнопку Перезапустить рабочий процесс с начала, чтобы перезапустить только это задание, что сгенерирует свежий визуальный дифф-билд на Percy.
visual-tests.jsonc, см. файл для конфигураций каждого теста. При выполнении, запуск тестов визуальных различий выполняет следующие действия для каждого тестового случая:Когда все снимки завершают загрузку, Percy обрабатывает визуальные различия и отчеты возвращаются в GitHub в качестве статуса запроса на слияние. Percy рендерит снимки в собственных браузерах и делает скриншот. Если новый скриншот отличается от ранее утвержденного скриншота, вы получите визуальное выделение мест, где лежит это различие.Percy по умолчанию не запускает JavaScript, поэтому тот же снимок DOM будет использоваться для отображения мобильной и настольной версий страницы. Это означает, что если ваша страница выглядит по-разному между этими двумя типами устройств, она должна быть способна сделать это только с помощью CSS.### Добавление и изменение визуальных тестов различий
См. Добавление и изменение визуальных тестов различий.
Чтобы ускорить разработку и тестирование компонентов, рекомендуется использовать Storybook. Это позволяет вам писать "истории", которые являются рендерируемыми тестовыми сценариями.
Истории могут показывать контролы конфигурации для ручного тестирования параметров компонентов. Они также предоставляют инструменты для проверки доступности, тестирования макетов, изменяющихся в зависимости от размера области видимости, и других функций.
📖 Документация Storybook: Что такое история?
Вы можете запустить preact Storybook, выполнив:
amp storybook
Вы можете запустить конкретную среду, предоставив --storybook_env:
preact
amp storybook --storybook_env=preact
react
amp storybook --storybook_env=react
Запуск
reactокружения требует наличие пакетов компонентов. Убедитесь, что они присутствуют в директорияхextensions/**/distдо запуска, выполнив командуamp build --extensions=...для всех компонентов Bento.
amp
amp storybook --storybook_env=amp
Запуск
ampокружения также запускает задачу сборки и запуска, которая обычно запускается с помощью командыamp. Это предоставляет дополнительный сервер наlocalhost:8000.### Писание тестовых сценариев
Тестовые сценарии (stories) расположены внутри директории компонента. Расширение имени файла определяет, в каком окружении будут запущены сценарии:
preact Stories заканчиваются на .js:
extensions/amp-example/0.1/storybook/Basic.js
react Stories используют те же файлы, что и preact.
amp Stories заканчиваются на .amp.js:
extensions/amp-example/0.1/storybook/Basic.amp.js
Подробнее о Писании Stories в официальной документации Storybook. Убедитесь, что вы также следуете нашим собственным Рекомендациям по стилю
Быстрее всего отлаживать с помощью локальной сборки (amp + http://localhost:8000/). В Chrome вы можете использовать DevTools порт-форвардинг. Однако, iOS Safari не предоставляет аналогичной опции. Вместо этого вы можете использовать ngrok. Просто скачайте бинарник ngrok для вашей платформы и запустите его следующим образом:
ngrok http 8000
После запуска ngrok выведет URL для http и https. Например, http://73774d8c.ngrok.io/ и https://73774d8c.ngrok.io/. Эти URL можно использовать для отладки на iOS и других устройствах.
firebase может быть сгенерирована командой amp firebase).```shnpm install -g firebase-tools
firebase login
firebase init
amp firebase
firebase deploy
```- При инициализации Firebase в директории через firebase init, убедитесь, что выберите следующие опции при запросе:
Hosting: Настройка и развертывание сайтов Firebase Hosting.public.[не настраивать новый проект] и добавьте его позже.
firebase use your-project-name или дать ему псевдоним, выбрав проект после выполнения firebase use --add.n.amp firebase сгенерирует папку firebase и скопирует все файлы из dist, examples и test/manual. Он перепишет все URL в скопированных файлах, чтобы они указывали на локальные версии AMP (то есть те, которые скопированы из dist в firebase/dist). При инициализации Firebase вы должны установить папку firebase как публичную директорию для firebase. Таким образом, firebase deploy просто скопирует и развернет содержимое сгенерированной папки firebase. Например, ваш файл firebase.json может выглядеть следующим образом:```json
{
"hosting": {
"public": "firebase",
"ignore": ["firebase.json", "/.*", "/node_modules/**"]
}
}
Если вы только тестируете один файл, вы можете использовать `amp firebase --file=path/to/my/file.amp.html`, чтобы избежать копирования всего `test/manual` и `examples`. Он скопирует указанный файл в `firebase/index.html`, что упрощает отладку.
После развертывания вы сможете получить доступ к вашему проекту по его URL-адресу хостинга `https://your-project-name.firebaseapp.com`.
Кроме того, вы можете создать несколько проектов и переключаться между ними в CLI с помощью `firebase use your-project-name`.
#### Тестирование рекламы
Тестирование рекламы в развернутых демонстрациях требует разрешения URL 3p. Вы можете сделать это, добавив ваш намеченный URL-адрес развертывания как переменную окружения `AMP_TESTING_HOST` и используя флаг `fortesting`. Например:
```sh
export AMP_TESTING_HOST="my-project.firebaseapp.com"
amp firebase --fortesting
firebase deploy
Это запишет "my-project.firebaseapp.com" как третий сторонний URL в соответствующие атрибуты в AMP_CONFIG, который предварительно добавляется к файлам amp.js и integration.js в папке firebase. Если вас интересует, как это делается, вы можете посмотреть build-system/tasks/firebase.js.
Вы можете запускать и создавать локальные тесты на всех этапах во время разработки. В настоящее время тесты выполняются только в Chrome, но поддержка дополнительных браузеров находится в разработке. Эти тесты еще не добавлены в наш CI-билд, но они будут добавлены скоро.Запустите все тесты с помощью:
amp e2e
Задача запустит amp build и затем amp serve перед выполнением тестов. Чтобы пропустить сборку времени выполнения, используйте --nobuild.
Консультация по документации по тестированию на всех этапах поможет вам узнать, как создавать свои собственные тесты на всех этапах.
Вы можете создавать диаграммы пламени для любого узлового процесса, используемого системой сборки, с помощью 0x.
Вот пример для amp dist:
npx 0x -o node_modules/.bin/amp dist
Важно отметить, что 0x автоматически создает диаграмму пламени и папку для обслуживания локально в репозитории, пожалуйста, не добавляйте их в PRs!
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )