Как стать автором
Обновить

Когда вредно тестировать ваши компоненты

Блог компании Wrike Разработка веб-сайтов *JavaScript *Angular *ReactJS *
image

Автоматизированные тесты – это хорошо. Проект, который на 100% покрыт тестами, преподносит покрытие как преимущество. Но…

Думаю, что в этом процессе нет осознанности. А она сильно облегчает жизнь. Возможно, что половина тестов в вашем проекте не только бесполезна, более того — несет вред. Ниже расскажу о том, какие тесты писать не нужно.
Читать дальше
Всего голосов 28: ↑24 и ↓4 +20
Просмотры 13K
Комментарии 37

Тестирование React-Redux приложения

ReactJS *
Туториал
image

Время чтения: 13 минут


Много ли вы видели react разработчиков, которые покрывают свой код тестами? А вы-то тестируете свои? Действительно, зачем, если мы можем предсказать состояние компонента и стора? Ответ довольно прост: чтобы избежать ошибок при изменениях в проекте.

Всех, кого заинтересовало, приглашаю под кат.
Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 44K
Комментарии 4

Jest и Puppeteer: автоматизация тестирования веб-интерфейсов

Блог компании RUVDS.com Разработка веб-сайтов *JavaScript *Node.JS *Тестирование веб-сервисов *
Перевод
Эту статью написал программист из Италии Валентино Гаглиарди. Он говорит, что сразу после выхода Puppeteer его заинтересовала автоматизация тестирования веб-интерфейсов с использованием данной библиотеки и Jest. После этого он приступил к экспериментам.



Здесь речь пойдёт об основах работы с Puppeteer и Jest на примере тестирования веб-формы. Также тут будут рассмотрены особенности использования Chromium с пользовательским интерфейсом и без него, и некоторые полезные мелочи, касающиеся различных аспектов тестирования веб-страниц и организации рабочей среды. Валентино полагает, что, хотя Puppeteer — инструмент сравнительно новый и его API вполне может подвергаться изменениям, у него есть шанс занять достойное место в арсенале веб-разработчиков.
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 41K
Комментарии 8

Модульное тестирование react компонетнов withRouter (jest, enzyme)

Веб-дизайн *Разработка веб-сайтов *JavaScript *Node.JS *ReactJS *
При разработке модульных тестов для react компонента, обернутого в вызов withRouter(Component) столкнулся с сообщением об ошибке, что такой компонент может существовать только в контексте роутера. Решение этой проблемы очень простое и не должно по идее вызывать вопрсов. Хотя почему-то ссылки на документацию https://reacttraining.com/react-router/web/guides/testing Google упорно отказывался выдавать. Меня это совсем не удивляет, т.к. документация написано как чистое SPA-приложение без всякого там SSR и с точки зрения поисковой машины выглядит вот так:

Показать изображение
image

Кому достаточно документации может на этом закончить чтение. А для себя я сделаю несколько заметок под катом.
Читать дальше →
Всего голосов 14: ↑13 и ↓1 +12
Просмотры 10K
Комментарии 2

Unit-тестирование скриншотами: преодолеваем звуковой барьер. Расшифровка доклада

Блог компании AvitoTech Разработка веб-сайтов *JavaScript *Программирование *Тестирование веб-сервисов *

Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Всё время смущали вопросы простоты поддержки и применения, но в большей степени — пропускная способность решений. Хотелось, чтобы это было что-то простое в использовании и быстрое в работе. Готовые решения не подошли, и мы взялись делать свое.


Под катом расскажем, что из этого вышло, какие задачи решали, и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов. Этот пост — расшифровка доклада, который прозвучал на HolyJS 2017 Moscow. Видео можно посмотреть по ссылке, а почитать и посмотреть слайды — далее.


Всего голосов 42: ↑40 и ↓2 +38
Просмотры 25K
Комментарии 12

Удобный способ тестирования React-компонентов

Разработка веб-сайтов *Node.JS *Тестирование веб-сервисов *ReactJS *
Я написал построитель дополнительных отчетов (custom reporter) для Jest и выложил на GitHub. Мой построитель называется Jest-snapshots-book, он создает HTML-книгу снимков компонентов React-приложения.



