docs(storybook): add documentation about storybook #38

sipayRT · 2024-09-13T09:47:27Z

No description provided.

github-actions · 2024-09-13T09:49:00Z

✅ Successfully deployed static

shadowusr

Статьи топ! 🔥

shadowusr · 2024-09-13T10:24:38Z

docs/visual-testing/visual-testing-intro.mdx

+    const searchInput = await browser.$(".DocSearch");
+    await searchInput.click();
+
+    // taking screenshot of a previously found item (from the element context)


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

shadowusr · 2024-09-14T22:53:18Z

docs/visual-testing/with-storybook.mdx

+Если в Вашем проекте используется Storybook версии 6.x, то в настройках Storybook необходимо включить сохранение json-файла с Вашими историями:
+
+```typescript
+// .storybook/main.js


Здесь и везде далее — не критично, но есть специальное поле, которое позволяет очень красивенько рендерить название файла как здесь: https://testplane-ci.website.yandexcloud.net/testplane-docs/website-static/10848702025-153-1/docs/v8/config/browsers/#setup

Для этого надо написать typescript title=".storybook/main.js"

shadowusr · 2024-09-14T22:54:08Z

docs/visual-testing/with-storybook.mdx

+
+# Скриншотное тестирование со Storybook
+
+[Storybook][storybook] - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.


—, пожалуйста =)

shadowusr · 2024-09-14T22:55:57Z

docs/visual-testing/with-storybook.mdx

+```
+
+<Admonition type="warning">
+    При добавлении testplane-тестов расширение Ваших story-файлов должно быть `.js` или `.ts`.


Не критично: было бы прикольно написать тут причину, я вот уже не помню например в чем дело. "tsx/jsx файлы сейчас не поддерживаются, но мы скоро их добавим" — сразу было бы супер понятнее.

shadowusr · 2024-09-14T22:57:26Z

docs/visual-testing/with-storybook.mdx

+
+## Параметры конфигурации плагина
+
+<table>


А не стоит ли унести справочную информацию на страницу плагина в plugins?

Мне кажется прикольно если эта статья является практическим гайдом, как пользоваться testplane+storybook, а прям API мы же обычно описываем отдельно. Можно оставить ссылку просто.

shadowusr · 2024-09-14T23:08:18Z

docs/visual-testing/visual-testing-intro.mdx

@@ -0,0 +1,56 @@
+# Визуальное тестирование
+
+В testplane реализовано визуальное тестирование, с помощью которого пользователь может проверить визуальные изменения отдельного компонента, вьюпорта или всей страницы целиком.


Тут, конечно, хочется картинку, чтобы понимать как это выглядит в UI с первого взгляда. Но можно и позже добавить, когда будет new UI

shadowusr · 2024-09-14T23:08:45Z

blog/storybook-testing.mdx

+date: 2024-09-11T13:00
+---
+
+[Storybook][storybook] - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.


