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."

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.

Asset versioning when using gulp

assetsWhen changing client code, you need to somehow force the client's browser to reload the modified files. This problem is quite common. Most likely, you will encounter it regardless of the technologies you use in web development. This example is about solving the problem when creating a frontend project using JavaScript and Gulp.

You can solve it in several ways.

Let's say, for example, 7e50961489 is the new version of the assets. Actually, it can be any version, the main thing is that it should be different from the previous ones. You can simply number them - 1, 2, 3, etc. But it's not very convenient. Later it will be clear why.

Sequence Master Game

Sequence Master Game - a game to test reaction speed. Click on the largest number among the available ones (you can choose multiple numbers at each step) and share your high score with friends.

Key features/gameplay:

1) There are 7 levels available

2) Within the given time, you must click the numbers from largest to smallest.

3) Points are awarded for each selection. The number of points depends on the player's selection speed and the value of the selected number. In case of a mistake, the game does not end, but a penalty is applied.

4) The game ends if you fail to select the correct number within the allocated time. After the game ends, you have the option to share your results.

5) Responsiveness (should work on smartphones), animation, and other bells and whistles =).

You can play by following this link:

Gulp file for frontend project

The solution is not perfect. But it is suitable for developing a small frontend project written in coffeescript and less. Important note: the use of backend is not provided. Nodejs is only used for building assets (this solution is convenient, for example, if you plan to create a hybrid offline application for smartphones).

The key features of our project, and as a result, the gulp file:

1) Supports different environments (prod, dev, etc)

2) Compilation and minification of less, CoffeScript files, combining multiple into one (concatenation)

3) Support for tests (jasmine)

4) In the dev environment, watch is functioning (dynamically rebuilds assets when source files are changed)

Encapsulation using closures in JavaScript

One of the unusual features of JavaScript is encapsulation using closures. It is unusual because in many other programming languages, this mechanism is implemented using classes. In JavaScript, however, there is a different mechanism that may seem strange if you don't understand the nuances of variables and functions.

If a variable or object in JavaScript is not placed inside any function, they become global. All global elements in JavaScript are properties of the global object. For browsers, this object is window. At the same time, statements like for, if, and others do not affect the visibility of variables.

Creating global variables is generally undesirable as it can lead to hard-to-detect errors and makes it difficult to transfer code to other applications.

Localization of numeric/monetary data

When developing a medium to large project, there is a problem with localizing numeric/money data. In this note, I will talk about the difficulties of using the Symfony framework, Sonata Admin Bundle, and the client-side. But first, let's discuss the essence of the problem, as it is not very obvious at first glance.

So, let's say we have a project that renders numeric/money data on the server side (php/template engine). They should be displayed according to the set locale. The user can enter data (in their own representation). At the same time, the data can be processed on the client side (javascript). For example, in most European countries, except for the UK and Ireland, the decimal separator is a comma while in the UK and Ireland it is a period. Naturally, a user from Germany will enter data with a comma separator.