В статье речь пойдет о том, что такое Jest, snapshot-тестирование, для чего вообще понадобился дополнительный построитель отчетов и как их писать. В основном все это относится к тестированию React-компонентов, но теоретически можно применять при работе с любыми сериализуемыми данными.
Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 24K
Комментарии 0

Introscope: ну очень ленивое unit-тестирование

JavaScript *

Мы на работе пишем много часто меняющейся бизнес-логики на JS (стартап же). Даже слишком много. И всё это хочется по старой привычке тестировать, но как-нибудь побыстрее, чтобы тесты особо не мешали говнокодить, когда это нужно, и не подгонять под тесты особенно сильно структуру модулей. В какой-то момент пришла мысль, что можно это еще и автоматизировать как-то с помощью простенького babel-плагина, чтобы он для начала все приватные переменные и методы выворачивал в тестовой среде, а в продакшене не трогал. Это оказалось довольно просто и увлекательно. Так появился Introscope, которым мы теперь тестируем всё более-менее сложное.

Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 3.1K
Комментарии 2

Vue, Storybook, TypeScript—starting a new project with the best practices in mind

JavaScript *VueJS *TypeScript *
Туториал


(originally published on Medium)


I like writing React code. This might be an odd introduction to a story about Vue, but you need to understand my background to understand why I’m here discussing Vue.


I like writing React code and I hate reading it. JSX is a neat idea for assembling the pieces together fast, Material-UI is amazing solution for bootstrapping your next startup’s UI, computing CSS from JS constants allows you to be very flexible. Yet reading your old JSXs feels awful – even with scrupulous code review practices you might scratch your head not once as you try to figure the intricate nesting of the components.


I’ve heard many things about Vue—the not so new kid on the block—and I finally decided to get my feet wet; bringing in all my mental luggage of React and Polymer (and Angular, but let’s not talk about that).

Read more →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 21K
Комментарии 2

Размыкаем замыкания и внедряем Dependency Injection в JavaScript

Блог компании Developer Soft JavaScript *Программирование *Проектирование и рефакторинг *Node.JS *
Туториал

image


В этой статье мы рассмотрим, как писать чистый, легко тестируемый код в функциональном стиле, используя паттерн программирования Dependency Injection. Бонусом идет 100% юнит-тест coverage.

Читать дальше →
Всего голосов 36: ↑34 и ↓2 +32
Просмотры 19K
Комментарии 17

Полный цикл тестирования React-приложений. Доклад Авто.ру

Блог компании Яндекс CSS *JavaScript *Тестирование веб-сервисов *ReactJS *
Стремление уйти от ручного регрессионого тестирования — хороший повод внедрить автотесты. Вопрос, какие именно? Разработчики интерфейсов Наталья Стусь и Алексей Андросов вспомнили, как их команда прошла несколько итераций и построила тестирование фронтенда в Авто.ру на базе Jest и Puppeteer: юнит-тесты, тесты на отдельные React-компоненты, интеграционные тесты. Самое интересное из этого опыта — изолированное тестирование React-компонентов в браузере без Selenium Grid, Java и прочего.



Алексей:
— Для начала надо немного рассказать, что такое Авто.ру. Это сайт по продаже машинок. Там есть поиск, личный кабинет, автосервисы, запчасти, отзывы, кабинеты дилеров и многое другое. Авто.ру — очень большой проект, очень много кода. Весь код мы пишем в большой монорепе, потому что это все перемешивается. Одни и те же люди делают схожие задачи, например, для мобильных и десктопа. Получается много кода, и монорепа нам жизненно необходима. Вопрос — как ее тестировать?

Читать дальше →
Всего голосов 26: ↑21 и ↓5 +16
Просмотры 22K
Комментарии 3

Modern Environment for React Native Applications

Программирование *Разработка под iOS *Разработка под Android *ReactJS *TypeScript *
Из песочницы
In this article, we will consider the process of setting up a React Native environment using expo-cli, Typescript, and Jest.
Typescript will help us avoid development mistakes and write a more efficient mobile application.