Тут сломались ссылки =(

shadowusr · 2024-09-14T23:09:54Z

blog/storybook-testing.mdx

+[Storybook][storybook] - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.
+Такой "шоурум" идеально подходит для скриншотного тестирования ваших компонентов, т.к. за счет этой изолированной среды такие тесты получаются в разы стабильнее и быстрее, чем вариант с e2e.
+
+С помощью плагина [@testplane/storybook][testplane-storybook] предоставляется возможность автоматически проверять изменения ваших компонентов с помощью скриншотного тестирования без единой строчки кода теста.


Нужно добавить  в точку, где можно обрезать превью поста. Сейчас пост отображается целиком: https://testplane-ci.website.yandexcloud.net/testplane-docs/website-static/10848702025-153-1/blog/

shadowusr · 2024-09-14T23:12:06Z

docs/visual-testing/with-storybook.mdx

+        buildStoriesJson: true,
+    },
+};
+```


Где-то в конце пошагового руководства не хватает ссылки на пример в нашей репе. Или я не увидел. В блоге есть, тут нет

shadowusr · 2024-09-14T23:13:51Z

blog/storybook-testing.mdx

+date: 2024-09-11T13:00
+---
+
+[Storybook][storybook] - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.


В целом честно говоря не очень понятно, в чем прикол поста в блоге, если он по сути просто скопированные 2 абзаца из статьи в доке. Точно ли он нужен в таком виде?

идея в том, чтобы в блоге подсвечивать какие-то крупные обновления в документации. если оставить только новый раздел, то его можно просто не заметить. но если это будет в виде статьи, то там сразу видно, что появилось что-то новое (идея была именно в том, чтобы подсветить новую статью)

DudaGod · 2024-09-26T18:59:29Z

i18n/ru/docusaurus-plugin-content-docs/current/visual-testing/visual-testing-intro.mdx

+В testplane реализовано визуальное тестирование, с помощью которого пользователь может проверить визуальные изменения отдельного компонента, вьюпорта или всей страницы целиком.
+Для анализа тестов, сохранения/обновления измененных изображений и запуска тестов рекомендуется использовать плагин [html-reporter][html-reporter], который предоставляет удобный UI для всех действий.
+
+![Html-report](/img/docs/html-reporter/html-reporter.overview.png)


Тут скриншот немного странный получился у него внизу дофига белого и потом полоса желтая. В итоге выглядит как будто это полоса разделитель какой-то.

DudaGod · 2024-09-26T19:00:54Z

i18n/ru/docusaurus-plugin-content-docs/current/visual-testing/visual-testing-intro.mdx

+
+Для скринштных проверок Testplane предоставляет команду `assertView`, которая позволяет сделать скриншот конкретного элемента или всего вьюпорта.
+При вызове команды `assertView` осуществляется поиск нужного элемента на странице с его автоматическим ожиданием. По умолчанию перед снятием скриншота на странице будет отключена анимация, чтобы исключить в будущем нестабильность теста из-за изменяющегося состояния элемента.
+После снятия скриншота будет произведено сравнение полученного изображения с эталонным. Если эталонного изображения еще не существует, то его необходимо сохранить с помощью UI html-reporter или CLI-опции `--update-refs`.


Может тут на UI html-reporter тоже ссылку сделать? Я бы на месте юзера сразу хотел бы посмотреть как там снять их можно.

DudaGod · 2024-09-26T19:06:39Z

i18n/ru/docusaurus-plugin-content-docs/current/visual-testing/with-storybook.mdx

+
+# Скриншотное тестирование со Storybook
+
+[Storybook][storybook] — это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.


Может вместо "визуализировать" заюзать "рендерить"?

DudaGod · 2024-09-26T19:08:38Z

i18n/ru/docusaurus-plugin-content-docs/current/visual-testing/with-storybook.mdx

+Такой "шоурум" идеально подходит для скриншотного тестирования ваших компонентов, т.к. за счет этой изолированной среды такие тесты получаются в разы стабильнее и быстрее, чем вариант с e2e.
+
+С помощью плагина [@testplane/storybook][testplane-storybook] предоставляется возможность автоматически проверять изменения ваших компонентов с помощью скриншотного тестирования.
+Вам достаточно описать ваш компонент в `Storybook`, а `testplane` при запуске автоматически сгенерит все необходимые тесты, прогонит их в нужных браузерах и предоставит визуальный отчет для обновления скриншотов.


А зачем storybook и testplane в кавычках? Это же просто название инструмента. Я бы написал без кавычек и с большой буквы.

DudaGod · 2024-09-26T19:11:36Z

i18n/ru/docusaurus-plugin-content-docs/current/visual-testing/with-storybook.mdx

+В Вашем проекте уже могут быть настроены другие типы тестирования, запускающиеся с помощью `testplane`. Чтобы не смешивать сущности, мы рекомендуем для storybook-тестов использовать отдельный конфиг и указывать его при запуске тестов.
+
+```bash
+npx testplane --storybook --config .testplane.storybook.conf.ts


Можно было бы сразу в новом формате написать - testplane.storybook.config.ts

DudaGod · 2024-09-26T19:14:35Z

i18n/ru/docusaurus-plugin-content-blog/storybook-testing.mdx

+[storybook]: https://storybook.js.org
+[testplane-storybook]: https://github.com/gemini-testing/testplane-storybook
+[play-function]: https://storybook.js.org/docs/writing-stories/play-function
+[example]: https://github.com/gemini-testing/testplane/examples/storybook-autoscreenshots


У тебя тут ссылка некорректная. Должно быть так - https://github.com/gemini-testing/testplane/tree/master/examples/storybook-autoscreenshots

sipayRT had a problem deploying to CI September 13, 2024 09:47 — with GitHub Actions Failure

