DEV Community: jacobwicks

Simplify your React Context reducer with Redux Toolkit's createReducer

jacobwicks — Mon, 17 Aug 2020 21:55:53 +0000

You can Turn this: Into this:

I have been using React Context to manage state for my React projects for a while now. The heart of React Context's state management is the reducer, the function that processes actions and returns the new state object. I had been using a switch statement to make the reducer function work. But I found that with a switch statement the files for more complex Contexts were getting too big. The switch statement got bigger and bigger as I added cases to handle all my actions, and my test file for the Context component also got big. So for my latest project I decided to use Redux Toolkit's createReducer function.

What is createReducer?

createReducer is a function that takes all your cases and their individual reducers and creates the main reducer function that you want. Redux Toolkit has a nice createReducer function, and it even works well with TypeScript. Redux Toolkit also comes with the createAction function, which has some nice organizational benefits.

Why use createReducer?

When you use createReducer to make your context reducer function

reducer function is smaller
actions are self contained, making testing easy
uses Immer library- optional automatic nested state
createAction function
reference to the action creator function can also be used as the key value instead of using a separate string

Example App

I created an example app (linked here) that uses React Context to display pages with lists of questions.

This example app uses createReducer to manage 3 actions

addPage adds a new page object to the context
deletePage deletes the current page from the context
setCurrentPage sets the current page in the context

The context manages an array of Page objects. Each Page has two properties. Each Page has a property number, which is a number. The number is used to identify pages. Each Page has a property questions, which is an array of strings.

Example App Page Objects and the State Object

export type Page = {
  //the number of the page
  number: number;

  //the questions that are on the page
  questions: string[];
};

export type PagesState = {
current?: number;
pages: Page[];
dispatch: React.Dispatch<PagesAction>;
};

View on GitHub

Install Redux Toolkit

To use createReducer and createAction you need to install Redux Toolkit.

$ npm install @reduxjs/toolkit

createReducer

Here's how you set up the context reducer using createReducer.
The example app has three actions. Each of the three actions exports an actionCreator function and a reducer function.

Call createReducer

export const reducer: Reducer<
  PagesState,
  PagesAction
> = createReducer(initialState, (builder) =>
  builder
    .addCase(addPage, addPageReducer)
    .addCase(deletePage, deletePageReducer)
    .addCase(setCurrentPage, setCurrentPageReducer)
);

View on GitHub

Each call to addCase adds a case reducer to handle a single action type. The first argument is normally a string. But when you use createAction to make your action creators, you can use a reference to the action creator instead of a string. The action creators used here (addPage, deletePage, setCurrentPage) are exported from the action files.

Each Action is Self Contained in its Own File

Here's how to structure the action files. Each action file exports the action type, the reducer function, and the action creator function.

Action with no payload:

import { PagesState } from "../../";
import { PagesActionTypes } from "..";
import { createAction } from "@reduxjs/toolkit";

export type deletePage = {
  type: PagesActionTypes.deletePage;
};

const action = createAction(PagesActionTypes.deletePage);

export const reducer = (state: PagesState) => {
  state.pages = state.pages.filter((p) => p.number !== state.current);
  state.current = undefined;
};

export default action;

View on GitHub

Here we create the action creator by calling createAction. Because there is no payload, you just call createAction with the action type as an argument. The action creator returned by createAction will be correctly typed because createAction reads the action type that you give it.

The reducer function will get called with (state, action). But this reducer doesn't use the action object, so we can leave it out.

Redux Toolkit's createReducer function uses the Immer library. Immer lets you use simplified reducers. Write code that mutates the state directly and createReducer will use Immer to make sure that a new state object is return. Your code is shorter and it gets rid of the chance to make mistakes when creating your nested state return object.

Action with primitive payload

This one uses a number.

import { PagesState } from "../../";
import { PagesActionTypes } from "..";
import { createAction } from "@reduxjs/toolkit";

export type setCurrentPage = {
  type: PagesActionTypes.setCurrentPage;
  payload: number;
};

const action = createAction<number, PagesActionTypes.setCurrentPage>(
  PagesActionTypes.setCurrentPage
);

export const reducer = (
  state: PagesState,
  { payload }: { payload: number }
) => {
  state.current = payload;
};

export default action;

View on GitHub

You need to define the type of the payload that the action takes in the action type.

Type the payload required by your action creator by providing the payload type as the first type parameter, and the action type as the second type parameter in the call to createAction.

The reducer is called with (state, action). Use object destructuring to get the payload out of the action.

Again, Immer lets you mutate state directly. It feels weird to be mutating the immutable state object, but it's way more efficient.

Action with an object payload

The imported hasPage interface looks like this:

interface hasPage {
  page: Page;
}

Action file:

import { PagesState } from "../../";
import { hasPage, PagesActionTypes } from "..";
import { createAction } from "@reduxjs/toolkit";

export type addPage = {
  type: PagesActionTypes.addPage;
  payload: hasPage;
};

const action = createAction<hasPage, PagesActionTypes.addPage>(
  PagesActionTypes.addPage
);

export const reducer = (
  state: PagesState,
  { payload }: { payload: hasPage }
) => {
  state.pages.push(payload.page);
};

export default action;

View on GitHub

You need to type the payload in the action type declaration.

Type the payload required by your action creator by providing the payload type as the first type parameter, and the action type as the second type parameter in the call to createAction.

Use object destructuring to get the payload out of the action. The payload will match the interface because calls to the action creator are properly typed throughout the code.

The actions Index File

The actions index file is where you declare the enum of all the action types, action payload interfaces, and the union type of all the actions used by this context.

import { addPage } from "./AddPage";
import { deletePage } from "./DeletePage";
import { Page } from "..";
import { setCurrentPage } from "./SetCurrentPage";

//enum containing the action types
export enum PagesActionTypes {
  addPage = "addPage",
  deletePage = "deletePage",
  setCurrentPage = "setCurrentPage",
}

//declare payload interfaces
export interface hasPage {
  page: Page;
}

//union type for all possible actions
export type PagesAction = addPage | deletePage | setCurrentPage;

View on GitHub

Using the Actions

You use the actions by calling the action creator with and then dispatching it.

Dispatching action with no payload:

import deletePage from "../../services/PagesContext/actions/DeletePage";

const DeletePage = () => {
  const { dispatch } = useContext(PagesContext);

  const handleClick = () => dispatch(deletePage());

  return (
    <button className="btn" onClick={() => handleClick()}>
      <i className="fa fa-trash"></i> Delete Page
    </button>
  );
};

View on GitHub

Dispatching action with primitive payload:

import setCurrentPage from "../../services/PagesContext/actions/SetCurrentPage";

const Sidebar = () => {
  const { dispatch, current, pages } = useContext(PagesContext);
  return (
    <div className="sidenav">
      <AddPage />
      <br />
      {pages &&
        pages.map((page, index) => (
          <div key={index}>
            <button
              className="btn"
              style={
                current === page.number
                  ? { backgroundColor: "darkblue" }
                  : undefined
              }
              onClick={() => dispatch(setCurrentPage(page.number))}
            >
              Page {page.number} <br />
              {page.questions.length} Question
              {page.questions.length !== 1 ? "s" : ""}
            </button>
          </div>
        ))}
    </div>
  );
};

View on GitHub

Dispatching action with an object payload:

import addPage from "../../services/PagesContext/actions/addPage";

const AddPage = () => {
  const { dispatch, pages } = useContext(PagesContext);

  const handleClick = () => {
    const pageNumber = pages.length ? pages[pages.length - 1].number + 1 : 1;
    const newPage = getPage(pageNumber);
    dispatch(addPage({ page: newPage }));
  };

  return (
    <button className="btn" onClick={() => handleClick()}>
      <i className="fa fa-plus"></i> Add Page
    </button>
  );
};

View on GitHub

Testing

Testing the reducer function of each action is simple because each action file exports the individual reducer function. Here's the test for the reducer for setCurrentPage. This reducer should accept a number, and set the value of state.current to that number.

Remember: If you choose to write reducers that mutate state directly, you don't get a return value from them. You should assert that the state object that you passed in has mutated.

//import the action creator and the reducer function
import setCurrentPage, { reducer } from "./index";
import { initialState } from "../../../PagesContext";
import getPage from "../../../GetPage";

const page0 = getPage(0);
const page1 = getPage(1);
const page2 = getPage(2);
const page3 = getPage(3);

const stateWithPages = {
  ...initialState,
  current: 1,
  pages: [page0, page1, page2, page3],
};

it("changes the current page", () => {
  const newState = { ...stateWithPages };
  expect(newState.pages.length).toBe(4);
  expect(newState.current).toBe(1);

  //call the action creator
  const action = setCurrentPage(3);

  reducer(newState, action);

  expect(newState.current).toBe(3);
});

View on GitHub

The reducer mutates the newState object because we aren't using the Immer library in the testing environment.

When this reducer is called by the main reducer made using the createReducer function, Immer will be used. So instead of mutating state a new state object will be generated and returned.

You should assert that the state object was mutated.

That's it!

That's all you need to get started using createReducer and createAction with React Context. I think it's a really useful tool that simplifies and shortens the code, prevents mistakes, and makes testing easier.

Make memes with Node, Express, Canvas, GitHub and Heroku

jacobwicks — Tue, 11 Aug 2020 01:43:37 +0000

Link to repo: https://github.com/jacobwicks/memeMaker

App on Heroku: https://my-meme-maker.herokuapp.com

This post on my dev blog: https://jacobwicks.github.io/2020/08/10/make-memes-with-express-and-canvas.html

Project Goals

We are going to make a web server that will let users create memes without uploading anything.

First, we'll make a route on the server that will generate an image containing the requested path as text
eg. server/text/hello world will return a jpg that contains the text "hello world"

Then we'll make another route that takes both text and a hosted image address and makes a meme.

e.g. server/meme/hello world/https://cdn2.thecatapi.com/images/afk.jpg/ will return a picture of a kitten (hosted at https://cdn2.thecatapi.com/images/afk.jpg/) with the text "hello world" written on it.

We'll use JavaScript, express, and node-canvas to make the code work. We'll use GitHub and Heroku to put it online.

You'll need to have node and npm installed. The code uses some newer features of node, so make sure you have node v.14.3 or higher.

You should also have nodemon installed. Nodemon lets you run your code and refreshes it every time you save changes. You can skip installing nodemon and just use node instead, but you'll have to manually restart your code.

If you want to host your meme server online, you will also need a GitHub account and a Heroku account. You will also need the Git cli installed on your computer.

Get Started

Make a new folder. Name it whatever you want. I named my folder memeMaker. In your new folder, run npm init -y to initialize the project.

$ npm init -y

Install express.
express will let us make a web server.

$ npm i express

Install node-canvas. node-canvas is a version of the HTML canvas API that runs in node instead of in the browser.

$ npm i canvas

Ok, now we are ready to write some code.
Create a new file named index.js. Write this code in it.

//get the express library
const express = require("express");

//the web server
const app = express();

//the port that the server will listen on
const port = 8081;

//this is a 'route'
//it defines the response to an http 'get' request
app.get("/", (req, res) =>
  //this response will display text in the browser
  res.send("You have reached the Meme Maker")
);

//start the web server listening
app.listen(port, () => {
  console.log(`Meme Maker listening at on port ${port}`);
});

Start the server.

$ nodemon index

Now you can reach your server by going to http://localhost:8081/

Use Canvas to Make an Image From Text

Ok, now let's write the function that creates an image from an input string.

Put this code in at the top of the index.js file.

//createCanvas is the function that creates the canvas object
const { createCanvas } = require('canvas');

//accepts an input string
//returns an image of the input text as a buffer
const makeTextImage = (input) => {
  //creates the html canvas object
  //with a width of 200px
  //and a height of 200px
  const canvas = createCanvas(200, 200);

  //a reference to the 2d canvas rendering context
  //used for drawing shapes, text, and images
  const context = canvas.getContext("2d");

  //the font we are using
  const fontSetting = "bold 50px Impact";

  //set context to use the fontSetting
  context.font = fontSetting;

  //context.measureText is a function that measures the text
  //so we can adjust how wide the finished image is
  const textWidth = context.measureText(input).width;

  //change the canvas width to be wider than the text width
  canvas.width = textWidth + 100;

  //changing canvas width resets the canvas, so change the font again
  context.font = fontSetting;

  //fillStyle sets the color that you are drawing onto the canvas
  context.fillStyle = "white";

  //fillText draws text onto the canvas
  context.fillText(input, 50, 50, textWidth + 50);

  //set the color to black for the outline
  context.fillStyle = "black";

  //strokeText draws an outline of text on the canvas
  context.strokeText(input, 50, 50, textWidth + 50);

  //return a buffer (binary data) instead of the image itself
  return canvas.toBuffer();
};

Make a Route to Return a Text Image

Put this code in right under where you declare const port = 8081;

//text is the route
//:input designates a parameter of the route
app.get("/text/:input", (req, res) => {
  //the ? means optional chaining
  //input will be a string equal to whatever the user types after the route
  const input = req?.params?.input;

  //call the makeTextImage function
  //and wait for it to return the buffer object
  const image = makeTextImage(input);

  //create the headers for the response
  //200 is HTTTP status code 'ok'
  res.writeHead(
    200,
    //this is the headers object
    {
      //content-type: image/jpg tells the browser to expect an image
      "Content-Type": "image/jpg",
    }
  );

  //ending the response by sending the image buffer to the browser
  res.end(image);
});

If you still have your server running, nodemon should have refreshed it when you saved the changes to your code.

If not, start it again by running

nodemon index

Now you can get images by going to localhost:8081/text.
Try 'hello world' by going to localhost:8081/text/hello world.

Make a Meme: Put Text on an Image

Get the loadImage function from the canvas library.

//createCanvas is the function that creates the canvas object
//loadImage is the function that loads an image
const { createCanvas, loadImage } = require("canvas");

Write the `makeMeme` function.

Put the makeMeme function under the makeTextImage function but above the routes.

const makeMeme = async ({
  //the url of the image to put the text on
  url,
  //the text to put on the image
  input,
}) => {
  //if there's no image to work with
  //don't try anything
  if (!url) return undefined;

  const canvas = createCanvas(200, 200);
  const context = canvas.getContext("2d");

  const fontSetting = "bold 50px Impact";
  context.font = fontSetting;

  const text = context.measureText(input);
  const textWidth = text.width;

  //loadImage is a function from node-canvas that loads an image
  const image = await loadImage(url);

  //set the canvas to the same size as the image
  canvas.width = image.width;
  canvas.height = image.height;

  //changing the canvas size resets the font
  //so use the fontSetting again
  context.font = fontSetting;

  //do some math to figure out where to put the text
  //indent the text in by half of the extra space to center it
  const center = Math.floor((canvas.width - textWidth) / 2) | 5;
  //put the text 30 pixels up from the bottom of the canvas
  const bottom = canvas.height - 30;

  //put the image into the canvas first
  //x: 0, y: 0 is the upper left corner
  context.drawImage(image, 0, 0);

  //set the color to white
  context.fillStyle = "white";
  //draw the text in white
  //x uses the value we calculated to center the text
  //y is 30 pixels above the bottom of the image
  context.fillText(input, center, bottom);

  //set the color to black
  context.fillStyle = "black";
  //draw the outline in black
  context.strokeText(input, center, bottom);

  //return the buffer
  return canvas.toBuffer();
};

Add a Route That Returns a Meme

Add this route right under where you declare const port = 8081;

//this route has two parameters
//input is a string
//url* matches everything after input
app.get("/meme/:input/:url*", async (req, res) => {
  const { params } = req;
  //get the text input string from the request parameters
  const input = params?.input;


  //urls have '/' characters in them
  //but '/' is what express uses to divide up route parameters
  //so to match the whole url, we use an asterisk '*'
  //the asterisk matches everything after the first '/'
  //and assigns it to params[0]

  //so params.url will usually be http:
  const baseUrl = params?.url;
  //and params[0] will be www.myImageHost.com/image.jpg
  const restOfUrl = params?.[0];

  //put the baseUrl and restOfUrl together
  const url = baseUrl + restOfUrl;

  //get the image buffer
  const image = await makeMeme({ url, input });

  //create headers object
  const headers = { "Content-Type": "image/jpg" };

  //set status code and headers
  res.writeHead(200, headers);

  //end by sending image
  res.end(image);
});

Now you can get memes by going to localhost:8081/meme.
Try putting 'hello world' on this image of a kitten by going to http://localhost:8081/meme/hello%20world/https://cdn2.thecatapi.com/images/afk.jpg/.

Great!

Host it online using GitHub and Heroku

You need to make some changes to your files before you can host them online. You need to

Change the port variable in index.js
Edit the package.json file
Make a new file called .gitignore

Change Port

When your app is running online, it won't be using port 8081. It will use whatever port the server assigns to it. The server will make the assigned port available in the environment variable PORT. You can access this at process.env.PORT.

in index.js change port = 8081 to:

//the port that the server will listen on
//use the process environment variable PORT
//and if PORT is undefined, use 8081
const port = process.env.PORT || 8081;

Edit package.json

When you ran npm init, package.json was one of the files that was created. The package.json is where npm keeps track of various things about your project. To make your project work on Heroku you need to edit your package.json file.

Here's an example of how your package.json should look when you are done.

Your package.json file has a property scripts that looks something like this:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Add the start script below. The start script is what tells the Heroku server to run your index file when you host your app on Heroku.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  }

Add a new property to package.json called engines.
This tells Heroku to use node 14.7. The code we wrote earlier uses features that were recently added to node. If you don't add this line then your app will crash when Heroku tries to run it using an older version of node.

  "engines": {
    "node": "14.7"
  }

Make the .gitignore file

We are about to add the code you have written to your repository. But you just want your own code to be in your repository, not all the node modules that you are using. In your project folder on your computer, the one where you have index.js, create a .gitignore file. This file is where you tell git not to include all the software libraries you are using in your repository. Just name the file .gitignore, there is nothing in front of the extension.

Put this in your .gitignore file.

/node_modules

That's it for the .gitignore!

GitHub

Now you need to put your code on GitHub. To put your code on GitHub you will

Create a Git Repository
Use the command line to add your code to the new repository
Check the repository on GitHub and see your files

Create a Git Repository

If you don't have a GitHub account, make one here: https://github.com/join
Make a new repository. You can name it whatever you want. I suggest memeMaker.
Don't initialize the new repository with a readme.

Click Create Repository. Then you will see this screen:

Copy the git url from this screen. The git url for my repo is https://github.com/jacobwicks/memeMaker.git. Yours will be different because you have a different GitHub username.

Add Your Code to your new Repository

Using the command line, go to the folder where you have index.js.

git initialize the directory

$ git init

Add all the files. This step is where .gitignore stops the Node Modules from being added!

$ git add .

Add a commit message.

$ git commit -m "memeMaker first commit"

This step is the most complicated step. You tell git to add a remote origin of your repository's url.

$ git remote add origin <repository git URL>

My git url was https://github.com/jacobwicks/memeMaker.git. That's because my git username is jacobwicks and my repository was named memeMaker.

You can copy your repository url from the screen that came up when you created your repository on git.
My full command looked like this:

$ git remote add origin https://github.com/jacobwicks/memeMaker.git

Yours will look different because your username is different than mine.

Finally, push your code to your git repository.

$ git push origin master

Check the Git Repo

Now check your repository on GitHub. You should see all the files you just wrote.

Great. Now we are ready to get your app running online!

Host using Heroku

One site that lets you host an express web server is Heroku.

To host on Heroku you will:

Create a New Heroku App
Connect the Heroku App to Your GitHub Repo
Build the App

Create a New Heroku App

You need a Heroku Account, so if you don't have one yet go sign up.

Go to the Heroku dashboard. Start creating a new app by clicking the 'New' button then clicking 'create new app' in the dropdown menu.

Create a new app. You can name it whatever you want. I named mine my-meme-maker. You can take whatever name is available.

Deploy by Connecting the App to GitHub

Under the deployment method, Click the 'Connect to GitHub' button.

If this is your first time working with Heroku, you need to connect your GitHub account to Heroku.

Click the 'Connect to GitHub' button. This may connect your github account automatically, or there may be some more steps.

After your github account is connected you will be able to search for your repo. Type the name of your repo in the search field and click the search button. My repo was named 'memeMaker'. After the search completes, your repo will be shown below. Click the connect button.

Now your Heroku App is connected to your GitHub repo!

Build the App

Click the 'deploy branch' button in the Manual Deploy section.

It should say "Your app was successfully deployed"

Click the view button and you'll see your '/' route working.

Use the App!

Now you can make memes that say whatever you want!

Next steps

This code puts text at the bottom of the image. Make one that puts text at the top.
Let the user put text at the top and bottom of the image using more path parameters
The text gets cut off if it's too long. Make it write multiple lines instead
Putting '?' in the meme text won't work. Make it work with question marks
There's no error handling or checking for bad inputs. Add error handling and make sure the app won't crash if it gets bad input

What to do if deployment didn't work

That's too bad! But this is an opportunity to learn.

To figure out what went wrong with your app, you need to look at the Heroku logs.

First, Install the Heroku CLI.

Then, using the command line, look at the logs for your app.

The command is heroku logs -a followed by your app name

heroku logs -a <your-app-name>

I called my app 'my-meme-maker' so the command to see the logs for me is this:

heroku logs -a my-meme-maker

Yours will be different because your app will have a different name.

Use resources like Google, Stackoverflow, documentation and forums to find the answers. Keep poking around and you will get it working.

Setup Flashcard App The Hard Way

jacobwicks — Fri, 17 Jan 2020 04:52:33 +0000

How to start your own version of the project from scratch using create-react-app.

1. Install Node Js

Download page Install Node if you don't have it already.

2.Install NPM

Download page
Install NPM. Once it is installed, open a command prompt and type 'npm-v'. Then hit enter. If NPM is installed, it will show you the version number.

npm-v

3. Use NPX, which comes with NPM, to run create-react-app

Create React App instruction page
Go to the directory where you want to create your project folder. Note: create-react-app creates a new folder inside the folder where you run it. So if you want to create your project in a folder /MyUserName/projects/flashcard, go to /MyUserName/projects and run create-react-app there. If you make the flashcard folder and run create-react app in it, you will end up with /MyUserName/projects/flashcard/flashcard

npx create-react-app flashcard --typescript

4. Use NPM, not NPX, to install the libraries

Install React Testing Library

Install Semantic-UI-React

npm i semantic-ui-react

npm install --save-dev @testing-library/react

npm install --save-dev @testing-library/jest-dom

5. Try to Run it

Once you have installed the libraries, navigate to the folder using your command line. Type npm start and hit enter and the default create-react-app should start running. It will likely open the web browser and show you a spinning React logo.

6. Add Semantic-UI-React styling

The easiest way to add the css styling that makes Semantic-UI-React components look right is to edit the index.html file and add a link to the Semantic-UI-React CDN.

If you want to install it a different way, look at this link.

Semantic UI React the easy way

Open the file %project directory%/flashcard-app/public/index.html
The top lines should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
...more stuff below

Paste the following in below the favicon code

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />

Now the top of your index.html should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
...more code below

You are ready to get started! Go back to the Introduction to see an explanation of what a test is, or go to the second post to make the first component.

Shuffle Cards and Display Selected Subjects

jacobwicks — Fri, 17 Jan 2020 04:50:53 +0000

As you save more cards you'll notice that the cards are presented in the same order every time. Let's fix that.

Write the Shuffle Code

File: src/services/CardContext/services/index.ts
Will Match: src/services/CardContext/services/complete/index-3.ts

A good algorithm to shuffle an array is Fisher-Yates. Here's a short article about Fisher-Yates: How to Correctly Shuffle an Array in Javascript.

Add the shuffle function:

  //https://medium.com/@nitinpatel_20236/how-to-shuffle-correctly-shuffle-an-array-in-javascript-15ea3f84bfb
  const shuffle = (array: any[]) => {
    if (array.length > 0) {
        for(let i: number = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * i)
            const temp = array[i]
            array[i] = array[j]
            array[j] = temp
      }
    };
    return array;
};

Call shuffle when you generate the initialState:

//a function that loads the cards from localStorage
//and returns a CardState object
export const getInitialState = () => ({
    //the cards that are displayed to the user
    //if loadedCards is undefined, use cards
    cards: loadedCards ? shuffle(loadedCards) : cards,

    //index of the currently displayed card
    current: 0,

    //placeholder for the dispatch function
    dispatch: (action:CardAction) => undefined,

    //the array of subjects to show the user
    show: []
} as CardState);

Now the cards will be shuffled. You can refresh to shuffle the cards while using the app. This works because every time you refresh the app it loads the cards from localStorage.

Display Only Selected Subjects

Now that the App has the Selector component, the user can choose subjects. We are going to use the show array to only show the user cards from the subjects that the user has selected. We will do this by rewriting the code in the next case in the CardContext reducer. We'll make a function that takes the current index, the show array, and the array of cards, and returns the next index. But instead of returning the next card in the array of all cards, the function will limit its array to just cards with the selected subjects.

Test

File: src/services/CardContext/services/index.test.ts
Will Match: src/services/CardContext/services/complete/test-2.ts

I'm not going to do the complete back and forth Red/Green Pass/Fail for these tests. It's been a long tutorial. But try it yourself!

Import Card from types.

import { Card } from '../../../types';

Write the tests. We use describe blocks to keep variables/helper functions in scope.

