DEV Community: Hugo

Testing custom Apollo hooks with React Testing Library

Hugo — Sun, 29 Mar 2020 01:04:17 +0000

The other day, checking my code, I found a graphQL query that was repeating in many places. So I decided to put that query into a custom hook. That was the easy part, the hard part was to know how to test it. This is how I did it:

For this tutorial, we will be using this Public GraphQL API for information about countries to fetch the country’s names and codes. This is the query:

query {
  countries {
    name
    code
  }
}

Now it’s time to create our custom hook, which it’s pretty straightforward.
The custom hook has two duties, the first one is to fetch the list of countries and the second one is to concatenate the country’s name and code.

/**
 * Custom hook to fecth a list of countries
 *
 * @export
 * @param {Object} [options={}] Apollo Query Options
 * @returns {Object} Object with the the countries, loading, and error variables.
 */
export default function useCountries(queryOptions = {}) {
  const { loading, error, data } = useQuery(COUNTRIES, queryOptions);
  const countries = useMemo(() => {
    if (data) {
      return data.countries.map(country => `${country.name} - ${country.code}`);
    }
  }, [data]);
  return { loading, error, countries };
}

Let’s see it in action

import React from "react";
import useCountries from "./hooks/useCountries";
import "./styles.css";

export default function App() {
  const { loading, error, countries } = useCountries();

  function renderCountryList(country, index) {
    return (
      <div className="list-item" key={index}>
        {country}
      </div>
    );
  }

  if (loading) {
    return <h2>Loading countries</h2>;
  }

  if (error) {
    return <h2>Uppps! There was an error</h2>;
  }

  return (
    <div className="App">
      <h1>List of Countries</h1>
      {countries.map(renderCountryList)}
    </div>
  );
}

How to test it

Now comes the fun part, how to test that hook. We will be using React Testing Library, @apollo/react-testing to mock our Apollo Provider, and react-hooks-testing-library

Let's start by creating our test cases and our mocked responses. We will be testing when it gets the list of countries successfully and when there is an error.

import React from "react";
import useCountries, { COUNTRIES } from "./useCountries";

describe("useCountries custom hook", () => {
  // :: DATA :: 
  const mexico = {
    name: "Mexico",
    code: "MX"
  };
  const argentina = {
    name: "Argentina",
    code: "AR"
  };
  const portugal = {
    name: "Portugal",
    code: "PT"
  };

  // :: MOCKS :: 
  const countriesQueryMock = {
    request: {
      query: COUNTRIES
    },
    result: {
      data: {
        countries: [argentina, mexico, portugal]
      }
    }
  };

  const countriesQueryErrorMock = {
    request: {
      query: COUNTRIES
    },
    error: new Error("Ohh Ohh!")
  };


  it("should return an array of countries", async () => {});

  it("should return error when request fails", async () => {});
});

First test case

The first test case checks that our hook returns an array of countries.

If you read the documentation of react-hooks-testing-library
, you know that we have to wrap our hook in renderHook:

const { result, waitForNextUpdate } = renderHook(() => useCountries());

But because we are using useQuery from Apollo inside our hook, we need to use MockedProvider to wrap renderHook and Mock the responses. We can use the wrapper option for renderHook to do that.

// Apollo Mocked Provider Wrapper
const wrapper = ({ children }) => (
  <MockedProvider>
    {children}
  </MockedProvider>
);

const { result, waitForNextUpdate } = renderHook(() => useCountries(), {
  wrapper
});

Because we will be using that code in both of our test cases, we can move it into a function

function getHookWrapper(mocks = []) {
  const wrapper = ({ children }) => (
    <MockedProvider mocks={mocks} addTypename={false}>
      {children}
    </MockedProvider>
  );
  const { result, waitForNextUpdate } = renderHook(() => useCountries(), {
  wrapper
  });
  // Test the initial state of the request
  expect(result.current.loading).toBeTruthy();
  expect(result.current.error).toBeUndefined();
  expect(result.current.countries).toBeUndefined();
  return { result, waitForNextUpdate };
}

