Cypress (or any e2e/ui tests) project structure

Nowadays cypress is a quite 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 и т.д. Но так не слишком удобно. Дальше станет понятно, почему.

Sequence Master Game

Sequence Master Game - игра для проверки скорости реакции. Кликайте по наибольшем среди доступных чисел (можно выбирать несколько чисел на каждом шаге) и делитесь рекордом с друзьями.

Ключевые особенности/геймплей:

1) Доступно 7 уровней

2) За отведенное время вы должны успеть прокликать числа от наибольшего до наименьшего.

3) За каждый выбор начисляются очки. Их количество зависит от скорости выбора игрока и величины выбранного числа. В случае ошибки игра не прекращается, но начисляется штраф.

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

5) Респонсивность (должно работать на смартфонах), анимация и прочие свистелки =).

Поиграть можно перейдя по ссылке: https://rg.folkprog.net

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 и другие не влияют на видимость переменных.

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

Локализация числовых/денежных данных

При разработке более-менее крупного проекта возникает проблема с локализацией числовых/денежных данных. В этой заметке расскажу о мучениях при использовании Symfony framework, Sonata Admin Bundle и клиентской части. Но сначала о сути проблемы, так как на первый взгляд она не очень очевидная.

Итак, допустим у нас есть проект, который на стороне сервера (php/шаблонизатор) рендерит числовые/денежные данные. Они должны отображаться в соответствии с установленной локаллю. Пользователь может вводить данные (в своем представлении). При этом данные могут обрабатываться еще и на клиентской части (javascript). К примеру, в большинстве стран Европы, кроме Великобритании и Ирландии десятичный разделитель запятая, в Великобритании и Ирландии - точка. Естественно, что пользователь с Германии будет вводить данные с раздилителем - запятою.

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

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

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