DEV Community: Facundo Ezequiel Diaz Cappella

Using Cypress as e2e testing tool

Facundo Ezequiel Diaz Cappella — Thu, 16 Dec 2021 12:56:38 +0000

Hello! In this post, I going to explain how to implement Cypress but first if you don't know what is Cypress you need to know that is an end to end tool to make automation test in your front-end applications.

Also, I have to say starting to use Cypress was very easy, this tool is popular and you can find plenty of documentation on the official website.

To set up Cypress, you need to have installed in your laptop node js. Also will be good if you have some knowledge of Javascript because Cypress uses this language but is not mandatory because is simple to use and reading this post will be enough.

It's important to say in you made the e2e test before with Protractor the differences with Cypress is you have to create a new repo only to store your e2e tests of Cypress, instead of using the same repo of your front-end application.

Well, to start we need create a new Folder where we are going to save our project, after inside that folder we open a terminal window a run this commands:

1- Initialize project:

npm init -y

2- Install Cypress:

npm i cypress

3- Open Cypress:

npx cypress

When you open Cypress for the first time they will ask if you want to add an example project, we can skip that.

Now you could see that we have a new folder in your project called cypress with this structure:

fixtures (Where you store the data that you need to use for your test cases in a one or more Json files)
integrations (In this folder you create your test cases)

Also we have plugins and supports folders that for now we are going to ignore.

In this example we are going to test Google web page, I recommend create a single file for every test a put the a number as prefix in the file name for example following this way:

Now as you can see every test case start with this line:

/// <reference types="cypress" />

*(If you are using Visual Studio code as your IDE, I recommend adding the plugin "Cypress Snippets" because will help you when you start to write the test cases)

In the first test case of this example, we are testing the suggestions of Google when you search -> "hello world".
Also, I'm using a fixture file to store the values that I will use in the test case, as you can see in line 6 how to read the values stored in your fixture file:

You have to use always the helper "cy." and after that put the name of the method that you want, for example:

cy.visit("www.google.com")

This line is to indicate on which page we are going to run the test case (This is something that we need to do in every test case as the first step).

Another important method is get and the name of the selector, cypress uses the name of the css class of the element to know in which element you want to apply an action.

cy.get("#L2AGLb").click(); // accept google terms

For example, this line is accepting the google terms, you know when you enter to the google page for the first time this popup will appear.

An easy way to get the selector is to use the cypress way, check this gif to see how to do it:

Another important method is should, because works like an assert in a unit test:

    cy.get(":nth-child(2) > .eIPGRd > .pcTkSc > .wM6W7d > span").should(
      "have.text",
      "hello world java"
    );

For example, in this line we are checking that the first suggestion of google when you write in the text-box "hello world", going to be -> "hello world java". If that does not happen your test will fail.

Also, with cypress you can store videos and screenshots when you are running your test, these files going to be saved in the screenshot folder. And If you want to make and screenshot in a specific step of your test you only have to put:

cy.screenshot("screenshotName")

To know more explore my repo to see this example in detail and play a little with that, and create your cypress project:
https://github.com/fsystemweb/cypress-demo

Official Documentation:
https://docs.cypress.io/

Android Game with Angular Ionic

Facundo Ezequiel Diaz Cappella — Wed, 01 Sep 2021 14:57:05 +0000

Hello, I create this post only to share my first trivia game for Android created with Angular Ionic 5.

I did this small game to get some knowledge with Angular Ionic, I already have experience working with Angular, and was easy to adapt to Angular Ionic.

It's a simple game about flags from countries, you have to select the correct one. (I know you can found a thousand games similars)

I still working to improve and fix some bugs, but the game is already done to play.

Also, this game has a ranking where every user can compete with other players.

If you are starting with angular ionic like me and need help creating your first game, let me know I will try to help you.

If you want to download the game for Android:

https://play.google.com/store/apps/details?id=com.fsystem.flageando&gl=ES

Setup Github Actions Angular project

Facundo Ezequiel Diaz Cappella — Thu, 20 May 2021 08:44:27 +0000

Hi! I discover this great ci tool for your Github projects, this is easy way to add ci in your projects, and for example validate your pull request before merge.

Here, I am going to put my scripts of my package.json for ci, this is only an example you need to put your own scripts:

    "test:ci": "ng test --browsers ChromeHeadless --code-coverage --watch=false",
    "sass-lint": "sass-lint -v -c ./sass-lint.yml",
    "format:fix": "pretty-quick --staged",
    "lint": "eslint \"**/*.{ts,tsx}\" --quiet --fix",
    "all-lints": "npm run format:fix && npm run lint && npm run sass-lint"

And now we need to create our "actions" for Github actions this example it's for validate our Pull Request:

First, in your root folder, create a new folder with this name:

.github

Inside the .github folder create new one with the name:

workflows

Finally we create new action-file:

This file have to be .yml, in my case the name of the is "pull-request" but you can whatever you want, the result is this:

This is the content of my flow (pull-request.yml):

name: Pull Request Validations

on: [push, pull_request]

jobs:  
  test:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v1
    - name: Install node
      uses: actions/setup-node@v1 #this will install Node and npm on Ubuntu
      with:
        node-version: '12.x'
    - name: Install dependencies
      run: npm install
    - name: Install Angular CLI
      run: npm install -g @angular/cli > /dev/null    
    - name: Run linters and prettier fix
      run: npm run all-lints
    - name: Run Test
      run: npm run test:ci

Finally, we push our changes and create a Pull Request to join to our master(or main) branch, and automatically our validations will run if this finish with success you will able to merge, if not you need to review the logs, in this screen:

