Вопрос пользователя Dodge164 в уроке «Списки», курс «Основы вёрстки контента»

Dodge164

https://ru.hexlet.io/code_reviews/362333 Не первый раз сталкиваюсь с проблемой различий в размере изображения. Можно получить максимально подробное объяснение, почему так происходит и как это исправить? Вот, прям, для совсем тупеньких: куда смотреть, что писать, чтоб раз и на всегда уяснить зависимость. Expected image to be the same size as the snapshot (1280x1596), but was different (1280x1524). - подобные ошибки преследуют меня в каждом упражнении. Никак не пойму в чем загвоздка, если сейчас мы используем только разметку, а не стили.

7 0

Anna kra_

Привет!

Вот маленькая подсказка: Ваш код содержит ошибки – скопируйте его и перепроверьте в валидаторе (https://validator.w3.org/), во вкладке Validate by Direct Input.

Это хорошая практика – сначала удостовериться в корректности кода. Ошибки исправляем в направлении сверху вниз. Иногда бывает такое, что одна ошибка где-то сверху провоцирует следующие ошибки, поэтому такой порядок.

Никак не пойму в чем загвоздка, если сейчас мы используем только разметку, а не стили.

А в этом Вашем вопросе уже содержится частично и ответ: если имеются разметка и стили, причём стилей мы не касаемся, то, значит, дело скорее всего в разметке. Её для начала и перепроверяем :-) Скорее всего, а не наверняка, потому что могут быть ещё какие-то неявные факторы.

Когда код будет валидным и если всё ещё будут возникать ошибки, то перепроверьте, точно ли Вы выполнили задание.

Перепроверьте код пошагово ещё раз. Правильные ли теги использованы, соответствует ли структура кода той, что указана в задании, нет ли банальных опечаток в указании стилей, тем ли тегам Вы указали стили.

Expected image to be the same size as the snapshot (1280x1596), but was different (1280x1524).

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

А представьте, что Вы перепутали теги и, скажем, вместо h4 использовали h5. У них разная величина и разные вертикальные расстояния. Опять скажется на высоте. Или, например, случайно применили где-то тег <b></b> или ещё что-то подобное и часть текста просто удлинилась и перешла на следующую строчку ... То есть могут быть самые разные причины.

… куда смотреть, что писать, чтоб раз и на всегда уяснить зависимость.

Думаю, что в этом задании надо "идти след в след" за описанием. А общего рецепта, раз и навсегда, наверное, нет.

Чтобы Вас не запутать: У Вас там совсем немного ошибок и валидатор Вам, скорее всего, очень быстро поможет. Удачи!

Ну а Никита провалидирует мой ответ :-) Спасибо.

1

Dodge164

Спасибо! Сервис валидатор действительно помог найти ошибки в коде, после исправления показал, что Document checking completed. No errors or warnings to show. Однако тесты по-прежнему не проходят из-за ошибки Expected image to be the same size as the snapshot (1280x1596), but was different (1280x1524). Вопрос остается открытым.

0

Anna kra_

Ну, раз починили код и с этой стороны подвоха быть не может, смотрим дальше :-)

У Вас не хватает этих элементов:

Семантический HTML
Доступность

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

Попадает под пункт моего описания "Или Вы использовали какие-то дополнительные теги или, наоборот, какие-то пропустили."
В этом случае - пропустили вместе с текстом. Видите сейчас ошибку?

1

Nikita Mikhaylov

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

Вам удалось разобраться в ошибке после комментариев Анны?

0

Dodge164

Да, спасибо Анне. Ее ответ уже отмечен как решение. Тесты прошли.

1

Александр Никитин

Anna kra_, Привет!!подскажи тут где ошибка? FAIL tests/index.test.js

● Test suite failed to run

SyntaxError: /usr/src/app/__tests__/index.test.js: Unexpected token, expected ";" (35:3)

  33 |     const image = await template.screenshot();
  34 |     expect(image).toMatchImageSnapshot(settings.imageSnapshot);
> 35 |   });
     |    ^
  36 | });
  37 |

  at Parser._raise (../../lib/node_modules/babel-jest/node_modules/@babel/parser/src/parser/error.js:60:45)
0

Anna kra_

Александр, привет!

Нужна ссылка на code reviews и отдельный топик, чтобы его все заметили. Здесь вопрос может зависнуть без ответа.

Сделай, пожалуйста, новый топик и ответ гарантированно будет, притом быстро – или от менторов или от соучеников :-)

0

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Похожие вопросы

Александр Чадаев 6 дней назад →

Здравствуйте, "Инструменты Раздел HTML содержит маркированный список из трёх заголовков четвёртого уровня:"...

Алексей Заборовский 6 дней назад →

Добрый день! Выполнил данное задание. Получилось - следующее: https://ru.hexlet.io/code_reviews/363595 Не п...

user-4be83f6c3928412c 07 января 2021 →

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

Станислав Лаврентьев 02 января 2021 →

Такое ощущение, как будто не хватает стилей для задания, нет отступов, цвета только для списка определений....

Даниил Першин 31 декабря 2020 →

Задание: Создайте разметку... Что сделал? Сделал разметку(код_ревью) (https://ru.hexlet.io/code_reviews/357...