DEV Community: ViriCruz

How to start practicing TDD while creating a reusable component with React

ViriCruz — Sun, 18 Oct 2020 22:58:22 +0000

This article will try to teach how to practice test-driven development while at the same time teaching how to test a reusable react component.

Requirements before starting

You have installed node.js on your computer
Ensure that npx create-react-app app-name works in your terminal since we are going to use this to create the basic setup of the app
Install enzyme npm i -D enzyme
Install enzyme adapter npm i - D enzyme-adapter-react-16 since we are using version 16 of React
Create or edit src/setupTests.js to match the following code

import '@testing-library/jest-dom/extend-expect';
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({
  adapter: new Adapter()
})

Now that you have done this ensure that you can run the single test that comes with the setup when we created the app.

Run npm test in your terminal and press a to run all the tests, you will see a similar screen like the following:

Once you have done this, let’s delete the test case in file src/App.test.js to start creating our tests.

What do we want to achieve? For this exercise we want to create a Button component that we can reuse multiple times inside our app, specifically we want to be able to set a different text every time we call the Button component.

Let’s Go!

Ok, first, following the TDD principles, we need to create a failing test before creating any code for the Button component and App component.

Before creating our tests, we are going to create a describe block and inside we are going to add beforeAll() function to create appWrapper before every test run that will keep our code DRY.

let appWrapper
  beforeAll(() => {
    appWrapper = shallow(<App />)
  })

appWrapper contains our App component.

Now go to src/App.test.js and the first test case will ensure that App component renders a Button component that will be our submit button.

it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)
})

After writing this line we need to run the tests again and we can see that we have a failing test.

Let’s move on to make the test green. Following the other step of TDD, we need to write only enough code to make the test green.

Let’s create Button.js in the src folder with the following code

export default() => {}

And create the following jsx on App.js to return the Button component.

import React from 'react';
import SubmitButton from './Button'

function App() {
  return <SubmitButton />
}
export default App;

Also, we need to import the Button component in src/App.test.js

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
import SubmitButton from './Button'

describe('App', () => {
  let appWrapper
  beforeAll(() => {
    appWrapper = shallow(<App />)
  })

  it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)
  })
})

Now we have our test in green.

Let’s finish this test by doing an assertion. We are going to inspect if the App contains one Button component by adding the following code to the first test:

expect(submitButton).toHaveLength(1)

Full test looks like this:

it('renders a button component', () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton).toHaveLength(1)
})

Ensure that the test is still green.

So far we’ve made a little bit of TDD by creating a Button component and render it in App component.

Let’s keep practicing!

Our second test is going to inspect if we are passing a prop called value to the Button component

Let’s create a failing test

it('pass value as prop', () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton.props().value).toBeDefined()
  })

We are expecting a prop called value to be defined in the Button component but we received an undefined value.

Let’s make this test green!
To make the test pass, we need to pass a prop called value in the Button component inside the App component


function App() {
  return <SubmitButton value="" />
}

Now our test is green again, congrats!

Let’s do another test to keep practicing TDD, remember practice makes perfect!
For this test, we want to inspect if the value prop is equal to the string “Submit” so we are going to create another failing test.

it("has a value prop equal to 'Submit'", () => {
    const submitButton = appWrapper.find(SubmitButton)

    expect(submitButton.props().value).toEqual('Submit')
  })

As you can imagine this test is going to fail

We need to refactor the Button component inside the App component to make the test green.


import React from 'react';
import SubmitButton from './Button'

function App() {
  return <SubmitButton value="Submit" />
}
export default App;

YES!, all the three tests are passing now

If you get here, Well done! you now have a clear idea of what Test-driven development is.
Just to recap:

write a failing test, just enough code to make the test fails
refactor only the necessary code to make the test green
Then again, write a failing test and then refactor to make the test green and so on

And for final touches, as you can see we are repeating const submitButton = appWrapper.find(SubmitButton) across all our test cases, so let’s refactor this to make our code DRY

let appWrapper, submitButton
  beforeAll(() => {
    appWrapper = shallow(<App />)
    submitButton = appWrapper.find(SubmitButton)
  })

Now we can safely delete const submitButton = appWrapper.find(SubmitButton) in every test and our test will still be green.

Full code:

import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
import SubmitButton from './Button'

describe('App', () => {
  let appWrapper, submitButton
  beforeAll(() => {
    appWrapper = shallow(<App />)
    submitButton = appWrapper.find(SubmitButton)
  })

  it('renders a button component', () => {

    expect(submitButton).toHaveLength(1)
  })

  it('pass value as prop', () => {

    expect(submitButton.props().value).toBeDefined()
  })

  it("has a value prop equal to 'Submit'", () => {

    expect(submitButton.props().value).toEqual('Submit')
  })
})

Additional Resources

A great resource that explains in a very clear way how to do TDD:
TDD Live Coding - Test Driven Development Tutorial with React, Jest, and Enzyme

Find me at github.com/Viricruz

Happy Testing!!

Fetch with Promise.all and async / await

ViriCruz — Mon, 06 Jul 2020 19:56:23 +0000

