#инструмент дня
«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.
И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.
Да и работают там далеко не джуны (даже на аутсорсе, я знаю, о чём говорю).
Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.
Ну и проверять доступность, естественно (хотя бы alt в img).
Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.
А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html
Примеры там имеются. Верстайте правильно, котаны.
#html #jest #validation
«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.
И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.
Да и работают там далеко не джуны (даже на аутсорсе, я знаю, о чём говорю).
Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.
Ну и проверять доступность, естественно (хотя бы alt в img).
Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.
А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html
Примеры там имеются. Верстайте правильно, котаны.
#html #jest #validation
👍20🔥3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Пацаны, тут мне, а я вам, бомбу принесли! Эта штука перевернёт тестирование компонентов.
Мало кто пишет приложения без горячей перезагрузки, но при этом тесты многие пишут вслепую. Зачем?
Ведь можно взять Jest Preview: https://github.com/nvh95/jest-preview
И получить самую настоящую горячую перезагрузку, но заточенную под тесты!
КДПВ говорит сама за себя. Потрясающе просто 😻
Будем внедрять?
Будем внедрять.
#jest #react #js #test
Пацаны, тут мне, а я вам, бомбу принесли! Эта штука перевернёт тестирование компонентов.
Мало кто пишет приложения без горячей перезагрузки, но при этом тесты многие пишут вслепую. Зачем?
Ведь можно взять Jest Preview: https://github.com/nvh95/jest-preview
И получить самую настоящую горячую перезагрузку, но заточенную под тесты!
КДПВ говорит сама за себя. Потрясающе просто 😻
Будем внедрять?
Будем внедрять.
#jest #react #js #test
🔥10👍2👎1
#инструмент дня
В Google Chrome DevTools присутствует такая штука, как Recorder. Это, грубо говоря, инструмент для записи и воспроизведения последовательности взаимодействия пользователя с вашим ресурсом.
Чтобы вытащить его на панель DevTools, нужно нажать «трёхточечное» меню 👉 More tools 👉 Recorder.
Нажать «Начать запись», проделать необходимые операции, ну а дальше — выгрузить в простом JSON, описывающем последовательность, или в виде скрипта для Puppeteer.
И естественно, для этого инструмента уже имеются расширения! Одно из них — Testing Library Recorder.
Как можно догадаться, результатом экспорта будет скрипт для Testing Library.
Я не могу сказать, что результат идеален. Сгенерированный CSS-селекторы всегда выглядят диковато. С другой стороны, он помогает избежать рутины.
Удачи в тестировании, котаны :)
#test #jest #devtools #testinglibrary
В Google Chrome DevTools присутствует такая штука, как Recorder. Это, грубо говоря, инструмент для записи и воспроизведения последовательности взаимодействия пользователя с вашим ресурсом.
Чтобы вытащить его на панель DevTools, нужно нажать «трёхточечное» меню 👉 More tools 👉 Recorder.
Нажать «Начать запись», проделать необходимые операции, ну а дальше — выгрузить в простом JSON, описывающем последовательность, или в виде скрипта для Puppeteer.
И естественно, для этого инструмента уже имеются расширения! Одно из них — Testing Library Recorder.
Как можно догадаться, результатом экспорта будет скрипт для Testing Library.
Я не могу сказать, что результат идеален. Сгенерированный CSS-селекторы всегда выглядят диковато. С другой стороны, он помогает избежать рутины.
Удачи в тестировании, котаны :)
#test #jest #devtools #testinglibrary
👍9❤4👎1