Modern tools allow integrating Typescript into the development environment. We can also use VS Code that supports Typescript.

Integration with React Native will give us the opportunity to use the auto-completion service, code navigation, and refactoring.

Expo is a toolkit that simplifies the creation of native React applications. This tutorial will give you an idea of how you can quickly create native React applications using Expo.


Read more →
Всего голосов 7: ↑6 и ↓1 +5
Просмотры 1.7K
Комментарии 0

Современное окружение для React Native приложений

Программирование *Разработка мобильных приложений *ReactJS *Управление разработкой *TypeScript *
Туториал
Перевод
В этой статье мы рассмотрим настройку React Native окружения с использованием expo-cli, Typescript, и Jest.

Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.

Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.

Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.

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


Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 6.2K
Комментарии 1

Создаём библиотеку по последнему слову техники

JavaScript *TypeScript *

Привет, Хабр. Это статья о том как написать Hello world по последнему слову техники.


В конце мы получим hello world библиотеку которая:


  • Использует typescript
  • Заботится о codestyle
  • Генерирует доку
  • Проводит тесты
Читать дальше →
Всего голосов 18: ↑14 и ↓4 +10
Просмотры 8.6K
Комментарии 8

По следам Angular Meetup #15

Блог компании TINKOFF Angular *Конференции
11 сентября в офисе Тинькофф прошел 15-й Angular Meetup. На нем обсудили монорепозитории, юнит-тестирование с Jest и ts-mockito, а еще то, как Angular помогает построить frontend-команду. В посте — тезисы и видеозаписи докладов и ссылка на фотоотчет со встречи.

image
Всего голосов 15: ↑14 и ↓1 +13
Просмотры 1.5K
Комментарии 0

Разработка в монорепозитории. Доклад Яндекса

Блог компании Яндекс JavaScript *Интерфейсы *Управление разработкой *Системы сборки *
Моё имя Азат Разетдинов, я в Яндексе уже 12 лет, руковожу службой разработки интерфейсов в Я.Недвижимости. Сегодня я хотел бы поговорить про монорепозиторий. Если у вас всего один репозиторий в работе — поздравляю, вы уже живете в монорепозитории. Теперь о том, зачем он нужен другим.



Как сказала руководитель службы разработки API Яндекс.Карт Марина Перескокова — посадил дед монорепу, выросла монорепа большая-пребольшая.

Читать дальше →
Всего голосов 31: ↑24 и ↓7 +17
Просмотры 20K
Комментарии 40

Тестирование Реакт UI компонентов

Тестирование веб-сервисов *ReactJS *

Что я делаю сейчас


В настоящее время я тестирую реализацию кода. Такие тесты ломаются каждый раз после рефакторинга, особенно в компонентах пользовательского интерфейса. В итоге я провожу кучу времени, копаясь в файлах .test.js, паралельно приследуюя магическую цифру в 80% для Test Coverage.


Что я должен делать


При написании любого типа тестов, включая модульное тестирование, я должен меньше думать о коде который я тестирую, а больше о том, что делает данный код. Это означает писать тесты, имитирующие поведение пользователя. Даже на самом низком уровне.

Читать дальше →
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 8.7K
Комментарии 1

Интеграция проекта VueJS+TS с SonarQube

Блог компании Ingram Micro Cloud Open source *DevOps *VueJS *TypeScript *
Туториал
🔥 Технотекст 2020

В своей работе мы активно используем платформу SonarQube для поддержания качества кода на высоком уровне. При интеграции одного из проектов, написанном на VueJs+Typescript, возникли проблемы. Поэтому хотел бы рассказать подробней о том, как удалось их решить.



В данной статье речь пойдет, как писал выше, о платформе SonarQube. Немного теории — что это такое вообще, для тех, кто слышит о ней впервые:


SonarQube (бывший Sonar) — платформа с открытым исходным кодом для непрерывного анализа (англ. continuous inspection) и измерения качества кода.
Поддерживает анализ кода и поиск ошибок согласно правилам стандартов программирования MISRA C, MISRA C++, MITRE/CWE и CERT Secure Coding Standards. А также умеет распознавать ошибки из списков OWASP Топ-10 и CWE/SANS Топ-25 ошибок программирования.
Несмотря на то, что платформа использует различные готовые инструменты, SonarQube сводит результаты к единой информационной панели (англ. dashboard), ведя историю прогонов и позволяя тем самым увидеть общую тенденцию изменения качества программного обеспечения в ходе разработки.

