Forem: Assim EL HAMMOUTI

Testing React - Setup, Unit, Integration and E2E using Jest and Cypress (feat. GraphQL)

Assim EL HAMMOUTI — Sun, 22 Sep 2019 16:29:53 +0000

NOTE: This is a cross-post from my newsletter and Blog. I publish each email one week after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌

Hi ! This is a guide/cheatsheet that I comeback to read when I want to write tests for a project.

I thought this might help other fellow developers so here you go 😁

Setup

Install jest, cypress and helper libraries

yarn add jest @testing-library/react @testing-library/jest-dom -D

Config

In this section we'll configure Jest and Cypress

Jest

Let's create a config file for Jest in the root directory:

module.exports = {
  // location.href will have this value
  testURL: 'https://example.com',
  // Add here folders to ignore
  testPathIgnorePatterns: ['/node_modules/'],
  setupTestFrameworkScriptFile: require.resolve(
    './test/setup.js'
  ),
  // path to components/modules to test
  modulePaths: ['<rootDir>/src'],
  moduleNameMapper: {
    // mock files that jest doesn't support like CSS and SVG files
    '\\.css$': '<rootDir>/test/module-mock.js',
    '\\.svg$': '<rootDir>/test/module-mock.js',
  },
  // collect coverage report from only the js files inside src
  collectCoverageFrom: ['**/src/**/*.js'],
  coverageThreshold: {
    global: {
      // 20 is just an example
      // you can change it to any value you want (below 100)
      statements: 20,
      branches: 20,
      functions: 20,
      lines: 20,
    },
  },
}

Now create a test folder in the root directory and create setup.js file inside it:

// cleanup helper
import '@testing-library/react/cleanup-after-each'
// custom matchers for jest
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

also create a module-mock.js in the same test folder :

module.exports = {}

Code coverage

In package.json add --coverage at the end of your test script:

{
  ...
  "scripts": {
    ...
    "test": "jest --coverage"
  }
}

Watch mode

When coding, use Jest in watch mode to get instant feedback about the tests related to the files you are changing.
To use this feature, add a script to package.json and use it:

{
  ...
  "scripts": {
    ...
    "test:watch": "jest --watch"
  }
}

Cypress

Install cypress and helpers:

yarn add cypress @testing-library/cypress -D

then add a script to package.json to run cypress:

{
  ...
  "scripts": {
    ...
    "cy:open": "cypress open",
    "cy:run": "cypress run", // run all cypress tests
  }
}

yarn cy:open

Cypress records videos and takes screenshots of the app while running tests.
Let's add the folders that Cypress uses for this to .gitignore

  ...
  cypress/videos
  cypress/screenshots

cypress.json

When running cypress open for the first time, it creates a bunch of files and folders inside a folder in the root dir called cypress. It also creates a file in the root dir called cypress.json. That's the configuration file cypress uses.

Let's add a baseUrl to use in our E2E test:

//cypress.json
{
  "baseUrl": "http://localhost:3000"
}

@testing-library/cypress

@testing-library/cypress adds some very handy commands to cypress, let's configure it:

Go to <rootDir>/cypress/support, open index.js and add this line:

import '@testing-library/cypress/add-commands'
...

Test utils (helpers):

Have a test-utils file that exports a set of tools that are used specifically for the project you are testing.

Example:

Export a render method that takes care of adding styled-components ThemeProvider HOC:

import React from 'react'
import {
  render as originalRender,
  wait,
} from '@testing-library/react'

const theme = {
  colors: {
    red: 'red',
  },
}

function render(component, renderOptions) {
  const utils = originalRender(
    <ThemeProvider theme={theme}>
      {component}
    </ThemeProvider>,
    renderOptions
  )
  return {
    ...utils,
  }
}
export { render }

Now in your tests, import render from this test-utils file instead of @testing-library/react

Unit test

Write a unit test when you want to test the functionality of ONE function/component:

import React from 'react'
import { render } from '@testing-library/react'
import Paragraph from '../paragraph'

test('renders the text given', () => {
  const { getByText } = render(<Paragraph>Hello</Paragraph>)

  expect(getByText(/Hello/i)).toBeInTheDocument()
})

