Weeks ago I’ve been assigned on my agile board tasks about the implementation of front-end unit tests in the design system that I and two other brave developer built for our employers.

The result was really good so I started to work on end to end test for the company websites built with our design system and I chose to use Cypress. Our stack is this: Vue.js & Nuxt.js and Apollo + GraphQL.
There was no problem at all once I decided to stub the GraphQL requests.

Cypress is really great BUT Cypress doesn’t support fetch!

Yep, it’s 2019 but no fetch support yet, they are still working on the issue.

But don’t panic! There is a solution! ✨✨✨

So down on the code that’s how I implemented the stubbing.

Create your test file called stubMeBro.js

Then add the secret recipe, remove fetch!

cy.visit('/', {

onBeforeLoad(win) {

delete win.fetch;

},

});

Stub the response:

cy.server();

cy.route(

{

method: 'POST', // Route all POST requests

url: '/graphql', // that have a URL that matches '/graphql'

response: 'foo' // and force the response to be what you want

}

);

Then you can go foward.
Create a fixture folder and add it to the cypress.json configuration
e.g.:

{
  "fixturesFolder":"tests/e2e/fixtures"
}

There you can create a json that mocks the graphQL response

e.g. request-info.json:

{

"data": {

"requestInfo": {

"statusCode": 200,

"notice": {

"type": "success",

"text": "Hello here we go",

},

"__typename": "InfoRequestResponse"

}

}

}

change foo string with the reference to your fixture.

response: 'fixture:request-info.json'

And that’s it!

🎉

Currently I’m learning Vue.js https://vuejs.org/ and I would like to talk a bit about it.
I the last year, as a challenge and to learn how to be a better developer I definitely took what I was always using: Bootstrap & jQuery and I said “So long, and thanks for all the fish”. Dropping them was one of the best thing I ever did because I was able to focus on vanilla JS and React.
Fast foward to these days, a new guy moved in my block, and it’s name is Vue.

I can’t say that was love at first sight, I was looking at him like “what the hell is this? Can i really do things that you usually do with JS, in the markup?!?”

This is an example of a component of mine, that renders a card that contains an episode information for every episode in the episodes object (that is part of a JSON fetched that contains all this information)

<div id=”episode-list”>
 <episode-card
 v-for=”episode in episodes”
 :number=”episode.number”
 :title=”episode.name”
 :image=”episode.image.original”
 :summary=”episode.summary”
 :season=”episode.season”
 @card-selected=”cardSelection($event)”
 >
 </episode-card>
 </div>

see this?

 v-for=”episode in episodes”

Well, I was quite skeptic but then in two days, without any prior knowledge of the framework I was able to go from “hello world” to a web app that displays info for all the Rick&Morty episodes.

When you click an episode, a modal gives you the details

And everything in really a small amount of code lines. Now try to do this in jQuery, if you like Spaghetti Code as a meal every day you should!(I’m italian but I don’t like Spaghetti Code).
But also I think that is more simple to learn than React.

I’ll have fun with Vue.js and we’ll see what happens.

🍝 no more