Settings linter in Angular 12

Facundo Ezequiel Diaz Cappella — Thu, 20 May 2021 07:33:20 +0000

The new version of Angular 12 not include linters because TSLint is deprecated.

For that I'm going to put here how to add eslint in Angular 12.

Prerequisites:

Node js -> 12.13.x/14.15.x or later minor
npm
angular/cli -> v12

First step:

 // create project
 ng new my-new-project

Second step:

// install eslint as dev dependency 
npm install --save-dev eslint
// install ts rules plugin
npm i --save-dev @typescript-eslint/eslint-plugin 
// install eslint parser
npm i --save-dev @typescript-eslint/parser

The next step is, add the rules of our linter:

create new file ".eslintrc", on the root folder, with this values:

{
    "parser": "@typescript-eslint/parser",
    "extends": [
      "plugin:@typescript-eslint/recommended",
    ],
    "parserOptions": {
      "ecmaVersion": 2021,
      "sourceType": "module"
    },
    "rules": {
               // custom rules here
    }
}

Last step:
Add this script in package.json

"lint": "eslint \"**/*.{ts,tsx}\" "

For run:

npm run lint

PDFBox create multi-line PDF dynamically

Facundo Ezequiel Diaz Cappella — Fri, 14 May 2021 11:38:39 +0000

Hi, I found this library PDFBox to create pdf documents and when I started to use I feel this library less intuitive than the others I used, for that I think this post will be helpful if you are using pdfbox for the first time.

The First step, will be to add the dependency, you can check here the last version:
MVNRepository

Now we will create a java class, to create a pdf from a big string. This class will be adding a new line for every sentence and after 25 lines will be adding a new page. (Of course, I put 25 lines, but you can put whatever you want).

I will add two constants the font size and leading:

    private final static float FONT_SIZE = 12;
    private final static float LEADING = 1.5f * 12;

If you see the value of leading it's using the font size.

Here you can see the main public method of this class, in my case "the big text" always have the new line code \n , but you can break your text using a different condition, this is to create a new line per sentences:

    private void createMultiLinePagePdf(String text) throws IOException {
        PDDocument doc = new PDDocument();

        // break big text using my endof line flag
        String[] listText = text.split("\n");

        // create new page and add to the document, this is the 
        // first page
        PDPage page = new PDPage();
        doc.addPage(page);


        PDPageContentStream contentStream = new 
        PDPageContentStream(doc, page);

        // here we set the leading and font
        contentStream.setFont(getFont(), FONT_SIZE);
        contentStream.setLeading(LEADING);


        contentStream.beginText();
        contentStream.newLineAtOffset(25, 700);
        int countLines = 0;


        // here we iterate the array with all the sentences, and every 25 lines we add a new page
        for (String textLine : listText) {
       // after 25 lines, we create a new page
            if (countLines == 25) { 
                contentStream.endText();
                contentStream.close();
                countLines = 0;
                contentStream = returnNewPageContent(doc);
            }

            writeLine(doc, contentStream, textLine);
            countLines += 1;
        }
        contentStream.endText();
        contentStream.close();


        doc.save("mypdf.pdf");
        doc.close();


    }

This method writes every line:

    private void writeLine(PDDocument doc, PDPageContentStream contentStream, String textLine) throws IOException {
        contentStream.showText(newLineText);
        contentStream.newLine();
    }

This method create a new page:

    private PDPageContentStream returnNewPageContent(PDDocument doc) throws IOException {
        PDPage page = new PDPage();
        doc.addPage(page);
        PDPageContentStream contentStream = new PDPageContentStream(doc, page);
        contentStream.setFont(getFont(), FONT_SIZE);
        contentStream.setLeading(LEADING);
        contentStream.beginText();
        contentStream.newLineAtOffset(25, 700);


        return contentStream;
    }

And Finally, the get font method:

    private static PDFont getFont() throws IOException {
        return PDType1Font.TIMES_ROMAN;
    }

HostListener how to use

Facundo Ezequiel Diaz Cappella — Sun, 09 May 2021 17:08:28 +0000

Hi, today I will explain how to use the HostListener decorator easily.

First, this decorator we use for:
This decorator is listening for a specific event by the host element

Go to the code example:
Each time you click inside the component, the counter will increase by 1

  @HostListener("click", ["$event"])
  onClickEvent(event: Event) {
    this.clicksCounts += 1;
  }

If you want to know all the events that you can play with HostListener you can see it in w3school list here ->[https://www.w3schools.com/jsref/dom_obj_event.asp]

Angular CLI shortcuts for generating components

Facundo Ezequiel Diaz Cappella — Sun, 09 May 2021 16:02:56 +0000

Sometimes when we need to create a new element, we copy a component and paste renaming the files instead of using the proper command of angular CLI.

I think is important to follow the right approach and use the angular CLI commands because in this way, take it for sure
that you will speed up your times.

For that, I will share with you, what I use the most.

element	command	short way
Component	ng g component nameComponent	ng g c nameComponent
Service	ng g service nameService	ng g s nameService
Enum	ng g enum nameEnum	ng g e nameEnum
Interface	ng g interface nameInterface	ng g i
Module	ng g module nameModule	ng g m nameModule
Guard	ng g guard nameGuard	ng g g
Pipe	ng g pipe namePipe	ng g p

Also, we can indicate some options:

--flat -> with this we can generate the element without create a new directory.
--inline-style or -is -> avoid generate the css file
--inline-template or -it -> avoid generate html file
--skip-tests -> avoid generate spec file