Now we test the first case.

 it("should return an array of countries", async () => {
  const { result, waitForNextUpdate } = getHookWrapper([countriesQueryMock]);
  // Wait for the results
  await waitForNextUpdate();
  // We access the hook result using result.current
  expect(result.current.loading).toBeFalsy();
  expect(result.current.error).toBeUndefined();
  expect(result.current.countries).toEqual([
    `${argentina.name} - ${argentina.code}`,
    `${mexico.name} - ${mexico.code}`,
    `${portugal.name} - ${portugal.code}`
  ]);
});

Second test case

The second test case it's pretty similar, but now we test when there's an error.

it("should return error when request fails", async () => {
  // Similar to the first case, but now we use countriesQueryErrorMock
  const { result, waitForNextUpdate } = getHookWrapper([
    countriesQueryErrorMock
  ]);
  await waitForNextUpdate();
  expect(result.current.loading).toBeFalsy();
  expect(result.current.error).toBeTruthy();
  expect(result.current.countries).toBeUndefined();
});

As you can see, it's not that hard once you know how to do it. Here is the code in case you need it.

Thanks for reading.

How to build a price scraper using JavaScript and cheerio.js

Hugo — Wed, 30 Oct 2019 16:58:38 +0000

Motivation

A few months ago I decided to build a computer, and I wanted to save some money, so I started using Keepa, a Chrome extension that monitors Amazon prices and notifies you when the price of a product drops below of the price you defined. The problem is that I was buying the pieces on Amazon, and another couple of pages.

So I decided to create something similar to Keepa using Node, Cheerio.js and React.

Description

There is a cron that runs every hour and goes and checks the prices of the products that you are tracking. If the price obtained is less than the desired price, an email is sent to you. Price logs are also stored to show historical price changes.

Let's start

Today I will teach you to make a simple scraper similar to the one I did. I will skip a couple of things to make this easier to understand.

Note:
I will use CyberPuerta which is a Mexican page to buy computer parts, and one of the pages I used in the project, but you can use the one you like.

Let's imagine you want to buy a cool but expensive monitor, something like this one:

The first thing you need to start the scraper is the link of the page you want to get information from, in this case, it is the following:

https://www.cyberpuerta.mx/Computo-Hardware/Monitores/Monitores/Monitor-Gamer-Curvo-ASUS-ROG-Strix-XG35VQ-LED-35-Quad-HD-Ultra-Wide-FreeSync-100Hz-HDMI-Negro-Gris-Rojo.html?nosto=shop_api_home0_1

Then, we need to obtain the information that is important to us, in this case, it is only the price, and we need a way to identify that piece of information through an HTML selector, so we open our developer tools and press this little icon to select an element in the page and inspect it, and finally we click on the price.

and we get this:

<span class="priceText">$ 16,489.00</span>

As I said before, we need a way to identify the price, and not other things, using a selector. The best thing would be to use an id since it is unique but in this case, all we have is the class, so we will have to identify the price that way.

Sometimes it is easy because the class turns out to be unique, as in this page, but if it is not your case, something you can do to identify the element is to right-click on the element and select copy > copy selector which gives you this:

#productinfo > form > div.detailsInfo.clear > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(4) > div.medium-7.cell.cp-pr > div > div > div.mainPrice > span.priceText

Now comes the fun part, let’s code.

Installation

We need to install three dependencies:

axios to make HTTP requests (npm install axios)
cheerios, a library similar to jQuery but for the server. ( npm install cheerio)
node-cron to run the scraper every hour (npm install --save node-cron)

First, we need to have the link we want to scrap, the desire price and the selector for the price, so we create a few variables to store them.

const productPage = 'https://www.cyberpuerta.mx/Computo-Hardware/Monitores/Monitores/Monitor-Gamer-Curvo-ASUS-ROG-Strix-XG35VQ-LED-35-Quad-HD-Ultra-Wide-FreeSync-100Hz-HDMI-Negro-Gris-Rojo.html?nosto=shop_api_home0_1'
const desiredPrice = 15000
const selector = '.priceText';

Next, we need to get the page to start scraping it, so we make an HTTP request to obtain the HTML of the page

const axios = require('axios');
/* ... */
async function getHTML (url) {
  const { data: html } = await axios.get(url).catch(() => {
    console.log("Couldn't get the page ☹️")
  })
  return html
}

Now we have the HTML, we need to find the price, here is where the selector comes handy:

const cheerio = require('cheerio');
/* ... */
function scrapPrice(html) {
  const $ = cheerio.load(html); //First you need to load in the HTML
  const price = $(selector)
    .text() // we get the text
    .trim();
    return price;
}

