Cypress tests organizing (or any e2e/ui tests)

Nowadays cypress is quite a hype technology (I am saying this in Fall 2020, everyone knows how rapidly js world can change ;))

"Cypress is a next generation front end testing tool built for the modern web."

https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshel

I had some experience with Behat and other types of tests like unit/integarational, but today I will tell you about e2e.

When I wrote Behat tests I didn't think a lot about how to structure my test cases in a maintainable way. This led me to the antipattern called "Single-Layer Architecture"[1].

Extending such tests quickly becomes a mess and tends to become an ineffective work:

  1. You can't focus on business logic, you always need to remember low-level details to introduce a new step definition
  2. Your low-level solutions are often duplicated, and you even don't notice that
  3. Changing testing framework means rewriting or updating all step definitions!

Fortunately there is an approach which is very easy to follow and which mitigates mentioned issues.

Версионность ассетов при использовании gulp

assetsПри изменении клиентского кода нужно как-то заставить браузер клиента перезагрузить измененные файлы. Эта проблема достаточно распространенная. Скорее всего, вы столкнетесь с ней вне зависимости от того, какими технологиями пользуетесь при веб-разработке. Этот пример о решении проблемы при создании фронтенд проекта с использованием javascript и gulp.

Решить можно несколькими способами.

Пусть, например, 7e50961489 - это новая версия ассетов. На самом деле, она может быть любой, главное, чтобы отличалась от тех, что были раньше. Можно просто нумеровать - 1, 2, 3 и т.д. Но так не слишком удобно. Дальше станет понятно, почему.

Gulp-файл для frontend проекта

Решение не претендует на идеальность. Но вполне подойдет для разработки небольшого frontend проекта, написанного с использованием coffeescript и less. Важное замечание: использование бекенда не предусмотрено. Nodejs использован только для билда ассетов (такое решение удобно, к примеру, если вы планируете создать гибридное оффлайн приложение для смартфона).

Ключевые особенности нашего проекта, и, как следствие, gulp-файла:

1)  Поддерживает разные среды (prod, dev, etc)

2) Компиляция и минификация less, CoffeScript файлов, объединение нескольких в один (конкатенация)

3) Поддержка тестов (jasmine)

4) В dev-среде работает watch (динамически перебилдивает ассеты при изменении исходников)

Инкапсуляция с помощью замыканий в JavaScript

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

Если переменная или объект в JavaScript не помещены внутрь какой-либо функции, то они становятся глобальными. Все глобальные элементы в JavaScript являются свойствами глобального объекта. Для браузера это объект window. При этом конструкции for, if и другие не влияют на видимость переменных.

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

Поворот изображения на html5 canvas

Возможно, вы уже знаете что есть удобный метод canvas context drawImage:

context.drawImage(image, x, y);
где image - это DOM изображение (или другой canvas), x, y - левый верхний край изображения. Также там есть несколько опциональных параметров, но мы не будем их сегодня использовать.