yndx-shri-reviewer / shri-2020-task-1 Goto Github PK

Заложена ли в автотесты допустимая погрешность при проверке соответствия макету или важен каждый пиксель?

В ТЗ в описании модификатора card__content_space-a перечислены только 4 значения: m, xl, l, xxxl. Т.е. значение xxl отсутствует.
Но в блоке Cover в подробной спецификации и в примере страницы product.json он есть: card__content_space-a_xxl.
Это опечатка? Нужно добавить этот модификатор в стилях или заменить его на xxxl в верстке product.json?

При тестировании верстки страницы index.html на локальной машине в каталоге /stub/ и при сверке через pixel perfect, все проходит хорошо.
Вот, как выглядит верстка на локалке https://imgur.com/a/l69z1cM

При отправки на автотесты, появляется проблема прилипающего хедера, хотя все отступы точно есть. Вставлял даже несколько отступов, которые перекрывают друг друга, допуска то, что какие-нибудь из них затираются.
Вот, как выглядит верстка при краше автотестов https://imgur.com/a/C49v0HG, где левый скрин - моя верстка и правый - эталонная верстка.

В чем может быть проблема? Не могут ли тесты случайно затирать какой-либо класс или отступы?

При 1024px (по условию равно брейкпоинту) ширина блока product получается 204.8px

grid_m-columns_10
grid__fraction_m-col_2
2 колонки по 102.4px

Ширина product по макету 245px.
При screen-m: 1280px получается нормальная ширина блока.

На скриншоте размеры отступов отличаются от заданных. Проверка автотестами фэйлится.
Пожалуйста, уточните размеры отступов из данного пункта:

Модификации отступов

Нужно написать модификатор на отступы, содержащий все переменные, которые используются для отбивки элементов и блоков внутри смысловых сущностей и каркасных конструкций.

.theme_space_default — дефолтная размерная линейка.

Пример размеров текста:

• xxxs: 2px;
• xxs: 4px;
• xs: 8px;
• s: 12px;
• m: 16px;
• l: 20px;
• xl: 24px;
• xxl: 32px;
• xxxl: 40px;
• xxxxl: 48px;
• xxxxxl: 72px.

Здравствуйте, как более подробно посмотреть результаты автотестов, визуально вроде бы все ок

Возник один вопрос. Мне никак не дает покоя, что на скриншоте одна колонка равна 626px а другая 627px, grid__fraction_m-col_5 и grid__fraction_m-col_5 соответственно – это для десяти-колоночной сетки grid_m-columns_10.
У меня в браузере обе колонки по 626,5px, интересно какая допустимая погрешность в тестах?

Вечер добрый!
Правильно ли то, что блок, выделенный на скрине, не контентный?