if we run this function we get this $ 16,489.00, but if we want to compare this price we need it to be a number, so I found this function to convert a currency string to a number

const currencyStringToNumber = currency => Number(currency.replace(/[^0-9.-]+/g, ''));

Finally, we need to schedule a task using node-cron. The app will be running in the background and checking the price every hour.

const cron = require('node-cron')

/* ... */
cron.schedule('0 * * * *', async () => {
  console.log('running a task every hour ⏲️');
  const html = await getHTML(productPage).catch(console.log);
  const currentPrice = currencyStringToNumber(scrapPrice(html));
  if (currentPrice < desiredPrice) {
    console.log('Congratulations! you just saved some bucks 💵');
  }
});

And that’s it, you have a simple, but powerful scraper. You can add more logic or get any other kind of data now that you know the basics.

If you have any question please let me know

And here is the code if need it.

Let's build a Todo App Using Vue.js

Hugo — Fri, 01 Mar 2019 05:31:17 +0000

When you are starting to learn a new programming language or framework, a TODO app is one of the first things you build, many people hate it, others love it, personally I think it’s a great option to give you an idea of how a language/framework works. So now that I'm learning Vue.js I decided to create one.

This is the final result:
TODO Vue Finished - JSFiddle

We will simply use Vue.js and NES.css for styles.

And because it is a simple app we will be using JSFiddle, here is the base project if you want to follow the tutorial:
So let’s start.

As we can see, we have three tabs: HTML, Vue, and CSS.
In the HTML tab, we only have a <link> to get the Press Start font and a div with a header inside. The important thing here is to point out that this is where we will have access to all the variables and methods that we will use in our Vue file.

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<div id="app"> 
    <h1>TODOS:</h1>
</div>

While in the Vue tab we have our Vue instance and this is where all the logic of the app will be.

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: 'todo 1', done: false, id: Date.now() },
      { text: 'todo 2', done: false, id: Date.now() + 1 }
    ]
  },
  methods: {

  }
})

Within the properties that we pass to Vue instance is el and it serves to indicate to Vue in which DOM element it is going to be mounted.
In the same way, we have data and guess what, it is used to store all the data that we use during the app, which in this case will only be an array of objects called todos.

Finally, we have methods, here we will put all the functions of the app.

As mentioned above, we can access all the variables defined in data inside the div and we can check it simply by adding a new variable called title and to access it we use the following syntax inside our HTML: {{variableName}}. Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data.

data: {
  title: 'TODOS',
  todos: [
    { text: 'todo 1', done: false, id: Date.now() },
    { text: 'todo 2', done: false, id: Date.now() + 1 }
  ]
}

<div id="app">
  <h1>{{title}}:</h1>
</div>

Before coding the app logic, let’s define what the app should do:

It should display a list of TODOs.
It should add TODOs.
It should delete TODOs.
It should mark TODOs as Done.

Showing TODOs

If you remember, we already have an array of objects in data to store TODOs.

data: {
  title: 'TODOS',
  todos: [
    { text: 'todo 1', done: false, id: Date.now() },
    { text: 'todo 2', done: false, id: Date.now() + 1 }
  ]
}

We want to show the TODO text and the state on a list.

<ul>
  <li class="flex"></li> 
</ul>

This is the base structure, now we simply have to show the array data and we can do it using the template syntax {{}}

<ul>
  <li class="flex"> {{todos[0].text}} </li> 
  <li class="flex"> {{todos[1].text}} </li>
</ul>

But that is something repetitive, fortunately, Vue offers a directive called v-for that allows us to iterate over the elements of an array. So we can refactor the previous code in the following:

<ul> 
  <!-- Remember that todos is the name of our array --> 
  <li v-for="todo in todos" class="flex"> 
    <!-- and now, we can access to an item using todo--> 
    {{todo.text}} 
  </li>
</ul>

Adding TODOs

To add TODOS we need an input field.

<input type=“text” class=“nes-input” placeholder="Add todo…">

What we want to do is add a TODO every time the enter key is pressed. Vue allows us to listen for events using the syntax of v-on:some-event="doSomething", in this case, what we need is to use v-on:keyup.enter, here, keyup is the event we want to hear and enter the key that we need to trigger addTodo.