Integration test

Write an integration test when you want to test the functionality of several components working togather:

import React from 'react'
import { MockedProvider } from '@apollo/react-testing'
import wait from 'waait'
import { fireEvent } from '@testing-library/react'
import { render } from '../test-utils'
import App, { LOGIN_MUTATION } from '../app'

beforeEach(() => {
  window.localStorage.removeItem('token')
})

test('login as a user', async () => {
  const fakeUser = { id: 123, username: 'fakeuser' }
  const fakeUserCredentials = {
    ...fakeUser,
    password: 'stupidpassword123',
  }
  const token =
    'thisisjustanexampleofatoken-youcanuseafakedatageneratorinstead'
  const loginMutationMock = jest.fn()
  const loginMutationErrorMock = jest.fn()
  const mocks = [
    {
      request: {
        query: LOGIN_MUTATION,
        variables: {
          username: fakeUserCredentials.username,
          password: fakeUserCredentials.password,
        },
      },
      result: () => {
        loginMutationMock()
        return { data: { user: fakeUser, token: token } }
      },
      error: () => {
        loginMutationErrorMock()
      },
    },
  ]
  const { getByTestId, getByText, getByLabelText } = render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <App />
    </MockedProvider>
  )
  // open login form dialog/modal
  fireEvent.click(getByText(/login/i))
  // fill out login form
  const usernameNode = getByLabelText(/username/i)
  const passwordNode = getByLabelText(/password/i)
  usernameNode.value = fakeUserCredentials.username
  passwordNode.value = fakeUserCredentials.password
  // submit login form
  fireEvent.click(getByText(/sign in/i))
  // wait for the mocked requests to finish
  await wait(0)
  // assert calls
  expect(loginMutationMock).toHaveBeenCalledTimes(1)
  expect(loginMutationErrorMock).not.toHaveBeenCalled()
  // assert login side-effect
  expect(window.localStorage.getItem('token')).toBe(token)
  expect(getByTestId('username').textContent).toEqual(
    fakeUser.username
  )
})

End to end test:

Simplest definition : Imagine you've got a robot that obeys your commands, now ask it to test your app as a normal user 🤷‍♂️.

describe('authentication and registration', () => {
  let user

  beforeEach(() => {
    return cy
      .logout()
      .createNewUser()
      .then(u => (user = u))
      .visit('/')
  })

  it('register as a guest user', () => {
    const user = {
      username: 'user',
      email: 'hello@example.com',
      password: 'password123',
    }
    cy.getByText(/register/i)
      .click()
      .getByLabelText(/username/i)
      .type(user.username)
      .getByLabelText(/email/i)
      .type(user.email)
      .getByLabelText(/password/i)
      .type(user.password)
      .getByText(/register/i)
      .click()
      .assertRoute('/')
    cy.getByTestId('username').should(
      'contain',
      user.username
    )
  })

  it('login as a user', () => {
    cy.getByText(/login/i)
      .click()
      .getByLabelText(/username/i)
      .type(user.username)
      .getByLabelText(/password/i)
      .type(user.password)
      .getByText(/sign in/i)
      .click()
      .assertRoute('/')
    cy.getByTestId('username').should(
      'contain',
      user.username
    )
  })
})

I'll try to improve this post and add to it but please feel free to send a PR in case you want to correct/add/edit something ❤️

How I save $$$ by using Cloudflare Workers

Assim EL HAMMOUTI — Sun, 22 Sep 2019 10:55:55 +0000

Hi ! In this post (and as the title say) i'll show you how I save $$$ by using Cloudflare Workers instead of AWS's API-Gateway to proxy requests to my AWS Lambda functions.

Why use Cloudflare Workers ?

It's all about the cost. 10 million api requests will cost you :

With API-Gateway: \$35
With Cloudflare Workers: \$5

We can say that Cloudflare Workers saves you 85% compared to API-Gateway !!

Getting Started

First, create a new node project, in this blog post i'll be using yarn:

mkdir worker-proj
cd worker-proj
yarn init -y