В "подробная спецификация блоков с подсказками" написано что блок payment__header имеет стили form__item_space-v_l что равно 24px сверху и снизу, но на макете внутренний отступ сверху в payment__header равен 32px а снизу 38px. Такие величины никак не получить примиксовая данные блоки паттернов в блоке .payment.
(https://github.com/yndx-shri-reviewer/shri-2020-task-1/blob/master/assets/screenshots/payment.png)

shri-2020-task-1/assets/pages/indes.json

В задании указано, что элементу show блока history нужно установить внешний отступ сверху m. Но отступ в этом месте, если ориентироваться на скриншоты, кажется лишним. Это опечатка?

Как проверить

В каталог build необходимо поместить собранные файлы style.css и index.js.

В задании ниже:

В корне репозитория должен находиться каталог build с файлами style.css, script.js.

День добрый! В предыдущих issues писали про gap. Тоже столкнулся с этим. При значении --gap = xl, верстка ложится в соответствии с макетами.
Пример с --gap: -xxxl; (из задания)

Пример с --gap: -xl;

Посмотрите, пожалуйста.

Если интерактивные элементы работают так, как описано в задании, значит, код работает правильно.

Извините, есть несколько вещей, которые мне непонятны.

• Логи автотестов. Например, фрагмент:

Ошибка шаблонизации: TypeError: Cannot set property 'onload' of null at eval (webpack-internal:///./static/tensegrity666/script.js:3:22) at Object../static/tensegrity666/script.js (file:///opt/buildagent/work/e163812401825360/screenshots/static/tensegrity666/build/script.js:96:1)

По такому логу я не могу даже предположить, где ошибка.
Скрипт работает (он длиной 30 строк, а ошибки указаны на 96, 87 и тд) , есть расхождения по вёрстке, но я не понимаю, тратить ли время на устранение расхождений в несколько пикселей, или всё вообще сделано неправильно и время тратить не стоит. Или скрипты должны быть не так написаны.

• Критерии "Мобильная версия". В задании есть только ширина и условие, что блоки перестраиваются друг под друга. Некоторые блоки могут располагаться по-разному, блоки Product, например.

• Если использованы не все классы из шаблонов страниц - это ошибка или нет?

Читаю описание блока image.
https://github.com/uporot1k/shri-2020-task-1/blob/master/BASE.md#%D0%B1%D0%BB%D0%BE%D0%BA-image

Блок служит для отображения изображений. Растягивается на всю ширину, имеет сплошную границу шириной 3px и содержит заглушку. Заглушка, цвета фона и границы задаются темой или стилями контентного блока.

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

Прилигаю скриншот для пояснения (http://prntscr.com/qcgo5y)

Белым цветом выделены несоответствия картинки и исходной верстки. На данном скриншоте четко видно что цвет border у блока image не соответствует макету.

У темы .theme_color_project-default цвет border = #000000 , а у темы .theme_color_project-inverse - #ffffff.

В этом кейсе идет вот такая верстка http://prntscr.com/qcgre3
На скришоте видно, что родительскому блоку image присваивается тема .theme_color_project-inverse

Я не понимаю как цвет border у блока image может быть черного цвета, если у родителя задана инверсная тема, цвет border у которой белый

Блок Product
Имя: l Подпись: m

Вложенные контентные блоки:
text text_view_primary text_size_m,
text text_view_primary text_size_s,

Согласно таблице ниже высота слов должна быть 7px и 8px. На сриншоте к блоку product 8px и 10px. На блоках warning и payment подобные проблемы с высотой слов. Остальные блоки не успел проверить.

Добрый вечер!

В задании указано, что переключение тем осуществляется между project-default и project-inverse. Но есть некоторые блоки, как event на странице index и блок с карточками продуктов на странице product, тема которых задана заранее (inverse). Так, если переключить тему страницы index на inverse, то фон блока event станет белым, что выглядит странным при черном фоне остальных блоков (кроме warning).

Вопрос - нужно ли менять темы этих блоков при нажатии на переключатель?

Здравствуйте. Подскажите, по какому URL доступны изображения? По адресам /images/image-placeholder-inverse.svg и /assets/images/image-placeholder-inverse.svg изображения во время автотестов не доступны.

А учтен ли на скрине border картинки. У инверсной темы граница белого цвета. А судя по скрину там нет границы, высота 160px, как задана в .product

Скрин, с моим результатом.

В схеме index.json на строке 342 примиксован лишний отступ.

Точная ссылка на место в json-файле:

Пояснение.
В задании отступы по вертикали между payment__content и form__item равны .form__item_space-v_xxxl = 45px как сверху, так и снизу. На макетах payment.png и index.png также видим, что 45px сверху и 45px снизу. См. скриншот.

Но из-за того, что у каждого внутреннего элемента form__item еще и задан дополнительный отступ снизу form__item_indent-b_xl, то между последним form__item и нижней границей payment__content получается не 45px, как на макете, а 45px + 27px.

Правильно ли я понимаю, что в index.json ошибка и у нижнего элемента form__item не должно быть примиксовано form__item_indent-b_xl ?

history__show (e-accordion__short list__item_vertical-align_center list__item_indent-t_m)[контейнер для видимой части строки]

Примиксованый внешний отступ сверху(list__item_indent-t_m) не дает собрать разметку по скриншоту. Можете проверить необходимость использования данного отступа?

В трансляции говорили, что у блоков задается дефолтная высота.
А конкретно в вопросе про блок card.

Ни где в описании к блоку или выше не могу это найти, подскажите, где это указано?

Всем привет. Подскажите пожалуйста, в stub, в папке pages есть Index.bemjson файл. Соответственно при генерации его, в html у нас появляется в разметке:

1. блок history (с примиксованным блоком list);
2. в history вложен элемент history__transaction. К нему примиксован элемент list__tem с примиксованным модификатором list__item_space-a_m). Отсюда получаем внутренние отступы 18px.;
3. в history__transaction вложена видимая часть нашего бутерброда history__show, к которому примиксован элемент list__item с модификатором list__item_indent-t_m. Получаем еще внешний отступ сверху в 18px. .

В результате получаем отступ видимой части history__show от верхнего края в 36px, что дает не соответствие scrinshoot'у history .

Это так и должно быть? Или же необходимо использовать собственные стили к элементу history__show блока history? Или же я где-то ошибаюсь?

День добрый!
А поправлены ли значения ширины экрана в автотестах? По скринам все сходится, но автотесты ругаются. Или дело не в ширине?

В .product__header различаются отступы от текста сверху (38px) и снизу(32px). Хотя у всех модификаторов элементов отступы сверху и снизу симметричны (35px). Как такое возможно? Что делать перфекционистам?

По какому пути должны лежать заглушки? Поместил в build, тесты не проходят, на скриншотах видно, что заглушки не выводит вообще

Хотелось бы уточнить по модификаторам vertical-align и distribute. Это выравнивание элементов в card__footer, или выравнивание самого элемента card__footer?

Добрый день, а какой порог threshold при тестировании Вы считаете допустимым? И может ли он быть разный для разных блоков?

На странице описания контентных блоков заданы горизонтальные отступы у блоков .header и .footer : "значения вертикальных отступов: xxxl — вертикальный, --gap горизонтальный;".

У блока layout горизонтальные отступы не указаны.

В результате, на узких экранах содержимое layout прилегает к краю экрана, а у header и footer отступы. Как следствие, левая вертикальная граница header и footer лежит не на одной линии с границами блоков внутри layout.

Так и задумано?
Или на всех экранах левые и правые вертикальные границы header, layout, footer должны идти по одной линии?

В корне репозитория должен находиться каталог build с файлами style.css, script.js.
Для каждой страницы в каталоге build следует создать свою папку с соответствующими style.css и script.js?

У меня упали тесты при мобильном разрешении, стояли отступы справа и слева на контейнере (layout__container ). Они стояли для того чтобы контент при мобильно разрешении не прилипал к краям.
В эталонном screenshot текст липнет к viewport, что с точки usability не правильно. Также липнет рамка продуктов, что с точки зрения дизайна не очень.

Сделал для проверки наложение Ваших скринов, получил вот такой результат.
Есть расхождения в полпикселя- белые полоски/зазоры. Учитывается ли это в автотестах, и если нет, почему они не проходят? А если да, то возможен ли какой-то лог ошибок?

Добрый вечер!

Отправила решение на проверку автотестами, автотесты не прошли с ошибкой "Ошибка шаблонизации: ReferenceError: modules is not defined".
Подскажите, в чем может быть дело? Локально все собирается,
modules: ["i-bem-dom__init", "jquery", "next-tick"]. Может script.js должен иметь определенный формат?

https://github.com/yndx-shri-reviewer/shri-2020-task-1/blob/master/BASE.md
Внизу есть ссылки на скрины, выдает 404, так же 404 на заглушку

Подскажите, какой путь до картинок (image-placeholder-inverse.svg, image-placeholder-primary.svg) при запуске тестов? Я копирую картинки в папку build, но на скриншотах они не отображаются.

Добрый день.

К сожалению я не смог найти описание отступов между строками текста. Присутствует width, height, даже margin для соответствующих типов текста, однако, такой важной характеристики, как отступы нет.

Возможно это стандартный 1.5 отступ или flex контейнер с space-between выравниванием контента?

Буду благодарен за комментарий.

Документации не предполагается?

При разработке проверяю в нескольких браузерах, размеры совпадают с эталонным из папки assets. Но когда проходят автотесты в изображениях совершенно другие размеры. Например блок warning имеет ширину 409px, а по результатам автотестов в моём блоке ширина 418px. Подскажите из-за чего так может происходить?

Должен ли переключатель onoffswitch быть интерактивным?
Если да, то:

1. между какими темами он должен переключаться на странице index и product? Ведь тем у нас 4.
2. какое изображение (из блока image) должно применяться к теме theme_color_project-warning (в ТЗ указано для всех тем, кроме этой).

Переключатель onoffswitch должен переключать с темы theme_color_project-default на тему theme_color_project-brand ?

Можно screenshot как это видел дизайнер (страницы с темой theme_color_project-brand) ?

Заранее спасибо!

Предполагается ли заданием, что для выравнивания текстовых полей будут использованы дополнительные обертки?

В задании имеется один единственный брэйкпоинт - 1024px, при достижении которого, блоки должны выстраиваться один под другим. При этом максимальная ширина контейнера никак не должна меняться. Для страниц index и product максимальная ширина составляет 1280px (layout__container_size_m), однако, тесты не проходят.

Страница index, ширина экрана — мобильная

Связано ли это с шириной контейнера или это лог общей ошибка тестирования? Можно ли получить более подробную информацию? Так как отсутствуют скриншоты мобильной версии, не совсем понятно как именно должны вести себя отступы под контейнерами, как именно они должны центрироваться на странице?

Автотест возвращает следующую ошибку:

Но в собранном style.css определенно есть этот блок.

Может быть я чего-то не понимаю ?

В макете input идет с рамкой. В описании блока, я этого не нашел.
Ссылка на описание

В описании не указаны вертикальные отступы у текстовых блоков (text/word), судя по скриншотам они явно есть.

Здравствуйте!

В описании на Гите значение Брейпоинта равно 1024px, а в BASE.md в проекте оно равно 1144px.

Предполагаю, что это с прошлого раза осталось и не поправили (1144), но все же лучше у вас уточнить какое значение должно быть. Спасибо!

Могут ли стили для базовых блоков содержать дополнительные свойства (не указанные в ТЗ)?
Например, на скриншоте для product у списка карточек имеется черный фон, который как будто бы нельзя сделать, не добавляя дополнительных стилей (не указанных в ТЗ) для блока section или layout__container?

Или это проблема конкретно моих неверных стилей и нужно обходиться только стилями, явно указанными в ТЗ?

И обратный вопрос:
Могут ли стили для контентных блоков НЕ содержать дополнительные свойства?

Из ТЗ:

“блок должен содержать собственные уникальные дополнительные стили”.

Прям “должен”?

Здравствуйте. Пытаюсь запустить веб-сервер из репозитория, но в нём нет указанного в описании скрипта "start":

niqitosiq@DESKTOP-CPA7TJH:/mnt/c/work/yandex$ git clone https://github.com/yndx-shri-reviewer/shri-2020-task-1.git
...
niqitosiq@DESKTOP-CPA7TJH:/mnt/c/work/yandex$ cd shri-2020-task-1/
niqitosiq@DESKTOP-CPA7TJH:/mnt/c/work/yandex/shri-2020-task-1$ sudo npm init
...
Is this OK? (yes)
niqitosiq@DESKTOP-CPA7TJH:/mnt/c/work/yandex/shri-2020-task-1$ sudo npm i
npm notice created a lockfile as package-lock.json. You should commit this file.
up to date in 1.114s
found 0 vulnerabilities

niqitosiq@DESKTOP-CPA7TJH:/mnt/c/work/yandex/shri-2020-task-1$ npm start
npm ERR! missing script: start

Команда:
node templater.js
тоже ничего не запускает.