<input type="text" class="nes-input" placeholder="Add todo..." v-on:keyup.enter="addTodo">

Now, we just add our method addTodo

methods: {
  addTodo(event) {
    const text = event.target.value
    this.todos.push({text, done: false, id: Date.now()})
    event.target.value = ''
  }
}

We almost finished, we just need to remove TODOs and mark them as done.

[x] It should display a list of TODOs
[x] It should add TODOs
[ ] It should remove TODOs
[ ] It should mark TODOs as Done

Remove TODOs

The first thing we do is add a button to remove TODOs:

<li v-for="todo in todos" class="flex">
  <!-- and now, we can access to an item using todo-->
  {{todo.text}}
  <div class="space"></div>
  <button class="nes-btn is-error padding">X</button>
</li>

Now, what we have to do is listen for an onclick event, following the syntax for the events v-on:some-event="doSomething", we get this v-on:click ="removeTodo(todo.id)". We will call the removeTodo method and pass it the todo id. After that, we need to create that method.

<ul>
  <li v-for="todo in todos" class="flex">
    {{todo.text}}
    <div class="space"></div>
    <button class="nes-btn is-error padding" v-on:click="removeTodo(todo.id)">X</button>
  </li>
</ul>

removeTodo(id) {
  this.todos = this.todos.filter(todo => todo.id !== id)
}

Marking TODOs as done

Finally, we just need to mark the TODOs as done, for this, we will add a checkbox.

<ul>
  <li v-for="todo in todos" class="flex">
    <label>
      <input type="checkbox" class="nes-checkbox">
      <span>&nbsp</span>
    </label> 
    {{todo.text}}
    <div class="space"></div>
    <button class="nes-btn is-error padding" v-on:click="removeTodo(todo.id)">X</button>
  </li>
</ul>

We put the checkbox inside a label and we add a span with a space because NES.css has a bug, and if you don't do it this way, it doesn't show the checkbox.
Well, here we have to do two things, first, we want that every time the checkbox is pressed, change the todo state from done: false todone: true and vice versa, so what do we need? you guessed, an event listener:

<input type="checkbox" class="nes-checkbox" v-on:click="check(todo)">

And we add the check method:

check(todo){
  todo.done = !todo.done
}

And that's it, we're done, right? well, not quite, there is a small bug in our app. Let's do this, let's change one of our TODOs from done: false a done: true

data: {
  title: 'TODOS',
  todos: [
    {text: 'todo 1', done: false, id: Date.now()},
    {text: 'todo 2', done: true, id: Date.now() + 1}
  ]
}

There's the bug, our checkbox is not "synchronized" with the state of our TODO, so we have to use something called v-bind so that the checked property of the input is bind with the done property of our TODO, the syntax is this: v-bind:checked ="todo.done"

<input type="checkbox" class="nes-checkbox" v-on:click="check(todo)" v-bind:checked="todo.done">

We're about to finish, we just need to add a little visual detail, we want that if the TODO is marked as done, strike the text like this:

This is pretty easy to do, we just use v-if and v-else

<ul>
  <li v-for="todo in todos" class="flex">
    <label>
      <input type="checkbox" class="nes-checkbox">
      <span>&nbsp</span>
    </label> 
    <!-- WE DELETE THIS: {{todo.text}} -->
    <del v-if="todo.done">{{ todo.text }}</del>
    <span v-else>{{ todo.text }}</span>
    <div class="space"></div>
    <button class="nes-btn is-error padding" v-on:click="removeTodo(todo.id)">X</button>
  </li>
</ul>

And now we are done.

Refactoring our App

I know I said that we had finished, but we can refactor the code a little bit, Vue has something called v-model, which allows us to replace the v-bind and the v-on:click in our checkbox. According to the vue documentation this:

<input v-model=“searchText”>

It is the same as this:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

So let’s refactor our app. We replace v-on:click="check(todo)" and v-bind:checked="todo.done" for v-model="todo.done", and now we can also delete the check method.

<input type="checkbox" class="nes-checkbox" v-model="todo.done">

Now we've really finished.

As you can see, Vue it's very simple and easy to learn. To get started, all you need is familiarity with HTML and some JavaScript. If you have experience with other frameworks such as React or Angular the process of learning Vue is much simpler.

I hope you liked it.