then install some dev packages that we'll need mainly for bundling our worker:

yarn add dotenv-webpack webpack webpack-cli -D

also we need aws4 to sign our requests to aws:

yarn add aws4

Webpack config

We're using webpack in order to bundle our code and use it as a worker.

Create a new file in the project and call it webpack.config.js, and paste the following code into it:

const Dotenv = require('dotenv-webpack')

module.exports = {
  entry: './worker.js', // This will be our entry file
  mode: 'production', // We're building for production to optimize our worker
  plugins: [new Dotenv()], // we'll be using a .env file to store our TOKENS
  optimization: {
    minimize: true,
  },
  performance: {
    hints: false,
  },
  output: {
    path: __dirname + '/dist', // this is the output folder
    publicPath: 'dist',
    filename: 'worker.js', // and this is where our final code will be at.
  },
}

The Tokens we need

We need to specify 4 essential params:

ACCESS_KEY, SECRET: Get them from AWS IAM.
REGION: The region where our Lambda func lives.
FUNCTION: AWS Function name.

once you have all these params, create a .env file and add them to it.

Writing the worker

First, create a file, we'll name it worker.js.
Then, import aws4 and create a credentials object to store our AWS keys:

import aws4 from 'aws4'

const credentials = {
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET,
}

Now we write our worker function. It accepts a request param and returns the response of a request sent to our Lambda function.

async function worker(request) {
  const reader = request.body.getReader()
  // getPayloadFromReader is a function that we use to get the body of a request
  const payload = await getPayloadFromReader(reader)
  // we sign our request using the credentials we created earlier
  const req = aws4.sign(
    {
      method: 'POST',
      service: 'lambda',
      region: process.env.REGION,
      path: `/2015-03-31/functions/${process.env.FUNCTION}/invocations/`,
      body: JSON.stringify({ httpMethod: 'POST', body: payload }),
    },
    credentials
  )
  // then we send the signed request to the lambda function and return the response
  return fetch(`https://${req.hostname}/${req.path}`, {
    method: req.method,
    headers: req.headers,
    body: req.body,
  })
}

// The next 3 lines show you how to invoke a worker function using Cloudflare Workers
addEventListener('fetch', event => {
  event.respondWith(worker(event.request))
})

As for getPayloadFromReader:

function binary_to_string(array) {
  // We need this function to convert binary to string
  var result = ``
  for (var i = 0; i < array.length; ++i) {
    result += String.fromCharCode(array[i])
  }
  return result
}

async function getPayloadFromReader(reader) {
  let payload = ''
  while (true) {
    let { done, value } = await reader.read()
    if (done) {
      break
    }
    payload = payload + binary_to_string(value)
  }
  return payload
}

Time to test !

To test what we've done so far, add the build script to your package.json:

