KillBill May 30 2019 at 16:45

Uibook — инструмент для визуального тестирования React-компонентов с медиа-запросами

6 min

7.3K

HTML*JavaScript*ReactJS*Website development*Web services testing*

+20

Comments 13

astec May 30 2019 at 22:22

На английском статью можно для коллег?

KillBill May 31 2019 at 09:24

Скоро переведу :)

Bhudh May 31 2019 at 01:03

TL;DR, но кратенькое замечание: при нейминге продукта очень полезно его (name) произносить, а не просто лепить хайповые буковки.
Представьте — Вы разговариваете с русским клиентом и произносите: «Сейчас я Вам уибук…»

justboris May 31 2019 at 01:51

Вроде же это читается как "юай-бук"

Bhudh May 31 2019 at 23:28

А GUI читается исключительно как «джыюай».
Блаженны, кто верует.

4tlen Jun 1 2019 at 01:36

Напишите uibook и gui так, чтобы не было смешно русскоговорящим малолеткам и понятно всем остальным. Спасибо.

Bhudh Jun 1 2019 at 02:53

Хотя бы UI Book, чтобы было видно, что это точно UI.
Строчные буквы в слитном слове не сильно вызывают желание спеллинга.
И зря Вы про малолеток: не знают, как английские буквы читаются, не только они, но и вполне взрослые люди, не знающие английского. Откуда-то же взялись "эс как доллар" и "вэ как галочка".

i_surin May 31 2019 at 18:06

а почему решили использовать border для выделения активных элементов? есть же outline с которым вёрстка не будет путешествовать в разные стороны

KillBill May 31 2019 at 18:09

Если речь про режим редактирования текста, то там, конечно, используется `outline`. Но есть зелёная рамка вокруг всего рабочего пространства, она сделана через `border`, так как иначе она окажется снаружи. Можно сделать тенями, но зачем?

4tlen Jun 1 2019 at 01:41

Тени не ломают флоу. Меньше беспокойства.

justboris Jun 1 2019 at 12:57

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

kashey Jun 1 2019 at 04:12

Просто открываем и просматриваем подряд все компоненты

Вот так делать не надо. Этот момент следует автоматизировать и показывать визуальные дифы, если они есть.

Iskin Jun 1 2019 at 12:44

Да, автоматическое визуальное тестирование — правильная вещь. Но в рамках этой статьи не важно кто именно смотрит изменения. Для тестирования по скриншотам всё равно нужны такие же страницы UiBook со всеми состояниями.

Но у нас чуть сложнее — мы используем UiBook ещё и для тестирования анимаций. У нас есть страницы, который постоянно крутят анимации:
amplifr.com/uikit/#MobileLayout:ru