sipayRT force-pushed the sp.storybook branch from b2d2b2e to 13d7cc0 Compare September 13, 2024 09:55

sipayRT had a problem deploying to CI September 13, 2024 09:55 — with GitHub Actions Failure

sipayRT force-pushed the sp.storybook branch from 13d7cc0 to 65a5afe Compare September 13, 2024 10:09

sipayRT temporarily deployed to CI September 13, 2024 10:09 — with GitHub Actions Inactive

sipayRT force-pushed the sp.storybook branch from 65a5afe to df7cc95 Compare September 13, 2024 10:11

sipayRT temporarily deployed to CI September 13, 2024 10:12 — with GitHub Actions Inactive

sipayRT force-pushed the sp.storybook branch from df7cc95 to 3684ac1 Compare September 13, 2024 10:18

sipayRT temporarily deployed to CI September 13, 2024 10:18 — with GitHub Actions Inactive

sipayRT force-pushed the sp.storybook branch from 3684ac1 to 0328686 Compare September 13, 2024 10:25

sipayRT had a problem deploying to CI September 13, 2024 10:25 — with GitHub Actions Failure

sipayRT force-pushed the sp.storybook branch from 0328686 to 5f042a1 Compare September 13, 2024 12:01

sipayRT temporarily deployed to CI September 13, 2024 12:01 — with GitHub Actions Inactive

shadowusr approved these changes Sep 14, 2024

View reviewed changes

sipayRT force-pushed the sp.storybook branch from 5f042a1 to 568a627 Compare September 26, 2024 17:44

sipayRT had a problem deploying to CI September 26, 2024 17:44 — with GitHub Actions Failure

sipayRT force-pushed the sp.storybook branch from 568a627 to 21e2b62 Compare September 26, 2024 17:47

sipayRT had a problem deploying to CI September 26, 2024 17:47 — with GitHub Actions Failure

sipayRT force-pushed the sp.storybook branch from 21e2b62 to 9926379 Compare September 26, 2024 18:03

sipayRT temporarily deployed to CI September 26, 2024 18:03 — with GitHub Actions Inactive

sipayRT force-pushed the sp.storybook branch from 9926379 to 1427430 Compare September 26, 2024 18:15

sipayRT temporarily deployed to CI September 26, 2024 18:15 — with GitHub Actions Inactive

sipayRT temporarily deployed to CI September 26, 2024 18:17 — with GitHub Actions Inactive

DudaGod approved these changes Sep 26, 2024

View reviewed changes

docs(storybook): add documentation about storybook

6d5a34b

sipayRT force-pushed the sp.storybook branch from e5c106e to 6d5a34b Compare October 10, 2024 13:10

sipayRT temporarily deployed to CI October 10, 2024 13:10 — with GitHub Actions Inactive

sipayRT merged commit d012d1d into master Oct 10, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(storybook): add documentation about storybook #38

docs(storybook): add documentation about storybook #38

sipayRT commented Sep 13, 2024

github-actions bot commented Sep 13, 2024 •

edited

Loading

shadowusr left a comment

shadowusr Sep 13, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

shadowusr Sep 14, 2024

sipayRT Sep 15, 2024

DudaGod Sep 26, 2024

DudaGod Sep 26, 2024

DudaGod Sep 26, 2024

DudaGod Sep 26, 2024

DudaGod Sep 26, 2024

DudaGod Sep 26, 2024


		# Скриншотное тестирование со Storybook

		[Storybook][storybook] - это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.


		## Параметры конфигурации плагина

		<table>

		@@ -0,0 +1,56 @@
		# Визуальное тестирование

		В testplane реализовано визуальное тестирование, с помощью которого пользователь может проверить визуальные изменения отдельного компонента, вьюпорта или всей страницы целиком.


		# Скриншотное тестирование со Storybook

		[Storybook][storybook] — это инструмент для разработки пользовательских интерфейсов на основе компонентов. Он позволяет разработчикам независимо визуализировать компоненты в различных состояниях в изолированной от остальных компонентов среде.

docs(storybook): add documentation about storybook #38

docs(storybook): add documentation about storybook #38

Conversation

sipayRT commented Sep 13, 2024

github-actions bot commented Sep 13, 2024 • edited Loading

✅ Successfully deployed static

shadowusr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 13, 2024 •

edited

Loading