describe('getNext', () => {
    //the getNext function that we're testing
    const { getNext } = require('./index');

    //a helper function. Will generate a Card object from a seed
    //if provided a subject, that will be the card subject
    const getCard = (
        seed: string | number, 
        subject?: string | number
        ) => ({
            question: `${seed}?`,
            answer: `${seed}!`,
            subject: subject ? `${subject}` : `${seed}`
        });

    //an array from 0-4. We'll use it to generate some arrays for tests
    const seeds = [0, 1, 2, 3, 4];

    //test that getNext works when show is empty
    describe('show is empty', () => {
        //now we have an array of cards 0-4
        const cards = seeds.map(seed => getCard(seed));

        //show is an empty array of strings
        const show: string[] = [];

        //the result for incrementing the last index in an array is 0, not current + 1
        //so that's a different test. We're only running 0, 1, 2, 3 here 
        test.each(seeds.slice(0, 3))('increments current from %d', 
        //name the arguments, same order as in the array we generated
        //renaming 'seed' to 'current'
        (current) => { 
            const next = getNext({
                cards,
                current, 
                show
            });

            //when current is < last index in current, next should be current + 1
            expect(next).toBe(current + 1);
        });

        it('returns 0 when current is last index of cards', () => {
            const next = getNext({
                cards,
                current: 4, 
                show
            });

            //the next index goes back to 0. 
            //If it returned current + 1, or 5, that would be an invalid index 
            expect(next).toBe(0);
        });

    });

    describe('show single subject', () => {
        const selectedSubject = 'selectedSubject';

        //show is now an array with one string in it
        const show: string[] = [selectedSubject];

        it('shows only cards from the selected subject', () => {

            //generate an array of cards
            const cards = seeds.map(seed =>
                //seed modulus 2 returns the remainder of dividing the seed number by 2
                //when the remainder is not zero, we'll generate a card from the seed 
                //but the subject will just be the seed, not the selected subject
                //when the remainder is 0, we'll get a card with the selected subject
                seed % 2   
                    ? getCard(seed)
                    : getCard(seed, selectedSubject));

            //the % 2 of 0, 2, and 4 are all 0
            //so the cards generated from 0, 2, and 4 should have subject === selectedSubject 
            //so cards[0, 2, 4] should have the selected sujbject
            //we expect filtering cards for cards with selectedSubject will have a length of 3
            expect(cards.filter(card => card.subject === selectedSubject)).toHaveLength(3);

            let current = 0;

            //use a for loop to get next 5 times
            //each time, we should get the index of a card with the selected subject
            for(let i: number = 0; i < 5; i++) {
                const next = getNext({ cards, current, show});
                expect(cards[next].subject).toEqual(selectedSubject);
                current = next;
            }

        });

    });

    describe('show multiple subjects', () => {
        //now show is an array of 3 strings
        const show: string[] = [
            'firstSubject',
            'secondSubject',
            'thirdSubject'
        ];

        //a function to return a randomly chosen subject from the show array
        const randomSubject = () => show[Math.floor(Math.random() * Math.floor(3))];

        //an empty array.
        //we'll use a for loop to generate cards to fill it up
        const manyCards: Card[] = [];

        //We'll put 21 cards into manyCards
        for(let seed = 0; seed < 21; seed++) {
            //modulus 3 this time, just to switch things up
            seed % 3   
                ? manyCards.push(getCard(seed))
                : manyCards.push(getCard(seed, randomSubject()))
        }

        it('shows only cards from the selected subject', () => {
            //to get the number of times to run getNext, we'll cound how many cards in ManyCards
            //have a subject from the show array
            //it's going to be 7 (21/3)
            //but if you were using more unknown numbers, you might want to find it out dynamically  
            const times = manyCards.filter(card => show.includes(card.subject)).length;

            let current = 0;

            //use a for loop to assert that you always see a card with the selected subject
            //you can run through it as many times as you want
            //you could do i < times * 2 to run through it twice
            for(let i: number = 0; i < times; i++) {
                const next = getNext({ cards: manyCards, current, show});
                expect(show).toContain(manyCards[next].subject);
                current = next;
            }; 
        });
    })

Great. Now we are testing all the aspects of the getNext function that we need to. Let's write it!

Write getNext

File: src/services/CardContext/services/index.tsx
Will Match: src/services/CardContext/services/complete/index-4.tsx

Write the getNext function. getNext will take the array of cards, the current index, and the array of subjects. It uses Array.filter to create a new array of cards that belong to the selected subjects. Then it finds the current card in that array. Then it gets the question from the card one index higher than the current card. Then it finds the index of that next card in the array of all cards by looking for the question on the card. It returns the index of the next card in the array of all cards.

export const getNext = ({
    cards,
    current,
    show
}:{
    cards: Card[],
    current: number,
    show: string[]
}) => {
    //show array is empty, so we are showing all card
    if (show.length === 0) {
        const total = cards.length -1;
        //just add 1, if +1 is too big return 0
        const next = current + 1 <= total
              ? current + 1
              : 0;

        return next;
    } else {
        //filter cards. Only keep cards with a subject that's in show 
        const showCards = cards
                        .filter(card => show.includes(card.subject));

        //get the index of the current card in the showCards array
        const showCurrent = showCards
        .findIndex(card => card.question === cards[current].question)

        const showTotal = showCards.length - 1;

        //showNext gives us the next index in the showcards array
        const showNext = showCurrent + 1 <= showTotal
        ? showCurrent + 1
        : 0;

        //translate the showNext index to the index of the same card in cards
        const next = cards
        .findIndex(card => card.question === showCards[showNext].question);

        return next;
    };
};

CardContext Reducer

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-14.tsx

Add an import for getNext.

import { getInitialState, getNext } from './services/';

Change the next case of the reducer to call getNext:

          case 'next': {
            const { cards, current, show } = state;

            //call to the getNext function
            const next = getNext({
                cards,
                current,
                show,
            });

              return {
                  ...state,
                  current: next
              }
          }

Now the app will only show cards from the subjects that the user chooses with the selector.

Run all the tests:

That's it!

In the next tutorial I plan to write, I will show you how to save and load the flashcards to JSON files.

Card Selector

jacobwicks — Fri, 17 Jan 2020 04:50:07 +0000

In this post we are going to build the Selector component. The Selector will let the user select cards and subjects. We will add the new CardAction types that the Selector will need. We will also write the code for CardContext to handle those new actions.

User Stories

The user sees a card and wants to change the answer. The user opens the card editor. The user selects the the card that they want to change. The user changes an that card and saves their changes.
The user deletes a card.
The user loads the app. The user sees all the cards they have written. The user selects the subject that they want to study. The program displays the cards in that subject in random order.

Features

a way the user can select cards
To delete a card, you need to indicate which card you want to delete
A button that displays subjects, and allows the user to select the subject

The Selector Component

The Selector will let the user choose what card to look at. Selector will work in both scenes. We will put Selector on the left side of the screen. After we make Selector we are done building components for the app!

Where to Store the Data for Selector?

The features listed above require us to track what subject or subjects the user wants to display. We don't have a place to track subjects. So we need to add it somewhere.

How would you solve the problem of storing subjects? The subject of each question is a string. What data structure would you use to store 0, 1, or many strings? Where would you keep it?

We are going to store the subjects in an array of strings. We are going to call this array show. We'll call the array show because it tells us what subjects to show the user. We are going to store show in the CardState that we keep in CardContext. We need to be able to refer to this array to write our tests, so we need to add it to the definition of CardState before we write the tests for CardContext.

We'll dispatch actions to the CardContext to add a subject to show, remove a subject from show, and to clear all subjects out of show.

Add Show to Types.ts

File: src/types.ts
Will Match: src/complete/types-9.ts

Add show : string[] to CardState.

//the shape of the state that CardContext returns
export interface CardState {

    //the array of Card objects
    cards: Card[],

    //the index of the currently displayed card object
    current: number,

    //the dispatch function that accepts actions
    //actions are handled by the reducer in CardContext
    dispatch: (action: CardAction) => void

    //the array of subjects currently displayed
    show: string[]
};

Before we write the actions, change getInitialState in CardContext/services so that it returns a show array.

Change getInitialState in CardContext services

File: src/services/CardContext/services/index.ts
Will Match: src/services/CardContext/services/complete/index-2.ts

Add show : [] to the object returned by getInitialState.

//a function that loads the cards from localStorage
//and returns a CardState object
export const getInitialState = () => ({
    //the cards that are displayed to the user
    //if loadedCards is undefined, use cards
    cards: loadedCards ? loadedCards : cards,

    //index of the currently displayed card
    current: 0,

    //placeholder for the dispatch function
    dispatch: (action:CardAction) => undefined,

    //the array of subjects to show the user
    show: []
} as CardState);

The New Actions

We need some new CardActionTypes. We need CardContext to do new things that it hasn't done before. We'll add

select - to select a card
showAdd - add a subject to the show array
showAll - clear the show array so that we show all subjects
showRemove - remove a subject from the show array

Add Actions to CardActionTypes

File: src/types.ts
Will Match: src/complete/types-10.ts

Add select, showAdd, showAll, and showRemove to the enum CardActionTypes.

export enum CardActionTypes {
    delete = 'delete',
    next = 'next',
    new = 'new',
    save = 'save',
    select = 'select',
    showAdd = 'showAdd',
    showAll = 'showAll',
    showRemove = 'showRemove'
}

Now add the actions to the union type CardAction:

export type CardAction =
    //deletes the card with matching question
    | { type: CardActionTypes.delete, question: string }

    //clears the writing component
    | { type: CardActionTypes.new }    

    //moves to the next card
    | { type: CardActionTypes.next }

    //saves a card
    | { type: CardActionTypes.save, answer: string, question: string, subject: string }

    //selects card
    | { type: CardActionTypes.select, question: string }

    //saves a card
    | { type: CardActionTypes.save, answer: string, question: string, subject: string }

    //adds a subject to the array of subjects to show
    | { type: CardActionTypes.showAdd, subject: string }

    //shows all subjects
    | { type: CardActionTypes.showAll }

    //removes a subject from the array of subjects to show
    | { type: CardActionTypes.showRemove, subject: string }

All right. Now the actions have been defined. Next we will write the tests and the code for the CardContext reducer to handle the actions.

CardContext reducer Tests 1-2: Select Actions

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-11.tsx

We'll test if the reducer handles select, showAdd, showAll, and showRemove actions.

Write a comment for each test you plan to make:

//select should set the current index to the index of the selected card
//if the question is not found, returns state
//showAdd should add a single subject to the show array
//if the subject is already in show, the subject will not be added
//showAll should clear the show array
//showRemove should remove a single subject from the show array

Make some describe blocks inside the 'CardContext reducer' block.

Name the first block 'select actions change current to the index of the card with the selected question.'

Name the second block 'Actions for showing subjects.'

   describe('select actions change current to the index of the card with the selected question', () => {

    //select should set the current index to the index of the selected card
    //if the question is not found, returns state
 });

    //actions that affect the show array
    describe('Actions for showing subjects', () => {
        //show add adds subjects to the array
        describe('showAdd', () => {
            //showAdd should add a single subject to the show array
            //if the subject is already in show, the subject will not be added

        });

        //showAll should clear the show array

        //showRemove should remove a single subject from the show array
    });

Write the test for the select case. Make a card thirdCard. Make a CardState with three cards in it threeCardState. Put thirdCard in cards at the last index.

it('select changes current to the index of the card with the selected question', () => {
        const answer = 'Example Answer';
        const question = 'Example Question';
        const subject = 'Example Subject';

        const thirdCard = {
            answer,
            question,
            subject
        };

        const threeCardState = {
            ...initialState,
            cards: [
                ...initialState.cards, 
                thirdCard
            ],
            current: 0
        };

        expect(threeCardState.cards.length).toBe(3);

        const selectAction = {
            type: CardActionTypes.select,
            question
        };

        const { current } = reducer(threeCardState, selectAction);

        expect(current).toEqual(2);
    });

Also write the test for a question that is not found in cards.

//if the question is not found, returns state
        it('if no card matches the question, returns state', () => {
            const question = 'Example Question';

            expect(initialState.cards.findIndex(card => card.question === question)).toBe(-1);

            const selectAction = {
                type: CardActionTypes.select,
                question
            };

            const state = reducer(initialState, selectAction);

            expect(state).toEqual(initialState);
        });

Note that the test for returning state when no question is found passes. This test passes because there is no case to handle the select action yet. So the action is handled by the default case. The default case returns state.

Pass CardContext reducer Tests 1-2: Select Actions

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-10.tsx

Add the select case to the reducer.

    case 'select' : {
        const { cards } = state;
        const { question } = action;

        if (!question) return state;            

        const current = cards.findIndex(card => card.question === question);

        if (current < 0 ) return state;

        return {
            ...state,
            current
        }
    }

CardContext reducer Tests 3-4: showAdd Actions

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-12.tsx

The first test looks at the resulting show array and expects the item at index 0 to equal the added subject.

The second test uses the toContain assertion to check if the array contains the subject.

//show add adds subjects to the array
        describe('showAdd', () => {
            //showAdd should add a single subject to the show array
            it('adds the selected subject to the show array', () => {
                expect(initialState.show).toHaveLength(0);

                const subject = 'Example Subject';

                const showAddAction = {
                    type: CardActionTypes.showAdd,
                    subject
                };

                const { show } = reducer(initialState, showAddAction);

                expect(show).toHaveLength(1);
                expect(show[0]).toEqual(subject);
            });

            //if the subject is already in show, the subject will not be added
            it('if the selected subject is already in the array, the subject will not be added', () => {
                const subject = 'Example Subject';

                const showWithSubjects = [
                    subject,
                    'Another Subject'
                ];

                const showState = {
                    ...initialState,
                    show: showWithSubjects
                };

                const showAddAction = {
                    type: CardActionTypes.showAdd,
                    subject
                };

                const { show } = reducer(showState, showAddAction);

                expect(show).toHaveLength(2);
                expect(show).toContain(subject);
            })
        });

Pass CardContext reducer Tests 3-4: showAdd Actions

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-11.tsx

Use the Array.includes method to figure out if the subject is already in show. Array.includes returns a boolean value.

       case 'showAdd': {
            const { subject } = action;
            const show = [...state.show];

            !show.includes(subject) && show.push(subject);

            return {
                ...state,
                show
            }
        }

CardContext reducer Test 5: showAll Actions

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-13.tsx

//showAll should clear the show array
        it('showAll returns empty show array', () => {
            const showWithSubjects = [
                'Example Subject',
                'Another Subject'
            ];

            const showState = {
                ...initialState,
                show: showWithSubjects
            };

            const showAllAction = { type: CardActionTypes.showAll };

            const { show } = reducer(showState, showAllAction);

            expect(show).toHaveLength(0);
        });

Pass CardContext reducer Test 5: showAll Actions

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-12.tsx

To show all subjects, clear show array.

        case 'showAll': {
            return {
                ...state,
                show: []
            }
        }

CardContext reducer Test 6: showRemove Actions

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-14.tsx

        //showRemove should remove a single subject from the show array
        it('showRemove removes the subject from show', () => {
            const subject = 'Example Subject';

                const showWithSubjects = [
                    subject,
                    'Another Subject'
                ];

                const showState = {
                    ...initialState,
                    show: showWithSubjects
                };

                const showRemoveAction = {
                    type: CardActionTypes.showRemove,
                    subject
                };

                const { show } = reducer(showState, showRemoveAction);

                expect(show).toHaveLength(1);
                expect(show).not.toContain(subject);
        });

Pass CardContext reducer Test 6: showRemove Actions

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-13.tsx

Use Array.filter to remove the subject from show.

        case 'showRemove': {
            const { subject } = action;
            const show = state.show.filter(subj => subj !== subject);

            return {
                ...state,
                show
            }
        }

Now the reducer in CardContext handles all the actions that we need to make the Selector work.

Making the Selector

The Selector is the last component we'll make for the Flashcard App. The Selector will let the user select cards that they want to see. The Selector will also let the user select subjects that they want to see.

As always, we'll use TDD to write the tests and the code.

Choose components

To let the user choose the questions we need to show the questions to the user. We want the user to be able to choose a single question and see it. We also want to let the user choose one or many subjects. And the user needs to be able to clear the list of subjects when they want to see cards from all the subjects at once.

We are going to use the Sidebar and the Menu components from Semantic UI React. We will use these two components together to make a vertical menu that appears on the left side of the screen.

The Sidebar can hold Menu Items. We want to display a Menu Item for each subject, and when the user clicks on a subject, we will show the user a Menu Item for each card that has that subject. The Menu Item will show the question from the card. When the user clicks on a question we'll dispatch a select action to CardContext so that we can display that question to the user.

Decide what to test

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-1.tsx

We'll test if the Sidebar shows up. We expect to see Menu Items for each card subject inside the sidebar. Clicking a subject should expand that subject and show all the cards that have that subject. Clicking a card should select that card and set current index in CardContext.

Write a comment for each test you plan to make:

//there is a sidebar
//the sidebar has a menu item that says 'subjects'
//clicking the 'subjects' menu item clears the selected subjects so the app will shows cards from all subjects
//the sidebar has menu items in it
//a menu item appears for each subject in the array cards in CardContext
//clicking on a menu item for a subject selects that subject
//clicking on a menu item for a subject expands that subject and shows a menu item with the question for each card in that subject
//clicking on a menu item for a card question selects that card

Imports and afterEach.

import React, { useContext } from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { CardContext, CardProvider, initialState } from '../../services/CardContext';
import Selector from './index';
import { Card, CardState } from '../../types';

afterEach(cleanup);

A helper component DisplaysCurrent to display the value of current and show. We'll use Array.map to turn the array show into an array of divs that each contain a single subject. React requires child components in an array to have a key. So each subject div gets a key prop.

const DisplaysCurrent = () => {
    const { current, show } = useContext(CardContext);
    return(
        <div>
            <div data-testid='current'>{current}</div>
            <div data-testid='show'>
                {show.map(subject => <div key={subject}>{subject}</div>)}
            </div>
        </div>
    ) 
};

A helper function renderSelector to render the Selector inside of CardProvider. Accepts an optional testState. Accepts an optional child component.

const renderSelector = (
    testState?: CardState, 
    child?: JSX.Element 
    ) => render(
    <CardProvider testState={testState}>
        <Selector/>
        {child}
    </CardProvider>
);

Selector Test 1: Has a Sidebar

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-1.tsx

//there is a sidebar
it('has a sidebar', () => {
    const { getByTestId } = renderSelector();
    const sidebar = getByTestId('sidebar');
    expect(sidebar).toBeInTheDocument();
});

This test fails because we haven't made the Selector yet.

Pass Selector Test 1: Has a Sidebar

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-1.tsx

Imports. We'll use all of these eventually.

import React, { useContext } from 'react';
import {
    Menu,
    Sidebar
} from 'semantic-ui-react';
import { CardContext } from '../../services/CardContext';
import { CardActionTypes } from '../../types';

Make the Selector component.

const Selector = () => {
    return (
        <Sidebar
        as={Menu}
        data-testid='sidebar'
        style={{top: 50}}
        vertical
        visible
        width='thin'
      >
      </Sidebar>
    )    
};

export default Selector;

Selector Test 2: Has Subjects Menu Item

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-2.tsx

Make a describe block named 'the subjects menu item.' We'll test for a menu item that says subjects.

describe('the subjects menu item', () => {
    //there is a menu item that says 'subjects'
        it('has a subjects menu item', () => {
            const { getByText } = renderSelector();
            //the first menu item in the selector says 'Subjects' on it
            //if we can find that text, we know the sidebar is showing up
            const selector = getByText(/subjects/i);
            expect(selector).toBeInTheDocument();
        });

        //clicking the 'subjects' menu item clears the selected subjects so the app will shows cards from all subjects    
});

Pass Selector Test 2: Has Subjects Menu Item

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-2.tsx

Make the Selector return a Menu Item that says 'Subjects.'

        <Sidebar
        as={Menu}
        data-testid='sidebar'
        style={{top: 50}}
        vertical
        visible
        width='thin'
      >
        <Menu.Item as='a'>Subjects</Menu.Item>
      </Sidebar>

Selector Test 3: Clicking Subjects Menu Item Clears Show

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-3.tsx

In this test we render the helper component DisplaysCurrent. We can determine how many items are in the show array by looking at the div with testId 'show' in DisplaysCurrent 'children' property and counting its children.

 //clicking the 'subjects' menu item clears the selected subjects so the app will shows cards from all subjects
        it('clicking the subjects menu clears show', () => {
            const showSubjects = ['First Subject', 'Second Subject'];
            const showState = {
                ...initialState,
                show: showSubjects
            };

            const { getByText, getByTestId } = renderSelector(showState, <DisplaysCurrent />);

            const show = getByTestId('show');
            expect(show.children).toHaveLength(2);

            const subjects = getByText(/subjects/i);
            fireEvent.click(subjects);

            expect(show.children).toHaveLength(0);
        });

Pass Selector Test 3: Clicking Subjects Menu Item Clears Show

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-3.tsx

Get dispatch from CardContext. Add an onClick function to the 'Subjects' Menu.Item that dispatches a showAll action to CardContext.

const Selector = () => {
    const { dispatch } = useContext(CardContext);

    return (
        <Sidebar
        as={Menu}
        data-testid='sidebar'
        style={{top: 50}}
        vertical
        visible
        width='thin'
      >
        <Menu.Item as='a' onClick={() => dispatch({type: CardActionTypes.showAll})}>Subjects</Menu.Item>
      </Sidebar>
    )    
};

Selector Tests 4-7: Renders a Menu Item for Each Subject

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-4.tsx

There should be a menu item for each subject. We are going to test 0 cards, then use test.each to test for 1-3 cards.

Make a describe block named 'when there are cards, the sidebar has a menu item for each subject.'

//the sidebar has menu items in it
describe('when there are cards, the sidebar has a menu item for each subject', () => {
     //test 0 cards
    //test 1-3 cards with different subjects
    //1-3 cards show correct number of subject menu items
    //1-3 cards show subject menu items with correct names
});

Test for 0 cards. Look at the children property of sidebar to figure out how many menu items are being rendered.

//the sidebar has menu items in it
describe('when there are cards, the sidebar has a menu item for each subject', () => {
     //test 0 cards
    it('when there are no cards, there is only the "subjects" menu item', () => {
        const noCards = {
            ...initialState,
            cards: []
        };

        const { getByTestId } = renderSelector(noCards);
        const sidebar = getByTestId('sidebar');

        expect(sidebar.children).toHaveLength(1);
    });

Make a getCard function that takes a number and returns a card object. We'll use getCard to create a CardState with cards with different subjects. The expressions inside of the backticks are template literals.

//getCard returns a card object
    //the subject is the number argument as a string 
    const getCard = (number: number) => ({
        question: `${number}?`,
        answer: `${number}!`,
        subject: number.toString()
    });

Make an array numberOfSubjects. We'll pass this array to test.each. You've already seen test.each accept an array of arrays. If you pass test.each an array of 'primitives,' like numbers or strings, test.each will treat it as an array of arrays.

    //array 1, 2, 3 will get treated as [[1],[2],[3]] by test.each
    const numberOfSubjects = [1, 2, 3];

Test if there's a Menu Item for each subject. Make an empty array cards. Use a for loop to fill cards with Card objects by calling getCard repeatedly.

Make a CardState object named subjectState using the cards array. Then call renderSelector and test how many children sidebar is rendering.

    //test 1-3 cards with different subjects
    //1-3 cards show correct number of subject menu items
    test.each(numberOfSubjects)
    //printing the title uses 'printf syntax'. numbers are %d, not %n
    ('%d different subjects display correct number of subject menu items', 
    //name the arguments, same order as in the array we generated
    (number) => {
        //generate array of cards
        const cards : Card[] = [];

        for (let i = 1; i <= number; i++) {
            cards.push(getCard(i));
        };

        //create state with cards with subjects
        const subjectState = {
            ...initialState,
            cards
        };

        //render selector with the state with the subjects
        const { getByTestId } = renderSelector(subjectState);
        const sidebar = getByTestId('sidebar');

        expect(sidebar.children).toHaveLength(number + 1);
    });

Test if the names are right. We can make Jest assertions inside of a for loop.

    //1-3 cards show subject menu items with correct names
    test.each(numberOfSubjects)
    ('%d different subjects display menu items with correct names', 
    (number) => {
        //generate array of cards
        const cards : Card[] = [];

        for (let i = 1; i <= number; i++) {
            cards.push(getCard(i));
        };

        //create state with cards with subjects
        const subjectState = {
            ...initialState,
            cards
        };

        //render selector with the state with the subjects
        const { getByTestId, getByText } = renderSelector(subjectState);
        const sidebar = getByTestId('sidebar');

        expect(sidebar.children).toHaveLength(number + 1);

        for (let i = 1; i <= number; i++) {
            const numberItem = getByText(i.toString());
            expect(numberItem).toBeInTheDocument();
        };

    });

Pass Selector Tests 4-7: Renders a Menu Item for Each Subject

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-4.tsx

Get cards from CardContext.

Use Array.map to get an array subjectArray of just the subject from each card.

Create a new Set subjectSet from subjectArray. A set is an object that only holds unique values. So subjectSet will only contain one copy of each unique subject, regardless of how many times that subject appeared in subjectArray.

Use Array.from to make an array subjects out of the set object subjectSet. Mildly interesting fact that you don't need to know or understand: We could also use the spread operator to make this array, but we would have to change some TypeScript settings.

Use Array.sort to sort subjects into alphabetical order. Array.sort takes a function, uses the function to compares the objects in an array, and manipulates the array order.

Inside our sort function we cast the strings toLowerCase and use the string.localeCompare method to get the correct sort result. If you don't use toLowerCase then capitalization will result in incorrect sorting. If you don't use localeCompare then numbers won't sort correctly.

Once we have subjects, our correctly sorted array of all the unique subjects from all the cards, we use Array.map to turn subjects into Menu.Items.

const Selector = () => {
    const { cards, dispatch } = useContext(CardContext);

    const subjectArray = cards.map(card => card.subject);

    const subjectSet = new Set(subjectArray);

    const subjects = Array.from(subjectSet)
                    .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
    return (
        <Sidebar
        as={Menu}
        data-testid='sidebar'
        style={{top: 50}}
        vertical
        visible
        width='thin'
      >
          <Menu.Item as='a' onClick={() => dispatch({type: CardActionTypes.showAll})}>Subjects</Menu.Item>
        {subjects.map(subject => <Menu.Item key={subject} content={subject}/>)}
      </Sidebar>
    )    
};

Selector Test 8: Clicking Subject Menu Item Selects That Subject

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-5.tsx

We call renderSelector with the helper component DisplaysCurrent. By looking at the children of the show div, we can check what subjects are rendered before and after subject Menu.Items are clicked.

//clicking on a menu item for a subject selects that subject
it('clicking a subject item selects that subject', () => {
    const { cards } = initialState;
    expect(cards).toHaveLength(2);

    const first = cards[0];
    const second = cards[1];
    expect(first.subject).toBeTruthy();
    expect(second.subject).toBeTruthy();
    expect(first.subject).not.toEqual(second.subject);

    const { getByText, getByTestId } = renderSelector(initialState, <DisplaysCurrent />);

    const show = getByTestId('show');
    expect(show.children).toHaveLength(0);

    const firstSubject = getByText(first.subject);
    fireEvent.click(firstSubject);

    expect(show.children).toHaveLength(1);
    expect(show.children[0]).toHaveTextContent(first.subject.toString());

    const secondSubject = getByText(second.subject);
    fireEvent.click(secondSubject);

    expect(show.children).toHaveLength(2);
    expect(show.children[1]).toHaveTextContent(second.subject.toString());
});

Pass Selector Test 8: Clicking Subject Menu Item Selects That Subject

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-5.tsx

Let's also make the 'Subjects' menu item display how many subjects are selected. Get show from the cardContext.

    const { cards, dispatch, show } = useContext(CardContext);

Add the expression

{!!show.length && \`: ${show.length}\`}

to the 'Subjects' Menu.Item. !!show.length casts the length property of the show array to boolean, so if there's anything in show it will return true. && means that if the first expression returns true, the second expression will be evaluated. : ${show.length} is a template literal that will display a colon followed by the number of subjects in the show array.

Add an onClick function to the Menu.Item returned from subjects.map. The onClick function should dispatch a showAdd action.

<Sidebar
        as={Menu}
        data-testid='sidebar'
        style={{top: 50}}
        vertical
        visible
        width='thin'
      >
        <Menu.Item as='a' onClick={() => dispatch({type: CardActionTypes.showAll})}>
            Subjects{!!show.length && `: ${show.length}`}
        </Menu.Item>
        {subjects.map(subject => 
            <Menu.Item 
                content={subject}
                key={subject} 
                onClick={() => dispatch({type: CardActionTypes.showAdd, subject})}
            />)}
      </Sidebar>

Subject Component

The next test for the Selector is:
//clicking on a menu item for a subject expands that subject and shows a menu item with the question for each card in that subject

We are making a Subject component that will do all of that.

Features of Subject

Displays a subject to user
clicking on subject expands subject to show each card in subject
clicking on a card selects that card
clicking on an expanded subject deselects that subject and collapses the subject, hiding the cards in that subject

What to test:

Write a comment for each test.

//displays the subject as a menu item
//when a menu item is clicked clicked it should expand to show a menu item for each card/question in the subject
//if the subject is already expanded when it is clicked then it should collapse
//clicking a card menuItem selects the card

Subject Test 1: Displays Subject as Menu Item

File: src/components/Selector/components/Subject/index.test.tsx
Will Match: src/components/Selector/components/Subject/complete/test-1.tsx

import React, { useContext } from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { CardContext, CardProvider, initialState } from '../../../services/CardContext';
import Subject from './index';
import { CardState } from '../../../types';

afterEach(cleanup);

const renderSubject = (
    subject: string,
    testState?: CardState, 
    child?: JSX.Element 
    ) => render(
    <CardProvider testState={testState}>
        <Subject subject={subject}/>
        {child}
    </CardProvider>
);

The test

//displays the subject as a menu item
it('shows the subject on screen', () => {
    const subject = initialState.cards[0].subject;
    const { getByText } = renderSubject(subject);
    const subjectDisplay = getByText(subject);
    expect(subjectDisplay).toBeInTheDocument();
});

Pass Subject Test 1: Displays Subject as Menu Item

File: src/components/Selector/components/Subject/index.tsx
Will Match: src/components/Selector/components/Subject/complete/index-1.tsx

Make the Subject component include a Menu.Item.

import React, { Fragment, useContext } from 'react';
import { Icon, Menu } from 'semantic-ui-react';
import { CardContext } from '../../../../services/CardContext';
import { CardActionTypes } from '../../../../types';

const Subject = ({
    subject
  }: {
    subject: string
  }) => <Menu.Item as='a'>
      <Icon name='list'/>
      {subject}
  </Menu.Item>

export default Subject;

Subject Tests 2-4: Clicking Subject Expands, Shows Cards

File: src/components/Selector/components/Subject/index.test.tsx
Will Match: src/components/Selector/components/Subject/complete/test-2.tsx

Make a getCard function that returns a Card object.

Make a numberOfCards array to pass to test.each. Inside test.each use a for loop to call getCards and generate a subjectState with an array of cards.

Click the subject, test how many children are rendered after the click.

Use a for loop to assert that each child card appears in the document.

describe('expanded', () => {
    //getCard returns a card object
    //the subject is always the same 
    const getCard = (number: number) => ({
        question: `${number}?`,
        answer: `${number}!`,
        subject: 'subject'
    });

    //array 1, 2, 3 will get treated as [[1],[2],[3]] by test.each
    const numberOfCards = [1, 2, 3];

    //when clicked it should expand to show a menu item for each question in the subject
    //1-3 cards show correct number of card menu items
    test.each(numberOfCards)
    //printing the title uses 'printf syntax'. numbers are %d, not %n
    ('%d different cards display correct number of card menu items', 
    //name the arguments, same order as in the array we generated
    (number) => {
        //generate array of cards
        const cards : Card[] = [];

        for (let i = 1; i <= number; i++) {
            cards.push(getCard(i));
        };

        //create state with cards with subjects
        const subjectState = {
            ...initialState,
            cards
        };

        //render selector with the state with the subjects
        const { getAllByText, getByText } = renderSubject('subject', subjectState);
        const subject = getByText('subject');
        fireEvent.click(subject);

        const questions = getAllByText(/\?/);
        expect(questions).toHaveLength(number);

        for (let i = 1; i <= number; i++) {
            const numberItem = getByText(`${i.toString()}?`);
            expect(numberItem).toBeInTheDocument();
        };

    });
});

Pass Subject Tests 2-4: Clicking Subject Expands, Shows Cards

File: src/components/Selector/components/Subject/index.tsx
Will Match: src/components/Selector/components/Subject/complete/index-2.tsx

Get cards, dispatch, and show from CardContext.

Use Array.includes to figure out if the subject is in the array show and should be expanded.

Use Array.filter to get an array of just the cards with this subject.

Declare cardsChild, an array of Menu.Items generated by using Array.map on the array subjectCards.

Put a React Fragment around the component. The Fragment gives us somewhere to render cardsChild when we want to.

When expanded is true, render cardsChild.

const Subject = ({
    subject
  }: {
    subject: string
  }) =>  {
    const { cards, dispatch, show } = useContext(CardContext);

    //true if the subject is in the array show
    const expanded = show.includes(subject);

    //use filter to pull only the cards that have this subject
    const subjectCards = cards
    .filter(card => card.subject === subject)

    //cardsChild will return an array of <Menu.Item/> components
    const cardsChild = subjectCards
    .map(card => {
      const { question } = card;
      return <Menu.Item 
              content={question}
              as='a' 
              key={question}
            />
        });

    return (
        <Fragment>
            <Menu.Item as='a' onClick={() => dispatch({type: CardActionTypes.showAdd, subject})}> 
                <Icon name='list'/>
                {subject}
            </Menu.Item>
            {expanded && cardsChild}
        </Fragment>
    )};

Subject Test 5: Clicking on a Menu Item with a Question Selects the Card With That Question

File: src/components/Selector/components/Subject/index.test.tsx
Will Match: src/components/Selector/components/Subject/complete/test-3.tsx

Make a helper component DisplaysCurrent to display the current index from CardContext. Call renderSubject with the helper component.

Find and click a card Menu.Item. Assert that current should match the index of that card in cards.

describe('Expanded', () => {
    //clicking a card menuItem selects the card
    it('clicking on a question selects the card for that question', () => {        
        const { question, subject } = initialState.cards[1];
        const showState = {
            ...initialState,
            current: 0,
            show: [subject]
        };

        const DisplaysCurrent = () => {
            const { current } = useContext(CardContext);
            return <div data-testid='current'>{current}</div>
        };

        const { getByTestId, getByText } = renderSubject(subject, showState, <DisplaysCurrent />)

        const current = getByTestId('current');
        expect(current).toHaveTextContent('0');

        const menuItem = getByText(question);
        fireEvent.click(menuItem);

        expect(current).toHaveTextContent('1'); 
    });

    //if the subject is already expanded when it is clicked then it should collapse
})

Pass Subject Test 5: Clicking on a Menu Item with a Question Selects the Card With That Question

File: src/components/Selector/components/Subject/index.tsx
Will Match: src/components/Selector/components/Subject/complete/index-3.tsx

Add an onClick function to the Menu.Item in cardChild. The onClick function should dispatch a select action to CardContext.

 <Menu.Item 
              content={question}
              as='a' 
              key={question}
              onClick={() => dispatch({type: CardActionTypes.select, question})}
            />

Subject Test 6: Clicking on an Expanded Subject Collapses that Subject

File: src/components/Selector/components/Subject/index.test.tsx
Will Match: src/components/Selector/components/Subject/complete/test-4.tsx

This test just looks for one card. How would you use test.each to test for many cards?

//if the subject is already expanded when it is clicked then it should collapse
    it('if already expanded, it collapses when clicked ', () => {
        const { subject, question } = initialState.cards[0];
        expect(subject).toBeTruthy();

        const showState = {
            ...initialState, 
            //subject is in the show array
            show: [subject]
        };

        const { getByText } = renderSubject(subject, showState);

        //because subject is in the show array, <Subject> should be expanded
        //meaning, it should show a menu item for each card in the subject
        const questionItem = getByText(question);
        expect(questionItem).toBeInTheDocument();

        const subjectItem = getByText(subject);
        fireEvent.click(subjectItem);

        expect(questionItem).not.toBeInTheDocument();
      });

Pass Subject Test 6: Clicking on an Expanded Subject Collapses that Subject

File: src/components/Selector/components/Subject/index.tsx
Will Match: src/components/Selector/components/Subject/complete/index-4.tsx

Use the ternary operator to dispatch a showRemove action if the subject is expanded, and a showAdd action if the sucbject is not expanded.

    return (
        <Fragment>
            <Menu.Item as='a'
                onClick={() => expanded 
                    ? dispatch({type: CardActionTypes.showRemove, subject})
                    : dispatch({type: CardActionTypes.showAdd, subject})}> 
                <Icon name='list'/>
                {subject}
            </Menu.Item>
            {expanded && cardsChild}
        </Fragment>

Refactor Subject- Change Some Implementation Details

File: src/components/Selector/components/Subject/index.tsx
Will Match: src/components/Selector/components/Subject/complete/index-5.tsx

Get current from CardContext so we can know what the current card is. Declare a const currentCard.

    const { cards, current, dispatch, show } = useContext(CardContext);

    const currentCard = cards[current];

Use Array.sort to sort the array of cards alphabetically by question.

//use filter to pull only the cards that have this subject
    const subjectCards = cards
    .filter(card => card.subject === subject)
    //.sort will put the cards in alphabetical order by question
    .sort((a, b) => 
      a.question.toLowerCase().localeCompare(b.question.toLowerCase()))

How would you write a test to make sure that the cards are in alphabetical order by question?

Mark the card as active if it's the current card. This will highlight the card on the screen.

    <Menu.Item 
      active={!!currentCard && question === currentCard.question}
      as='a'
      content={question}
      key={question}
      onClick={() => dispatch({type: CardActionTypes.select, question})}
     />

Mark the subject as active if it has the subject of the current card. This will highlight the subject on the screen.

        <Fragment>
            <Menu.Item as='a'
                active={!!currentCard && currentCard.subject === subject}
                onClick={() => expanded 
                    ? dispatch({type: CardActionTypes.showRemove, subject})
                    : dispatch({type: CardActionTypes.showAdd, subject})}> 
                <Icon name='list'/>
                {subject}
            </Menu.Item>
            {expanded && cardsChild}
        </Fragment>

Ok, Subject is done!

Selector Tests 9-12: Add Subject to Selector

File: src/components/Selector/index.test.tsx
Will Match: src/components/Selector/complete/test-6.tsx

The test for the Selector expanding to show the cards in a subject is almost the same when we use the Subject component, but now we call renderSelector.

//clicking on a menu item for a subject expands that subject and shows a menu item with the question for each card in that subject
describe('When a subject is clicked it expands, shows menu item for each card', () => {
    //getCard returns a card object
    //the subject is always the same 
    const getCard = (number: number) => ({
        question: `${number}?`,
        answer: `${number}!`,
        subject: 'subject'
    });

    //array 1, 2, 3 will get treated as [[1],[2],[3]] by test.each
    const numberOfCards = [1, 2, 3];

    //when clicked it should expand to show a menu item for each question in the subject
    //1-3 cards show correct number of card menu items
    test.each(numberOfCards)
    //printing the title uses 'printf syntax'. numbers are %d, not %n
    ('%d different cards display correct number of card menu items', 
    //name the arguments, same order as in the array we generated
    (number) => {
        //generate array of cards
        const cards : Card[] = [];

        for (let i = 1; i <= number; i++) {
            cards.push(getCard(i));
        };

        //create state with cards with subjects
        const subjectState = {
            ...initialState,
            cards
        };

        //render selector with the state with the subjects
        const { getAllByText, getByText } = renderSelector(subjectState);
        const subject = getByText('subject');
        fireEvent.click(subject);

        const questions = getAllByText(/\?/);
        expect(questions).toHaveLength(number);

        for (let i = 1; i <= number; i++) {
            const numberItem = getByText(`${i.toString()}?`);
            expect(numberItem).toBeInTheDocument();
        };
    });
});

As is the test for clicking on a question selecting the card.

//clicking on a menu item for a card question selects that card
it('clicking on a question selects the card for that question', () => {        
    const { question, subject } = initialState.cards[1];
    const showState = {
        ...initialState,
        current: 0,
        show: [subject]
    };

    const DisplaysCurrent = () => {
        const { current } = useContext(CardContext);
        return <div data-testid='current'>{current}</div>
    };

    const { getByTestId, getByText } = renderSelector(showState, <DisplaysCurrent />)

    const current = getByTestId('current');
    expect(current).toHaveTextContent('0');

    const menuItem = getByText(question);
    fireEvent.click(menuItem);

    expect(current).toHaveTextContent('1'); 
});

Pass Selector Tests 9-11: Add Subject to Selector

File: src/components/Selector/index.tsx
Will Match: src/components/Selector/complete/index-6.tsx

Import Subject.

import Subject from './components/Subject';

Instead of mapping to a Menu.Item, map to a Subject.

{subjects.map(subject => <Subject key={subject} subject={subject}/>)}

Add Selector To App

Now let's add the Selector to the App so the user can use it to select subjects and cards.

App Test 1: Has Selector

File: src/App.test.tsx
Will Match: src/complete/test-6.tsx

Find the Selector's sidebar by testId.

//shows the Selector
it('shows the Selector', () => {
  const { getByTestId } = render(<App/>);
  const selector = getByTestId('sidebar');
  expect(selector).toBeInTheDocument();
});

Pass App Test 1: Has Selector

File: src/App.tsx
Will Match: src/complete/app-7.tsx

Import Selector.

import Selector from './components/Selector';

Add Selector to the App.

    return (
      <CardProvider>
        <StatsProvider>
          <NavBar showScene={showScene} setShowScene={setShowScene} />
          <Selector/>
          {showScene === SceneTypes.answering && <Answering />}
          {showScene === SceneTypes.writing && <Writing/>}
        </StatsProvider>
      </CardProvider>
    )};

Tests all pass, but the snapshot fails.

Update your snapshot.

Hit a to run all the tests:

Wow! You wrote 13 test suites and 126 tests! But I bet it only felt like 100, right? Good job!

Next Post: Finishing Touches

In the final post, we'll write some code to shuffle the cards and display only cards from selected subjects.

Saving to LocalStorage

jacobwicks — Fri, 17 Jan 2020 04:49:24 +0000

In this post we are going to write the code that saves the cards to the browser's localStorage. LocalStorage is a feature of web browsers that lets you save data to the user's computer in between sessions. Using localStorage will make it possible for cards to persist between sessions. When we start the app we can load cards from localStorage instead of loading the example cards that we wrote inside the CardContext services.

We are also going to write the code that saves the stats to the browser's localStorage. This will let the user's stats persist between sessions.

User Stories

The user loads the app. The user sees all the cards they have written. The user selects the subject that they want to study. The program displays the cards in that subject in random order.
The user thinks of a new card. The user opens the card editor. The user clicks the button to create a new card. The user writes in the card subject, question prompt, and an answer to the question. The user saves their new card.
The user changes an existing card and saves their changes.
The user opens the app. The user looks at the stats for a card and sees how many times they have answered it before.

Features

Cards save to localStorage and load when the app is started
Stats save to localStorage and load when the app is started

What is localStorage?

localStorage is an object that lets you save data in between browser sessions.

localStorage.setItem(): The setItem method allows you set the value of a property of localStorage.

localStorage.getItem(): The getItem method lets you retrieve the value of a property of localStorage.

We'll use JSON.stringify() on the array cards to turn it into a string before saving it. When we load cards, we'll use JSON.parse() to turn it back into an array.

JSON.stringify(): Converts a JSON object to a string.

JSON.parse(): Parses a string to a JSON object.

To test our code that uses localStorage, we'll be doing some 'mocking.'

What is Mocking?

Mocking is a term that has both a strict, technical meaning, and also a general meaning. Generally, mocking means using any kind of code to make a fake version of other code for use in testing. We'll be making a fake version of localStorage so that when our tests call the localStorage methods we can see what values they called with and also control what values get returned.

For a more detailed explanation of mocking, see: But really, what is a JavaScript mock?
For the different technical meanings of mocking, see the Little Mocker.

What to Test

Saving Cards saves Cards to localStorage
Loading Cards loads Cards from localStorage
Loading cards returns undefined if nothing found in localStorage
Saving Stats saves Stats to localStorage
Loading Stats loads the stats from localstorage
Loading stats returns empty object if nothing found in localStorage

Save Test 1: Saving Cards

File: src/services/Save/index.test.ts
Will Match: src/services/Save/complete/test-1.ts

Save/index.ts is a .ts file, not a tsx file. There will not be any JSX in Save, so we don't need to use the .tsx extension.

Write a comment for each test.

//saving cards saves cards
//loading cards retrieves saved cards
//loading cards returns undefined if nothing found
//saving stats saves stats
//loading stats retrieves saved stats
//loading stats returns empty object if nothing found

Imports and afterEach.

import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { saveCards } from './index';
import { initialState } from '../CardContext';

afterEach(cleanup);

Make a describe block named 'Saving and Loading Cards.'

describe('Saving and Loading Cards', () => {
//saving cards saves cards
//loading cards retrieves saved cards
//loading cards returns undefined if nothing found
});

Setup for Mocking LocalStorage

Inside the describe block, we will get a reference to the original localStorage object from the window. The window is basically the global object for the browser. It contains the document object model (the dom) where all the code that the user sees is. It also contains localStorage.

Before each test we get a reference to localStorage. During each test, we'll set this reference to a mock localStorage that we'll create. That way, we can control what the test sees and interacts with when the test accesses localStorage.

describe('Saving and Loading Cards', () => {
    let originalLocalStorage: Storage

    beforeEach(() => {
        originalLocalStorage = window.localStorage
    })

    afterEach(() => {
        (window as any).localStorage = originalLocalStorage
    })

    const { cards } = initialState;
    const stringCards = JSON.stringify(cards);

    //saving cards saves cards

Write the first test. We will use jest.spyOn to see if saveCards calls the localStorage setItem method with the right arguments. We are spying on the setItem method of the window.localStorage prototype. When we spy on a method, we replace that method with a jest.fn, and can see what calls get made to the spied on method. jest.spyOn is a type of mocking.

it('Saving cards saves cards', () => {

        const setItem = jest.spyOn(window.localStorage.__proto__, 'setItem');

        saveCards(cards);

        expect(setItem).toHaveBeenCalledWith("cards", stringCards);
    })

Pass Save Test 1: Saving Cards

File: src/services/Save/index.ts
Will Match: src/services/complete/index-1.ts

Using localStorage is fairly simple. It's globally available, so you don't need to import it. You access the setItem method and pass it two arguments. The first argument is the name of the property you want to set. The name is a string. The second argument is the value of the property. The value is also a string.

cards is an array, so we use JSON.stringify() to change it into a string before saving it.

export const saveCards = (cards: Card[]) => {
  try {
      localStorage.setItem('cards', JSON.stringify(cards));
    } catch (err) {
      console.error(err);
    }
};

When you finish writing the code and run the app, you can check if the cards are getting saved. You can check your localStorage in the dev console of your web browser. Click application, localstorage, then localhost:3000 and you can see the saved cards.

Save Tests 2-3: Loading Cards

File: src/services/Save/index.test.ts
Will Match: src/services/Save/complete/test-2.ts

Import loadCards.

import { saveCards, loadCards } from './index';

loadCards should retrieve the cards from localStorage and return them as a JSON object, an array.

We are doing some more complicated mocking in this test. We defined stringCards earlier as a JSON.stringify'd version of cards. Now we are making a jest.fn that will return the value stringCards when called.

let mockGetItem = jest.fn().mockReturnValue(stringCards)

localStorageMock is an object with a property getItem. localStorageMock.getItem returns a function that accepts any parameters and invokes mockGetItem, which returns stringCards.

        let localStorageMock = {
            getItem: (params: any) => mockGetItem(params),
        }

To overwrite localStorage with our localStorageMock we use Object.defineProperty.

        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true
            });

Now when loadCards calls localStorage it will actually be calling the localStorageMock that we just made. Trying to call localStorage.getItem() with any parameters will call the mockGetItem jest function.

Because we know loadCards will try to call localStorage.getItem('cards'), we know it will receive our mock value. loadCards should parse stringCards and return an array that matches cards.

    //loading cards retrieves saved cards
    it('Loading cards returns saved cards object', () => {
        let mockGetItem = jest.fn().mockReturnValue(stringCards);

        let localStorageMock = {
            getItem: (params: any) => mockGetItem(params),
        }; 

        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true
           });


        const loadedCards = loadCards();
        expect(mockGetItem.mock.calls.length).toBe(1);
        expect(mockGetItem.mock.calls[0][0]).toBe('cards');
        expect(loadedCards).toStrictEqual(cards);
    });

We want loadCards to return undefined if no cards are found in localStorage. This time mockGetItem returns undefined.

    //loading cards returns undefined if nothing found
    it('Loading cards when no saved cards returns undefined', () => {
        let mockGetItem = jest.fn().mockReturnValue(undefined);
        let localStorageMock = {
            getItem: (params: any) => mockGetItem(params),
        } 
        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true
            })


        const loadedCards = loadCards();
        expect(mockGetItem.mock.calls.length).toBe(1);
        expect(mockGetItem.mock.calls[0][0]).toBe('cards');
        expect(loadedCards).toStrictEqual(undefined);
    });

Pass Save Tests 2-3: Loading Cards

File: src/services/Save/index.ts
Will Match: src/services/Save/complete/index-2.ts

Write the loadCards function. If we get a value from localStorage, parse it and cast it to an array type Card[]. If we don't get a value, return undefined.

export const loadCards = () => {
  try {
    const stored = localStorage.getItem('cards');
    return stored 
      ? JSON.parse(stored) as Card[]
      : undefined;
  } catch (err) {
      console.error("couldn't get cards from localStorage");
      return undefined;
  }
};

Add Saving to `CardContext`

We are going to add saving and loading to CardContext.

Write the tests
Import the saveCards function into CardContext
Change the CardContext Provider so that it saves cards to localStorage when cards changes
Run the app and use Writing and the Save button to add another card
Inside the CardContext services file we will make a new getInitialState function that will try to load saved cards from localStorage

CardContext Tests 1-2: Saving the Array 'cards' When it Changes

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-10.tsx

Make a describe block named 'saving to localStorage and loading from localStorage.'

describe('saving to localStorage and loading from localStorage ', () => {
    it('when a card is added to cards, attempts to save', () => {
        const saveCards = jest.spyOn(localStorage, 'saveCards');

        const newCard = {
            question: 'New Question',
            subject: 'New Subject',
            answer: 'New Answer'
        };

        const newCards = [...initialState.cards, newCard];

        const SavesCard = () => {
            const { dispatch } = useContext(CardContext);
            return <Button content='save' onClick={() => dispatch({
                type: CardActionTypes.save,
                ...newCard
            })}/>}

        const { getByText } = render(
            <CardProvider>
                <SavesCard/>
            </CardProvider>);

        expect(saveCards).toHaveBeenCalledTimes(1);

        const saveCard = getByText(/save/i);
        fireEvent.click(saveCard);
        expect(saveCards).toHaveBeenCalledTimes(2);

        expect(saveCards).toHaveBeenCalledWith(newCards);
        saveCards.mockRestore();
    });

    it('when a card is taken out of cards, attempts to save cards', () => {
        const saveCards = jest.spyOn(localStorage, 'saveCards');

        const { current, cards } = initialState;
        const { question }  = cards[current];

        const newCards = cards.filter(card => card.question !== question);

        const DeletesCard = () => {
            const { dispatch } = useContext(CardContext);
            return <Button content='delete' onClick={() => dispatch({
                type: CardActionTypes.delete,
                question
            })}/>}

        const { getByText } = render(
            <CardProvider>
                <DeletesCard/>
            </CardProvider>);

        expect(saveCards).toHaveBeenCalledTimes(1);

        const deleteCard = getByText(/delete/i);
        fireEvent.click(deleteCard);
        expect(saveCards).toHaveBeenCalledTimes(2);

        expect(saveCards).toHaveBeenLastCalledWith(newCards);
    });
});

Pass CardContext Tests 1-2: Saving Cards When Cards Changes

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-8.tsx

So, we want the user to be able to create new cards, change cards, and delete existing cards. That means the app needs to save the changes that the user makes. How would you do it?

You could give them a Save All Cards button, and save to localStorage when they click it. You'd probably also want to notify them when they had unsaved changes if you did that.

You could change the onClick function of the existing Save button to save to localStorage. You could do the same with the Delete button.

You could change the reducer, and call saveCards inside of the save case and inside the delete case. But you generally don't want your reducer to to have 'side effects,' and saving to localStorage is a 'side effect.'

A side effect is changing anything that's not the state object. Don't worry if you don't fully understand what a side effect is. It's enough to understand that if you use your reducer to change things besides variables that you create inside the reducer, you'll end up writing bugs into your code. In this app that we are writing using the reducer to save to localStorage is a side effect that probably wouldn't cause any problems. But we aren't going to do it that way.

The way we are going to make the app save cards is to make the CardContext save cards to localStorage every time the array of cards changes. We can do this because the CardProvider is a React component like any other. We can use hooks inside of the CardProvider. So we can use useEffect to trigger a function any time cards changes. It's just like how we've used useEffect before, to trigger a function that clears inputs when current changes. Except this time we are putting it inside the CardProvider and the function will call saveCards so we can save the cards to localStorage.

Import useEffect.

import React, { createContext, useEffect, useReducer } from 'react';

Import saveCards from Save.

import { saveCards } from '../Save';

Add a useEffect hook to save cards to localStorage when cards change.

    const [state, dispatch] = useReducer(reducer, testState ? testState : initialState);

    useEffect(() => {
        //save cards to localStorage
        saveCards(state.cards);
  }, [state.cards])

Add Loading to CardContext

To make the CardContext load the saved questions we are going to change the way that the CardContext gets the initialState. Right now initialState is an object inside of CardContext/index.js.

CardContext Services

We are going to make a function called getInitialState that returns the initialState object. We are going to put this function into the services subfolder of CardContext. This will let us keep the CardContext index file organized and easy to read. This is important because later in the project we are going to add some more cases to the reducer, which will make the CardContext file bigger.

CardContext Services Tests

File: src/services/CardContext/services/index.test.ts
Will Match: src/services/CardContext/services/complete/test-1.ts

What to Test?

We are going to write tests for the getInitialState function. Until now, initialState was just an object that we had written. We knew what would be in it. But now initialState will be the result of the getInitialState function. The getInitialState function is going to attempt to load saved cards from localStorage. And we can't be sure that it's going to get any cards, or that there won't be an error. So we want to test

getInitialState returns a default array of cards when loadCards from localStorage returns undefined
getInitialState returns the saved array of cards when loadCards returns a saved array of cards
getInitialState returns a current index of 0

getInitialState will always call the loadCards function that we wrote in Save. What loadCards returns depends on what is in localStorage. When we are running tests, we aren't using the localStorage in our web browser. We are using localStorage in the test web browser that Jest makes. This test browser localStorage starts out empty. And we can put things into it. So one way to test how getInitialState works with an empty localStorage or with cards in localStorage is to actually use the test browser localStorage. Don't put anything in and run the first test. Put cards in and run the second test. But then our test of getInitialState would also be a a test of the loadCards function. And it would depend on how well we understand what is in the test browser localStorage.

We Need to Mock LoadCards

We only want to test getInitialState. We don't want to test loadCards at the same time. So what we should do is make a fake version of loadCards. We will make a fake version of loadCards, and declare what the fake version of loadCards will return when getInitialState calls it. We will then test getInitialState in a way that makes getInitialState call the fake loadCards function instead of the real one. That's how we know what value of loadCards getInitialState is using. We'll know getInitialState is using the value that we want because it is calling the fake version of loadCards that we control.

A fake version of a function is called a mock function. The process of setting up mock functions is called mocking. Mocking can be complicated to set up right. I have no doubt that you will someday be very frustrated trying to mock a function while you are testing. But this example should work for you. And I hope it gives you an idea of how to set up mock functions when you are testing your own projects.

Write a Comment for Each Test.

//gets default initialState when it does not get cards from localstorage
//initialState contains saved cards when saved cards returned from localStorage
//current index should start at 0

Use Require Instead of Import

Do we do the imports at the top of this file? No! We aren't using the import command to get the function that we are testing. We are getting the function with the require command. There are complicated, technical differences between the way that these two commands work.

The basic reason we are not using import is because import would do the work to set up getInitialState before our mock loadCards function was ready. If we got getInitialState using import, getInitialState would be set up to use the real loadCards function. After that, our mock loadCards function would be set up. Then our tests wouldn't work because when we tested getInitialState it would call the real loadCards function. That's not what we want!

When we use require, getInitialState is set up when the require code runs. We can call require after we set up our mock function. That way, we can force getInitialState to call the mock loadCards function instead of the real one. When getInitialState calls the mock loadCards, it will get the return value that we put in the mock function. By controlling the return value of the mock function, we can control the test inputs.

//this command will reset the mock values in between tests
beforeEach(() => jest.resetModules());

//gets default initialState when it does not get cards from localstorage
it('gets default initialState when no cards in localstorage', () => {

    //the first argument is the path to the file that has the function you want to mock
    //the second argument is a function that returns an object
    //give the object a property for each function you want to mock
    jest.mock('../../Save', () => ({ 
        //loadCards is the only function we are mocking 
        //the value of loadCards is a function that returns undefined
        loadCards: () => undefined 
    }));

    //get the getInitialState function using require
    //put this AFTER THE MOCK, 
    //so now getInitialState will call the mock loadCards
    //and NOT THE REAL loadCards
    const { cards, getInitialState } = require("./index");

    const initialState = getInitialState();

    //because we set loadCards up to return undefined
    //getInitialState should return a CardState where the cards array is the default cards array
    expect(initialState.cards).toEqual(cards);
});

//initialState contains saved cards when saved cards returned from localStorage    
it('returns stored cards', () => {
    const mockCards = ['stored card', 'another stored card'];

    //See how we have a different return value?
    jest.mock('../../Save', () => ({ 
        loadCards: () => mockCards 
    }));

    const { getInitialState } = require("./index");

    const initialState = getInitialState();

    //getInitialState().cards should equal the return value we gave it
    expect(initialState.cards).toEqual(mockCards);
});

//current index should start at 0
it('starts current at 0', () => {
    const { getInitialState } = require('./index');

    const initialState = getInitialState();

    expect(initialState.current).toEqual(0);
})

Write the CardContext Services Index

File: src/services/CardContext/services/index.ts
Will Match: src/services/CardContext/services/complete/index-1.ts

Start the services file with these imports:

import { Card, CardState } from '../../../types';
import { loadCards } from '../../Save';

Remember, loadCards is the function that we mocked in our tests. We don't need to do anything special with it in this file to mock it in the tests.

Cut and paste card1, card2, and cards from CardContext/index.tsx to CardContext/services/index.ts.

//declare a card object
const card1: Card = {
    question: 'What is a linked list?',
    subject: 'Linked List',
    answer: `A linked list is a sequential list of nodes. 
    The nodes hold data. 
    The nodes hold pointers that point to other nodes containing data.`
};

//declare another card object
const card2: Card = {
    question: 'What is a stack?',
    subject: 'Stack',
    answer: `A stack is a one ended linear data structure.
    The stack models real world situations by having two primary operations: Push and pop.
    Push adds an element to the stack.
    Pop pulls the top element off of the stack.`
}

//make an array with both cards
const cards = [card1, card2];

We are going to make a function getInitialState that returns the initialState object. We will declare a const loadedCards and assign it the return value of the loadCards function that gets the cards out of localStorage. If loadedCards is an array of cards then getInitialState will use it. If loadedCards is undefined then getInitialState will use cards, the array of example cards.

Mocking the loadCards function in the tests lets us control the return value of the loadCards function. That is how we test our getInitialState function.

//loadedCards is the result of calling loadCards
//try to get saved cards from localStorage
const loadedCards = loadCards();

//a function that loads the cards from localStorage
//and returns a CardState object
export const getInitialState = () => ({
    //the cards that are displayed to the user
    //if loadedCards is undefined, use cards
    cards: loadedCards ? loadedCards : cards,

    //index of the currently displayed card
    current: 0,

    //placeholder for the dispatch function
    dispatch: (action:CardAction) => undefined
} as CardState);

Import getInitialState into CardContext

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-9.tsx

Import the getInitialState function from services:

import { getInitialState } from './services/';

If any of these objects are still in CardContext, delete them:

card1
card2
cards

Change the definition of initialState from:

export const initialState: CardState = {
    current: 0,
    cards,
    dispatch: ({type}:{type:string}) => undefined,
};

to a call to getInitialState:

export const initialState = getInitialState();

Instead of just declaring the initialState object in CardContext, we call the getInitialState function. getInitialState will try to load the cards from localStorage. If the cards load, getInitialState will return the initialState object with cards loaded from localStorage. If it receives undefined, it will return the example cards that we wrote.

Those tests we wrote with the mocked loadCards function pass now!

Run the app. The cards will now load from localStorage when the app starts!

Open the dev console. Click Application. Click localStorage. Click localhost:3000. These commands and menus may be different if you aren't using Chrome, or if you are using a different version of Chrome.

Save Test 3: Save Stats

File: src/services/Save/index.test.ts
Will Match: src/services/Save/complete/test-3.ts

Import saveStats.

import { 
    saveCards, 
    loadCards, 
    saveStats
} from './index';

Make a describe block 'Saving and Loading Stats.'

describe('Saving and Loading Stats', () => {
    let originalLocalStorage: Storage

    beforeEach(() => {
        originalLocalStorage = window.localStorage
    })

    afterEach(() => {
        (window as any).localStorage = originalLocalStorage
    })

//saving stats saves stats
//loading stats retrieves saved stats
//loading stats returns empty object if nothing found
});

Make some example stats, and stringify them.

    const stats = {
        'Example Question': {
            right: 3,
            wrong: 2,
            skip: 1
        }
    };

    const stringStats = JSON.stringify(stats);

    //saving stats saves stats

Make the test for saving stats. Use jest.spyOn to mock the localStorage setItem.

    //saving stats saves stats
    it('Saving stats saves stats', () => {

        const setItem = jest.spyOn(window.localStorage.__proto__, 'setItem');

        saveStats(stats);

        expect(setItem).toHaveBeenCalledWith("cards", stringStats);
    });

Pass Save Tests 3: Save Stats

File: src/services/Save/index.ts
Will Match: src/services/Save/complete/index-3.ts

Import StatsType.

import { Card, StatsType } from '../../types';

The saveStats function is fairly simple.

export const saveStats = (stats: StatsType) => {
  try {
    localStorage.setItem('stats', JSON.stringify(stats));
  } catch (err) {
    console.error(err);
  }
};

Save Tests 4-5: Loading Stats

File: src/services/Save/complete/index.test.ts
Will Match:src/services/Save/complete/test-4.ts

Import loadStats.

import { 
    saveCards, 
    loadCards, 
    saveStats,
    loadStats
} from './index';

If there are stats in localStorage, loadStats should return a stats object.

    //loading stats retrieves saved stats
    it('Loading stats returns saved stats object', () => {
        const mockGetItem = jest.fn().mockReturnValue(stringStats);

        const localStorageMock = {
            getItem: (params: any) => mockGetItem(params),
        } 

        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true
            })    

        const loadedStats = loadStats();

        expect(mockGetItem.mock.calls.length).toBe(1);
        expect(mockGetItem.mock.calls[0][0]).toBe('stats');
        expect(loadedStats).toStrictEqual(stats);
    });

loadStats should return an empty object (not undefined) if nothing is found in localStorage.

    //loading stats returns empty object if nothing found
    it('Loading stats when no saved cards returns undefined', () => {
        const mockGetItem = jest.fn().mockReturnValue(undefined);

        const localStorageMock = {
            getItem: (params: any) => mockGetItem(params),
        } 

        Object.defineProperty(window, 'localStorage', {
            value: localStorageMock,
            writable: true
            })

        const loadedStats = loadStats();

        expect(mockGetItem.mock.calls.length).toBe(1);
        expect(mockGetItem.mock.calls[0][0]).toBe('stats');
        expect(loadedStats).toStrictEqual({});
    });

Pass Save Tests 4-5: Loading Stats

File: src/services/Save/complete/index.ts
Will Match:src/services/Save/complete/index-4.ts

export const loadStats = () => {
  try {
    const stored = localStorage.getItem('stats');

    return stored 
      ?  JSON.parse(stored) as StatsType
      : {} as StatsType
  } catch (err) {
      console.error("couldn't get stats from localStorage");
      return {} as StatsType;
  }
};

Add Saving to StatsContext

We are going to add saving and loading to StatsContext.

Write the tests
Import the saveStats function into StatsContext
Change the StatsContext provider so that it saves stats to localStorage when stats changes
Change getInitialState to load saved stats from localStorage

StatsContext Tests 1-3: Saves Stats After Each Type of Action

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-8.tsx

Import the contents of Save as localStorage.

import * as localStorage from '../Save';
import { Button } from 'semantic-ui-react';

Write a comment for each test.

//saves stats when stats changed
//stats is empty object when it does not get stats from localstorage
//initialState contains saved stats when saved stats are returned from localStorage

Make a describe block named 'saving to localStorage and loading from localStorage.' Make another describe block inside the first, called 'saving.'

describe('saving to localStorage and loading from localStorage ', () => {
    //saves stats when stats changes    
    describe('saves stats when stats changes', () => {
    });

    //stats is empty object when it does not get stats from localstorage
    //initialState contains saved stats when saved stats are returned from localStorage

});

Declare a const question. This will be the question that we dispatch in stats actions.
Make a helper component UpdateButtons with three buttons that dispatch actions to statsContext.
Use Object.values and Array.map to turn the StatsActionType into an array of test parameters.

Run the tests with test.each.

    describe('save', () => {        
        const question = 'Is this an example question?';

        const UpdateButtons = () => {
            const { dispatch } = useContext(StatsContext);
            const dispatchStat = (type: StatsActionType) => dispatch({type, question});

            return <div>
                <Button content='right' onClick={() => dispatchStat(StatsActionType.right)}/>
                <Button content='wrong' onClick={() => dispatchStat(StatsActionType.wrong)}/>
                <Button content='skip' onClick={() => dispatchStat(StatsActionType.skip)}/>
            </div>
        }

        const eachTest = Object.values(StatsActionType)
        .map(actionType => {
            //an object of type StatsState
            const result = { [question] : {
                ...blankStats,
                [actionType]: 1
            }}

            //return an array of arguments that it.each will turn into a test
            return [
                actionType,
                result
            ];
        });

        //pass the array eachTest to it.each to run tests using arguments
        test.each(eachTest)
        //printing the title from it.each uses 'printf syntax'
        ('%#: %s saves new stats', 
        //name the arguments, same order as in the array we generated
        (
            actionType, 
            result
            ) => {
            //test starts here            
            const saveStats = jest.spyOn(localStorage, 'saveStats');
            saveStats.mockClear();

            const { getByText } = render(
                <StatsProvider testState={{} as StatsState}>
                    <UpdateButtons />
                </StatsProvider>);

            expect(saveStats).toHaveBeenCalledTimes(1);
            expect(saveStats).toHaveBeenCalledWith({});

            const regex = new RegExp(actionType as StatsActionType);
            const button = getByText(regex);
            fireEvent.click(button);

            expect(saveStats).toHaveBeenCalledTimes(2);
            expect(saveStats).toHaveBeenLastCalledWith(result);

        });
    });

Pass StatsContext Tests 1-3: Saves Stats After Each Type of Action

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-4.tsx

Import useEffect.

import React, { createContext, useEffect, useReducer } from 'react';

Import saveStats.

import { saveStats } from '../Save';

Add the useEffect to save stats whenever state changes.

    const [state, dispatch] = useReducer(reducer, testState ? testState : initialState);

    useEffect(() => {
        saveStats(state);
    }, [state])

    const value = {...state, dispatch} as StatsState;

StatsContext Test 4: Loading Stats from LocalStorage

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-9.tsx

Change Imports.

import React, { useContext} from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Stats, StatsActionType, StatsState } from '../../types';
import { Button } from 'semantic-ui-react';

jest.mock('../Save', () => ({
    saveStats: jest.fn(),
    loadStats: () => ({})
}));

const { 
    blankStats, 
    initialState, 
    reducer, 
    StatsContext,
    StatsProvider 
} = require('./index');

Write test. Use jest.spyOn to mock loadStats.

    describe('load', () => {
        //stats is empty object when it does not get stats from localstorage
        it('gets default initialState when no stats in localstorage', () => {        
            expect(initialState).toHaveProperty('dispatch');
            expect(Object.keys(initialState).length).toEqual(1);
        });

        //loading stats retrieves saved stats
        it('loads stats from localStorage when there are stats in localStorage', () => {
            const localStorage = require('../Save'); 
            const loadStats = jest.spyOn(localStorage, 'loadStats');

            loadStats.mockImplementation(() => ({
                'Example Question': {
                    right: 1,
                    wrong: 2,
                    skip: 3
                }
            }));

            const { getInitialState } = require('./index');
            const initialState = getInitialState();

            expect(initialState).toHaveProperty('dispatch');
            expect(initialState).toHaveProperty('Example Question');
            expect(Object.keys(initialState).length).toEqual(2);
        })
    })

initialState is already the default state, so the first test passes.

Pass StatsContext Test 4: Loading Stats from LocalStorage

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-6.tsx

Import loadStats.

import { loadStats, saveStats } from '../Save';

Make a getInitialState function. Use the spread operator to add the result of loadStats. Remember, loadStats will just return an empty object if there's an error.

//getInitialState is a function that returns a StatsState object
export const getInitialState = () => ({
    //spread the return value of the loadStats function
    ...loadStats(),
    dispatch: (action: StatsAction) => undefined
//tell TypeScript it is a StatsState object
} as StatsState);

//the object that we use to make the first Context
export const initialState = getInitialState();

Ok, now stats will be saved in between sessions!

Next Post: The Selector

Writing New Cards

jacobwicks — Fri, 17 Jan 2020 04:48:48 +0000

In this post we will make it possible for the user to write new cards. We will make a new scene called Writing where the user can write new cards. In the next post we will make it possible for the user to save the cards that they write to the browsers localStorage, so the cards can persist between sessions.

User Stories

The user thinks of a new card. The user opens the card editor. The user clicks the button to create a new card. The user writes in the card subject, question prompt, and an answer to the question. The user saves their new card.
The user deletes a card.
The user changes an existing card and saves their changes.

Features

The features from the user stories:

a component that lets the user write new cards
inputs for question, subject, and answer
the component can load existing cards
a button to create a new card that clears the writing component
a button to save a card into the deck of cards
a button to delete the current card

In addition to these features, for Writing to change existing cards we'll need a way to select cards. The Selector component will let the user select cards. We'll write the Selector in a later post.

Writing

In this post we will make Writing work. We will change the CardContext so that it can handle actions dispatched from Writing. Handling actions is how the CardContext will add the cards that the user writes to the array of cards that the app uses. After we write the test for Writing being able to save cards, we will go change the CardContext so that saving works. Then we will go back to Writing and make the Save button work. Same for the new card action.

Handling actions is also how the CardContext will delete cards. After we write the test for Writing being able to delete cards, we will go change the CardContext so that deleting works. Then we will go back to Writing and make the Delete button work.

Tests for Writing

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-1.tsx

In the last post we didn't write tests for Writing because we only made a placeholder component. We made the placeholder because we wanted to make NavBar so the user could choose what scene to show. We made the placeholder so that we could see NavBar working. Now it is time to make the real Writing component. So now it is time to write the tests for Writing.

How to Decide What to Test For

We don't have to test for everything. We want to test for the parts that matter. Think about what we just described the Writing component doing. Creating a new card. Changing a card. Saving changes. Deleting a card. You want to write tests that tell you that these important features work.

Now think about what you know about card objects. Remember the structure of each card:

//File: src/types.ts

//defines the flashcard objects that the app stores and displays
export interface Card {
    //the answer to the question
    answer: string,

    //the question prompt
    question: string,

    //the subject of the question and answer
    subject: string
}

Choose the Components

The user will need a place to enter the answer, the question, and the subject of the card. It is really a Form for the user to fill. So we will use the Semantic UI React Form component.

The subject is probably short, so use an Input for that. The question and the answer can be longer, so use TextAreas for those.

The Input and both TextAreas will have headers so the user knows what they are, but we aren't going to write tests for the headers because they aren't important to how the page functions. Remember from earlier in the App, Semantic UI React TextAreas need to be inside of a Form to look right.

You'll need to give the user a Button to save their card once they've written it. You'll also need to give them a button to create a new card. Let's add a delete button too, so the user can get rid of cards they don't want.

Write a comment for each test you plan to make:

//there's an input where the user can enter the subject of the card
//There's a textarea where the user can enter the question prompt of the card
//there's a textarea where the user can enter the answer to the question
//there's a button to save the card
//when you enter a subject, question, and answer and click the save button a new card is created
//there's a button to create a new card
//when you click the new button the writing component clears its inputs
//there's a button to delete the current card
//when you click the delete button the card matching the question in the question textarea is deleted from the array cards

Ok, let's get started writing some code. Write your imports at the top of the test file.

import React, { useContext } from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { CardProvider, CardContext, initialState } from '../../services/CardContext';
import { CardState } from '../../types';
import Writing from './index';

Invoke afterEach

afterEach(cleanup);

Helper Component: Displays Last Card

Sometimes we'll want to know if the contents of the cards array has changed. If we add a card or delete a card we want cards to change. But Writing only displays the current card. Let's make a helper component that just displays the last card in the cards array. When we want to know if the cards array has changed, we'll render this component and look at what's in it.

//displays last card in the cards array
const LastCard = () => {
    const { cards } = useContext(CardContext);
    //gets the question from the last card in the array
    const lastCard = cards[cards.length - 1].question;

    return <div data-testid='lastCard'>{lastCard}</div>
};

Helper Function: Render Writing inside CardContext

Write a helper function to render Writing inside of the CardContext. It takes two optional parameters.

The first paramater is testState. testState is a CardState object, so we can pass in specific values instead of the default initialState.

The second parameter is child. child accepts JSX elements, so we can pass our LastCard display component in and render it when we want to.

const renderWriting = (
    testState?: CardState, 
    child?: JSX.Element 
    ) => render(
        <CardProvider testState={testState}>
            <Writing />
            {child}
        </CardProvider>);

Writing Test 1: Has Subject Input

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-1.tsx

it('has an input to write the subject in', () => {
    const { getByTestId } = renderWriting();
    const subject = getByTestId('subject');
    expect(subject).toBeInTheDocument();
});

Pass Writing Test 1: Has Subject Input

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-2.tsx

First, add the imports.

We are going to use many of the React Hooks to make the form work. useCallback is a hook that we haven't seen before. Sometimes the way useEffect and the setState function from useState interact can cause infinite loops. The useCallBack hook prevents that. We'll use useCallBack to make useEffect and useState work together to clear out the form when the user switches cards.

import React, { 
    useCallback, 
    useContext, 
    useEffect, 
    useState,
} from 'react';

import { 
    Button,
    Container,
    Form,
    Header,
    Input,
    TextArea
} from 'semantic-ui-react';
import { CardContext } from '../../services/CardContext';
import { CardActionTypes } from '../../types';

We'll put the Input in a Form. Give Inputs inside a Form a name so that you can collect the contents when the user submits the form. The name of this input is 'subject', which is the same as the testId. But the name doesn't have to be the same as the testId, they are completely separate.

const Writing = () =>
    <Form>
        <Header as='h3'>Subject</Header> 
        <Input data-testid='subject' name='subject'/>
    </Form>

Writing Test 2: Has Question TextArea

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/test-2.tsx

//There's a textarea where the user can enter the question prompt of the card
it('has a textarea to write the question in', () => {
    const { getByTestId } = renderWriting();
    const question = getByTestId('question');
    expect(question).toBeInTheDocument();
});

Pass Writing Test 2: Has Question TextArea

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-3.tsx

const Writing = () => 
    <Form>
        <Header as='h3'>Subject</Header> 
        <Input data-testid='subject' name='subject'/>
        <Header as='h3' content='Question'/> 
        <TextArea data-testid='question' name='question'/>
    </Form>

Writing Test 3: Has Answer TextArea

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/test-3.tsx

//there's a textarea where the user can enter the answer to the question
it('has a textarea to write the answer in', () => {
    const { getByTestId } = renderWriting();
    const answer = getByTestId('answer');
    expect(answer).toBeInTheDocument();
});

Pass Writing Test 3: Has Question TextArea

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-4.tsx

const Writing = () => 
    <Form>
        <Header as='h3'>Subject</Header> 
        <Input data-testid='subject' name='subject'/>
        <Header as='h3' content='Question'/> 
        <TextArea data-testid='question' name='question'/>
        <Header as='h3' content='Answer'/> 
        <TextArea data-testid='answer' name='answer'/>
    </Form>

Writing Test 4: Has Save Button

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/test-4.tsx

//there's a button to save the card
it('has a save button', () => {
    const { getByText } = renderWriting();
    const save = getByText(/save/i);
    expect(save).toBeInTheDocument();
});

Pass Writing Test 4: Has Save Button

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-5.tsx

    <Form>
        <Header as='h3'>Subject</Header> 
        <Input data-testid='subject' name='subject'/>
        <Header as='h3' content='Question'/> 
        <TextArea data-testid='question' name='question'/>
        <Header as='h3' content='Answer'/> 
        <TextArea data-testid='answer' name='answer'/>
        <Button content='Save'/>
    </Form>

Run the app, select Edit Flashcards and you will see Writing on screen.

Now it looks good.

Saving Cards

Now it is time to make saving cards work. When a card is saved, it will be added to the array cards in the CardContext. To make saving work, we will

Make the new test for Writing
Add save to CardActionTypes in types.ts
Write the onSubmit function for the Form in Writing
Make a new test for handling save in the CardContext reducer
Add a new case 'save' to the CardContext reducer

Writing Test 5: Saving

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-5.tsx

To test if saving works, we need to find the Input and TextAreas and put example text in them. Then we'll find the save button and click it. After that, we check the textContent of the LastCard helper component and expect it to match the example text.

//when you enter a subject, question, and answer and click the save button a new card is created
it('adds a card when you save', () => {
    //the LastCard component just displays the question from the last card in cardContext
    //if we add a card and it shows up in last card, we'll know saving works
    const { getByTestId, getByText } = renderWriting(undefined, <LastCard/>);

    //the strings that we will set the input values to
    const newSubject = 'Test Subject';
    const newQuestion = 'Test Question';
    const newAnswer = 'Test Answer';

    //We are using a Semantic UI React Input component
    //this renders as an input inside a div => <div><input></div>
    //so targeting 'subject' will target the outside div, while we want the actual input
    //subject has a children property, which is an array of the child nodes
    //children[0] is the input
    const subject = getByTestId('subject');
    const subjectInput = subject.children[0];
    fireEvent.change(subjectInput, { target: { value: newSubject } });
    expect(subjectInput).toHaveValue(newSubject);

    //The TextArea component doesn't have the same quirk
    //question and answer use TextAreas instead of Input
    const question = getByTestId('question');
    fireEvent.change(question, { target: { value: newQuestion } });
    expect(question).toHaveValue(newQuestion);

    const answer = getByTestId('answer');
    fireEvent.change(answer, { target: { value: newAnswer } });
    expect(answer).toHaveValue(newAnswer);

    const save = getByText(/save/i);
    fireEvent.click(save);

    const lastCard = getByTestId('lastCard');
    expect(lastCard).toHaveTextContent(newQuestion);
});

Saving doesn't work yet. We need to add the function that collects the data from the Form. We need to dispatch a save action to CardContext. And we also need to write the case in the CardContext reducer that will handle the save action.

Types: Add Save to CardActionType

File: src/types.ts
Will Match: src/complete/types-6.ts

Add save to CardActionTypes. Add a save action to CardAction. The save action takes three strings: answer, question, and subject.

//the types of action that the reducer in CardContext will handle
export enum CardActionTypes {
    next = 'next',
    save = 'save'
};

export type CardAction =    
    //moves to the next card
    | { type: CardActionTypes.next }

    //saves a card
    | { type: CardActionTypes.save, answer: string, question: string, subject: string }

Pass Writing Test 5: Saving

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-6.tsx

Add the function to collect data from the Form. When a form is submitted, the form emits and event that you can get the value of the inputs from. The data type of the form submission event is React.FormEvent<HTMLFormElement>.

First we prevent the default Form handling by calling the preventDefault method of the form event. Then we make a new FormData object from the event.

After we turn the event into a FormData object, we can get the values of the inputs from it using the get method and the name of the input. We named our inputs 'answer,' 'subject,' and 'question' so those are the names we'll get out of the form event and assign to variables.

Once we have assigned the input values to variables, we can do whatever we need to with them. We'll dispatch them as a save action to the CardContext. Later we will write the code for CardContext to handle a save action, and then dispatching a save action will result in a new card being added to the array cards in the CardContext.

const Writing = () => {
    const { dispatch } = useContext(CardContext);

    return (
    <Form onClick={(e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const card = new FormData(e.target as HTMLFormElement);
        const answer = card.get('answer') as string;
        const question = card.get('question') as string;
        const subject = card.get('subject') as string;

        dispatch({
            type: CardActionTypes.save,
            answer,
            question,
            subject
        });
    }}>

This still won't pass the test named 'adds a card when you save.' We need to add a save case to the CardContext reducer so it can handle the save action.

CardContext Tests 1-2: Handling Save in the CardContext Reducer

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-8.tsx

We'll write our tests inside the 'CardContext reducer' describe block.
Write a quote for each test we are going to write. save will add a new card to the context. save can also save changes to a card. If a card with the question from the save action already exists, save will overwrite that card.

    //save new card
    //save changes to existing card

To test the reducer, we need to create an action. Then we pass the state and the action to the reducer and look at the results.

In this test we use two new array methods. Array.findIndex and Array.filter.

Array.findIndex accepts a function and returns a number. It will iterate over each element in the array and pass the element to the function. If it finds an element that returns true from the function, findIndex will return the index of that element. If it does not find an element that returns true from the function, then it will return -1.

We use findIndex to make sure that the cards array from initialState does not already contain the example text.

Array.filter accepts a function and returns a new array. It will iterate over each element in the array and pass the element to the function. If the element returns true from the function, then it will be added to the new array. If the element does not return true from the function, it will be 'filtered out' and will not be added to the new array.

We use filter to check that the cards array has a card with the example text after the reducer handles the save action. We filter out all cards that don't have the example text. We check the length property of the resulting array, and expect that it's equal to 1. The length should be equal to 1 because the array should only contain the card that was just added.

 //save new card
    it('save action with new question saves new card', () => {
        const answer = 'Example Answer';
        const question = 'Example Question';
        const subject = 'Example Subject';

        //declare CardAction with type of 'save'
        const saveAction: CardAction = { 
            type: CardActionTypes.save,
            question,
            answer,
            subject
        };

        //before the action is processed initialState should not have a card with that question
        expect(initialState.cards.findIndex(card => card.question === question)).toEqual(-1);


        //pass initialState and saveAction to the reducer 
        const { cards } = reducer(initialState, saveAction);
        //after the save action is processed, should have one card with that question
        expect(cards.filter(card => card.question === question).length).toEqual(1);

        //array destructuring to get the card out of the filtered array
        const [ card ] = cards.filter(card => card.question === question);

        //the saved card should have the answer from the save action
        expect(card.answer).toEqual(answer);

        //the saved card should have the subject from the save action
        expect(card.subject).toEqual(subject);
   });

To test saving changes to an existing card, we create existingState, a cardState with a cards array that includes our example card. Then we create a save action and send the state and the action to the reducer. We use filter to check that the cards array still just has one copy of the card. We expect the contents of the card to have changed.

    //save changes to existing card
    it('save action with existing question saves changes to existing card', () => {
        const answer = 'Example Answer';
        const question = 'Example Question';
        const subject = 'Example Subject';

        const existingCard = {
            answer,
            question,
            subject
        };

        const existingState = {
            ...initialState,
            cards: [
                ...initialState.cards, 
                existingCard
            ]};

        const newAnswer = 'New Answer';
        const newSubject = 'New Subject';

        //declare CardAction with type of 'save'
        const saveAction: CardAction = { 
            type: CardActionTypes.save,
            question,
            answer: newAnswer,
            subject: newSubject
        };

        //the state should have one card with that question
        expect(existingState.cards.filter(card => card.question === question).length).toEqual(1);

        //pass initialState and saveAction to the reducer 
        const { cards } = reducer(initialState, saveAction);

        //Ater processing the action, we should still only have one card with that question
        expect(cards.filter(card => card.question === question).length).toEqual(1);

        //array destructuring to get the card out of the filtered array
        const [ card ] = cards.filter(card => card.question === question);

        //answer should have changed
        expect(card.answer).toEqual(newAnswer);
        //subject should have changed
        expect(card.subject).toEqual(newSubject);
    });

Pass CardContext Tests 1-2: Handling Save in the CardContext Reducer

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-5.tsx

Add a new case 'save' to the CardContext reducer. Add save to the switch statement. I like to keep the cases in alphabetical order. Except for default, which has to go at the bottom of the switch statement.

To make saving work, we use findIndex to get the index of the card in the cards array. We create a card object using the values received from the action, and put it into the cards array.

Create a New Cards Array

When you write a reducer, you don't want to change the existing state object. You want to create a new state object and return it. If you just grab a reference to the cards array from state and start adding or deleting cards from it, you could cause some difficult to track down bugs. So instead of doing that, you want to make a copy of the array, then change the copy.

In the save case, we create a new array using Array.filter. Then we work with that array. In the delete case that we'll write later, we'll use the spread operator to create a new array.

    const newCards = cards.filter(v => !!v.question);

This line of code is doing a couple of things. cards.filter creates a new array. !! is the cast to boolean operator. So it casts any value to true or false.

The function v => !!v.question means that any card with a question that is 'falsy' will be filtered out of the array. I wrote this in here to clear out some example cards that I had written that didn't have questions, which caused some problems with the app. I have left it in here as an example of how you can prevent poorly formed objects from reaching your components and causing a crash.

      case 'save' :{
        const { cards } = state;
        const { answer, question, subject, } = action;

        //get the index of the card with this question
        //if there is no existing card with that question
        //index will be -1
        const index = cards
        .findIndex(card => card.question === question);

        //A card object with the values received in the action
        const card = {
            answer,
            question,
            subject
        } as Card;

        //create a new array of cards
        //filter out 'invalid' cards that don't have a question
        const newCards = cards.filter(v => !!v.question);

        //if the question already exists in the array
        if (index > -1) {
            //assign the card object to the index 
            newCards[index] = card;
        } else {
            //if the question does not already exist in the array
            //add the card object to the array
            newCards.push(card);
        }

        //return new context
        return {
            ...state,
            cards: newCards
        }
    }

Look at the code above. Do you understand how it works? Does it prevent adding a card with no question? How would you rewrite it to make adding a card with no question impossible?

Do you think it is actually possible for the user to use the Writing component to add a card with no question? Or would the question always at least be an empty string?

Run the Tests For Writing

Use Jest commands to run the tests for Writing.

They pass!

Loading the Current Card into Writing

We want the Input and TextAreas in the Form to automatically load the values of the current card. To do that, we will make them into controlled components. Remember that controlled components are components that take their values as a prop that is held in state. When the value of a controlled component is changed, it invokes a function to handle the change. The useState hook will let us make the Input and TextAreas into controlled components.

Writing Test 6: Loads Current Card

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-6.tsx

Write a test for loading the current card. We'll write the same withoutLineBreaks function that we've written before. Pull a reference to the current card from initialState.

There is always a danger of introducing errors into your tests when you use references to objects instead of using hardcoded values. Especially when you reference objects that are imported from other code.

What assertion would you add to this test to make sure that you know if the variable card is undefined? How about assertions that would warn you if it was missing the question, subject, or answer?

//when you load writing, it loads the current card
it('loads the current card', () => {
    //the question and answer may have linebreaks
    //but the linebreaks don't render inside the components
    //this function strips the linebreaks out of a string 
    //so we can compare the string to text content that was rendered
    const withoutLineBreaks = (string: string) => string.replace(/\s{2,}/g, " ")

    //we'll test with the first card
    const card = initialState.cards[initialState.current];
    const { getByTestId } = renderWriting();

    //a textarea
    const answer = getByTestId('answer');
    expect(answer).toHaveTextContent(withoutLineBreaks(card.answer));

    //a textarea
    const question = getByTestId('question');
    expect(question).toHaveTextContent(withoutLineBreaks(card.question));

    // semantic-ui-react Input. It renders an input inside of a div
    //so we need the first child of the div
    //and because it's an input, we test value not textcontent
    const subject = getByTestId('subject').children[0];
    expect(subject).toHaveValue(card.subject);
});

Pass Writing Test 6: Loads Current Card

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-7.tsx

The useState hook lets us store the value of the cards. Notice the starting value of the useState hooks is an expression using the ternary operator. If card evaluates to true, then the starting value will be a property of the card object. If card evaluates to false, the starting value will be an empty string.

const Writing = () => {
    const { cards, current, dispatch } = useContext(CardContext);

    //a reference to the current card object
    const card = cards[current];

    //useState hooks to store the value of the three input fields
    const [question, setQuestion ] = useState(card ? card.question : '')
    const [answer, setAnswer ] = useState(card ? card.answer : '')
    const [subject, setSubject ] = useState(card ? card.subject : '');

    return (

Make the Input and the TextAreas into controlled components. Notice the onChange function is different for Inputs and TextAreas.

In the onChange function for question, you can see that we use Object Destructuring on the second argument and get the property 'value' out of it. Then we call the setQuestion function with value. There's an exclamation point after value but before the call to the toString method.

onChange={(e, { value }) => setQuestion(value!.toString())}

The exclamation point is the TypeScript non null assertion operator. The non null assertion operator tells TypeScript that even though the value could technically be null, we are sure that the value will not be null. This prevents TypeScript from giving you an error message telling you that you are trying to use a value that could possibly be null in a place where null will cause an error.

        <Header as='h3'>Subject</Header> 
        <Input data-testid='subject' name='subject'
            onChange={(e, { value }) => setSubject(value)}
            value={subject}/>
        <Header as='h3' content='Question'/> 
        <TextArea data-testid='question' name='question'
             onChange={(e, { value }) => setQuestion(value!.toString())}
             value={question}/>
        <Header as='h3' content='Answer'/> 
        <TextArea data-testid='answer' name='answer'
            onChange={(e, { value }) => setAnswer(value!.toString())}
            value={answer}/>
        <Button content='Save'/>
    </Form>
)};

New Card

We need a button that lets the user write a new card. The way the new card button will work is it will dispatch a new action to the CardContext. The CardContext reducer will handle the new action and set current to -1. When current is -1, Writing will will try to find the current card. The current card will evaluate to false, and all the controlled components in the Writing Form will be cleared out.

Writing Test 7: Has a New Card Button

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-7.tsx

Make a describe block named 'the new card button.' Test for an element with the text 'new.' Use the getByText method.

describe('the new card button', () => {
    //there's a button to create a new card
    it('has a new button', () => {
        const { getByText } = renderWriting();
        const newButton = getByText(/new/i);
        expect(newButton).toBeInTheDocument();
    });

    //when you click the new button the writing component clears its inputs
});

Pass Writing Test 7: Has a New Card Button

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-8.tsx

Wrap the form in a container. Notice that the container has a style prop. The style prop lets us apply css styles to React components. This Container is 200 pixels away from the left edge of the screen. This gives us space for the Selector component that we'll write later.

Put the New Card button inside the Container.

        <Container style={{position: 'absolute', left: 200}}>
            <Button content='New Card'/>
            <Form 
                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
//Rest of The Form goes here
            </Form>
        </Container>

Writing Test 8: New Card Button Clears Inputs

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-8.tsx

When the user clicks 'New Card' we want to give them an empty Writing component to work in. Write this test inside the new card describe block. We expect the textContent of the TextAreas to be falsy. We expect the Input not to have value. This is due to the difference in the way the components work.

 //when you click the new button the writing component clears its inputs
    it('when you click the new card button the writing component clears its inputs', () => {
        const { getByText, getByTestId } = renderWriting();

        const answer = getByTestId('answer');
        expect(answer.textContent).toBeTruthy();

        const question = getByTestId('question');
        expect(question.textContent).toBeTruthy();

        const subject = getByTestId('subject').children[0];
        expect(subject).toHaveValue();

        const newButton = getByText(/new/i);
        fireEvent.click(newButton);

        expect(answer.textContent).toBeFalsy();
        expect(question.textContent).toBeFalsy();
        expect(subject).not.toHaveValue();
    })

Types: Add New to CardActionType

File: src/types.ts
Will Match: src/complete/types-7.ts

Add 'new' to CardActionTypes. Add a 'new' action to CardAction.

//the types of action that the reducer in CardContext will handle
export enum CardActionTypes {
    new = 'new',
    next = 'next',
    save = 'save'
};

export type CardAction =
    //clears the writing component
    | { type: CardActionTypes.new }

    //moves to the next card
    | { type: CardActionTypes.next }

    //saves a card
    | { type: CardActionTypes.save, answer: string, question: string, subject: string }

Work on Passing Writing Test 8: New Card Button Clears Inputs

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-9.tsx

Add the Function to Dispatch the New Action to the New Card Button

   <Button content='New Card' onClick={() => dispatch({type: CardActionTypes.new})}/>

CardContext Test 3: Handling 'New' Action in the CardContext Reducer

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-9.tsx

We'll write our test inside the 'CardContext reducer' describe block.

Write a comment for the test we are going to write. New will just set current to -1, which won't return a valid card from cards.

    //new action returns current === -1

Write the test.

    //new action returns current === -1
       it('new sets current to -1', () => {
        //declare CardAction with type of 'new'
        const newAction: CardAction = { type: CardActionTypes.new };


        //create a new CardState with current === 0
        const zeroState = {
            ...initialState,
            current: 0
        };

        //pass initialState and newAction to the reducer 
        expect(reducer(zeroState, newAction).current).toEqual(-1);
    });

Pass CardContext Test 3: Handling 'New' Action in the CardContext Reducer

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-6.tsx

This is the simplest case we'll write. Add it to the switch statement inside the reducer.

case 'new': {
            return {
                ...state,
                current: -1
            }
          }

Ok, now we are ready to make Writing clear out its inputs when the New Card button is clicked.

Pass Writing Test 8: New Card Button Clears Inputs

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-10.tsx

    //a function that sets all the states to empty strings    
    const clearAll = useCallback(
        () => {
            setQuestion('');
            setAnswer('');
            setSubject('');
    }, [
        setQuestion,
        setAnswer,
        setSubject
    ]);

    //a useEffect hook to set the state to the current card
    useEffect(() => {
        if (!!card) {
            const { question, answer, subject } = card;
            setQuestion(question);
            setAnswer(answer);
            setSubject(subject);
        } else {
            clearAll();
        };
    }, [
        card,
        clearAll 
    ]);

return (

Now writing will clear its inputs when the New Card button is clicked.

Run the app. Try it out. Open the Writing scene. Click 'New Card.' The inputs will clear. But what happens if you click back to Answering from a new card?

It crashes! Let's fix that.

Fix the Crash When Switching From New Card to Answering

Answering uses Object Destructuring to get the question out of the card at the current index in cards. But the new action sets current to -1, and -1 isn't a valid index. cards[-1] is undefined, and you can't use Object Destructuring on an undefined value.

How would you fix this problem?

We could rewrite Answering to do something else if the current index does not return a valid card. We could display an error message, or a loading screen. But what we are going to do is change the NavBar. We'll make the NavBar dispatch a next action to CardContext if the user tries to navigate to Answering when current is -1. CardContext will process the next action and return a valid index for a card.

NavBar Test 1: Clicking Answer When Current Index is -1 Dispatches Next

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/test-6.tsx

For this test, we'll use jest.fn() to make a mock dispatch function. Remember that using jest.fn() allows us to see whether dispatch has been called, and what the arguments were.

negativeState is a CardState with current set to negative 1. Add in the mock dispatch function.

find the Answering button and click it. Then expect the mock dispatch function to have been called with a next action.

it('clicking answer when current index is -1 dispatches next action', () => {
    const dispatch = jest.fn();

    const negativeState = {
        ...initialState,
        current: -1,
        dispatch
    };

    const { getByText } = render(    
        <CardContext.Provider value={negativeState}>
            <NavBar 
                showScene={SceneTypes.answering} 
                setShowScene={(scene: SceneTypes) => undefined}/>
        </CardContext.Provider>)

    const answering = getByText(/answer/i);
    fireEvent.click(answering);

    expect(dispatch).toHaveBeenCalledWith({type: CardActionTypes.next})
});

Pass NavBar Test 1: Clicking Answer When Current Index is -1 Dispatches Next

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/index-6.tsx

Import useContext.

import React, { useContext } from 'react';

Import CardContext and CardActionTypes.

import { CardContext }  from '../../services/CardContext';
import { CardActionTypes } from '../../types';

Get current and dispatch from the CardContext.
Change the onClick function for the 'Answer Flashcards' Menu.Item. Make it dispatch a next action if current is -1.

const NavBar = ({
    setShowScene,
    showScene
}:{
    setShowScene: (scene: SceneTypes) => void,
    showScene: SceneTypes
}) => {
    const { current, dispatch } = useContext(CardContext);
    return(
        <Menu data-testid='menu'>
        <Menu.Item header content='Flashcard App'/>
        <Menu.Item content='Answer Flashcards' 
            active={showScene === SceneTypes.answering}
            onClick={() => {
                current === -1 && dispatch({type: CardActionTypes.next});
                setShowScene(SceneTypes.answering)
            }}
        />
        <Menu.Item content='Edit Flashcards'
            active={showScene === SceneTypes.writing}
            onClick={() => setShowScene(SceneTypes.writing)}
        />
    </Menu>
)};

Now the app won't crash anymore when you switch from Writing a new card back to Answering.

Deleting Cards

Now it is time to make deleting cards work. To make deleting work, we will

Make the new test for the deleting cards button in Writing
Add delete to CardActionTypes in types.ts
Write the onSubmit function for the Form in Writing
Make a new test for handling delete in the CardContext reducer
Add a new case 'delete' to the CardContext reducer

Writing Test 9: Has a Delete Card Button

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-9.tsx

Make a describe block 'the delete card button.'

describe('the delete card button', () => {
    //there's a button to delete the current card
    it('has a delete button', () => {
        const { getByText } = renderWriting();
        const deleteButton = getByText(/delete/i);
        expect(deleteButton).toBeInTheDocument();
    });

    //when you click the delete button the card matching the question in the question textarea is deleted from the array cards
});

Pass Writing Test 9: Has a Delete Card Button

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-11.tsx

    <Button content='New Card' onClick={() => dispatch({type: CardActionTypes.new})}/>
            <Button content='Delete this Card'/>
            <Form

Writing Test 10: Clicking Delete Card Button Deletes Current Card

File: src/scenes/Writing/index.test.tsx
Will Match: src/scenes/Writing/complete/test-10.tsx

We use the helper component LastCard to test if the card gets removed from the cards array.

   //when you click the delete button the card matching the question in the question textarea is deleted from the array cards
    it('clicking delete removes the selected question', () => {
        const lastIndex = initialState.cards.length - 1;
        const lastState = {
            ...initialState,
            current: lastIndex
        };
        const lastQuestion = initialState.cards[lastIndex].question;

        const { getByTestId, getByText } = renderWriting(lastState, <LastCard />);

        const lastCard = getByTestId('lastCard');
        expect(lastCard).toHaveTextContent(lastQuestion);

        //call this deleteButton, delete is a reserved word
        const deleteButton = getByText(/delete/i);
        fireEvent.click(deleteButton);

        expect(lastCard).not.toHaveTextContent(lastQuestion);
    });

Types.ts: Add Delete to CardActionType

File: src/types.ts
Will Match: src/complete/types-8.ts

Add 'delete' to CardActionTypes. Add a delete action to CardAction. The delete action takes a question string. When we handle the action in the CardContext reducer we'll use the question to find the card in the cards array.

//the types of action that the reducer in CardContext will handle
export enum CardActionTypes {
    delete = 'delete',
    new = 'new',
    next = 'next',
    save = 'save'
};

export type CardAction =
    //deletes the card with matching question
    | { type: CardActionTypes.delete, question: string }

    //clears the writing component
    | { type: CardActionTypes.new }    

    //moves to the next card
    | { type: CardActionTypes.next }

    //saves a card
    | { type: CardActionTypes.save, answer: string, question: string, subject: string }

Add the Function to Dispatch the 'Delete' Action to the Delete Card Button

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-12.tsx

 <Button content='Delete this Card' onClick={() => dispatch({type: CardActionTypes.delete, question})}/>

CardContext Test 4: CardContext Reducer Handles Delete Action

File: src/services/CardContext/index.test.tsx
Will Match: src/services/CardContext/complete/test-9.tsx

We'll write the test inside the 'CardContext reducer' describe block.
Write a quote for each test we are going to write. Delete will remove the card with the matching question from the array cards.

Write the test. Use findIndex to check the cards array for a card with the deleted question. When findIndex doesn't find anything, it returns -1.

//delete removes card with matching question
    it('delete removes the card with matching question', () => {
        const { question } = initialState.cards[initialState.current];

        const deleteAction: CardAction = { 
            type: CardActionTypes.delete,
            question
        };

        const { cards } = reducer(initialState, deleteAction);

        //it's gone
        expect(cards.findIndex(card => card.question === question)).toEqual(-1);
    });

Pass CardContext Test 4: CardContext Reducer Handles Delete Action

File: src/services/CardContext/index.tsx
Will Match: src/services/CardContext/complete/index-7.tsx

Add a new case 'delete' to the CardContext reducer. Add delete to the switch statement. I like to keep the cases in alphabetical order. Except for default, which has to go at the bottom.

 case 'delete': {
            let { cards, current } = state;
            //the question is the unique identifier of a card
            const { question } = action;

            ///creating a new array of cards by spreading the current array of cards
            const newCards = [...cards];

            //finds the index of the target card
            const index = newCards.findIndex(card => card.question === question);

            //splice removes the target card from the array
            newCards.splice(index, 1);

            //current tells the components what card to display
            //decrement current
            current = current -1;

            //don't pass -1 as current
            if(current < 0) current = 0;

            //spread the old state
            //add the new value of current
            //and return the newCards array as the value of cards
            return {
                ...state,
                current,
                cards: newCards
            }
        }

CardContext passes the test.

The delete button in Writing works too!

Great! Now what happens when you delete all the cards and click back to the Answering screen? How would you fix it?

Next Post: Saving and Loading

In the next post we will write the code to save and load cards to the browser's localStorage. In the post after that we will write the Selector that lets the user choose which card to look at.

NavBar

jacobwicks — Fri, 17 Jan 2020 04:47:57 +0000

In this post we will make the NavBar. In the next post we will make the Writing component, where the user can write new cards. The NavBar will let the user switch between Answering cards and Writing cards.

User Story

The user thinks of a new card. The user opens the card editor. The user clicks the button to create a new card. The user writes in the card subject, question prompt, and an answer to the question. The user saves their new card.

This user story has a lot of things going on. To make this user story possible we will need to make new component where the user can write cards. The Writing component will be a new 'scene' in the application. We will also need to give the user a way to get to the Writing scene.

Let's make a NavBar (Navigation Bar) component to give the user a way to choose between the two scenes. The two scenes will be the Writing scene and the Answering scene. The NavBar will give the user a button to go to the Writing scene. The NavBar will also give the user a button to go to the Answering scene.

We have not made the NavBar and the Writing scene yet. The App just shows the Answering scene all the time. The NavBar will go inside the App. The Writing scene will also go inside the App. The App will keep track of what to show the user. The NavBar will tell the App when the user wants to see a different scene.

In this post, we will

Make a placeholder for the Writing component
Write a typescript enum for the different scenes
Change the App component to keep track of what scene to show the user
Make the NavBar component
Show the NavBar component to the user

By the end of this post the NavBar component will show up on the screen and let the user choose between looking at the Answering component and the Writing component. In the next post we will actually make the real Writing component.

Here's the NavBar in action:

Placeholder for the Writing component

File: src/scenes/Writing/index.tsx
Will Match: src/scenes/Writing/complete/index-1.tsx

We haven't made Writing yet. But we need to have something to show on the screen when we select Writing. So we are going to make a placeholder component. This will just be a div with the word 'writing' in it. Because this is a placeholder we aren't going to take the time to write tests first.

The Writing component is one of our 'scenes.' So its folder is src/scenes/Writing.

import React from 'react';

const Writing = () => <div>Writing</div>

export default Writing;

That's it!

Make the sceneTypes type

File: src/types.ts
Will Match: src/complete/types-5.ts

Add a new enum named 'SceneTypes' in src/types.ts:

//defines the scenes that the user can navigate to
export enum SceneTypes {

    //where the user answers questions
    answering = "answering",

    //where the user writes questions
    writing = "writing"
};

Making the App Keep Track of the Scenes

Right now the App just shows the Answering scene all the time. But to make the user story possible we need to let the user choose the Writing scene. We need to keep track of what scene the user is looking at. We are going to keep track of what scene the user is looking at inside the App component. We'll keep track of what scene the user is looking at with useState.

Features

There is a NavBar

Choose Components

We'll use the custom NavBar that we'll write later in this post

Decide What to Test

Let's test whether the NavBar shows up.

App Test 1: Has the NavBar

File: src/App.test.tsx
Will Match: src/complete/test-5.tsx

Add a test that checks for the NavBar. The NavBar will have a Header with the text 'Flashcard App.'

//shows the NavBar
it('shows the NavBar', () => {
  const { getByText } = render(<App/>);

  //the navbar has a header with the words "Flashcard App" in it
  const navBar = getByText(/flashcard app/i);

  //if we find the header text, we know the NavBar is showing up
  expect(navBar).toBeInTheDocument();
});

Pass App Test 1: Has the NavBar

File: src/App.tsx
Will Match: src/complete/app-5.tsx

The App component will keep track of which scene to show. We will use the useState() hook from React to keep track of which scene to show. The NavBar component will let the user choose the scene. The App won't pass the test for showing the NavBar until later in this post, after we have written the NavBar and imported it into the App.

Import the useState hook from React.

import React, { useState } from 'react';

Import the SceneTypes enum from types.

import { SceneTypes } from './types/';

Import the Writing component.

import Writing from './scenes/Writing';

We haven't made the NavBar yet, so we won't import it. After we make the NavBar, we will come back to the App and add the NavBar to it.

Change the App to this:

const App: React.FC = () => {

const [showScene, setShowScene] = useState(SceneTypes.answering);

  return (
    <CardProvider>
      <StatsProvider>
        {showScene === SceneTypes.answering && <Answering />}
        {showScene === SceneTypes.writing && <Writing/>}
      </StatsProvider>
    </CardProvider>
  )};

Here's why the code for the App component looks so different now.

Curly Brackets and `return`

Before these changes the App function just returned JSX. The App had a 'concise body.' A function with a concise body only has an expression that gives the return value. But now we have added an expression before the expression that gives the return value. The new expression sets up useState to track what scene to show. Because we have added an expression besides the return value to the function, we have to add curly brackets so the compiler knows to look for expressions and not just a return value. This is called a function with a 'block body.'

return()

This is the return method of your function. This tells the function to return the value inside the parentheses. The parentheses are not required. But if you don't have the parentheses, you have to start your JSX on the same line. So it would look like this:

//this would work
return <CardProvider>
      <StatsProvider>
        {showScene === SceneTypes.answering && <Answering />}
        {showScene === SceneTypes.writing && <Writing/>}
      </StatsProvider>
    </CardProvider>;

But if you don't have parentheses, starting your JSX return value on the next line will not work.

//this won't work
return 
    <CardProvider>
      <StatsProvider>
        {showScene === SceneTypes.answering && <Answering />}
        {showScene === SceneTypes.writing && <Writing />}
      </StatsProvider>
    </CardProvider>;

I think it is easier to read with the return value starting on the next line. So I put parentheses around the return value.

UseState

The useState hook gives us a place to keep a variable, and a function to change it.

const [showScene, setShowScene] = useState(SceneTypes.answering);

useState(SceneTypes.answering) is the call to the useState hook. SceneTypes.answering is the starting value. TypeScript can figure out from this that the type of the variable showScene will be SceneTypes. You can also explicitly declare that you are using a type. Explicit declaration of a type on useState looks like this:

useState<SceneTypes>(SceneTypes.answering);

const [showScene, setShowScene] is the declaration of two const variables, showScene and setShowScene.

showScene is a variable of type SceneTypes. So showScene will either be SceneTypes.answering or SceneTypes.writing. Remember when we wrote the enum SceneTypes earlier? SceneTypes.answering is the string 'answering' and SceneTypes.writing is the string 'writing'. The variable showScene can only equal one of those two strings.

setShowScene is a function. It takes one argument. The argument that setShowScene takes is of the type SceneTypes. So you can only invoke setShowScene with SceneTypes.answering or SceneTypes.writing. After you invoke setShowScene, the value of showScene will be set to the value that you passed to setShowScene.

We will pass the function setShowScene to the NavBar. Nothing calls setShowScene yet. But after we make the NavBar, we will import it into the App. Then we will pass the setShowScene function to the NavBar. The Navbar will use setShowScene to change the value of showScene in App. When the value of showScene changes, App will change what scene it shows to the user.

Conditional Rendering of Answering and Writing

Conditional Rendering is how you tell React that if some condition is true, you want to show this component to the user. Rendering a component means showing it to the user.

        {showScene === SceneTypes.answering && <Answering />}

{}: The curly brackets tell the compiler that this is an expression. The compiler will evaluate the expression to figure out what value it has before rendering it to the screen.

showScene === SceneTypes.answering: this is an expression that will return a boolean value. It will return true or it will return false.

&&: This is the logical AND operator. It tells the compiler that if the condition to the left of it is true, it should evaluate and return the expression to the right.

&& <Answering/>: The logical && operator followed by the JSX for the Answering component means 'if the condition to the left of && is true, show the Answering component on the screen.'

There is one conditional rendering expression for each scene.

        {showScene === SceneTypes.answering && <Answering />}
        {showScene === SceneTypes.writing && <Writing/>}

This code means if showScene is 'answering' show the Answering component, and if showScene is 'writing' show the Writing component.

You are done with the App for now. The App won't pass the test for the NavBar until later in this post, after we have written the NavBar and imported it into the App.

The `NavBar`

Now we are ready to make the NavBar. Once we have written the NavBar, we will import it into the App so it shows up on screen and lets the user choose which scene they want to see.

Features

The user can click a button to go to the Writing scene
The user can click a button to go to the Answering scene

Choose Components

The NavBar is a menu, so we will use the Menu component from Semantic UI React.

Decide What to Test

menu
header
button loads Answering
button loads Writing

Write the tests

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/complete/test-1.tsx

Write a comment for each test.

//has a menu component
//has a header
//has a menu item button that loads the answering scene
//clicking answer invokes setShowScene
//has a menu item button that loads the writing scene
//clicking edit invokes setShowScene

Imports and afterEach.

import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import NavBar from './index';
import { SceneTypes } from '../../types';

afterEach(cleanup);

Write a helper function to render the NavBar. The helper function takes an optional prop function setShowScene. We'll use this prop to make sure that the NavBar calls the function setShowScene when the user clicks the buttons.

const renderNavBar = (setShowScene?: (scene: SceneTypes) => void) => render(
    <NavBar 
    showScene={SceneTypes.answering} 
    setShowScene={setShowScene ? setShowScene : (scene: SceneTypes) => undefined}
    />);

NavBar Test 1: Has a Menu

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/complete/index-1.tsx

NavBar takes two props. setShowScene is a function that accepts a SceneType as a parameter. showScene is the SceneType that is currently being shown.

Clicking the Menu Items will invoke setShowScene with the appropriate SceneType.

import React from 'react';
import { Menu } from 'semantic-ui-react';
import { SceneTypes } from '../../types';

const NavBar = ({
    setShowScene,
    showScene
}:{
    setShowScene: (scene: SceneTypes) => void,
    showScene: SceneTypes
}) => <Menu data-testid='menu'/>

export default NavBar;

Now NavBar has a menu.

NavBar Test 2: Has a Header

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/complete/test-2.tsx

If this weren't a tutorial, and you were designing the NavBar yourself, maybe you wouldn't test if NavBar has a header. You might decide that the header on the NavBar is not an important enough feature to test. The reason we are testing for the header is that the App's test checks for the NavBar by finding its header. So we want to be sure when we test NavBar that it has a header, so that when we add it to the App the tests will pass.

//has a header
it('has a header', () => {
    const { getByText } = renderNavBar();
    const header = getByText(/flashcard app/i);
    expect(header).toBeInTheDocument();
});

Pass NavBar Test 2: Has a Header

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/complete/index-2.tsx

Add the Menu.Item header.

    <Menu data-testid='menu'>
        <Menu.Item header content='Flashcard App'/>
    </Menu>

NavBar Test 3: Answering Button

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/complete/test-3.tsx

//has a menu item button that loads the answering scene
it('has a button to get you to the answering scene', () => {
    const { getByText } = renderNavBar();
    const answering = getByText(/answer/i)
    expect(answering).toBeInTheDocument();
});

Pass NavBar Test 3: Answering Button

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/complete/index-3.tsx

The active prop will highlight the Menu Item when the expression evaluates to true. This Menu Item will be active when the showScene prop is SceneTypes.answering.

    <Menu data-testid='menu'>
        <Menu.Item header content='Flashcard App'/>
        <Menu.Item content='Answer Flashcards' 
            active={showScene === SceneTypes.answering}/>
    </Menu>

NavBar Test 4: Clicking Answering Button

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/complete/test-4.tsx

//clicking answer invokes setShowScene
it('clicking answer invokes setShowScene', () => {
    const setShowScene = jest.fn();
    const { getByText } = renderNavBar(setShowScene);
    const answering = getByText(/answer/i)

    fireEvent.click(answering);
    expect(setShowScene).toHaveBeenLastCalledWith(SceneTypes.answering);
});

Pass NavBar Test 4: Clicking Answering Button

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/complete/index-4.tsx

Add the onClick function to the Answering button.

 <Menu.Item content='Answer Flashcards' 
            active={showScene === SceneTypes.answering}
            onClick={() => setShowScene(SceneTypes.answering)}/>

NavBar Tests 5-6: Writing Button

File: src/components/NavBar/index.test.tsx
Will Match: src/components/NavBar/complete/test-5.tsx

//has a menu item button that loads the writing scene
it('has a button to get you to the writing scene', () => {
    const { getByText } = renderNavBar();
    const writing = getByText(/edit/i)
    expect(writing).toBeInTheDocument();
});

//clicking edit invokes setShowScene
it('clicking edit invokes setShowScene', () => {
    const setShowScene = jest.fn();
    const { getByText } = renderNavBar(setShowScene);
    const writing = getByText(/edit/i)

    fireEvent.click(writing);
    expect(setShowScene).toHaveBeenLastCalledWith(SceneTypes.writing);
});

Pass NavBar Tests 5-6: Writing Button

File: src/components/NavBar/index.tsx
Will Match: src/components/NavBar/complete/index-5.tsx

    <Menu data-testid='menu'>
        <Menu.Item header content='Flashcard App'/>
        <Menu.Item content='Answer Flashcards' 
            active={showScene === SceneTypes.answering}
            onClick={() => setShowScene(SceneTypes.answering)}/>
        <Menu.Item content='Edit Flashcards'
            active={showScene === SceneTypes.writing}
            onClick={() => setShowScene(SceneTypes.writing)}/>
    </Menu>

Ok, now we have a NavBar that passes all the tests! Let's import it into the App and show it to the user.

Import NavBar into App

File: src/App.tsx
Will Match: src/complete/app-6.tsx

Now let's import the NavBar into the App. This will make App pass the tests we wrote earlier. It will also make the NavBar show up on screen. Once the user can see the NavBar, they will be able to switch between the two scenes. The user will be able to look at the Answering scene. The user will also be able to look at the Writing scene. The Writing scene that the user can see will be the placeholder that you wrote earlier in this post. In the next post we will make the actual Writing component.

import NavBar from './components/NavBar';

Add the NavBar component into the App.

//rest of app component stays the same
  return (
    <CardProvider>
      <StatsProvider>
//add the NavBar here
        <NavBar setShowScene={setShowScene} showScene={showScene} />
        {showScene === SceneTypes.answering && <Answering />}
        {showScene === SceneTypes.writing && <Writing/>}
      </StatsProvider>
    </CardProvider>
  )};

Save the App. Most of the tests will pass, but the snapshot test will fail because you have changed what shows up on the screen. Update the snapshot by pressing 'u'. Now all tests should pass.

Run the app with npm start. You will see the Answering scene with the NavBar above it.

Click on 'Edit Flashcards'. You will see the placeholder Writing scene.

Great job!

In the next post we will make the actual Writing component.

Show Stats

jacobwicks — Fri, 17 Jan 2020 04:47:14 +0000

We are now going to make the Stats component so that the user can see the stats for each card that they look at.

User Story

The user sees a card. They hover their mouse over an icon and a popup appears. The popup shows the user how many times they have seen the card, and how many times they have gotten the answer right or wrong.

Features

an Icon that shows up on the screen
a Popup that appears when the user mouses over the Icon
stats are shown to the user in the Popup

Choosing Components

Now that we have the StatsContext we can track the stats for each card. We could put the stats on the screen all the time. But the user probably doesn't want to see them all the time. So we only want to show the stats sometimes. And instead of showing all zeros for a new question, let's make a special display that says the user hasn't seen the question before.

Popup: We'll use a Popup to show the stats to the user.

Icon: We'll show an Icon that the user can mouseover to trigger the Popup.

What to test

Test that the icon shows up. Test that the popup is triggered when the user mouses over the icon. Test that the correct stats are shown in the popup.

Tests

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-1.tsx

Write your comments:

//has an icon
//there's a popup
//popup appears when mouseover icon
//if there are no stats for the current question, popup tells you that you haven't seen the question before
//if there are stats for the current question, popup shows you the correct stats

Write your Imports at the top of the file. Notice that we are importing the initialState from CardContext, but we are renaming it to cardState. So when we refer to cardState in the tests, we are talking about the initialState object exported by CardContext.

import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Stats from './index';
import { StatsContext } from '../../../../services/StatsContext'; 
import { StatsState } from '../../../../types';
import { CardContext } from '../../../../services/CardContext';
import { initialState as cardState } from '../../../../services/CardContext';

Call afterEach.

afterEach(cleanup);

Test 1: Has Icon

Write the test for the icon. We'll get the icon using a testId.

//has an icon
it('has an icon', () => {
    // We'll get the icon by using a testId.
    const { getByTestId } = render(<Stats/>);
    const icon = getByTestId('icon')
    expect(icon).toBeInTheDocument();
});

Pass Test 1: Has Icon

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-1.tsx

We'll pass the first test by rendering an Icon with a testId. Semantic UI React has a large set of icons that are built in. Pass the name prop to choose which one. We are using 'question circle,' which is a question mark in a circle.

Imports:

import React, { useContext } from 'react';
import { Icon, Popup } from 'semantic-ui-react';
import { CardContext } from '../../../../services/CardContext';
import { StatsContext } from '../../../../services/StatsContext';

Give the icon a testId.

const Stats = () => <Icon data-testid='icon' name='question circle'/>    

export default Stats;

Test 2: Popup Appears

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-2.tsx

The Icon is always shown on the screen. The Popup does not always show up on the screen. The Popup is triggered when the user puts their mouse cursor over the icon. So how do we simulate putting the mouse over the Icon to get the Popup to show up for our tests?

We will use fireEvent. We can use fireEvent to simulate many events, not just clicking or entering text. So let's write a test where we simulate mouseover with fireEvent.mouseOver().

Make a describe block named 'theres a popup.' Inside the describe block, write the test for the Popup. The Popup will appear when the user moves their mouse over the Icon.

Use getByTestId to get a reference to the Icon. Then use fireEvent.mouseOver to simulate the mouseover event. After firing mouseover, use getByText to find the textContents of the Popup.

//there's a popup
describe('theres a popup', () => {
    //popup appears when mouseover icon
    it('popup exists and opens', () => {
        const { getByText, getByTestId } = render(<Stats/>);

        const icon = getByTestId('icon');
        expect(icon).toBeInTheDocument();

        //mouseOver the icon
        fireEvent.mouseOver(icon);

        const popup = getByText(/you haven't seen this question before/i);
        expect(popup).toBeInTheDocument();
    });

    //if there are no stats for the current question, popup tells you that you haven't seen the question before
    //if there are stats for the current question, popup shows you the correct stats
});

Looks good, right? Yes. But I have bad news. This test won't work even after we add the Popup to the Stats component. The reason it will fail is because the simulated mouseOver event just doesn't work to trigger the Semantic UI React Popup component. So the popup will never show up in our test render! Let's go add the Popup to the Stats component, watch it fail, then come back and fix this test.

Fail to Pass Test 2: Add the Popup

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-2.tsx

Change the Stats component. Declare a const icon reference to the JSX call to the Icon. Instead of returning the Icon, return a Popup. The Popup takes a content prop. The content is the text (or anything else) that will appear inside the Popup. The prop 'trigger' takes the element that will appear on screen and trigger the Popup when the user mouses over it. Pass icon to the trigger prop.

const Stats = () => {

    //declare icon as a variable
    const icon = <Icon data-testid='icon' name='question circle'/>    

return <Popup 
        content="You haven't seen this question before" 
        trigger={icon}
        />
};

Now save it. The popup test should pass. But it doesn't.

The simulated mouseOver doesn't open the popup. We'll end up solving this by using fireEvent.click() to simulate a click on the Icon, which does trigger the popup.

When Testing Doesn't Work How You Think It Should

To be honest, this happens a lot. You're getting used to the testing mindset, you chose your components, you know what you're trying to test, you are using commands and methods that you used before... but the test fails. Sometimes it's a typo, or you're using the wrong method. But sometimes it's just that the method you thought would work won't work with the component you're using. This happens a lot with components from third party libraries.

Dealing with this is just one of the many logic puzzles you work through as a programmer. The first step is to add in a call to debug() to see what is rendered. Check the documentation of each method that you're using and see if you are calling it correctly, giving it the right parameters. Try something else and see if that works. Do an internet search for your situation and check through StackOverflow, GitHub issues, Reddit, and other internet resources. Think about if you can design the test differently using a different command.

You can get frustrated, but don't worry if it takes hours. That's just the nature of the process. Eventually you will come up with a solution that does work to test what you were doing. And if your search for an answer didn't come up with any results written by anyone else, maybe you should write a post with your solution here on dev.to!

Pass Test 2: The Working Popup Test Using fireEvent.click()

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-3.tsx

Here's the final, working test of the Popup. We have to use fireEvent.click() because the simulated mouseover does not trigger the Popup for some reason.

//popup appears when mouseover icon
    it('popup exists and opens', () => {
        const { getByText, getByTestId } = render(<Stats/>);

        const icon = getByTestId('icon');
        expect(icon).toBeInTheDocument();

        //can't effectively simulate hover
        //mouseOver and mouseEnter don't trigger it
        //but click does, so... go with it
        fireEvent.click(icon);

        const popup = getByText(/you haven't seen this question before/i);
        expect(popup).toBeInTheDocument();
    });

Test 3: Popup Message for No Stats

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-4.tsx

This test renders Stats outside of any context. When Stats doesn't see stats for the current question, it should render a popup that says "You haven't seen this question before." This test will pass when you run it.

    //if there are no stats for the current question, popup tells you that you haven't seen the question before
   it('without stats, you havent seen it', () => {
        const { getByText, getByTestId } = render(<Stats/>);
        const icon = getByTestId('icon');
        fireEvent.click(icon);
        const unSeen = getByText("You haven't seen this question before");
        expect(unSeen).toBeInTheDocument(); 
    });

That's a clue that this test is not telling us something new about the component. Let's give the Stats component access to StatsContext and CardContext and make sure it still passes.

Access StatsContext and CardContext

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-3.tsx

We want the Stats component to show the stats for the current card. To do that we need to get data from CardContext and StatsContext. CardContext will let us find the current card and get its question. Once we have the question we can look it up in StatsContext.

If there are no stats for the current card we will return a Popup that says the user hasn't seen this question before.

Change the Stats component to this:

const Stats = () => {
    //get cards and current index from CardContext
    const { cards, current } = useContext(CardContext);

    //get the current question
    const { question } = cards[current];

    //this is the entire stats context
    const allStats = useContext(StatsContext);

    //stats for the current question
    const stats = allStats[question];   

    //declare icon as a variable
    const icon = <Icon data-testid='icon' name='question circle'/>

    if (!stats) return (
    <Popup 
    content="You haven't seen this question before" 
    trigger={icon}
    />);


return <Popup 
        content="There are stats" 
        trigger={icon}
        />
};

It still passes! Good, we haven't broken anything.

Test 4: When There Are Stats for the Current Question, Popup Shows the Stats

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-4.tsx

Make a describe block named 'with Stats.' Make a stats variable, statsState to pass to the StatsProvider, and testState for the CardProvider.

    describe('with Stats', () => {
        //some stats
        const stats = {
            right: 3,
            wrong: 2,
            skip: 5
        };

        //a StatsState to pass to StatsProvider
        //using the question from cards index 0
        const statsState = {
            [cardState.cards[0].question] : stats
        } as StatsState;

        //a CardState with current set to 0
        const testState = {
            ...cardState,
            current: 0
        };

Make a helper function to render Stats inside the CardProvider and StatsProvider. Rendering a component inside multiple providers is how you let the component access multiple contexts. This helper function will allow Stats to access the CardContext and StatsContext during testing.

        //helper function to render stats inside CardProvider, StatsProvider
        const renderStats = () => render(
            <CardProvider testState={testState}>
                <StatsProvider testState={statsState}>
                    <Stats/>
                </StatsProvider>
            </CardProvider>);

Write the test. After we trigger the Popup with a simulated click event, we use getByText to look for text that says 'you have seen this question.'

        //if there are stats for the current question, popup shows you the correct stats
        it('with stats, shows stats for that question', () => {
            const { getByText, getByTestId } = renderStats();

            const icon = getByTestId('icon');
            fireEvent.click(icon);

            const seen = getByText(/you have seen this question/i);
            expect(seen).toBeInTheDocument();        
        });
    })

Pass Test 4: When There Are Stats for the Current Question, Popup Shows the Stats

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-4.tsx

Change the return values to this:

    if (!stats) return (
    <Popup 
    content="You haven't seen this question before" 
    trigger={icon}
    />);


return <Popup 
        content="You have seen this question" 
        trigger={icon}
        />
};

Test 5: Popup Should Show the Total Number of Times User Has Seen the Question

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-5.tsx

The popup should calculate the total number of times the user has seen the question. Let's test for a question they have seen 10 times.

        it('calculates total times seen', () => {
            const { getByTestId, getByText } = renderStats();
            const icon = getByTestId('icon');
            fireEvent.click(icon);

            const seen = getByText(/you have seen this question/i);
            expect(seen).toBeInTheDocument();
            expect(seen).toHaveTextContent('You have seen this question 10 times.')
        });

Pass Test 5: Popup Should Show the Total Number of Times User Has Seen the Question

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-5.tsx

We already get the stats for the current card in the Stats component. Recall that the stats are an object with three properties: right, skip, and wrong. We need to add the values of these properties together to get a total number.

Adding Up Total Times Seen

Use Object.keys to get an array of the keys from the stats for the current card. Use Array.reduce to iterate through the keys, add the value of that key to the total, and get the total of times the user has seen it.

Object.keys(stats) will give us an array of three strings, ['right','skip','wrong'].

Array.reduce can look more complicated than it actually is. It takes two arguments. The first argument is a function, and the second argument is the starting value. We're adding up numbers, so we'll give a starting value of 0.

Array.reduce passes two arguments to the function. The first argument is the accumulator. I named it 'acc' in this code. The first time the function runs the accumulator is the starting value. So acc will start at 0, the starting value that we passed in. Then every time the function runs the accumulator is the value that was returned by the function the last time it ran.

The second argument is the current item in the array that is being iterated over. I named it 'cur' in this code. The array that we are iterating over is ['right','skip','wrong']. So the first time through, cur will be the item at array 0, the string 'right.' We use bracket notation to look in the object stats for the value corresponding to the key 'right.' Then we add that value to the total, acc, and return the total. In the next iteration, the function will run with acc equal to the updated total, and cur will be the next item in the array- the string 'skip'.

Added complexity from TypeScript

Before we can use bracket notation and cur to look in stats and get a value, we have to cast cur to a key of the type of stats. Basically, we are convincing TypeScript that the variable key is one of the object properties of stats. If we tried to look at stats[cur], TypeScript would throw an error even though we got the value cur from the array of Object.keys of stats. This is the type (haha) of thing you have to deal with fairly often when using TypeScript. You will be faced with a situation where you know that the code you wrote will work, but then you need to find out the right way to tell TypeScript that the code you wrote will work. It's just part of the learning curve.

When to Calculate the Total

Notice that we calculate the total after the first return statement. If we don't have stats, we'll return the Popup that says 'You haven't seen this question before.' If we do have stats, then we'll calculate the total before returning a Popup that reports the total.

    if (!stats) return (
    <Popup 
    content="You haven't seen this question before" 
    trigger={icon}
    />);

    //stats is truthy, so we can calculate the total
    const total = Object.keys(stats)
    .reduce((acc, cur) => {
        //cast cur to key from the typeof stats
        //which is really the keys of Stats as defined in our src/types.ts file
        const key = cur as keyof typeof stats;

        //stats[key] is a number
        //set acc equal to the prior value of acc plus the value of stats[key]
        //to get the new total
        acc = acc + stats[key];

        //return the new total for the next iteration to use
        return acc;

//starting value of 0
    }, 0);

return <Popup
    data-testid='popup'
    content={
        <div>
            <div>You have seen this question {total} time{total !== 1 && 's'}.</div>
        </div>}
    trigger={icon}
    />

Test 6: Correct Value for each Stat

File: src/scenes/Answering/components/Stats/index.test.tsx
Will Match: src/scenes/Answering/components/Stats/index.test-6.tsx

Let's use test.each to test for each type of stat- 'right', 'skip', and 'wrong.' Declare questionZero equal to the question of the card at index 0 in cards. Declare expectedStats to access the stats for the question at index 0 in our stats testState.

Then set up the literal and the tests. We'll pass in three arguments for each test. stat is just a string that we use to generate the title. regEx is a regular expression that we will pass to getByText to find the element. expected is the expected number from stats. We cast the number to a string using toString() because we are comparing it to textContent, which is a string. A string will not equal a number in expect().toHaveTextContent().

    //remember, current index in our testState is set to 0
        const questionZero = cardState.cards[0].question;
        const expectedStats = statsState[questionZero];

        //use test each to test for each type of stat
        test.each`
        stat        | regEx                 | expected
        ${'right'}  | ${/You got it right/i}| ${expectedStats.right.toString()}
        ${'wrong'}  | ${/Wrong/i}           | ${expectedStats.wrong.toString()}
        ${'skip'}   | ${/You skipped it/i}  | ${expectedStats.skip.toString()}
        `('Popup returns correct value of $stat, $expected', 
            ({stat, regEx, expected}) => {
                const { getByTestId, getByText } = renderStats();

                //open the popup
                const icon = getByTestId('icon');
                fireEvent.click(icon);

                //make find the element by regular expression
                const result = getByText(regEx);
                expect(result).toHaveTextContent(expected);
        });

Show the Value for Each Stat

File: src/scenes/Answering/components/Stats/index.tsx
Will Match: src/scenes/Answering/components/Stats/index-6.tsx

Add divs to show each stat. The total div uses the total that we calculated using Array.reduce. When total does not equal 1, we'll add 's' so it says 'times' instead of 'time.'

    return <Popup
            data-testid='popup'
            content={
                <div>
                    <div>You have seen this question {total} time{total !== 1 && 's'}.</div>
                    <div>You got it right {stats.right}</div>
                    <div>Wrong {stats.wrong}</div>
                    <div>You skipped it {stats.skip}</div> 
                </div>}
            trigger={icon}
            />

Great! All the tests pass.

Add Stats into Answering

Now to make Stats available to the user, we'll add it to Answering.

Decide what to test for

We don't need to re-do all the tests for Stats in the tests for the Answering component. We are already testing Stats in the tests for Stats. Let's just make sure that Answering has the stats Icon.

Answering Test 1: Has a Stats Icon

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-16.tsx

Add a new test to look for the Icon from the Stats component.

it('has the stats icon', () => {
    const { getByTestId } = renderAnswering();
    const stats = getByTestId('icon');
    expect(stats).toBeInTheDocument();
});

Pass Answering Test 1: Has a Stats Icon

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-12.tsx

Import the Stats component.

import Stats from './components/Stats';

Change the question Header to this:

<Header data-testid='question'><Stats/>{question}</Header>

The whole return value of the Answering component will look like this.

    <Container data-testid='container' style={{position: 'absolute', left: 200}}>
         <Header data-testid='question'><Stats/>{question}</Header>
         <Button onClick={() => dispatch({type: CardActionTypes.next})}>Skip</Button>
         <Form>
            <TextArea data-testid='textarea'/>
        </Form>
        <Buttons answered={showAnswer} submit={() => setShowAnswer(true)}/>
        <Answer visible={showAnswer}/>
    </Container>

Update the snapshot.

Run the app. The stats Icon will show up!

Make the stats change

We know the Stats component works because it passes the tests. We know the Stats component shows up because we test for that, too. But if you run the app you will see that the stats don't actually update when you skip or submit questions. That is because we are not dispatching any actions to StatsContext. So StatsContext doesn't receive an action and doesn't make any changes to the state. We need to dispatch an action to StatsContext when the user skips a question, records a right answer, or records a wrong answer.

There are three times that we need to dispatch an action to the Stats context:

When the user clicks the Skip card button
When the user clicks the Right answer button
When the user clicks the Wrong answer button

Answering Test 2: The Skip Button Updates Stats

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-17.tsx

Import useContext. We'll need it to make a helper component that displays stats.

import React, { useContext } from 'react';

Import StatsState, StatsContext and StatsProvider.

import { CardState, StatsState } from '../../types';
import { StatsContext, StatsProvider } from '../../services/StatsContext';

Add a new test above the snapshot. We'll create a cardState, blankStats, question and a statsState for this test. Then we'll make a helper component SkipDisplay to display the value of 'skip' for the question. We'll render Answering and SkipDisplay inside of the CardProvider and StatsProvider. Then we'll click the Skip button and see what happens.

//when the user clicks the skip button, the skip is recorded in the stats
it('clicking skip records stats', () => {
     //create a CardState with current set to 0
     const cardState = {
        ...initialState,
        current: 0
    };

    //a blank stats object
    const blankStats = {
        right: 0,
        wrong: 0,
        skip: 0
    };

    //get the question from cards index 0
    const { question } = cardState.cards[0];

    //create statsState with stats for the question
    const statsState: StatsState = {
        [question]: blankStats
    };

    //helper component displays the value of skip for the question
    const SkipDisplay = () => {
        const stats = useContext(StatsContext)
        const { skip } = stats[question];
        return <div data-testid='skipDisplay'>{skip}</div> 
    };

    //render Answering and SkipDisplay inside the providers
    //pass the providers the cardState and StatsState values that we defined
    const { getByTestId, getByText } = render(
        <CardProvider testState={cardState}>
            <StatsProvider testState={statsState}>
            <Answering />
            <SkipDisplay/>
        </StatsProvider>
      </CardProvider>
    );

    //find the skip button
    const skipButton = getByText(/skip/i);

    //find the skip display
    const skipDisplay = getByTestId('skipDisplay');

    //skip display should start at 0
    expect(skipDisplay).toHaveTextContent('0');

    //click the skip button
    fireEvent.click(skipButton);

    expect(skipDisplay).toHaveTextContent('1');
});

Pass Answering Test 2: The Skip Button Updates Stats

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-13.tsx

Import StatsActionType.

//The types of action that CardContext can handle
import { CardActionTypes, StatsActionType } from '../../types';

Import StatsContext.

import { StatsContext } from '../../services/StatsContext';

Use object destructuring to get the dispatch method out of useContext(StatsContext). Watch out! We already have a variable called dispatch. The variable called dispatch we already have is the function that dispatches actions to the CardContext. So we can't call the dispatch function for the StatsContext 'dispatch.' We have to call the dispatch function for the StatsContext something else. Let's call it statsDispatch.

To rename variables that you get from object destructuring you type the original variable name, a colon, and then the new name. So const { originalName : newName } = objectToBeDestructured. In this case, we write dispatch: statsDispatch to rename dispatch to statsDispatch.

    const { dispatch: statsDispatch } = useContext(StatsContext);

Change the onClick function for the Skip button.
From

         <Button onClick={() => dispatch({type: CardActionTypes.next})}>Skip</Button>

<Button onClick={() => {
            dispatch({type: CardActionTypes.next});
            statsDispatch({type: StatsActionType.skip, question});   
         }}>Skip</Button>

Notice that the anonymous function now contains two expressions. Because there is more than one expression, we have to enclose the expressions in curly brackets. We switch from a concise function body without brackets, to a block body with brackets.

Run your app and click the Skip button twice. Clicking it twice will get you back to the first question. Mouse over the stats icon. The stats popup will now show correct totals for each question.

Right And Wrong Buttons

Now let's make the Right and Wrong buttons update StatsContext.

What to Test

Clicking the Right button updates stats
Clicking the Wrong button updates stats

We'll use the same techniques that we used to test the Skip Button. We'll make a helper component StatsDisplay to show the stats, render Buttons and StatsDisplay inside of Providers, and check StatsDisplay to make sure Buttons successfully dispatches actions.

Buttons Test 1: the Right Button Updates Stats

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-7.tsx

Import StatsState.

import { CardState, StatsState } from '../../../../types';

Import StatsContext and StatsProvider.

import { StatsContext, StatsProvider } from '../../../../services/StatsContext';

Make a describe block named 'clicking buttons records stats.' Declare cardState, blankStats, and the question from the card at index 0. Make a StatsDisplay helper component to display right and wrong from the StatsContext.

Make a renderWithDisplay helper function to render Buttons and StatsDisplay inside the CardProvider and StatsProvider with the cardState and statsState.

//when the user clicks the skip button, the skip is recorded in the stats
describe('clicking buttons records stats', () => {
    //create a CardState with current set to 0
    const cardState = {
       ...initialState,
       current: 0
   };

   //a blank stats object
   const blankStats = {
       right: 0,
       wrong: 0,
       skip: 0
   };

   //get the question from cards index 0
   const { question } = cardState.cards[0];

   //create statsState with stats for the question
   const statsState: StatsState = {
       [question]: blankStats
   };

   //helper component displays the value of skip for the question
   const StatsDisplay = () => {
       const stats = useContext(StatsContext)
       const { right, wrong } = stats[question];
       return <div>
           <div data-testid='rightDisplay'>{right}</div>
           <div data-testid='wrongDisplay'>{wrong}</div>
           </div> 
   };

   const renderWithDisplay = () => render(
    <CardProvider testState={cardState}>
        <StatsProvider testState={statsState}>
        <Buttons answered={true} submit={jest.fn()} />
        <StatsDisplay/>
    </StatsProvider>
  </CardProvider>
);

//clicking the right button updates stats

//clicking the wrong button updates stats

});

Write the test for the right button inside the describe block.

//clicking the right button updates stats
it('clicking the right button updates stats', () => {
        //render Answering and StatsDisplay inside the providers
        //pass the providers the cardState and StatsState values that we defined
        const { getByTestId, getByText } = renderWithDisplay();

        //find the right button
        const rightButton = getByText(/right/i);

        //find the right display
        const rightDisplay = getByTestId('rightDisplay');

        //right display should start at 0
        expect(rightDisplay).toHaveTextContent('0');

        //click the right button
        fireEvent.click(rightButton);

        expect(rightDisplay).toHaveTextContent('1');
    });

Pass Buttons Test 1: the Right Button Updates Stats

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/scenes/Answering/components/Buttons/index-6.tsx

Import StatsActionType.

import { CardActionTypes, StatsActionType } from '../../../../types';

Import StatsContext.

import { StatsContext } from '../../../../services/StatsContext';

Change the Buttons component. Get cards and current from CardContext so that you can then get the question from the current card. Get dispatch from StatsContext and rename it to statsDispatch so it won't conflict with the CardContext dispatch. Change the onClick function for the Right button to statsDispatch an action with a type StatActionType.right.

const Buttons = ({
    answered,
    submit
}:{
    answered: boolean,
    submit: () => void
}) => {
    //get cards and current so that we can get the question
    const { cards, current, dispatch } = useContext(CardContext);
    //get the question so we can track stats
    const { question } = cards[current];

    //to dispatch actions to the StatsContext
    const { dispatch: statsDispatch } = useContext(StatsContext);

    return answered
    ?   <Button.Group>
            <Button content='Right' positive 
                onClick={() => {
                    statsDispatch({ type: StatsActionType.right, question })
                    dispatch({ type: CardActionTypes.next })
                }}/>
            <Button.Or/>
            <Button content='Wrong' negative 
                onClick={() => dispatch({ type: CardActionTypes.next })}
            />    
        </Button.Group>
    :   <Button content='Submit' onClick={() => submit()}/>
};

Buttons Test 2: the Wrong Button Updates Stats

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-8.tsx

Add the test inside the describe block.

    //clicking the wrong button updates Stats
    it('clicking the wrong button updates stats', () => {
        //render Answering and StatsDisplay inside the providers
        //pass the providers the cardState and StatsState values that we defined
        const { getByTestId, getByText } = renderWithDisplay();

        //find the wrong button
        const wrongButton = getByText(/wrong/i);

        //find the wrong display
        const wrongDisplay = getByTestId('wrongDisplay');

        //wrong display should start at 0
        expect(wrongDisplay).toHaveTextContent('0');

        //click the wrong button
        fireEvent.click(wrongButton);

        expect(wrongDisplay).toHaveTextContent('1');
    });

Pass Buttons Test 2: the Wrong Button Updates Stats

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/index-7.tsx

<Button content='Wrong' negative 
                 onClick={() => {
                    statsDispatch({ type: StatsActionType.wrong, question })
                    dispatch({ type: CardActionTypes.next })
                }}/>

Load up the app and try out the buttons. You'll see the stats in the popup update correctly.

StatsContext

jacobwicks — Fri, 17 Jan 2020 04:46:14 +0000

In this post we will make the Context that will track the stats (short for statistics) for each question. This Context will be called StatsContext. StatsContext will track how many times the user has answered each question right, wrong, and how many times the user has skipped that question.

In the next post we will make a Stats component. The Stats component will show the stats to the user. The Stats component will appear on the Answering screen.

User Story

The user sees a card. They hover their mouse over an icon and a popup appears. The popup shows the user how many times they have seen the card, and how many times they have gotten the answer right or wrong.

Features

Stats for cards are tracked
Right, Wrong, and Skip buttons update StatsContext
User can see the stats for the card they are looking at

To make these features work we will

Define the types for Stats
Make the StatsContext
Write the tests for the Stats Component
Make the Stats component
Change the tests for Answering
Add the Stats component to Answering

Add Stats Types to Types.ts

File: src/types.ts
Will match: src/complete/types-4.ts

Add the interface Stats to types. Stats describes the stats for a single question.

//The stats for a single question
export interface Stats {

    //number of times user has gotten it right
    right: number,

    //number of times user has gotten it wrong
    wrong: number,

    //number of times user has seen the question but skipped it instead of answering it
    skip: number
};

Add the interface StatsType. StatsType is an object with a a string for an index signature. Putting the index signature in StatsType means that TypeScript will expect that any key that is a string will have a value that is a Stats object.

We will use the question from Cards as the key to store and retrieve the stats.

//an interface with an string index signature
//each string is expected to return an object that fits the Stats interface
//the string that we will use for a signature is the question from a Card object
export interface StatsType {
    [key: string]: Stats
};

Describe the StatsDispatch function and the StatsState type.

StatsDispatch

To change the contents of StatsContext we will have our components dispatch actions to StatsContext. This works just like dispatching actions to the CardContext. To dispatch actions to StatsContext we will use useContext to get dispatch out of StatsContext inside components that use StatsContext. StatsContext contains StatsState. We have to tell TypeScript that the key 'dispatch' inside StatsState will contain a function.

StatsState

StatsState is a union type. A union type is a way to tell TypeScript that a value is going to be one of the types in the union type.

StatsState puts together StatsType and StatsDispatch. This means that TypeScript will expect a Stats object for every key that is a string in StatsState, except for 'dispatch,' where TypeScript will expect the dispatch function.

//The StatsDispatch function
interface StatsDispatch {
    dispatch: (action: StatsAction) => void
};

//a union type. The stats state will have a Stats object for any given key
//except dispatch will return the StatsDispatch function
export type StatsState = StatsType & StatsDispatch

StatsActionType and StatsAction

The enum StatsActionType and the type StatsAction define the types of actions that we can dispatch to StatsContext. Later in this post you will write a case for each type of StatsAction so the reducer in StatsContext can handle it. In addition to the type, each action takes a parameter called 'question.' The 'question' is a string, same as the question from the Card objects. When the reducer receives an action, it will use the question as the key to find and store the stats.

//an enum listing the three types of StatsAction
//A user can get a question right, wrong, or skip it
export enum StatsActionType {
    right = 'right',
    skip = 'skip',
    wrong = 'wrong'
};

//Stats Action
//takes the question from a card 
export type StatsAction = { 
    type: StatsActionType, 
    question: string 
};

Create `StatsContext`

Testing `StatsContext`

Our tests for StatsContext will follow the same format as the tests we wrote for CardContext. We will test the Provider, the Context, and the reducer. We will start by testing the reducer to make sure that it handles actions correctly and returns the state that we expect. We'll test that the Provider renders without crashing. Then we will write a helper component to make sure that the Context returns the right data.

Recall that the reducer is what handles actions and makes changes to the state held in a Context. The reducer will add new stats objects when it sees a question that isn't being tracked yet. The reducer will add to the stats numbers for a question when it receives an action.

Choosing What to Test

reducer returns state
reducer adds a new stats object when it receives a new question
reducer handles right action, returns correct stats
reducer handles skip action, returns correct stats
reducer handles wrong action, returns correct stats
StatsContext provides an object with Stats for questions

We'll start testing with the reducer.

Test 1: Reducer Takes State, Action and returns State

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-1.tsx

Write a comment for each test we are going to make.

//reducer
    //returns state
    //adds a new stats object when it receives a new question
    //handles right action, returns correct stats
    //handles skip action, returns correct stats
    //handles wrong action, returns correct stats

//StatsContext provides an object with Stats for questions

The reducer takes a state object and an action object and returns a new state object. When the action type is undefined, the reducer should return the same state object that it received.

Imports and the first test. Declare state, an empty object. Declare action as an object with an undefined type.

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { reducer } from './index';

afterEach(cleanup);

describe('StatsContext reducer', () => {
    it('returns state', () => {
        const state = {};
        const action = { type: undefined };
        expect(reducer(state, action)).toEqual(state);
    });
});

Passing Test 1: Reducer Takes State, Action and returns State

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-1.tsx

Write the first version of the reducer. Remember that the reducer takes two parameters.

The first parameter is the state object. The state object type is StatsState.

The second parameter is the action object. The action object type is StatsAction.

Imports:

import { StatsAction, StatsState } from '../../types';

Write the reducer:

//the reducer handles actions
export const reducer = (state: StatsState, action: StatsAction) => {
    //switch statement looks at the action type
    //if there is a case that matches the type it will run that code
    //otherwise it will run the default case
    switch(action.type) {
        //default case returns the previous state without changing it
        default: 
            return state
    }
};

Test 2 Preparation: Add `blankStats` and `initialState` to StatsContext file

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-2.tsx

Before we write the tests, we need to add the blankStats and initialState objects to the StatsContext file.

Imports the types.

import { Stats, StatsAction, StatsState } from '../../types';

Create the blankStats object. Later, the reducer will copy this object to create the Stats object used to track new questions. Put blankStats in the file above the reducer.

//a Stats object
//use as the basis for tracking stats for a new question
export const blankStats = {
    right: 0,
    wrong: 0,
    skip: 0
} as Stats;

Create the initialState. Put it after the reducer.

//the object that we use to make the first Context
export const initialState = {
    dispatch: (action: StatsAction) => undefined
} as StatsState;

Ok, now we are ready to write the second test.

Test 2: `reducer` Adds a New `Stats` Object When it Receives a New Question

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-2.tsx

The next test we are going to write is 'adds a new stats object when it receives a new question.' That's a good thing to test. But shouldn't we test each case to make sure it works? Will we have to write three tests?

And what about all the tests after that?

handles right action, returns correct stats
handles skip action, returns correct stats
handles wrong action, returns correct stats

Those are probably going to be basically the same test. Do we really have to write the same code three times? No, we don't! Jest provides a way to make and run tests from a list of arguments. The way to make and run multiple tests from a list of arguments is the it.each method.

First we'll write a single test to show that the right case in the reducer adds a new stats object to the state. Then we'll write the code to pass that test. After that, I'll show you how to use it.each to make many tests at once when you want to test a lot of things with similar code. We'll replace the individual test with code that generates three tests, one to test each case.

Make the Single Test for `reducer` Handles `right` Action

Import the blankStats and initialState from StatsContext. Import StatsActionType from types.

import { blankStats, initialState, reducer } from './index';
import { StatsActionType } from '../../types';

Write the test.

    //adds a new stats object when it receives a new question
    it('adds a new stats object when it receives a new question', () => {
        const question = 'Example Question';

        //the action we will dispatch to the reducer
        const action = {
            type: StatsActionType.right,
            question
        };

        //the stats should be the blankStats object
        //with right === 1
        const rightStats = {
            ...blankStats,
            right: 1
        };

        //check to make sure that initialState doesn't already have a property [question]
        expect(initialState[question]).toBeUndefined();

        const result = reducer(initialState, action);

        //after getting a new question prompt in an action type 'right'
        //the question stats should be rightStats
        expect(result[question]).toEqual(rightStats);
    });

That looks pretty similar to the tests we've written before.

Run it, and it will fail.

Pass the Single Test for `reducer` Handles `right` Action

Now let's write the code for the reducer to handle actions with the type 'right.'
The case will need to:

Get the question out of the action.
Get the previous stats. To find the previous stats, first look in the state for a property corresponding to the question. If there are stats for the question already, use those. Otherwise, use the blankStats object.
Make the new stats. Use the previous stats, but increment the target property by one. e.g. right: prevStats.right + 1.
Make a new state object. Assign newStats as the value of the question.
Return the new state.

Remember, the cases go inside the switch statement. Add case 'right' to the switch statement in the reducer and save it.

        case 'right': {
            //get the question from the action
            const { question } = action;

            //if the question is already in state, use those for the stats
            //otherwise, use blankStats object
            const prevStats = state[question] ? state[question] : blankStats;

            //create newStats from the prevStats
            const newStats = {
                ...prevStats,
                //right increases by 1
                right: prevStats.right + 1
            };

            //assign newStats to question
            const newState = {
                ...state,
                [question]: newStats
            };

            return newState;
        }

Case `right`, `wrong` and `skip` Will All Be Basically the Same Code

If you understand how the code for case right works, think about how you would write the code for the other cases, wrong and skip. It's pretty much the same, isn't it? You'll just be targeting different properties. wrong instead of right, etc.

What Will the Tests Look Like?

The tests will look very repetitive. In fact, the tests would be the same. To test wrong, you would copy the test for right and just replace the word 'right' with the word 'wrong.' Writing all these tests out would be a waste of time when we will have three cases that all work the same. Imagine if you had even more cases that all worked the same! Or if you wanted to test them with more than one question prompt. You would be doing a lot of copying and pasting.

Jest includes a way to generate and run multiple tests. The it.each() method.
Delete the test we just wrote for 'adds a new stats object when it receives a new question.' We don't need it anymore. We are going to replace it with code that generates and runs multiple tests.

Tests: Using it.Each to Generate Multiple Tests

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-3.tsx

it.each() is the method that generates and runs multiple tests. Because it() is an alias for test(), you can also use test.each() if you think that sounds better. We'll start out using it.each() in this post, but later in the tutorial we'll use test.each() when we run multiple tests.

The API, which means the arguments that it.each() accepts and the way you use them, are different from what you would expect. One thing to note is that the code that you write to generate the title for each test uses a weird format called printf formatting. That's why you'll see % signs in the titles when we write them.

To make it.each work we will

Use Object.values() to get an array containing each value in the enum StatsActionType
Use Array.map() to iterate over the StatsActionType array
for each StatsActionType we will make an array of arguments that it.each will turn into a test
So we'll end up with an array of arrays of test arguments
We'll pass that array to it.each(). it.each() will print a test name based on the arguments and then run a test using the arguments

Start by making a describe block.

    describe('Test each case', () => {

});

Inside the describe block 'Test each case'

Write the functions that we'll use to generate the arguments for it.each().

Make a helper function that takes a StatsActionType and returns a Stats object with the argument type set to 1.

const getStats = (type: StatsActionType) => ({...blankStats, [type]: 1});

Bracket Notation doesn't mean there's an array. Bracket notation is a way of accessing an object property using the value of the variable inside the brackets. So when you call getStats('right') you will get back an object made by spreading blankStats and setting right to 1.

The getStats returns an object. It has a Concise Body and an Implicit Return. Surrounding the return value in parentheses is a way of telling the compiler that you are returning an object. The curly brackets enclose the object that is getting returned. Without the parentheses around them, the compiler would read the curly brackets as the body of the function instead of a returned value.

Declare an example question.

const exampleQuestion = 'Is this an example question?';

Make a helper function that accepts a StatsActionType and returns a StatAction object.

        //function that takes a StatsActionType and returns an action
        const getAction = (
            type: StatsActionType, 
            ) => ({
                type,
                question: exampleQuestion
        });

Inside the first describe block make another describe block. This is called 'nesting' describe blocks. Nested describe blocks will print out on the test screen inside of their parent blocks. Also, variables that are in scope for outer describe blocks will be available to inner describe blocks. So we can use all the variables we just declared in any test that is inside the outer describe block.

describe('Reducer adds a new stats object when it receives a new question prompt', () => {

});

Inside the Describe Block 'Reducer adds a new stats object when it receives a new question prompt'

Write the code to generate the arguments that we will pass to it.each.
Object.values will give us an array of each value in StatsActionType: ['right', 'skip', 'wrong'].

Array.map will iterate through each value in that array and return a new array.
In the callback function we pass to map we'll create an action object, the results that we expect to see, and return the array of arguments for the test.

 //uses Array.map to take each value of the enum StatsActionType
            //and return an array of arguments that it.each will run in tests
            const eachTest = Object.values(StatsActionType)
            .map(actionType => {
                //an object of type StatAction
                const action = getAction(actionType);

                //an object of type Stats
                const result = getStats(actionType);

                //return an array of arguments that it.each will turn into a test
                return [
                    actionType,
                    action,
                    initialState,
                    exampleQuestion,
                    result
                ];
            });

Use it.each to run all the tests. Each test will get an array of five arguments. If we wanted to rename the arguments, we could, but to try and make it easier to read we will name the arguments the same thing that we named them when we created them.

I'm not going to explain printf syntax, but here's a link if you're curious.

            //pass the array eachTest to it.each to run tests using arguments
            it.each(eachTest)
            //printing the title from it.each uses 'printf syntax'
            ('%#: %s adds new stats', 
            //name the arguments, same order as in the array we generated
            (actionType, action, initialState, question, result) => {
                    //assert that question isn't already in state
                    expect(initialState[question]).toBeUndefined();

                    //assert that the stats object at key: question matches result
                    expect(reducer(initialState, action)[question]).toEqual(result);
            });

Pass the `it.each` Tests for `skip` and `wrong`

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-3.tsx

Write the case for skip and add it to the switch statement. Notice that we use bracket notation and the ternary operator to get the value for prevStats.

        //user skipped a card
        case 'skip': {
            //get the question from the action
            const { question } = action;

            //if the question is already in state, use those for the stats
            //otherwise, use blankStats object
            const prevStats = state[question] ? state[question] : blankStats;

            //create newStats from the prevStats
            const newStats = {
                ...prevStats,
                //skip increases by 1
                skip: prevStats.skip + 1
            };

            //assign newStats to question
            const newState = {
                ...state,
                [question]: newStats
            };

            return newState;
        }

How Would You Write the Code for Case `wrong`?

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-3.tsx

Try writing the case to handle wrong actions on your own before you look at the example below. Hint: Look at the cases right and skip.

        //user got a question wrong
        case 'wrong': {
            //get the question from the action
            const { question } = action;

            //if the question is already in state, use those for the stats
            //otherwise, use blankStats object
            const prevStats = state[question] ? state[question] : blankStats;

            //create newStats from the prevStats
            const newStats = {
                ...prevStats,
                //wrong increases by 1
                wrong: prevStats.wrong + 1
            };

            //assign newStats to question
            const newState = {
                ...state,
                [question]: newStats
            };

            return newState;
        }

Test 4: Results for Existing Questions

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-4.tsx

Rewrite the helper function getStats() to take an optional parameter stats, a Stats object. The '?' tells TypeScript that the parameter is optional. If getStats receives stats, create the new Stats object by spreading the argument received for stats. Otherwise, spread the imported blankStats object.

//function that takes a StatsActionType and returns a Stats object
        //may optionally take a stats object
        const getStats = (
            type: StatsActionType, 
            stats?: Stats
            ) => stats 
                    ? ({ ...stats,
                        [type]: stats[type] + 1 })
                    : ({ ...blankStats,
                        [type]: 1 });

Create a new describe block below the describe block 'Reducer adds a new stats object when it receives a new question prompt' but still nested inside the describe block 'Test each case.'

Name the new describe block 'Reducer returns correct stats.'

        describe('Reducer returns correct stats', () => {
})

Inside the describe block 'Reducer returns correct stats'

Write a StatsState object, existingState.

        //create a state with existing questions
        const existingState = {
            ...initialState,
            [examplePrompt]: {
                right: 3,
                skip: 2,
                wrong: 0
            },
            'Would you like another example?': {
                right: 2,
                skip: 0,
                wrong: 7
            }
        };

Use Object.values and Array.map to create the test arguments.

        //Object.Values and array.map to turn StatsActionType into array of arrays of test arguments
        const existingTests = Object.values(StatsActionType)
        .map(actionType => {
            //get the action with the type and the example prompt
            const action = getAction(actionType);

            //get the stats for examplePrompt from existingState
            const stats = existingState[exampleQuestion];

            //getStats gives us our expected result
            const result = getStats(actionType, stats);

            //return the array
            return [
                actionType,
                action,
                existingState,
                result,
                exampleQuestion,
            ];
        });

Use it.each to run the array of arrays of test arguments.

  it.each(existingTests)
        ('%#: %s returns correct stats',
            (actionType, action, initialState, result, question) => {
                //assert that question is already in state
                expect(initialState[question]).toEqual(existingState[exampleQuestion]);
                //assert that the stats object at key: question matches result
                expect(reducer(initialState, action)[question]).toEqual(result);
        });

That's it! Now you know one way to generate multiple tests. There are other ways to generate multiple tests. it.each() can take a template literal instead of an array of arrays. We'll make multiple tests that way later. There is also a separate library you can install and use called jest in case.

Tests That Pass When You Write Them

These tests all pass because we already wrote the code to pass them. If a test passes when you write it, you should always be at least a little suspicious that the test isn't telling you anything useful. Can you make the tests fail by changing the tested code? Try going into the index file and changing the code for one of the cases in the reducer's switch statement so it doesn't work. Does the test fail? If it still passes, then that's bad!

Test 5: `StatsProvider` Renders Without Crashing

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-5.tsx

Add an import of the StatsProvider from StatsContext. We will write the StatsProvider to pass this test.

import { blankStats, initialState, reducer, StatsProvider } from './index';

Make a describe block named 'StatsProvider.'
Write the test to show that the StatsProvider renders without crashing. Recall from testing CardContext that the React Context Provider component requires a prop children that is an array of components. That's why we render StatsProvider with an array of children. If you prefer, you can use JSX to put a child component in StatsProvider instead of passing the array.

//StatsContext provides an object with Stats for questions
describe('StatsProvider', () => {
    it('renders without crashing', () => {
        render(<StatsProvider children={[<div key='child'/>]}/>)
    });
})

This test will fail because we haven't written the StatsProvider yet.

Pass Test 5: `StatsProvider` Renders Without Crashing

File: src/services/StatsContext/index.tsx
Will Match: src/services/StatsContext/complete/index-4.tsx

We'll use createContext and useReducer to make the StatsContext work. Import them from React.

import React, { createContext, useReducer } from 'react';

Declare the initialState. We'll put a placeholder dispatch function in there. We just have to have it to stop TypeScript from throwing an error. This placeholder makes our initialState object fit the StatsState union type that we declared. The placeholder dispatch accepts the correct type of argument, the StatsAction. But the placeholder will be replaced with the actual dispatch function inside the CardProvider.

//the object that we use to make the first Context
export const initialState = {
    dispatch: (action: StatsAction) => undefined
} as StatsState;

Use createContext to create the StatsContext from the initialState.

const StatsContext = createContext(initialState);

Declare the props for the StatsProvider. StatsProvider can accept ReactNode as its children. We can also declare the optional prop testState, which is a StatsState. When we want to override the default initialState for testing purposes we just need to pass a testState prop to StatsProvider.

//the Props that the StatsProvider will accept
type StatsProviderProps = {
    //You can put react components inside of the Provider component
    children: React.ReactNode;

    //We might want to pass a state into the StatsProvider for testing purposes
    testState?: StatsState
};

Write the StatsProvider and the exports. If you want to review the parts of the Provider, take a look at the CardProvider in post 6, where we made CardContext.

We use Array Destructuring to get the state object and the dispatch function from useReducer. We return the Provider with a value prop created by spreading the state and the reducer. This is the actual reducer function, not the placeholder that we created earlier. Child components are rendered inside the Provider. All child components of the Provider will be able to use useContext to access the StatsContext.

const StatsProvider = ({ children, testState }: StatsProviderProps) => {
    const [state, dispatch] = useReducer(reducer, testState ? testState : initialState);
    const value = {...state, dispatch} as StatsState;
    return (
        <StatsContext.Provider value={value}>
            {children}
        </StatsContext.Provider>
    )};

export { 
    StatsContext, 
    StatsProvider 
};

Great! Now the StatsProvider renders without crashing.

Test 6: Does Stats Context Provide Stats Values

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-6.tsx

To test if the StatsProvider is providing the correct values for StatsContext, we are going to write a helper component. Let's list the features we are trying to test:

Features

provides value for right
provides value for skip
provides value for wrong

Import useContext from React.

import React, { useContext} from 'react';

Inside the 'StatsProvider' describe block, make the helper component StatsConsumer. StatsConsumer uses useContext to access StatsContext, and will display the stats that it receives. Rendering StatsConsumer will allow us to check if StatsContext and StatsProvider are working correctly.

    //A helper component to get Stats out of StatsContext
    //and display them so we can test
    const StatsConsumer = () => {
        const stats = useContext(StatsContext);

        //stats is the whole StatsState
        //one of its keys is the dispatch key, 
        //so if there's only 1 key there's no stats
        if (Object.keys(stats).length < 2) return <div>No Stats</div>;

        //use the filter method to grab the first question
        const question = Object.keys(stats).filter(key => key !== 'dispatch')[0];
        const { right, skip, wrong } = stats[question];

        //display each property in a div
        return <div>
            <div data-testid='question'>{question}</div>
            <div data-testid='right'>{right}</div>
            <div data-testid='skip'>{skip}</div>
            <div data-testid='wrong'>{wrong}</div>
        </div>
    };

Create exampleQuestion and testState. You can copy and paste the existingState from inside the 'reducer' describe block above.

    const exampleQuestion = 'Is this an example question?';

    //create a state with existing questions
    const testState: StatsState = {
        ...initialState,
        [exampleQuestion]: {
            right: 3,
            skip: 2,
            wrong: 0
        },
        'Would you like another example?': {
            right: 2,
            skip: 0,
            wrong: 7
        }
    };

Make a nested describe block 'StatsContext provides stats object.' Make a helper function renderConsumer to render StatsConsumer inside the StatsProvider. Pass StatsProvider the testState object.

Test question, right, skip, and wrong.

 //StatsContext returns a stats object
    describe('StatsContext provides stats object', () => {
        const renderConsumer = () => render(
            <StatsProvider testState={testState}>
                <StatsConsumer/>
            </StatsProvider>)

        it('StatsConsumer sees correct question', () => {
            const { getByTestId } = renderConsumer();
            const question = getByTestId('question');
            expect(question).toHaveTextContent(exampleQuestion);
        })

        it('StatsConsumer sees correct value of right', () => {
            const { getByTestId } = renderConsumer();
            const right = getByTestId('right');
            expect(right).toHaveTextContent(testState[exampleQuestion].right.toString());
            })

        it('StatsConsumer sees correct value of skip', () => {
            const { getByTestId } = renderConsumer();
            const skip = getByTestId('skip');
            expect(skip).toHaveTextContent(testState[exampleQuestion].skip.toString());
            })

        it('StatsConsumer sees correct value of wrong', () => {
            const { getByTestId } = renderConsumer();
            const wrong = getByTestId('wrong');
            expect(wrong).toHaveTextContent(testState[exampleQuestion].wrong.toString());    
        })
    })

Test 7: it.each() With Tagged Literal

File: src/services/StatsContext/index.test.tsx
Will Match: src/services/StatsContext/complete/test-7.tsx

it.each() can take an array of arrays. it.each can also accept a tagged literal. A tagged literal, or template literal, sounds way more complicated than it is. A tagged literal is information inside of backticks. They are pretty common in modern javascript, and very useful.

To use a tagged literal for your it.each tests, you basically write out a table and let it.each run through the table. You declare the names of your arguments in the top row, and separate everything with the pipe | character.

Delete the three tests that we wrote for the value of right, skip, and wrong. Replace them with this example of it.each using a tagged literal.

This example also calls it by its alternate name, test. Remember, the 'it' method is an alias for the 'test' method. So calling test.each is the same as calling it.each. I think "test each" sounds better than "it each," so I usually use test.each when I'm running multiple tests.

        it('StatsConsumer sees correct question', () => {
            const { getByTestId } = renderConsumer();
            const question = getByTestId('question');
            expect(question).toHaveTextContent(exampleQuestion);
        });

        test.each`
        type        | expected
        ${'right'}  | ${testState[exampleQuestion].right.toString()}
        ${'skip'}   | ${testState[exampleQuestion].skip.toString()}
        ${'wrong'}  | ${testState[exampleQuestion].wrong.toString()}
        `('StatsConsumer sees correct value of $type, returns $expected', 
            ({type, expected}) => {
                const { getByTestId } = renderConsumer();
                const result = getByTestId(type);
                expect(result).toHaveTextContent(expected);
        });

See how in the top row we named our arguments? The first column is named 'type' and the second column is named 'expected.' Also notice that when we are printing the title we can refer to them by name instead of using the printf format. Like I said earlier, the test.each API is different from how you'd expect it to be.

We use object destructuring to get type and expected out of the arguments passed to each test. Then writing the tests goes as normal.

If you have a few minutes, try adding another column to the arguments. Try renaming the arguments. Try changing the titles of the tests, and rewriting the matchers and assertions.

Ok, now we have confidence that the StatsProvider is working. Let's import the StatsProvider into the App, then make the Stats component that will show Stats to the user.

Import StatsProvider into the App

File: src/App.tsx
Will Match: src/complete/app-4.tsx

We've got the StatsContext written. Now let's make the stats from StatsContext available to the components. You will make StatsContext available by importing the StatsProvider into the App and wrapping the components in the StatsProvider.

Go to /src/App.tsx. Change it to this:

import React from 'react';
import './App.css';
import Answering from './scenes/Answering';
import { CardProvider } from './services/CardContext';
import { StatsProvider } from './services/StatsContext';

const App: React.FC = () => 
    <CardProvider>
      <StatsProvider>
        <Answering />
      </StatsProvider>
    </CardProvider>

export default App;

Great! Now the contents of the stats context will be available to the Answering component. It will also be available to any other components that you put inside the StatsProvider.

Try Refactoring

Look at the code for the StatsContext reducer. Cases right, skip, and wrong have almost the same code inside of them. They each get the previous stats the same way. They each create the nextStats object and the nextState object the same way.

Can you write a single function getPrevStats that each case can call to get the previous stats for a question? Hint: You can pass the state to a function just like any other object. You'll know if your function works or doesn't because the tests will tell you if you break anything.

Can you write a single function getNextStats that each case can call that will return the next stats value?

If you write these functions and replace all the code inside the cases with them, you're eliminating duplicate code without changing the way the code works. That is called refactoring, and it's a big part of Test Driven Development.

In the next post we will make the Stats Component that will show the stats to the user.

Right and Wrong Answer Buttons

jacobwicks — Fri, 17 Jan 2020 04:45:22 +0000

In this post we will:

Make a Buttons component that shows the Submit button and buttons that let the user record if their answer was right or wrong
Make clicking the Submit, Right, and Wrong buttons advance to the next card
Put the new Buttons component into Answering
Hide the answer when we advance to the next card

In the next post we'll make a new context called StatsContext. We'll use StatsContext to track how many times the user answered a question right or wrong. We will also make a component to show the stats for the current question.

`Buttons` Component

User Story

... When the user is done with their answer, they click the submit button. The app shows them the answer key. The user compares their answer to the answer key. The user decides they got the question right, and clicks the 'right answer' button. Then the user sees the next question.

We don't just want to show the answer. We want the user to be able to say if their answer was right or if their answer was wrong. We need to show the user the Submit button before they are done answering the question. After the user clicks submit we need to show them the Right and Wrong buttons. Let's make the component to do that.

Features

after clicking the Submit button, Right and Wrong buttons show up
clicking the Right or Wrong button moves to the next question

Choose Components

We have already made the Submit button. We'll move it out of Answering and into our new Buttons component.

We'll use the Button Group from Semantic UI React for the Right and Wrong buttons. Button.Group can show buttons with some nice looking separators, like the word 'or' in a circular graphic.

Decide What to Test

What are the important functions of these buttons?
If the question has not been answered, then the Submit button should show up.
If the question has been answered, then the Right and Wrong buttons should show up.
Clicking the Right button should move to the next card.
Clicking the Wrong button should move to the next card.

Writing the Tests for Buttons

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-1.tsx

In the test file, write a comment line for each test you are going to write.

//renders without crashing
//Buttons takes a prop answered: boolean 
//if !answered, then it should show a submit button
//if answered, then it should show right and wrong buttons
//clicking right advances to next card
//clicking wrong advances to next card
//clicking submit invokes submit, shows right and wrong buttons

Imports and afterEach go at the top.

import React, { useState, useContext } from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Buttons from './index';
import { CardContext, CardProvider, initialState } from '../../../../services/CardContext';
import { CardState } from '../../../../types';

afterEach(cleanup);

Helper Components

We are going to make Buttons dispatch actions to CardContext that will change the state of CardContext in ways that Buttons won't display. Clicking Right or Wrong will dispatch a CardActionTypes.next action, which should change the current index in CardContext.

In order to make sure that Buttons is dispatching actions correctly, we'll make two helper components to render in our tests. Current will render the current index from CardContext. The other helper component will be ButtonHolder. ButtonHolder will be used instead of the Answering component, when we need a container to hold Buttons and Current.

Helper Component: Current

Write the Current component. Current is a component that returns a div with the current index from CardContext in it. Current lets us see what the current index is, so we can test when the current index in CardContext has changed. This lets us test if other components in the app would show a different card when we click a button, but without the added complexity of actually importing those other components and knowing how they operate.

//displays the current index from cardContext
//allows us to check if buttons can change current
const Current = () => {
    const { current } = useContext(CardContext);
    return <div data-testid='current'>{current}</div>
};

Helper Component: ButtonHolder

Write the ButtonHolder component. This component will let us test Buttons the way our app will use it. Our app will use Buttons inside the CardProvider.

Buttons will take a boolean prop answered. Buttons will use the value of answered to decide whether to show Submit or Right and Wrong.

Write a useState hook in Buttonholder to manage the value of answered. Remember, useState lets you store a value and gives you a function to change that value. This will let us test if clicking the Submit button invokes the submit function. It will also let us test if Buttons shows the Submit button when answered is false, and if Buttons shows the Right and Wrong buttons when answered is true.

Buttons needs to access the CardContext so it can change to the next card when the user clicks Right or Wrong. Put Buttons inside the CardProvider. Add Current inside the CardProvider. That way we can test if clicking Right and Wrong changes the current index.

ButtonHolder accepts two optional props, answeredStartsAs and testState.

We will pass a value to answeredStartsAs when we want to override the starting value of answered.

We will pass a CardState object to testState when we want to override the default initial state that the CardProvider starts with.

//a container component to hold  Buttons 
//submit() changes answered from false to true
const ButtonHolder = ({
    answeredStartsAs,
    testState
}:{
    answeredStartsAs?: boolean
    testState?: CardState
}) => {
    const [answered, setAnswered] = useState(answeredStartsAs !== undefined ? answeredStartsAs : false);

    return (
        <CardProvider testState={testState}>
            <Buttons answered={answered} submit={() => setAnswered(true)}/>
            <Current/>
        </CardProvider>
    )};

With the helper components written, we are ready to write the first test.

Test 1: Renders Without Crashing

The first test is to make a component that will render without crashing.

//renders without crashing
it('renders without crashing', () => {
    render(<ButtonHolder/>);
});

Pass Test 1: Render Without Crashing

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/index-1.tsx

Let's write a Buttons component that will render without crashing.
We know we want Buttons to accept a boolean prop answered and a function submit. So we will declare those two props. We declare submit's TypeScript type as () => void. The parentheses mean it's a function. This function does not accept any arguments, so the parentheses are empty. This function does not return a value. So the return value is void. We'll invoke the submit function in the Buttons component when the Submit button is clicked.

Return a div.

import React from 'react';

const Buttons = ({
    answered,
    submit
}:{
    answered: boolean,
    submit: () => void
}) => <div/>;

export default Buttons;

Test 2: When `answered` is false, `Buttons` Shows a `Submit` Button

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-2.tsx

We'll render Buttons directly, without ButtonHolder. In this test we don't care about what Buttons does with the CardContext. We just want to know that the Submit button is on the screen.

We are using getByText because we expect the text 'Submit' to be found. Notice that we are using a Regular Expression (RegEx) to find the button.

jest.fn() is a method that can replace functions in your tests. It makes a 'Mock Function.' Mock Functions can be a complicated topic. Basically, it's a fake function. We can use it in place of a real function, and if we wanted to, we could find out how many times the component had called it, and what arguments it received. We use a mock function here because Buttons needs a submit prop that is a function and we don't want to have to write a real function to pass to the submit prop.

//Buttons takes a prop answered: boolean 
//if !answered, then it should show a submit button
it('has a submit Button', () => {
    const { getByText } = render(<Buttons answered={false} submit={jest.fn()}/>);
    const submit = getByText(/submit/i);
    expect(submit).toBeInTheDocument();
});

Pass Test 2: When `answered` is false, `Buttons` Shows a `Submit` Button

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/index-2.tsx

Import the Button component from Semantic UI React.

import { Button } from 'semantic-ui-react';

Change the return value from the div to a Button with content = 'Submit'. The content prop of a Button is the label text that shows up on the screen.

}) => <Button content='Submit'/>;

Test 3: When `answered` is true, Should Show `Right` and `Wrong` Buttons

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-3.tsx

Add a describe block named 'when answered is true'. This describe block will contain all the tests that cover when answered is true and we are using the Right and Wrong buttons.

describe('when answered is true', () => {
//if answered, then it should show right and wrong buttons

    //clicking right advances to next card

    //clicking wrong advances to next card
});

Write the third test. We pass true as the value of answeredStartsAs so that the value of answered starts as true. Buttons should show the Right and Wrong buttons when answered is true. The Right and Wrong buttons have text labels, so we are finding them by searching for the text on them.

describe('when answered is true', () => {
//if answered, then it should show right and wrong buttons
    it('shows right and wrong buttons', () => {
        const { getByText } = render(<ButtonHolder answeredStartsAs={true}/>);

        const right = getByText(/right/i);
        expect(right).toBeInTheDocument();

        const wrong = getByText(/wrong/i);
        expect(wrong).toBeInTheDocument();
    });

    //clicking right advances to next card

    //clicking wrong advances to next card
});

Pass Test 3: When `answered` is true, Should Show `Right` and `Wrong` Buttons

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match src/scenes/Answering/components/Buttons/complete/index-3.tsx

Change the return value of Buttons. Write a Button.Group containing the Right and Wrong buttons. Use a ternary operator to return the Button.Group if answered is true and the Submit button if answered is false.

The ternary operator is a short way of writing an if/else statement. The ternary operator returns one value if a condition is true, and a different value if the condition is false. If the condition is true it returns the value after the ?, and if the condition is false it returns the value after the :.

}) => answered
    ?   <Button.Group>
            <Button content='Right' positive />
            <Button.Or/>
            <Button content='Wrong' negative />
        </Button.Group>
    :   <Button content='Submit'/>;

Test 4: Clicking `Right` Changes to Next Card

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-4.tsx

To test that clicking Right changes to the next card and that clicking Wrong changes to the next card we will pass a CardState object to override the default initialState.

Declare the const zeroState inside the describe block. We'll use the spread operator to make zeroState a copy of the initialState object, but we will explicitly set current to 0. By doing this we make sure that our test starts with current at 0, even if the imported initialState object is changed and has current !== 0. The less you make your tests rely on code that is written outside of your tests, the more you can rely on your tests.

describe('when answered is true', () => {
    //if answered, then it should show right and wrong buttons
    it('shows right and wrong buttons', () => {
        const { getByText } = render(<ButtonHolder answeredStartsAs={true}/>);

        const right = getByText(/right/i);
        expect(right).toBeInTheDocument();

        const wrong = getByText(/wrong/i);
        expect(wrong).toBeInTheDocument();
    });

    const zeroState = {
        ...initialState,
        current: 0
    };

    //clicking right advances to next card

Now write the test. Pass zeroState to ButtonHolder so that we know current will start as 0.

  //clicking right advances to next card
    it('when the user clicks the Right button, the app changes to the next card', () => { 
        //pass testState with current === 0
        const { getByTestId, getByText } = render(<ButtonHolder answeredStartsAs={true} testState={zeroState}/>);

        //get the helper component Current
        const current = getByTestId('current');
        //current should show text 0
        expect(current).toHaveTextContent('0');

        //get the right button
        const right = getByText(/right/i);
        //click the right button
        fireEvent.click(right);

        expect(current).toHaveTextContent('1');
    });

Pass Test 4: Clicking `Right` Changes to Next Card

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/Scenes/Answering/components/Buttons/complete/index-4.tsx

Import useContext from React. We'll be dispatching actions to the CardContext when the user clicks buttons. Import CardActionTypes from types.ts. Import CardContext.

import React, { useContext } from 'react';
import { Button } from 'semantic-ui-react';
import { CardActionTypes } from '../../../../types';
import { CardContext } from '../../../../services/CardContext';

Change Buttons to get CardContext's dispatch from useContext. Add an onClick function to the Right Button. The onClick function will dispatch an action with type of CardActionTypes.next.

const Buttons = ({
    answered,
    submit
}:{
    answered: boolean,
    submit: () => void
}) => {
    const { dispatch } = useContext(CardContext);

    return answered
    ?   <Button.Group>
            <Button content='Right' positive 
                onClick={() => dispatch({ type: CardActionTypes.next })}
            />
            <Button.Or/>
            <Button content='Wrong' negative />    
        </Button.Group>
    :   <Button content='Submit'/>
};

Next we will test that clicking the Wrong button changes the current index. Before you look at the example, try to write the test. Hint: it is based on the test for the Right button.

How do you think we will make the Wrong button pass the test?

Test 5: Clicking `Wrong` Changes to Next Card

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/scenes/Answering/components/Buttons/complete/test-5.tsx

Write the test for clicking the Wrong Button. It is almost the same as the test for clicking the Right Button.

   //clicking wrong advances to next card
    it('when the user clicks the Wrong button, the app changes to the next card', () => { 
        //pass testState with current === 0
        const { getByTestId, getByText } = render(<ButtonHolder answeredStartsAs={true} testState={zeroState}/>);

        //get the helper component Current
        const current = getByTestId('current');
        //current should show text 0
        expect(current).toHaveTextContent('0');

        //get the wrong button
        const wrong = getByText(/wrong/i);
        //click the wrong button
        fireEvent.click(wrong);

        expect(current).toHaveTextContent('1');
    });

Pass Test 5: Clicking `Wrong` Changes to Next Card

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/Scenes/Answering/components/Buttons/complete/index-5.tsx

Add an onClick function to the Wrong button. Dispatch an action with type CardActionTypes.next.

            <Button content='Wrong' negative 
                onClick={() => dispatch({ type: CardActionTypes.next })}
            />

Test 6: Clicking `Submit` shows `Right` and `Wrong` Buttons

File: src/scenes/Answering/components/Buttons/index.test.tsx
Will Match: src/Scenes/Answering/components/Buttons/complete/test-6.tsx

The last test we'll do on Buttons is clicking the Submit button should show the Right and Wrong buttons. In the app, and inside the ButtonHolder component, clicking the Submit button will invoke the submit function passed as a prop to Buttons. In Answering, the submit function will set the value of answered to true.

Before we simulate the click event, we use queryByText to look for 'Right' and 'Wrong,' and we expect the results to be null.

After we simulate the click event, we use getByText to look for 'Right' and 'Wrong,' and we expect the results to be elements in the document.

//clicking submit invokes submit, shows right and wrong buttons
it('clicking submit shows right and wrong', () => {
    const { getByText, queryByText } = render(<ButtonHolder />)

    const submit = getByText(/submit/i);
    expect(submit).toBeInTheDocument();

    expect(queryByText(/right/i)).toBeNull()
    expect(queryByText(/wrong/i)).toBeNull()

    fireEvent.click(submit);

    expect(queryByText(/submit/i)).toBeNull();
    expect(getByText(/right/i)).toBeInTheDocument();
    expect(getByText(/wrong/i)).toBeInTheDocument();
});

Pass Test 6: Clicking `Submit` shows `Right` and `Wrong` Buttons

File: src/scenes/Answering/components/Buttons/index.tsx
Will Match: src/Scenes/Answering/components/Buttons/complete/index-6.tsx

Add an onClick function to the Submit button. The onClick function invokes the submit function passed as a prop to Buttons.

<Button content='Submit' onClick={() => submit()}/>

Add Buttons to Answering

Now it is time to add Buttons to Answering.

Choose Components

We are adding the Buttons component that we just wrote. We will also remove the old Submit Button from Answering.

Decide What to Test

Does clicking the Submit Button still show the answer?
Right Button does not show up until the Submit Button is clicked
Wrong Button does not show up until the Submit Button is clicked
Clicking the Submit Button makes the Right and Wrong Buttons show up

Answering Tests 1-2: `Right` and `Wrong` Do Not Show Up Before `Submit` is Clicked

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-12.tsx

We already test if clicking the Submit button shows the answer. We'll see if that test still passes when we import the Buttons component or not.

We need to add a test that clicking the Submit button makes the Right and Wrong buttons show up.

Add a describe block near the bottom but above the snapshot test. Name the describe block 'clicking the Submit Button makes the Right and Wrong Buttons show up.' Write a comment inside the describe block for each test we are about to write.

describe('clicking the Submit Button makes the Right and Wrong Buttons show up', () => {
    //the Right button does not show up before Submit is clicked

    //the Wrong button does not show up before Submit is clicked

    //Clicking Submit makes the Right Button show up

    //Clicking Submit makes the Wrong Button show up

});

Inside the describe block write two tests to make sure the Right and Wrong Buttons don't show up before Submit is clicked. We expect these tests to both pass, so we're writing them together.

    //the Right button does not show up before Submit is clicked
    it('the Right button does not show up before Submit is clicked', () => {
        const { queryByText } = renderAnswering();
        const right = queryByText(/right/i);
        expect(right).toBeNull();
    });

    //the Wrong button does not show up before Submit is clicked
    it('the Wrong button does not show up before Submit is clicked', () => {
        const { queryByText } = renderAnswering();
        const wrong = queryByText(/wrong/i);
        expect(wrong).toBeNull();
    });

These tests should pass.

Hopefully they will still pass when we add Buttons to Answering. Look at the queries that we used to search for the Right and Wrong buttons. If you wanted to be sure that these tests worked, what would you do? How would you change the Answering component to make these tests fail?

Answering Tests 3-4: `Right` and `Wrong` Show Up After Submit is Clicked

Inside the describe block write two tests to make sure the Right and Wrong Buttons show up after Submit is clicked. Find the submit button and use fireEvent.click() to simulate the click event. Then find the Right or Wrong button using getByText.

    //Clicking Submit makes the Right Button show up
    it('clicks the submit button and shows the Right button', () => {    
        const { getByText } = renderAnswering();

        //find the submit button
        const submit = getByText(/submit/i);
        //simulating a click on the submit button
        fireEvent.click(submit);

        const right = getByText(/right/i);
        expect(right).toBeInTheDocument();
    });

    //Clicking Submit makes the Wrong Button show up
    it('clicks the submit button and shows the Wrong button', () => {    
        const { getByText } = renderAnswering();

        //find the submit button
        const submit = getByText(/submit/i);
        //simulating a click on the submit button
        fireEvent.click(submit);

        const wrong = getByText(/right/i);
        expect(wrong).toBeInTheDocument();
    });

These tests should fail. Right and Wrong won't start showing up until we add Buttons to Answering.

Answering Pass Tests 1-4: `Right` and `Wrong` Show Up After Submit is Clicked

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-9.tsx

Ok, now let's add Buttons to Answering.
Import Buttons.

import Buttons from './components/Buttons';

Change the component. Delete the old Submit Button from the Container:

    <Container data-testid='container' style={{position: 'absolute', left: 200}}>
         <Header data-testid='question' content={question}/>
         <Button>Skip</Button>
         <Form>
            <TextArea data-testid='textarea'/>
        </Form>
        <Button onClick={() => setShowAnswer(true)}>Submit</Button>
        <Answer visible={showAnswer}/>
    </Container>

And replace it with Buttons. Pass showAnswer as the prop answered, and make submit call setShowAnswer(true).

    <Container data-testid='container' style={{position: 'absolute', left: 200}}>
         <Header data-testid='question' content={question}/>
         <Button>Skip</Button>
         <Form>
            <TextArea data-testid='textarea'/>
        </Form>
        <Buttons answered={showAnswer} submit={() => setShowAnswer(true)}/>
        <Answer visible={showAnswer}/>
    </Container>

Save it. Now Answering will pass all the tests.

Look at your app

Run the app with the command npm start. Click Submit and the answer shows up. The Right and Wrong buttons show up.

Clicking the Right button will advance to the next card. Clicking the Wrong button will advance to the next card. Clicking the Skip button will also advance to the next card.

Hiding the Answer When the Card Changes

You will notice that when you click Submit, the Answer opens but does not close when you move to the next card. That's not what we want. We need to change Answering so that it will hide the answer when the card changes. To hide the answer, we need to set showAnswer to false when the value of current changes. To do that, we will use the useEffect hook.

The useEffect hook lets us run a function when one of the values that we tell useEffect to watch changes. We'll tell our useEffect to watch current. We'll make the code inside useEffect call setShowAnswer(false) when current changes. Then Answer will become invisible when current changes.

Answering Test 5: Answer is Hidden when Card Changes

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-13.tsx

Write the test for the answer going away inside of the describe block named 'submit button controls display of the answer.' Find and click the Submit button to show the answer. To check if the answer shows up, use the compareToInitialAnswer function we wrote earlier. Once you know the answer shows up, then find and click the Skip button.

When you click the Skip button, the current index in CardContext will change. We'll search for the first answer again to make sure it isn't still showing up in the document. You should also write a compareToSecondAnswer function so that we can search for the answer from the second card. Make sure the second answer isn't shown either.

  //answer goes away
  it('answer disappears when card changes', () => {
    const { getByText, queryByText } = renderAnswering();

    //find the submit button
    const submit = getByText(/submit/i);
    //simulating a click on the submit button
    fireEvent.click(submit);

    //use a custom function to find the answer
    const answer = getByText(compareToInitialAnswer);

    //assertion
    expect(answer).toBeInTheDocument();

    //clicking skip changes the current index 
    const skip = getByText(/skip/i);
    fireEvent.click(skip);

    //the answer to the second question
    const secondAnswer = initialState.cards[initialState.current + 1].answer;

    //remove lineBreaks from initialAnswer for comparison to textContent of elements 
    const withoutLineBreaks = secondAnswer.replace(/\s{2,}/g, " ");

    //a function that compares a string to the second answer
        const compareToSecondAnswer = (
            content: string, 
            { textContent } : HTMLElement
        ) => !!textContent && 
            textContent
            .replace(/\s{2,}/g, " ")
            .slice(6, textContent.length) === withoutLineBreaks;

    //look for the first answer
    const gone = queryByText(compareToInitialAnswer);
    //first answer shouldn't show up
    expect(gone).toBeNull();

    //look for the second answer
    const answer2 = queryByText(compareToSecondAnswer);
    //second answer shouldn't show up
    expect(answer2).toBeNull();
  });

Test fails because the answer is still showing up.

Pass Answering Test 5: Answer is Hidden when Card Changes

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-10.tsx

Write the useEffect. useEffect takes two arguments.

The first argument is a function. We will write a function that uses setShowAnswer to set the value of showAnswer to false.

The second argument is an array. This array contains all the values that useEffect 'depends' on. It is called the array of 'dependencies.' Basically it means that when one of those values changes, useEffect will run the function in its first argument.

We'll include current in the dependency array. We put current in there because we want the code to run when current changes.

We will also put setShowAnswer in the dependency array. The function setShowAnswer won't change and trigger the useEffect to run, but it is a value from outside the useEffect that we are using inside the useEffect. So we should put it in there. To find out why, click here, but it is complicated and not something you need to know to get this app working.

This useEffect makes it so when the value of current changes, showAnswer will be set to false. So now when the user switches cards, they won't see the answer anymore.

Import useEffect.

import React, { useState, useContext, useEffect } from 'react';

Write a useEffect hook to setShowAnswer to false when current changes. See how the first argument is a function, and the second argument is the array of dependencies?

    useEffect(() => {
        //hide the answer
        setShowAnswer(false);

        //useEffect triggers when the value of current changes
    }, [current, setShowAnswer]);

return (

Ok! When the value of current changes the code inside the useEffect will trigger and set showAnswer to false. Save and run the tests.

What? Run the app and take a look at it. Click Submit. Click Skip. The answer disappears! So what's the problem?

What's going on here?

Take a look at it through the React Dev Tools in your browser. When you click, you can see that the Answer is still getting rendered for a split second after the card changes. See the header here?

So we need to test things a bit differently. We need our test to wait for the Header to go away.

React Testing Library gives us waitForElementToBeRemoved. It pretty much does what it says. You don't pass it a reference to an element. You give waitForElementToBeRemoved the query that you want to use, and it will try the query repeatedly for up to 4500 milliseconds. It will stop when the element is removed or it times out.

Change Answering Test 5: Answer is Hidden when Card Changes

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-14.tsx

Import waitForElementToBeRemoved.

import { render, cleanup, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';

Mark the test callback function as async. Async means we are using asynchronous code. Async code is a complicated topic, and not one that you need to understand to get this app working. But basically, normal JavaScript code all executes one command after the other. If you want to run code a and then code b, you have to run code a, wait for a to finish, before you can then start to run code b. But asynchronous code is code that can be executed while other code is running. So if code a were asynchronous, you could start code a, and while code a is running, you could tell code b to start.

Making it an async function will allow us to use await. Await is one of several ways that javascript has for dealing with async code. Using the await command basically means we are waiting for the async code to get done running before running the next line of code that depends on the results of the async code.

Don't worry if you didn't understand that!

We can use await to wait for waitForElementToBeRemoved to finish running.

 //answer goes away
    it('answer disappears when card changes', async () => {

Change the last lines of the test. Originally, we looked for answer2 and expected it to be null:

//a function that compares a string to the second answer
    const compareToSecondAnswer = (content: string) => content === withoutLineBreaks;

    //look for the first answer
    const gone = queryByText(compareToInitialAnswer);
    //first answer shouldn't show up
    expect(gone).toBeNull();

    //look for the second answer
    const answer2 = queryByText(compareToSecondAnswer);
    //second answer shouldn't show up
    expect(answer2).toBeNull();

We'll change it to awaiting waitForElementToBeRemoved. Pass waitForElementToBeRemoved an anonymous function that uses queryByText() and our custom searching function compareToSecondAnswer.

Remember, queryByText looks at each element and passes the text content to the function compareToSecondAnswer. compareToSecondAnswer compares each string that queryByText passes it to the second answer and returns true if it gets a match.

So what will happen here is waitForElementToBeRemoved will run queryByText(compareToSecondAnswer). It will get an element back, because the second answer starts out in the document. That's why our first version of the test failed, because the search result for the second answer wasn't null. But waitForElementToBeRemoved will keep running that queryByText until it gets a null result.

Once our Answer component finishes animating off, it unmounts its contents. Remember when we put the Transition into Answer and had to pass it the unmountOnHide prop? Passing this test is why we had to do that. When Answer unmounts its contents, queryByText(compareToSecondAnswer) will return null, and waitForElementToBeRemoved will pass.

//a function that compares a string to the second answer
        const compareToSecondAnswer = (
            content: string, 
            { textContent } : HTMLElement
        ) => !!textContent && 
            textContent
            .replace(/\s{2,}/g, " ")
            .slice(6, textContent.length) === withoutLineBreaks;

        //look for the first answer
        const gone = queryByText(compareToInitialAnswer);
        //first answer shouldn't show up
        expect(gone).toBeNull();

        //second answer should go away
        await waitForElementToBeRemoved(() => queryByText(compareToSecondAnswer));

Do you notice anything different about the test 'answer disappears when card changes?' Look at how long it took the tests to pass. Waiting for the Transition component to animate made the test take 1052 ms. That is a lot longer than the rest of the tests.

One Last Thing: Clear the TextArea

If you tried typing an answer in the TextArea, you no doubt noticed that it does not get cleared out when you click Skip, Right, or Wrong. Let's fix that with the React useEffect hook.

Answering Test 6: TextArea Clears When Current Changes

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-15.tsx

Make a test that puts text in the TextArea, clicks the Skip button, then expects the TextArea to be empty.

We use fireEvent.change() to put text into the TextArea. fireEvent.change() takes two arguments.

The first argument is a reference to the element.

The second argument is an object that describes the properties of the event. This event affects the target, which is the element that we passed as the first argument. The property of the target that is being changed is the value. We are setting the value property of the target element to the placeholder text.

it('clears the answer when card changes', () => {
  const { getByText, getByTestId } =  renderAnswering();
  const textarea = getByTestId('textarea');

  const placeholder = 'placeholder text'
  //put the placeholder text into the textarea
  fireEvent.change(textarea, { target: { value: placeholder } });

//make sure the placeholder text is there
  expect(textarea).toHaveTextContent(placeholder);

//get the skip button
  const skip = getByText(/skip/i);
//click skip, this dispatches a 'next' action to cardcontext
//which should change the value of current 
//and trigger useEffect hook to clear the textarea
  fireEvent.click(skip);

//textarea should be empty
    expect(textarea).toHaveTextContent('');
});

You might notice that the test isn't failing because textarea didn't clear. The test is failing because textarea doesn't contain the placeholder text. I found that the Semantic UI React TextArea doesn't work with fireEvent unless it is a controlled component. A controlled component is a component where the value is held in state. We need to make TextArea into a controlled component to be able to clear it out when the card changes anyway, so the test will work. But that is the kind of thing that you will encounter when you are trying to test your components.

Pass Answering Test 6: TextArea Clears When Current Changes

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-11.tsx

To make fireEvent.change() work on the Semantic UI React TextArea, we need the TextArea to be a controlled component. Normally, you don't want to change your code to pass your tests. But we need the TextArea to be a controlled component anyway, so there is no problem with doing that now.

Add a useState hook to keep track of the value of input. Set it to an empty string to start with. Notice that because the starting value is a string, TypeScript will infer that input is a string and the function setInput takes a string as an argument.

Inside the useEffect hook that resets showAnswer to false, add a call to setInput. Set the input back to an empty string. Add setInput to the dependency array. Even though the setInput function won't change and trigger the useEffect, it is still a value from outside the useEffect that we are using inside the useEffect.

///the value of the textarea where the user types their input
const [input, setInput] = useState('');

    useEffect(() => {
        //hide the answer
        setShowAnswer(false);

        //clear the TextArea
        setInput('');

        //useEffect triggers when the value of current changes
    }, [current, setShowAnswer, setInput]);

Make the TextArea a controlled component by setting its value prop equal to input. Write the onChange function. You can see the props of the SUIR TextArea here. The onChange function fires with two arguments.

The first argument, that we call e, is the React SyntheticEvent object. We're not using it, so we don't even bother typing it. We just tell TypeScript to designate it as 'any.' If we wanted to type it, its type is SyntheticEvent.

The second argument is all the props and the event value. We use Object Destructuring to pull the value out of the second argument. Notice that we don't have to give the second argument a name or deal with the whole object at all, we can just pull the value out and look at it.

The value can be a few different types. But remember how we let TypeScript infer the type for setInput? Well, we can only pass strings to setInput. So in th onChange function, before we call setInput and pass it the value from the onChange event, we assert that the typeof the value is string. If the type of the value is a string, then we call setInput. If the type is something else, then we don't call setInput.

            <TextArea data-testid='textArea'
            value={input}
            onChange={(e: any, {value}) => typeof(value) === 'string' && setInput(value)}/>

Now try writing an answer then clicking Skip, Right, or Wrong. The useEffect will trigger and set the variable input to an empty string. The empty string will be passed to TextArea as its value prop, and the TextArea will clear.

Next Post: StatsContext

In the next post we will make another Context to track statistics. We will also make a component to show the user the statistics.

Show the Answer and Submit Button

jacobwicks — Fri, 17 Jan 2020 04:42:45 +0000

In this post we will:

Make the Answer component that gets the current card from CardContext, keeps the answer hidden until it is told to show the answer, and shows the answer to the user when they are ready
Make clicking the Submit button show the answer

In this post we will make clicking the Submit button show the answer to the user. In the next post we will move the Submit button into a new component called Buttons. Buttons will show the Submit button. After the user clicks Submit Buttons will show two buttons labeled Right and Wrong. Clicking Right or Wrong will let the user record if they got the answer right or wrong.

The Answer Component

In the last post we made the Answering scene. The Answering scene is where the user answers questions from the cards. It shows the user the question from the current card and gives them a box to type their answer in. The Answer component will appear on screen as a box that shows the answer after the user is done trying to answer the card.

Now we will make the Answer component that shows the answer to the current card. Answer will be hidden until after the user clicks the Submit button. We will put the Answer component inside the Answering scene. That way the user will see it when they need to.

User Story

The user sees a question displayed on the screen. The user writes an answer to the question. When the user is done with their answer, they click the Submit button. The app shows them the answer from the current card. The user compares their answer to the answer from the current card. The user decides they got the question right, and clicks the Right Answer button. Then the user sees the next question.

Features

a component that shows the answer to the user
the answer is hidden and doesn't show up on the screen
clicking Submit button shows answer

Choose Components

We want to show the answer to the user when they are ready to see it. That means sometimes the answer will be hidden, but sometimes it will be shown. We'll use a Transition component to hide the answer and animate the answer when it appears.

Transition takes a prop visible that tells it to show up or not. visible is boolean. It is either true or false. When visible is true, the Transition will show its contents. When visible is false, the Transition will hide its contents. When visible changes from true to false or from false to true, Transition will run an animation.

Transition needs its contents to be wrapped with a div. If the contents are not inside a div the Transition won't work right. So we'll put a div inside Transition. We'll put the the answer from the card inside the div so the user can see it.

We'll put a Header inside the div too. A Header is a component that contains enlarged text that is used to label things. This Header will say 'Answer' so the user knows that they are seeing the answer.

Decide What to Test

When you decide what to test, ask yourself "What does this component do? What part of that matters to the user?" I decided that there are four things we need to test in this component.

when visible, it shows the answer
shows the right answer (the answer from the current card, not some other card)
has a header with 'Answer' in it so the user knows they are looking at the answer
if it isn't visible, the answer doesn't show up on the screen

Test 1: `Answer` Renders Without Crashing

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-1.tsx

A lot of the time, when people do TDD the first test they write for a component is a test to see if it will render without crashing. We won't always start with a test that basic. But for the Answer component we will start with this basic test.

Make the necessary imports. We are importing CardProvider and the initialState object from CardContext. Answer will need access to the cards in CardContext so Answer can show the answer to the user. To get access to the CardContext, Answer must be inside the CardProvider component that is exported from the CardContext file.

We are importing the CardProvider to this test file because in the tests we will render Answer inside of the CardProvider. We render Answer inside of the CardProvider so that Answer can access the cards in CardContext. That way we can be confident that our tests actually show us how Answer will work when we use it in the app.

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { CardProvider, initialState } from '../../../../services/CardContext';
import Answer from './index';

afterEach(cleanup);

Write the Helper Function renderAnswer

To test Answer we need to use the render method from React Testing Library. We need to render Answer inside of the CardProvider so that Answer can access the cards from CardContext. We will write the helper function renderAnswer to use the render method from React Testing Library to render Answer inside of the CardProvider. Writing renderAnswer means that we can call renderAnswer in each of our tests instead of rewriting the code in each test.

renderAnswer takes an optional boolean parameter visible. Optional means that we don't have to pass an argument for visible. renderAnswer will work fine without it. But if visible is defined, it will be passed to Answer as the value of Answer's prop named visible.

If the parameter visible is not defined, we will pass true to Answer as the value of the prop named visible. So when we call renderAnswer() without an argument, it will render a visible answer. If we do want to render a hidden answer, we will call renderAnswer(false).

//the ?: after visible tells typescript that it is optional
const renderAnswer = (visible?: boolean) => render(
  <CardProvider>
    <Answer visible={visible !== undefined ? visible : true}/>
  </CardProvider>
);

Write the test 'renders without crashing.' To test that Answer renders without crashing, call renderAnswer.

it('renders without crashing', () => {
    renderAnswer();
});

It does not render without crashing.

Pass Test 1: `Answer` Renders Without Crashing

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-1.tsx

We'll render a div to pass the first test. One of the rules of test driven development is that you are only allowed to write the minimum amount of code required to pass the test. We don't always strictly follow that rule in this tutorial. But in this step we do. This is a minimal amount of code for a React component! It is a functional component that returns a div.

import React from 'react';

const Answer = () => <div/>

export default Answer;

Now it renders without crashing!

Test 2: Answer Has a Div that Will Show the Answer

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-2.tsx

Answer will take a boolean prop visible. Let's test to make sure that when it is visible, it shows the answer. Remember, our helper component passes true as the value of the prop visible unless we tell it to do something else.

Let's put the three tests of the visible Answer inside a describe() block. describe() is a method that Jest provides so that you can organize your tests. You will see when you run these tests that Jest shows you the three tests under the name of the describe block.

Make a describe block named 'when visible, it shows the answer.' Write a comment for each of the tests we'll write inside the describe block.

describe('when visible, it shows the answer', () => {
    //has the div that will show the answer

    // has a header with 'Answer'

    // shows the right answer
 });

When Answer is visible, Answer shows the div that will hold the answer:

describe('when visible, it shows the answer', () => {
    //has the div that will show the answer
    it('has the answer div', () => {
        const { getByTestId } = renderAnswer();
        const answerDiv = getByTestId('answer')
        expect(answerDiv).toBeInTheDocument();
      });

    // shows the right answer

    // has a header with 'Answer'

 });

Pass Test 2: Answer Has Div that Will Show the Answer

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-2.tsx

Add the testId 'answer' to the div.

const Answer = () => <div data-testid='answer'/>

Test 3: Answer Div Shows the Right Answer

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-3.tsx

The most important feature of Answer is that it shows the right answer to the user.

We want to test that the div that has the Header and the answer from the current card is actually showing the right answer to the user. We find the div by searching for its testId 'answer.' We find the current card by getting the current index from the initialState object that we imported from CardContext. Then we look at the current index in the array cards in initialState. We will compare the contents of the div to the answer from the current card.

      // shows the right answer
    it('displays the right answer', () => {
        const { getByTestId } = renderAnswer();
        //find the answer div
        const answer = getByTestId('answer');
        //get the textContent
        const text = answer.textContent;

        //this is the answer from the card at index current in cards
        const initialAnswer = initialState.cards[initialState.current].answer;

        //expect the rendered text in the div 
        //to equal the answer from initial state, 
        expect(text).toEqual(initialAnswer); 
    });

Pass Test 3: Answer Div Shows the Right Answer

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-3.tsx

Import useContext from React. useContext is the React Hook that lets you get values from a context. Import CardContext from the CardContext file. CardContext is the context that we made. CardContext has the cards and the current index in it.

import React, { useContext } from 'react';
import { CardContext } from '../../../../services/CardContext';

We call useContext() and pass it the CardContext. useContext will return the current value of the CardState inside CardContext.

We use Object Destructuring to get the cards array and the current index out of CardContext.

We use Object Destructuring again to get the answer out of the card at the current index in cards.

Return the answer inside of the answer div.

const Answer = () => {
    const { cards, current } = useContext(CardContext);
    const { answer } = cards[current];

    return <div data-testid='answer'>{answer}</div>
};

Test 4: Header

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-4.tsx

We are going to add a Header with the word 'Answer' in it. Because we know what text will be inside the header, we can use the getByText query to find it instead of assigning a testId. See how we have passed '/answer/i' to getByText? That is a regular expression, or regEx. Regular Expressions are a powerful tool for searching and manipulating text. Regular expressions can get pretty complicated. This one just matches the text 'answer' and the /i means it is case insensitive.

Write Your Tests to Find the Important Things

We use a case insensitive regEx because even though we decided it's important for the text 'Answer' to show up, we don't think that the capitalization is important. So we don't test for capitalization. Using a case insensitive regEx means that no matter how you capitalize the word 'Answer' in the Header, it will still pass the test. If capitalization was important, you could change the regEx or search for a string instead.

// has a header with 'Answer' 
    it('has the answer header', () => {
        const { getByText } = renderAnswer();
        const header = getByText(/answer/i);
        expect(header).toBeInTheDocument();
    });

Pass Test 4: Header

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-4.tsx

Import the Header component from Semantic UI React.

import { Header } from 'semantic-ui-react';

Rewrite the returned component. Add the Header to it. as='h3' tells the Header how large it should be. h1 is the biggest header size, h2 is a little smaller, and h3 is smaller than h2. content is the text that shows up inside the Header.

    return (
        <div data-testid='answer'>
            <Header as='h3' content ='Answer'/>
            {answer}
        </div>
    )};

Passes the header test. But the test for the right answer fails!

What's Going On?

Look at the error that Jest is showing us. The div still has the answer text in it. But now it also has a Header component. Inside the Header is the string 'Answer.' Jest is finding the textContent of the Header and the textContent of the div, not just the textContent of the div. The result is right but the test is failing. So we need to change the test. To get the test to pass we need to change the way we test for the right answer.

Answer: Change Test Named 'displays the right answer'

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-5.tsx

This is an example of the type of problem that comes up a lot when you are testing. You wrote the test the way you thought you needed. Then you wrote the code to do what you want. Now the code does what you want, but the test is failing. Once you look at your code and you are sure that the code is working, then you know that you need to change the test to fit the code.

What's making this test fail is that it is finding the div with the testId 'answer' and looking at all of the textContent inside of that div. The 'answer' div has the Header in it, so the textContent of the 'answer' div includes the string 'Answer' from the header as well as the answer from the current card.

Here is what gets rendered inside the div with the testId 'answer.' To see this, you can scroll up when a test fails. You can also get the debug method from the call to render or your helper component, and call debug().

You can also use console.log() to see the textContent of the answer div.

console.log(answer.textContent)

So we make a const fullAnswer by adding the string 'Answer' to the initialAnswer. Then expect the textContent of the div to match fullAnswer.

//...rest the test above
        const initialAnswer = initialState.cards[initialState.current].answer;

        //Answer header is in the div
        //add the string 'Answer' to initialAnswer
        const fullAnswer = 'Answer' + initialAnswer;

        //expect the rendered text in the div 
        //to equal the answer from initial state, 
        //plus the 'Answer' string from the header
        expect(text).toEqual(fullAnswer);  
    });

Test 5: Answer is Invisible when Hidden

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-6.tsx

This test is to make sure Answer doesn't show up when it is hidden. This test is outside of the describe block 'when visible, it shows the answer.'

We pass false to the helper function to tell it that we want Answer to be hidden. Then we use a query to search for the answer div by testId. But we aren't using getByTestId. We are using queryByTestId(), a new query that we haven't seen before.

queryBy vs. getBy

The getBy queries will throw an error and fail the test if they don't find anything. That's normally good. But here we don't expect to find the testId. We expect that we won't find the testId because Answer shouldn't show up. Answer is hidden, so we expect that it won't show up on the page. So we use queryByTestId, because the queryBy queries won't throw an error if they don't find anything. When a queryBy query doesn't find anything, it returns null without throwing an error. We set the variable answer equal to the result of the queryByTestId. We don't expect to find anything, so we expect our variable answer to be null.

toBeNull() is the assertion you use when you expect something to be null.

 it('If not visible, it isnt visible', () => {
    const { queryByTestId } = renderAnswer(false);
    const answer = queryByTestId('answer');

    expect(answer).toBeNull();
});

Pass Test 5: Answer is Invisible When Hidden

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-6.tsx

We import the Transition component from Semantic UI React. Transition takes a boolean prop called visible. Transition will show or hide its contents based on the value of visible. Transition will animate the appearance or disappearance of the contents when visible changes from true to false or from false to true. I find that Transition only works correctly when the contents are inside of a div. We will use the 'answer' div.

import { Header, Transition } from 'semantic-ui-react';

Add a prop named visible to the Answer component. Use TypeScript to declare visible as type boolean. Wrap the div that Answer returns in the Transition component. Pass the visible prop to Transition.

Transition Props

animation='drop' tells Transition what kind of animation to use. Semantic UI React has many types of animations that you can choose from.

duration={500} tells Transition how long the animation should take.

unmountOnHide tells Transition to unmount the contents from the React component tree when the Transition is hidden. If you don't tell it to unmount on hide, the contents will stay in the component tree even when it is hidden and the user can't see it. This usually doesn't matter, but one of the tests in a later post won't pass unless we use unmountOnHide.

const Answer = ({
    visible
}:{
    visible: boolean
}) => {
    const { cards, current } = useContext(CardContext);
    const { answer } = cards[current];

return (
    <Transition visible={visible} animation='drop' duration={500} unmountOnHide>
        <div data-testid='answer'>
            <Header as='h3' content ='Answer'/>
            {answer}
        </div>
    </Transition>
)};


export default Answer;

Great! It's passing all the tests. Answer works how we want it to. Answer is ready to be added to the Answering scene.

Read through the test file for Answer. Do you understand what features you are testing for?

Read through the index file for Answer. Can you see some things that the component does that you aren't testing for?

Add Answer to Answering

Now it is time to add Answer into the Answering scene. Once Answer is added, the answer will show up on screen so the user can see it.

Features

clicking the Submit button makes the answer to the question appear

Choose Components

We will use the Answer component that we just made.

Choose What to Test

Think about what you are going to need to test. You'll need to test that the Submit button controls the visibility of the Answer. And you'll want to test that the Answer shows the right answer.

answer doesn't show up
when Submit is clicked, answer shows up

Answering Tests 1-2:

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-10.tsx

In the Answering scene, Answer won't show up until the user clicks the Submit button. To test what happens when we click a button, we need to simulate clicking the button. RTL gives us the fireEvent method. fireEvent can be used to simulate clicks, mouseover, typing and other events.

Import fireEvent from React Testing Library. You will simulate the click with fireEvent.click().

import { render, cleanup, fireEvent } from '@testing-library/react';

Make a describe block near the bottom of the test file, but above the snapshot test. Name the describe block 'submit button controls display of the answer.' Write a comment for each test we are about to write.

describe('submit button controls display of the answer', () => {
    //answer does not show up
    //clicking the submit button makes the answer show up
});

Checking if the Answer Shows Up

For both of the tests we are going to write we will need to search for the text of the answer. Remember earlier, when we wrote the Answer component, we had to change our test to search for the string 'Answer' plus the answer after it? We had to do that because the div that shows the answer also has a header with the string 'Answer' in it.

So now we know we could find the answer by doing the same thing we did in the tests for Answer. We could find the answer by putting the string 'Answer' in front of it and searching for that. But that is not the best way to do it. Why do you think that is not the best way to do it?

Don't Test Features of Other Components

The reason the answer has extra text added to it is because of how the component Answer works. When we are testing the Answering scene, we don't care how the component Answer works. We don't care if it has a Header, or what's in the Header. Our test for Answering should not also be testing the other components inside it, like Answer. We don't want to test Answer. We only want to test Answering. We only really care about what the user sees and experiences. We only care if the user looking at Answering can see the answer when they should.

If our test for Answering looks for the correct answer the same way that the test in Answer looks for it, with the extra added string, then it will work at first. But what if we change Answer? What if we take the Header out of Answer? Then our tests for Answering would fail. But should those tests fail? The answer would still show up on the screen. Answering doesn't test for the Header. The Header being there or not shouldn't make Answering fail tests.

Let's use a different way to make sure that the text of the correct answer is showing up.

Finding Text with a Custom Function

You have seen queryByText and getByText. You can use them to find an element by passing a string ('text goes here'). You can also use them to find an element by passing a regular expression (/text goes here/i). There is also a another way to find elements using these queries. You can find elements by writing a custom function and passing the custom function to the queries.

Custom Functions for Queries

The queries look through the rendered component one element at a time. When you pass the query a function, the query will run that function on each element that it looks at. The query passes two arguments to the function. The first argument is the content of the element, which is a string. The second argument is the element itself. The function must return a boolean value, true or false.

A function for an RTL query has to be in this form: Accepts up to two parameters and returns a boolean value.

(content : string, element: HTMLElement) => boolean

When the custom function returns true, the query will add that element to its results. Some queries only look for one element. Those queries will stop looking when they find the first element that returns true. Other queries look for an array of elements. Those queries will go through all the elements and add each one that returns true to the array of results.

The Function to Find the Answer to the Current Question

Let's write the custom function that will find the element that contains the answer. We'll write this code inside the describe block, but before and outside the tests that we will write inside the describe block. That way, each test inside the describe block can use the function.

Get the answer to the current question from the initialState. Call it initialAnswer.

   //the answer to the current question
    const initialAnswer = initialState.cards[initialState.current].answer;

Removing LineBreaks

The initialAnswer is stored as a string literal. It may contain linebreaks. The linebreaks won't get rendered. So for the comparison to work, we need to remove any linebreaks from the initialAnswer. Let's create a variable called withoutLineBreaks, which is the initialAnswer without linebreaks.

To make withoutLineBreaks, we'll use the string.replace method. We'll use string.replace to replace any linebreaks with a space. The first argument passed to the replace method is a regular expression that identifies linebreaks. This regEx is more complicated than the regExs we have been using to find strings of text. But you should save that for later. Right now, all you need to know is that it will find the linebreaks so that we can replace them with a different value.

The second argument is what we are replacing linebreaks with, which is a space.

    //remove linebreaks from initialAnswer for comparison to textContent of elements 
    const withoutLineBreaks = initialAnswer.replace(/\s{2,}/g, " ");

What is going on in the RegEx?

Short answer:

You don't need to know! You can skip this section and come back later if you are curious.

Long answer:

This function uses a regular expression /\r\n|\r|\n/g to identify linebreaks. I got it from an answer on StackOverflow. The answer to the StackOverflow question at this link explains that different operating systems will use different characters for linebreaks. Linux uses \n. Windows uses \r\n. Old Macs use \r. So this regEx looks for each of those.

More than you want to know about lineBreaks:

Newlines in JavaScript will always be 'linefeeds', or \n. So we could get the same effect just looking for \n instead of also looking for the other types of linebreaks. But the more complex regex will catch all linebreaks. So if we decided to later to store linebreaks in an answer in a different way, it would still work. I also decided to keep it as a good example of a slightly more complex regular expression.

Copying and Pasting RegEx

Getting a regEx from the internet is great. You can often find a regular expression that someone else has written that does what you want. But as with all code that you copy and paste from the internet, if you don't understand it then you might make mistakes, use bad code, or use it incorrectly.

An example of a problem with using copy pasted code without understanding it is that in the StackOverflow link above, the regEx is inside of parentheses: /(\r\n|\r|\n)/g. The parentheses are a capturing group, a way to group the results of the regEx. But I found out that the regEx inside the capture group split the array differently than I wanted in some of the tests that we use this regEx in, and made those tests fail. So I took the capturing group out.

Full Explanation of This RegEx

For learning regex, I like the website www.rexegg.com and their regEx cheatsheet. The website (https://regexr.com/) is a great tool for writing regular expressions. Here is a link to this regular expression loaded into regexr.

The pieces of this regex are:
/ the regEx is inside of a pair of slashes. That tells the compiler that these are special characters, and it shouldn't read them the normal way.
| the pipe character means 'or'.
\r matches a carriage return.
\n matches a line feed character.
/g is a 'flag' that means global search. This means that the regEx will find all possible matches in the string.

All together, the line /\r\n|\r|\n/g tells the compiler: this is a Regular Expression. Return a match when you find a carriage return followed by a linefeed, or a carriage return on its own, or a linefeed on its own. Find every match in the text.

The Custom Function

Write a function that takes a string and compares it to the string withoutLineBreaks. This function will just look at the textContent string that it gets from the query. It won't do anything with the whole element, so we are not including a second parameter. That will work fine, the query doesn't need the function to accept both arguments. The query just needs the function to return a boolean value.

Now we can pass this function to queries and find any elements that contain the text of the initialAnswer.

    const compareToInitialAnswer = (content: string) => content === withoutLineBreaks;

The Describe Block So Far

describe('submit button controls display of the answer', () => {
    //the answer to the current question
    const initialAnswer = initialState.cards[initialState.current].answer;

    //remove lineBreaks from initialAnswer for comparison to textContent of elements 
    const withoutLineBreaks = initialAnswer.replace(/\s{2,}/g, " ");

    const compareToInitialAnswer = (content: string) => content === withoutLineBreaks;

    //answer does not show up
    //clicking the submit button makes the answer show up
});

Answering Test 1: Answer Does Not Show Up Until Submit is Clicked

The first test checks that the answer does not show up before the submit button is clicked. Look how we are passing the compareToInitialAnswer function to queryByText. Do you know why we are using queryByText instead of getByText?

This test will pass because we haven't added Answer to Answering yet, so there is no way the answer will show up on screen. Once we do add Answer, it will give us confidence that Answer is working correctly and is not showing up before it should.

//answer does not show up
it('the answer does not show up before the submit button is clicked', () => {
    const { queryByText } = renderAnswering();

    //use the custom function to search for the initial answer
    const answer = queryByText(compareToInitialAnswer);

    expect(answer).toBeNull();
});

Answering Test 2: Clicking Submit Makes Answer Show Up

The second test shows that clicking the Submit button will make the answer show up. We use getByText to find the Submit button and fireEvent.click() to click it. Use the custom function compareToInitialAnswer to find the answer in the document.

    //clicking the submit button makes the answer show up
it('clicks the submit button and shows the answer', () => {    
    const { getByText } = renderAnswering();

    //find the submit button
    const submit = getByText(/submit/i);
    //simulating a click on the submit button
    fireEvent.click(submit);

    //use a custom function to find the answer
    //the function returns true if content is equal to the initial answer withoutLineBreaks 
    const answer = getByText(compareToInitialAnswer);

    //assertion
    expect(answer).toBeInTheDocument();
  });

Tests done. Run them and make sure that your last test isn't passing. It should not pass because the answer should not show up yet.

Pass Answering Tests 1-2

File: src/scenes/Answering/index.tsx
Will Match: src/scenes/Answering/complete/index-8.tsx

To pass the tests we just wrote, we'll change Answering so the Submit button controls the visibility of Answer.

Import useState from React.
The useState hook holds a value and gives you a function to set the value to something else. We will use it to hold the value of showAnswer. showAnswer will be a boolean variable that determines whether we should show the answer or not.

import React, { useContext, useState } from 'react';

Import the Answer component you just made.

import Answer from './components/Answer';

Add the useState hook. useState(startingValue) returns an array with two values in it.

///the return value of useState
[ value, setValue ]

value is the value that useState currently holds. It starts as the starting value that was passed in to useState.

setValue is a function that lets you change the value that useState currently holds.

In the code below, const [showAnswer, setShowAnswer] is the declaration of two const variables, showAnswer and setShowAnswer. Declaring a variable or variables by putting them in brackets with an object on the other side of an equals sign means you are using Array Destructuring. Array Destructuring is like Object Destructuring, except you are getting elements out of an array instead of properties out of an object.

showAnswer is a boolean variable. So showAnswer will either be true or false. We pass useState a starting value of false. Because the starting value is boolean, TypeScript will assume that the value inside this useState always be boolean and that the function to set it will take a single argument with a boolean value. If we wanted something else, we could explicitly declare the type of the useState values. But we want it to be boolean, so we are letting TypeScript 'infer' the type. 'Infer' the type means TypeScript will figure out the type from the code. When TypeScript inference works, it is nice. When it doesn't do what you want, then you have to explicitly declare the type.

setShowAnswer is a function. It takes one argument. The argument that setShowAnswer takes is boolean. So you can only invoke setShowAnswer with true or false. After you invoke setShowAnswer, the value of showAnswer will be set to the value that you passed to setShowAnswer.

We will pass the function setShowAnswer to the Submit button. When the value of showAnswer changes, the answer will become visible.

const Answering = () => {
    //get cards, current index and dispatch from CardContext
    const { cards, current, dispatch } = useContext(CardContext);

    //get the question from the current card
    const { question } = cards[current];

    const [showAnswer, setShowAnswer] = useState(false);

return (

Add an onClick function to the Submit button that calls setShowAnswer(true). Add the Answer below the Submit button. Pass showAnswer as the value of Answer's visible prop.

Now clicking the Submit button will set the value of showAnswer to true. We are passing showAnswer to Answer as the value of the prop visible. So when we set showAnswer to true, we are making Answer visible.

</Form>
        <Button onClick={() => setShowAnswer(true)}>Submit</Button>
        <Answer visible={showAnswer}/>
    </Container>

Run the app. The answer is not there. Click Submit and the answer will show up!

Show Linebreaks In the Answer

Ok, the answer shows up. But it's all on one line. Let's change Answer so that it respects the linebreaks stored in the template literal.

Answer: Change the Test Named 'displays the right answer' so it Looks for Multiple Lines

File: src/scenes/Answering/components/Answer/index.test.tsx
Will Match: src/scenes/Answering/components/Answer/complete/test-7.tsx

We are going to rewrite the test named 'displays the right answer'. To make sure that we are testing for an answer that has linebreaks, we are going to make a new CardState object called testState. We'll pass testState to the CardProvider instead of the default initialState.

Import CardState from types.

import { CardState } from '../../../../types';

We'll need to pass the testState to CardProvider. Make renderAnswer accept a second optional parameter, testState. Declare testState as a type CardState. Pass testState to CardProvider as a prop.

const renderAnswer = (visible?: boolean, testState?: CardState) => render(
  <CardProvider testState={testState}>
    <Answer visible={visible !== undefined ? visible : true}/>
  </CardProvider>
);

Now we'll rewrite the 'displays the right answer' test.

Declare a const testAnswer. testAnswer is a template literal inside of backticks. That sounds complicated, but it just means that we can use linebreaks inside it.

Declare a const cards. Use the spread operator to make a new array from the array initialState.cards.

Set the answer property of the object at testAnswer.cards[0] equal to testAnswer.

Declare a const testState. Use the spread operator to make a new object from the initialState. Overwrite the existing cards property with the array cards. Overwrite the existing current property with the number 0.

Then call renderAnswer(true, testState). Remember, the first argument tells renderAnswer that Answer should be visible. The second argument is the testState object that we just made.

Use the getByTestId matcher to find the answer div.

We expect the answer div to contain a Header, and also to contain one other div for each line in the answer. The testAnswer has three lines in it, so we'll expect the answer div to contain four divs total.

You can look at the children property of an element to see how many other elements are inside it. The children property of an element is an array. So we will make assertions about the length of the children array and the contents of the children array.

The first element inside the answer div is the Header. So answer.children[0] is the header.

Every other element inside the answer div will be a div that contains a line of the answer. So answer.children[1] will be a div with the first line of testAnswer. answer.children[2] will be a div with the second line of testAnswer.

testAnswer is a string. We can't tell what each line is. We need an array with each line of testAnswer. Use String.split() to split the string into an array of strings. Pass the regular expression /\n/g to String.split() to split the string at every linebreak.

Then we expect that the textContent of each child of the element matches one of the lines in the answer.

    // shows the right answer
        // shows the right answer
    it('displays the right answer', () => {
      //testAnswer is a template literal with linebreaks
      const testAnswer = `This has linebreaks
        Here's the second line
        and the third line`;

        //create a new array using initialState.cards
        const cards = [...initialState.cards];
        //set the answer of the card at index 0 = to testAnswer
        cards[0].answer = testAnswer;

        //create a new CardState with cards, set current to 0
        const testState = {
          ...initialState,
          cards,
          current: 0
        };

        //call renderAnswer with visible = true, testState
        const { getByTestId } = renderAnswer(true, testState);

        //find the answer div
        const answer = getByTestId('answer');

        //the answer div should have 4 children
        //one child is the Header
        //plus three more child divs, one for each line in testAnswer
        expect(answer.children).toHaveLength(4);

        //use Array.split to split testAnswer into an array
        //the regular expression /\n/g identifies all the linebreaks
        const testAnswerArray = testAnswer.split(/\n/g);

        const firstLine = answer.children[1];
        const secondLine = answer.children[2];
        const thirdLine = answer.children[3];

        expect(firstLine.textContent).toEqual(testAnswerArray[0]);
        expect(secondLine.textContent).toEqual(testAnswerArray[1]);
        expect(thirdLine.textContent).toEqual(testAnswerArray[2]);
    });

toEqual instead of toHaveTextContent

Notice that we do not expect firstLine toHaveTextContent of the line from the answer. Instead we expect firstLine.textContent toEqual the line from the answer. The reason to access the textContent of the element and use toEqual instead using the whole element and using toHaveTextContent is because of the way toHaveTextContent works.

When you pass a string to toHaveTextContent it will compare that string to the textContent of the element. It looks for a partial match. It doesn't tell you that it is an exact match. So toHaveTextContent('apple') tells you that the element text contains the string 'apple.' It doesn't tell you that the element text matches the string 'apple.' It would match whether the textContent was 'apple,' 'apples and oranges,' or 'apples, oranges, and pears.'

We want this test to show us that the textContent of each div exactly matches that line of the answer. toEqual tells us that the text content is actually equal to the the string in the answer array, without any extra text.

Optional Experiment to Compare toEqual and toHaveTextContent

You can use the string.slice method to cut off part of the answer string and see that toHaveTextContent still matches. If you are curious about this, try adding these lines to your test.

The code

testAnswerArray[0].slice(0, testAnswerArray[0].length - 7)

Creates a new string that is the first string in testAnswerArray with the last seven characters cut off.

This will still pass:

        expect(firstLine).toHaveTextContent(testAnswerArray[0].slice(0, testAnswerArray[0].length - 7));

While toEqual won't:

        expect(firstLine.textContent).toEqual(testAnswerArray[0].slice(0, testAnswerArray[0].length - 7));

This test works. But it only tests one answer. It tests an answer with linebreaks. Do you feel like it tests enough that you are certain the app will work? There's no right answer. That's something you'll decide when you develop your own apps.

How would you test to make sure the component correctly displays an answer without any linebreaks? Or an answer with five lines?

Rewrite the Answer Component to Show Multiple Lines

File: src/scenes/Answering/components/Answer/index.tsx
Will Match: src/scenes/Answering/components/Answer/complete/index-7.tsx

We just rewrote the test 'displays the right answer' to expect that multiple lines will be displayed when the stored answer contains lineBreaks. To make the Answer component display multiple lines, we will first use the String.split method to make an array of strings from the answer string. Then we'll use the Array.map method to make that an array of React elements from the array of strings.

const Answer = ({
    visible
}:{
    visible: boolean
}) => {
    const { cards, current } = useContext(CardContext);
    const { answer } = cards[current];

    const content = answer
        //use string.split and a regEx to split the string into an array
        .split(/\n/g)
        //use Array.map to make an array of div elements
        .map((string, index) => <div key={index}>{string}</div>);

return (
    <Transition visible={visible} animation='drop' duration={500} unmountOnHide>
        <div data-testid='answer'>
            <Header as='h3' content ='Answer'/>
            {content}
        </div>
    </Transition>
)};

When you run all the tests, the test in Answering named 'clicks the submit button and shows the answer' will fail.

Answering Test: Fix Test 'clicks the submit button and shows the answer'

File: src/scenes/Answering/index.test.tsx
Will Match: src/scenes/Answering/complete/test-11.tsx

The test failed and Jest gave us an error message. The error message says:

Unable to find an element with the text: content => content === withoutLineBreaks. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

If you scroll down the screen that displays the failed test, you can see that it failed at the line where we try to use the custom function compareToInitialAnswer to find the element that contains the answer.

      134 |     //because the Answer component sticks a header with text in the answer div
      135 |     //the function returns true if content is equal to the initial answer withoutLineBreaks
    > 136 |     const answer = getByText(compareToInitialAnswer);

The error message tells us that the function compareToInitialAnswer did not return true for any of the elements in the document. Here's the code for compareToInitialAnswer:

const compareToInitialAnswer = (content: string) => content === withoutLineBreaks;

CompareToInitialAnswer No Longer Finds the Answer

Now you know that compareToInitialAnswer no longer finds the answer. compareToInitialAnswer no longer finds the answer because the rendered code looks different now that the answer is split up into multiple divs. So the test 'clicks the submit button and shows the answer' fails, and we need to fix it.

But there is something else that you should be concerned about. Take a look at the whole test file for Answering. Is 'clicks the submit button and shows the answer' the only test that uses compareToInitialAnswer?

No! The test named 'the answer does not show up before the submit button is clicked' also uses compareToInitialAnswer. But that test still passes. Why does that test still pass, even though it is using compareToInitialAnswer and compareToInitialAnswer doesn't work?

The test named 'the answer does not show up before the submit button is clicked' still passes because it expects to find nothing when it passes compareToInitialAnswer to a query. Now that compareToInitialAnswer doesn't work, it will still find nothing. It passes when it finds nothing, and will only fail when the query using compareToInitialAnswer returns a result.

This is a good example of why it's important to understand how your tests work. You need to know when your tests are actually giving you useful information and when they aren't.

Fix the compareToInitialAnswer Function

Earlier we learned that a custom function for a query can have two parameters:

(content : string, element: HTMLElement) => boolean

compareToInitialAnswer only has one parameter, content. It just tests if content is equal to the variable withoutLineBreaks. compareToInitialAnswer doesn't do anything with the second argument, the element. We can fix the test by changing how compareToInitialAnswer works.

Instead of looking at the content string, we'll look at the textContent of each element. Change compareToInitialAnswer to this:

    const compareToInitialAnswer = (
        content: string, 
        { textContent } : HTMLElement
    ) => !!textContent && 
        textContent
        .replace(/\s{2,}/g, " ")
        .slice(6, textContent.length) === withoutLineBreaks;

Here's a line by line explanation of the changes.

        { textContent } : HTMLElement

We add a second parameter. The second parameter is of the type HTMLElement. HTMLElement has textContent that we can look at. We aren't interested in any of the other properties, so we'll use Object Destructuring to pull the textContent property out of the element that gets passed to the function.

 ) => !!textContent &&

This anonymous function has an implicit return. It will return either the value of textContent cast to boolean, or the value of the strict equality comparison of the string that we make from textContent to withoutLineBreaks.

!! is the Double Not operator. It casts the value to boolean. The textContent property of an HTMLElement will either be a string or null. If the textContent is null, the function will cast null to boolean, get false, and return false.

&& is the Logical And operator. The first condition in this expression is casting textContent to boolean. If textContent is a string, it will be cast to boolean, and evaluate to true. Because the first condition is true, the code after the && operator will then be evaluated.

 textContent

We know that the next lines will only be run if textContent is a string. So we can use the string methods .replace and .slice to create a new string that we'll compare to withoutLineBreaks. We can use those methods on different lines in the code. They do not have to be written all on one line to work.

.replace(/\s{2,}/g, " ")

We use String.replace to replace any linebreaks and multiple spaces with a single space. You can look at this regEx on regExr if you want to.

 .slice(6, textContent.length) === withoutLineBreaks;

We are looking for the element that holds both the Header with the string 'Answer' in it and also holds a div for each line in the answer. So the textContent that we want will start with the string 'Answer.' Use the String.slice method to cut off the first 6 characters and return a new string. This cuts off the 'Answer' from the start of the string and lets us compare to withoutLineBreaks.

=== is the strict equality operator.

Once you save the changed compareToInitialAnswer, all tests will pass.

In the next post we will make a new component called Buttons. We will move the Submit button into Buttons. Buttons will also show the Right and Wrong buttons after Submit is clicked. To make the buttons work we will make some changes to the types.ts file and CardContext.

DEV Community: jacobwicks

Simplify your React Context reducer with Redux Toolkit's createReducer

What is createReducer?

Why use createReducer?

Example App

Install Redux Toolkit

createReducer

Each Action is Self Contained in its Own File

Action with no payload:

Action with primitive payload

Action with an object payload

The actions Index File

Using the Actions

Testing

That's it!

Make memes with Node, Express, Canvas, GitHub and Heroku

Project Goals

Get Started

Use Canvas to Make an Image From Text

Make a Route to Return a Text Image

Make a Meme: Put Text on an Image

Write the makeMeme function.

Add a Route That Returns a Meme

Host it online using GitHub and Heroku

Change Port

Edit package.json

Make the .gitignore file

GitHub

Create a Git Repository

Add Your Code to your new Repository

Check the Git Repo

Host using Heroku

Create a New Heroku App

Deploy by Connecting the App to GitHub

Build the App

Use the App!

Next steps

What to do if deployment didn't work

Setup Flashcard App The Hard Way

1. Install Node Js

2.Install NPM

3. Use NPX, which comes with NPM, to run create-react-app

4. Use NPM, not NPX, to install the libraries

5. Try to Run it

6. Add Semantic-UI-React styling

Semantic UI React the easy way

Shuffle Cards and Display Selected Subjects

Write the Shuffle Code

Display Only Selected Subjects

Test

Write getNext

CardContext Reducer

Card Selector

User Stories

Features

The Selector Component

Where to Store the Data for Selector?

Add Show to Types.ts

Change getInitialState in CardContext services

The New Actions

Add Actions to CardActionTypes

CardContext reducer Tests 1-2: Select Actions

Pass CardContext reducer Tests 1-2: Select Actions

CardContext reducer Tests 3-4: showAdd Actions

Pass CardContext reducer Tests 3-4: showAdd Actions

CardContext reducer Test 5: showAll Actions

Pass CardContext reducer Test 5: showAll Actions

CardContext reducer Test 6: showRemove Actions

Pass CardContext reducer Test 6: showRemove Actions

Making the Selector

Choose components

Decide what to test

Selector Test 1: Has a Sidebar

Pass Selector Test 1: Has a Sidebar

Selector Test 2: Has Subjects Menu Item

Pass Selector Test 2: Has Subjects Menu Item

Selector Test 3: Clicking Subjects Menu Item Clears Show

Pass Selector Test 3: Clicking Subjects Menu Item Clears Show

Selector Tests 4-7: Renders a Menu Item for Each Subject

Pass Selector Tests 4-7: Renders a Menu Item for Each Subject

Write the `makeMeme` function.

Add Saving to `CardContext`