Fetch with promise.all and async / await

This article is focusing on showing a brief explanation of how to use Promise.all in a real example that I used in one of my recent projects.

You can check the project in the following github repository.

What is Promise.all

Executes promises in parallel and it waits until all of them are ready. Promise.all takes an array of promises and returns a new promise.

The scenario we are going to use and why Promise.all is useful in this example.

Public API we are going to use to fetch data:

https://pokeapi.co/api/v2/type/

Check the official docs for more information.

What do we want to achieve

We want to show a list of pokemon with the name of the pokemon with its respective image.

Obstacles

https://pokeapi.co/api/v2/type/1 returns a list of pokemon that contains the name but not the image URL, instead, it returns a URL where we can fetch more details of the pokemon including the image.

How to solve this case using ES6

One way to solve this is using Promise.all, as we need to wait for all the promises to resolve (we are talking about fetching to the URL that we retrieved in the first fetch) to populate the list of pokemon with the name and the respective image.

How to combine Promise.all with fetch, map, async and await to make a cleaner code

const fetchPokemon = async () => {
    const initial = await fetch('https://pokeapi.co/api/v2/type/1')
    const initialJson = await initial.json()
    //console.log(initialJson.pokemon) // data array

    const detailsData = initialJson.pokemon.map(async i => {
        const preFetchData = await fetch(i.pokemon.url)
        return preFetchData.json()
    })

    // uncomment this code if you want to see how it looks await Promise.all(detailsData)
    // const response = await Promise.all(detailsData)
    // console.log(response)
  const payload = (await Promise.all(detailsData)).map(data => ({
        name: data.name,
        image: data.sprites['front_default']
    }))
  console.log(payload)
}

fetchPokemon()

With the code above, we'll have an array of objects which contain the name and image in each item. This array is ready to use to create a list with HTML and achieve what we pretend.

Live Code

I hope this can help you, there is a ton of use cases where you can apply Promise.all, this is just one of them and, feel free to comment on this article if you like.

How to use eslint with webpack / ES6 / modules

ViriCruz — Thu, 05 Mar 2020 23:48:24 +0000

Today we are going to talk about eslint and webpack. This is not going to teach you how to install eslint in your project, I will assume that you already did.

First of all, when you are new to eslint and want to auto-fix your JavaScript files, so you run npx eslint --fix . but, you have this main.js that webpack kindly generated for you to make your code separated by modules, work.

So, you get this result ▶️

Even though the code still working, you are not going to pass eslint rules. We don’t need to check this file with eslint, so what do we do?

We need to create a file in the root directory called .eslintignore

As you can see, the only line of code that you need to write is dist/main.js

And that's it, next time you use npx eslint . or npx eslint --fix . eslint will ignore this file.

If you want to check it out directly from the official documentation, go to the next link https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories

Happy Coding! 😄

Newbie notes while learning rails

ViriCruz — Sat, 14 Sep 2019 02:56:18 +0000

This a small diary...📓
If you are using heroku to deploy your app and a database, don’t forget to run heroku run rails db:migrate after git push heroku master.

You can use multiple rails version, useful if you are following a tutorial from a previous version than the current version. Just don’t forget underscores while rails 5.1.6 new app_title where 5.1.6 can be another version.

If you modify your Gemfile don’t forget to bundle install after the changes.

Always check if at some point of the code the colon is in front of the variable like name: or if it’s in back :name, this always put me in trouble while learning rails.

This are things happening right now to me while learning and if you feel like sharing your experience while you were learning rails please add a comment 😋

How to return multiple values in ruby

ViriCruz — Thu, 29 Aug 2019 19:33:37 +0000

You can return multiple values on a method using comma-separated values when you return the data.

Check the example below

def multiple_values
  return 1, 2, 3, 4
end

Here we are creating a method called multiple_values that return 4 values. Each of them separated by a comma, in this form when we call multiple_values as a result, we will see an array with all these values. So the first one 1 will be at position 0 of the array, 2 will be at position 1, 3 will be at position 2 and the last value 4 will be at position 3 of the array.

Let’s call our multiple_values method

def print_values
  values = multiple_values

  _1 = values.first
  _2 = values[1]
  _3 = values[2]
  _4 = values[3]

  p "first - #{_1}, two - #{_2}, three - #{_3}, four - #{_4}" 
  # => "first - 1, two - 2, three - 3, four - 4"
end

print_values

Calling the method

We created a method called print_values that will print the values of the array returned by multiple_values method.
As you can see we store the array returned by multiple_values in a variable called values, this values now contain all the values that we returned before. So for this example to show clearly what values contain we created a variable for each value of the array. Variable _1 called a shortcut method of the array to retrieve the first element of the array even though it will work exactly the same way as values[0]. Then we have the rest of the variables _2, _3, _4 to store the remaining values.

In the last line of the method, we print with a custom format the variables. So to make this work don’t forget to call print_values to see what it does.

If you are the kind of person that likes to play with the code. Here is the link of the live version https://repl.it/@ViriCruz/multiplevalues

Feel free to play around with the code.