DEV Community: Tailo Mateus Gonsalves

What have you been learning?

Tailo Mateus Gonsalves — Fri, 23 Jun 2023 18:49:10 +0000

Hey guys, how are you? I hope you are doing great!

So, what was the last thing that you learned or what have you been learning?

By the way, I have been studied about Splunk (https://www.splunk.com)

What are you learning right now?

Tailo Mateus Gonsalves — Wed, 03 Mar 2021 16:57:38 +0000

What projects are you most proud of?

Tailo Mateus Gonsalves — Fri, 05 Feb 2021 20:51:29 +0000

I'm trying a non-tech hobby in my life. Photography helps me clear my mind and see the world from a different perspect.

Share your best non-tech/tech projects with us?

Prioritize the important things

Tailo Mateus Gonsalves — Fri, 26 Apr 2019 11:04:02 +0000

"Do what is important and not what is urgent", this sentence is incredible, unfortunately I don't know who the author is. This may seem a little clichéd, mainly because I know that during the day things don't go as we want, often the train got off the rails and we just became another passenger of our own life, I understand you.

Is what we think important really important?

My decision was painful (I swear), but I removed all channels from youtube, most of the newsletter, greatly reduced the time of social media (almost zero). All this to get time for what I really love to do or where I want to go. Taking care of myself has become PRIORITY.

"Productivity is not about doing many things, but doing things right"

Rethinking goal setting

Tailo Mateus Gonsalves — Mon, 19 Nov 2018 11:17:07 +0000

Listing goals is very important, mainly because you are able to visualize what you want in the future and get a clearer direction. But in reality, it does not matter if you have a long list of goals without a plan of action.

To achieve the goals, I usually have a few steps:

List the goals I want to achieve in this topic, no matter how difficult they are;
I reread the entire list and wonder: Is this item really necessary? If it is not, I just delete it;
With my list reduced, it's time to list all the small actions to reach the goal.
For example, if your goal is to read 24 books in a whole year, but still you have not read any of them, how about starting to read 2 pages a day;
With the new list of actions, we can create good habits and have immediate rewards and faster results.

I try to organize my life this way, for the time being it has helped me a lot.

For you, what's professional happiness?

Tailo Mateus Gonsalves — Wed, 24 Oct 2018 11:00:26 +0000

What's your impossible list?

Tailo Mateus Gonsalves — Sat, 13 Oct 2018 20:28:32 +0000

For example: https://collegeinfogeek.com/about/meet-the-author/my-impossible-list/

Who inspires you and why?

Tailo Mateus Gonsalves — Tue, 09 Oct 2018 21:34:12 +0000

Some tips to improve your life

Tailo Mateus Gonsalves — Thu, 27 Sep 2018 10:00:43 +0000

For some time now I've been looking for and researching ways to improve my life. On this journey I applied some ideas and would like to share them with you.

Always wake up at the same time
Wake up 1 hour before you start work
Get enough sleep and wake up naturally
Drink water when you wake up
Stretch when you wake up
Have breakfast
Do the most difficult task first.
Hydrate yourself during the day.
Learn something new often
Read books or articles
Eat every 3 hours.
Forget your social network feed
Have goals and work on them
Control your money
Do some physical activity
Write about something
Get outside of the house
Watch the sunset or sunrise
Take pictures
Be a minimalist
Plan a trip
Stay in the sun for at least 15 minutes
Keep your focus on goals
Eat healthy food
Learn a new language
Take your dreams off paper
Identify and eliminate a bad habit
Forget the computer for a while
Always sleep the same time

Do you do something else to improve your life? Leave in comments :D

Testing applications with Cypress

Tailo Mateus Gonsalves — Mon, 17 Sep 2018 11:00:59 +0000

End-to-end tests are excellent because they reflect the actions of users. This category of tests behaves like a real human, validating various parts of the application at the same time. Cypress is a new test runner with the premise of being fast, easy and reliable for tests that runs in a browser.

NOTE: The ideal is to always make a test fail, then make it pass and finally refactor it. But for Cypress studies, most of the examples did not follow that order.

What comes next

Cypress instalation
Configuring the test environment
Making our first test
Running our first test
Checking a page element
Testing the responsiveness of our elements
How can we go deeper

Installing Cypress

We can use npm install. Type in your terminal:

npm install --save-dev cypress

If everything goes well, we can now writer our first tests.

Test configuration

I'll use my personal website as an example. By default Cypress expects the integration tests to be inside the cypress/integration folders, so we'll have to create them.

If you do not want to use this default path, you can create a cypress.json configuration file at the root of your directory.

Testing the page title

Our first test is very simple, we'll just check if the page title is working properly.

Inside the cypress/integration folder I created a file called sample-spec.js

describe('Personal website home page', () => {
  it('contains "Tailo Mateus Gonsalves" in the title', () => {
  })
})

The describe has two arguments, a string with the subject and a callback function that executes any code, within this function we can include several it's (several tests). The it function also expects two parameters. The return of the function should check our claim of the test against reality.

To test the homepage we will have to say where it is. As all our tests will be done on this page, so we can add it in a place that always runs before our tests:

describe('Personal Website home page', () => {
  beforeEach(() => {
    cy.visit('https://tailomateus.github.io/')
  })

  it('contains "Tailo Mateus Gonsalves" in the title', () => {
    cy.title().should('contain', 'Tailo Mateus Gonsalves)
  })
})

In the above example we added the cy.visit() function in our beforeEach, so we ensure that before running a test, the code will know which page we are testing. We are claiming that the title of the page contains the name “Tailo Mateus Gonsalves”, you can see other assertions supported here.

Running our first test

Since Cypress is not installed globally, we have to add the path of the bin folder inside our folder node_modules. Use this command at the root of the project:

(npm bin)/cypress open

On my machine it was like that:

node_modules/cypress/bin/cypress open

If all goes well, this interface will open:

The file we created is available, so we can run our test. We have an interface where we can see how our page is behaving and the results obtained.

Checking an element on the page

Now let’s check if an element is actually present on the page. In this test we will validate if the profile image is visible.

As we are testing the same page, we can do in the same describe, just by adding a new it.

it('has a visible profile picture', () => {
  cy.get('.img_profile').should('be.visible')
})

This test uses cy.get() to capture the element. If the element is being loaded asynchronously, this function will wait for defaultCommandTimeout to appear (the default value is 4 seconds and can be set to cypress.json).

Result of our tests:

But if for some reason we made a mistake in the test, the result will be like that:

Testing responsiveness

Let’s do a slightly different test. I currently have to make sure the website will work in different dimensions. That way, all users will be able to use it correctly.

Since we are still testing the same page, we will only add another describe within the existing one. Here we test the width of 320px and check if the profile image is still visible. To change the width for this test, we can use cy.viewport().

describe('with a 320x568 viewport', () => {
  beforeEach(() => {
    cy.viewport(320, 568);
  })
   it('has a visible mobile profile picture', () => {
    cy.get('.img_profile').should('be.visible')
  })
})

By default the size is 1000×660, but we can change it in the configuration file, cypress.json mentioned earlier. You can test any screen size. see how our test was on mobile:

I want to go deeper

In the documentation itself you will find several examples. But if you want something visible, when you install Cypress, you will have a folder called "examples" with more than 100 tests to run.

As you can see in the image, there are several types of functions. One cool thing that has not been explored in this article is how Cypress ranks between the ajax and front-end responses. We can control the results we get from the server.

As your project gains new features, the chances of errors occurring increase dramatically. And I know you do not want that. So just test and start implementing it in your projects.

The codes of the examples are in GitHub.

Acknowledgments: This text was reviewed by Marcos Gobbi

Credits and References:

Cypress Documentation
An Intro to Web Site Testing with Cypress

What should every developer know?

Tailo Mateus Gonsalves — Tue, 28 Aug 2018 17:26:30 +0000

What are you learning right now?

Tailo Mateus Gonsalves — Tue, 21 Aug 2018 17:51:23 +0000

I'm learning MongoDB: https://university.mongodb.com/