TodayILearned

TIL… How to test a window-redirect using Mocks

I was testing an action, which upon completion needed to redirect the user to a new page. Normally, in javascript you can redirect using :

window.location = "newPath";

But that’s hard to test for. Thankfully there is a better way:

window.location.assign("newPath");

You can then mock the assign function and test for that call! My thanks to the creators of jest for that insight!

Advertisements
Standard
TodayILearned

TIL… How to run a single suite of Tests in Jest

So I was writing unit tests for my reducers, but got frustrated with the slow process of running the full test suite when I was tweaking a single test. I though, there’s got to be a better way!

To the Internet! And TaDa, there was! Once you install Jest globablly, you can run a simple command to select the suite or suites you want to run:

jest –runInBand “{matchString}”

This command will run any file whose name matches the given string. So if you wanted to run all the tests associated with the SuchAndSuchModule. You could use:

jest –runInBand “SuchAndSuch*”

My thanks to be brilliant folks who answer stack-overflow questions! You can find the answer I did here

Standard
TodayILearned

TIL… How to Resolve false-positive ESLint Errors

So a colleague of mine was struggling with our local build process. Every time he ran the npm command, which ran a webpack build, He’d get numerous errors for ‘import/no-unresolved’. The associated message would complain that the file casing did not match the underlying file system.

As it turns out, the warning was technically correct. When we checked his command line, we found that the interface reported the folder name with a lowercase. To be clear the folder, as it existed in the file system, was capitalized. So we spun up a new CLI, and tried it with a capitalized version of the folder. Lo and behold, it worked perfectly.

Be sure to check your CLI, when a command returns with very odd errors.

Standard
TodayILearned

TIL… How to use ToDictionary

So I was creating a bulk action in a controller. I needed to map a list of Ids to a dictionary of said Ids and their respective results. My initial thought was to use ForEach, but there was a great deal of unnecessary boiler-plate code involved. There had to be a better way. And of course there was.

Naturally the ToDictionary function was invented by brilliant minds in anticipation of such a need. Here’s a rough example:

listOfId.ToDictionary(key=> key, value => MethodtoGetValue(value,otherParams));

Note that the key, and the value both come from the entry in the List, and are used to create the resulting key-value pair. Meaning that you could create a Key and a Value from functions that use the list entry as an input.

Standard
TodayILearned, Work Projects

TIL… How to use Map and Reduce

While working on a React app, I needed to translate a bit of Redux shape into one needed by an Api. Due to the normalization we imposed on the Redux state, I had to navigate to the desired information through s couple of lists. These entities each had a list of ids of children, and I needed the grand-children of a given entity.

Instead of manually composing this list, I found map and reduce were far better suited to the task, as you might imagine. In order to get the list of grandchildren, I first mapped the list of children ids to a list of lists of grand-child ids. These lists were accessed through the children. Then I took the list of lists and reduced it , effectively merging it into a single, long list of all grandchildren. Helpful hit, always include an initial value for the list. It helps avoid bugs when inputs are empty. Finally I mapped the list of grand-child ids to the grandchildren themselves.

As an experiment I did try to manually iterate through the lists without Map and reduce, and found that those three lines replaced something like 12-15 lines. Further, the 12-15 line code was… obtuse at best. Got to love it when succinct code is also easier to understand.

Standard
TodayILearned, Work Projects

TIL… Combine Reducers also splits state…

While starting work on a greenfield project, I was of course writing new reducers. This time, we were trying to follow a better paradigm as outlined here. As it happens I was writing the byId reducer for an action when I learned a wonderful, simplifying fact.

As you know Reducers take current state and an action, returning a modified state. But what is the state handed to the function? As it turns out, CombineReducers, also splits out the relevant part of state for the given reducers.

For example, take the following Redux State:

root :
    entities:
        item:
            byId
            allIds
        thing
        box
    uiState

If you compose root from an entities and uiState reducer, then the entities reducer gets only the entities part of state. Going deeper you can similarly compose the entities reducer from item, thing and box. The item reducer will only get the item part of state, and will not see anything related to thing or box.

As a result of this behavior, you can write very simple reducers. And of course it is super easy to write tests for reducers composed in this manner.

Standard
TodayILearned, Work Projects

TIL… How to handle User input with a generic function

While writing a CRUD screen with validation in React, I found I was writing similar, if not the same state-altering functions for each input box. Some functions needed additional validation while others did not. After discussing some team-members, the suggestion was made to use the following:

handleUserInput(e) {
   const name = e.target.name;
   const value = e.target.value;
   this.setState({ [name]: value });
}
Paired with code like this for the inputs:
<TextInput
   id="saleName"
   name="saleName"
   placeholder={''}
   value={this.state.saleName}
   onChange={this.handleUserInput}
/>
Then just set the name property on the tag to the same property name in state.
Standard