Более подробно можно узнать на официальном сайте


Поддерживается большое количество языков программирования. Судя по информации из ссылки выше — это более 25 языков. Для поддержки конкретного языка необходимо установить соответствующий плагин. В community-версию входит плагин для работы с Javascript (в том числе typesсript), хотя в wiki написано обратное. За Javascript отвечает плагин SonarJS, за Typescript SonarTS соответственно.


Для отправки информации о покрытии используется официальный клиент sonarqube-scanner, который, используя настройки из config-файла, отправляет эти данные на сервер SonarQube для дальнейшей консолидации и агрегирования.


Для Javascript есть npm-обертка. Итак, начинаем пошаговое внедрение SonarQube в Vue-проект, использующий Typescript.

Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 4.8K
Комментарии 5

Методы борьбы с legacy-кодом на примере GitLab

Блог компании Конференции Олега Бунина (Онтико) Разработка веб-сайтов *JavaScript *Анализ и проектирование систем *Проектирование и рефакторинг *
Можно бесконечно холиварить о том, является ли GitLab хорошим продуктом. Лучше посмотреть на цифры: по итогам раунда инвестирования оценка GitLab составила 2,7 млрд долларов, в то время как предыдущая оценка была $1,1 млрд. Это означает бурный рост и то, что компания будет нанимать все больше и больше фронтенд-разработчиков.

Так выглядит история появления фронтенда в GitLab.



Это график количества фронтендеров в GitLab, начиная с 2016 года, когда их не было вообще, и заканчивая 2019-м, когда их стало уже несколько десятков. Но сам GitLab существует 7 лет. Значит, до 2017 года основной код на фронтенде писали бэкенд-разработчики, хуже того, бэкенд-разработчики на Ruby on Rails (ни в коем случае никого не хотим обидеть и ниже поясним, о чем идет речь).

За 7 лет любой проект, хотите вы того или нет, устаревает. В какой-то момент рефакторинг становится невозможно больше откладывать. И начинается полный приключений путь, конечный пункт которого никогда не достигнуть. О том, как это происходит в GitLab, рассказал Илья Климов.

Всего голосов 37: ↑35 и ↓2 +33
Просмотры 10K
Комментарии 5

Тестирование JavaScript кода с Jest для чайников. Часть 1

JavaScript *Тестирование веб-сервисов *
Туториал
Из песочницы
Здравствуй, Хабр! Данное руководство является первой частью в запланированном цикле статей про такой замечательный фреймворк для тестирования как Jest. Материал будет полезен новичкам и тем, кто только знакомится с тестированием, и хотел бы изучить этот фреймворк. В первой части мы разберём: как начать работу с jest, как написать простой тест, и какие есть методы для сопоставления проверяемых значение с ожидаемыми. Кому интересно — добро пожаловать под кат!
Читать дальше →
Всего голосов 10: ↑8 и ↓2 +6
Просмотры 59K
Комментарии 4

Знакомство с Rome от создателей Babel — компилятор, сборщик, линтер, тесты в одном флаконе

Разработка веб-сайтов *


Почти две недели назад вышла запись в блоге по поводу Rome.

Rome представляет собой целый набор инструментов — линтер, компилятор, сборщик, тест раннер и даже больше. Нацелен он на JS, TS, HTML, JSON, Markdown, CSS. Проект пытается унифицировать набор инструментов необходимых для фронт-енд разработки.

Rome монолитный и включает все традиционные инструменты фронт-енд экосистемы. Команда разработчиков называет это toolchain. Важным моментом является, то, что это не попытка объединить существующий набор инструментов, а разработать полностью новый набор инструментов. Все это должно быть в одном пакете и единой кодовой базой.

Rome разрабатывается как замена Babel, ESLint, Webpack, Prettier, Jest и прочих.
Читать дальше →
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 4.9K
Комментарии 8
1