Decembersoft Inc.

Featured Article

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

Recent Articles

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

How to Write Unit Tests for Asynchronous Redux Thunks in Five Easy Steps

Suppose we have a basic asynchronous login thunk, such as in the code snippet below.

loginThunk.ts

import { Dispatch } from 'redux';import { loginRequest, loginFailure, loginSuccess } from 'actions/sessionActions';import { login } from 'api/api';import { log } from 'util/log';export const loginThunk = (username: string, password: string) => async (dispatch: Dispatch) => {    log.debug(`Login attempt for user ${username}`);    dispatch(loginRequest());    try {        const { userId, sessionId } = await login(username, password);        log.info(`Login succeeded: ${userId} in session ${sessionId}`);        dispatch(loginSuccess({ userId, sessionId }));    }    catch (err) {        log.error(`Login failed: ${err}`);        dispatch(loginFailure(err));    }};

The thunk takes a username and a password; it returns an asynchronous function that takes the Redux store dispatch method. This is the same basic pattern that all redux-thunk thunks have.

This might look intimidating to test because of the indirection and async keyword. But I'll show you how you can easily test the behaviour of thunks like this.

Read more...

Do you need React Hooks?

Do you need React Hooks?

How many times have you put your head down to work on a big project and -- in what feels like the blink of an eye -- several months or even years (ouch) pass by and you realize you haven't come up for air.

It can be difficult to keep current with the latest developments in the JavaScript (and React) ecosystem.

Well... answer me this, busy React developer:

  1. does writing boilerplate code make you afraid of carpal tunnel syndrome?
  2. does your heart skip a beat when you think of stateless functional components?
  3. have you been too busy to check out new React developments lately?

Stop what you're doing right now if you answered 'Yes' to all three questions!

You need React Hooks in your life.

Read more...

Why is this JavaScript so Slow?

Why is this JavaScript so Slow?

There I was... in day two of performance improvements for a tree control in React. (React wasn't the culprit). This particular control does some processing on the incoming data and builds an internal structure and it was that processing that was taking too long.

I had already reduced the runtime from "I don't know... it crashes Chrome" to about 30 seconds. Infinitely better but still not even in the ballpark of acceptible. but at least at that point I could get something -- anything -- out of the Performance profiler in Dev Tools. With the help of the profiler, I had made a few more adjustments and had the runtime down to ~12 - 14 seconds.

Today, however, the profiler led me to something unexpected.

Read more...

Redux Hero Part 5: The Hero is Tested (a Fun Introduction to redux-saga-test-plan)

Redux Hero Part 5: The Hero is Tested (a Fun Introduction to redux-saga-test-plan)

Most developers agree that automated software testing is an important practice. It proves that code is correct now and that it stays correct in the future as the code evolves. However, despite this widely-held opinion, there are still lots of developers who aren't testing their software.

Not knowing what nor how to test are big barriers to getting started -- and that's just with regular code. The barrier feels even bigger for redux-saga code because generator functions can't be tested in the same way as regular functions.

This could become a big problem for teams who are increasingly relying on putting complex business logic in sagas without tests.

I am going to walk you through some saga unit tests written using a library called redux-saga-test-plan.

We wrote some sagas in the previous article (Part 4) for a mock RPG. Now let's test them!

Read more...