{
  "name": "worker",
  "version": "1.0.0",
  "main": "worker.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p --progress --colors"
  },
  "dependencies": {
    "aws4": "^1.8.0"
  },
  "devDependencies": {
    "dotenv-webpack": "^1.5.7",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

and run yarn build, then copy the code that'll find in dist/worker.js.

Once you copy the worker code, head to https://cloudflareworkers.com and paste the worker code in the red-bordered section then click on update.

In the right section (green-bordered) of the screenshot above you can see test different kinds of requests.

Conclusion

Now you can save some 💰💰 by using Cloudflare Workers !!

Have a great week !

Setup PostgreSQL with TypeORM in GraphQL Tutorial

Assim EL HAMMOUTI — Sun, 02 Dec 2018 22:57:03 +0000

NOTE: This is a cross-post from my newsletter. I publish each email on my blog one week after it’s sent. Subscribe to get more content like this earlier right in your inbox 💌!

Hi ! In this post, I'Il show you how I to setup PostgreSQL with TypeORM in a GraphQL server. This is the backend setup that I usually use for my backend's side projects.

This tutorial is focused on MacOS environment 🍏. I might write other tutorials later for Windows and Linux.

MacOS Postgres Setup

The easiest way to do it is by using Homebrew, which is a MacOS package manager.

To install Homebrew, run this command in the terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once the installation is over, we need to install the postgresql package:

brew update
brew install postgresql
brew services start postgresql

To make sure that everything got installed, the next command should return the version of the postgresql installed:

postgres --version

Create the Database

Now that we have PostgreSQL installed, we need to create a database that we will connect to. We'Il name our database graphqldb.

Run the next command in the terminal:

createdb graphqldb

This will create a new database for us. To connect to it for testing purposes, you can use TablePlus(Free).

To test if the database exists, create a new connection on TablePlus, give it a name, in my case I named it GraphqlDB, and give it a database name, which is graphqldb (the name of the database that we created earlier), then click on Test. If All the feilds turn green then the database is created and we're ready to connect to it.

Setup the project using Typescript

Now let's create a new project using typescript, to do that we need to install some dependencies.

First let's create a new project folder:

mkdir graphql-proj
cd graphql-proj

now that we're inside the project folder, we need to install typescript as a dev dependency and create a tsconfig file:

yarn init -y
yarn add typescript nodemon ts-node @types/node -D

Create a new file, tsconfig.json and paste the following code into it:

{
  "compilerOptions": {
    "lib": ["es5", "es6", "esnext", "dom"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./build",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  }
}

We'il use nodemon so that we don't have to restart the server manually to test our changes. Create a nodemon.json file and paste the following code into it:

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}

Last but not least, add the following section to your package.json:

"scripts": {
  "start": "nodemon"
}

Create the GraphQL Server

For our GraphQL server, we'Il use graphql-yoga which is a pretty handly all-in-one package for creating GraphQL servers.

Now, add this package graphql-yoga:

yarn add graphql-yoga

To have a quick running graphql server, just copy the sample from graphql-yoga Quickstart section.

import { GraphQLServer } from 'graphql-yoga'

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

Let's add a User type to the graphql schema so that later we can add/edit/delete users from our database:

...
const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }
  type Query {
    hello(name: String): String!
    user(id: ID!): User!
  }
`
...

Setup TypeORM:

As usual, we need to install some packages first :

yarn add typeorm reflect-metadata pg
yarn add @types/node -D

Once the installation finishes, add these two lines to your tsconfig.json:

...
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
...

Create a ormconfig.json file to put our database configuration in it:

{
  "type": "postgres",
  "host": "localhost",
  "port": 5432,
  "database": "graphqldb",
  "synchronize": true,
  "logging": true,
  "entities": ["src/entities/**/*.ts"]
}

As you see in the config, we need to create a folder entities and put our entites into it.

In our case we will create a simple User.ts entity:

import { Entity, PrimaryGeneratedColumn, Column, BaseEntity } from 'typeorm'

@Entity()
export class User extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number

  @Column()
  name: string

  @Column()
  email: string
}

This entity has the same attributes as the GraphQL User type we created earlier.

Now inside index.ts we need to create the database connection before we start our server:

...

const server = new GraphQLServer({ typeDefs, resolvers });

createConnection().then(() => {
  server.start(() => console.log("Server is running on localhost:4000"));
}).catch(() => {
  console.log("Couldn't connect to the database.")
});

Create addUser Mutation

To test if the setup is as good as we want it to be, let's create a mutation that adds a user to the database.

First we need to update our schema:

...
const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }
  type Query {
    hello(name: String): String!
    user(id: ID!): User!
  }
  type Mutation {
    addUser(name: String!, email: String!): User
  }
`;
...

Now we need to resolve the addUser mutation and the user query, we'Il need to use TypeORM's getRepository (I'Il write another blogpost to details TypeORM ):

...
const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
    // this is the user resolver
    user: (_, { id }) => {
      return getRepository(User).findOne(id)
    },
  },
  Mutation: {
    // this is the addUser resolver
    addUser: (_, { name, email }) => {
      const user = new User()
      user.email = email
      user.name = name
      return getRepository(User).save(user)
    },
  },
}
...

Let's add a user now using this mutation. Go to http://localhost:4000 and add a user:

As you can see on the right, we created a user with id 1.

Let's try to query the user we just added using his Id:

Aaand we got the user back 🎉🎉