From 547e268bc840c5b0b438fea6c7686f406a4df883 Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 4 Mar 2019 11:36:08 -0800 Subject: [PATCH] adding bonus content for jest --- bonus-jest/demo/README.md | 128 ++++++++++++++++++++++++ bonus-jest/demo/index.html | 15 +++ bonus-jest/demo/src/TestMe.spec.tsx | 11 ++ bonus-jest/demo/src/TestMe.tsx | 37 +++++++ bonus-jest/demo/src/index.spec.tsx | 7 ++ bonus-jest/demo/src/index.ts | 19 ++++ bonus-jest/demo/src/multiply.ts | 3 + bonus-jest/exercise/README.md | 17 ++++ bonus-jest/exercise/index.html | 15 +++ bonus-jest/exercise/src/TestMe.spec.tsx | 13 +++ bonus-jest/exercise/src/TestMe.tsx | 37 +++++++ bonus-jest/exercise/src/index.ts | 2 + bonus-jest/exercise/src/stack.spec.ts | 18 ++++ bonus-jest/exercise/src/stack.ts | 27 +++++ index.html | 8 ++ 15 files changed, 357 insertions(+) create mode 100644 bonus-jest/demo/README.md create mode 100644 bonus-jest/demo/index.html create mode 100644 bonus-jest/demo/src/TestMe.spec.tsx create mode 100644 bonus-jest/demo/src/TestMe.tsx create mode 100644 bonus-jest/demo/src/index.spec.tsx create mode 100644 bonus-jest/demo/src/index.ts create mode 100644 bonus-jest/demo/src/multiply.ts create mode 100644 bonus-jest/exercise/README.md create mode 100644 bonus-jest/exercise/index.html create mode 100644 bonus-jest/exercise/src/TestMe.spec.tsx create mode 100644 bonus-jest/exercise/src/TestMe.tsx create mode 100644 bonus-jest/exercise/src/index.ts create mode 100644 bonus-jest/exercise/src/stack.spec.ts create mode 100644 bonus-jest/exercise/src/stack.ts diff --git a/bonus-jest/demo/README.md b/bonus-jest/demo/README.md new file mode 100644 index 0000000..3076b02 --- /dev/null +++ b/bonus-jest/demo/README.md @@ -0,0 +1,128 @@ +# Bonus: Testing TypeScript code with Jest (Demo) + +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + +[Jest](https://jestjs.io/) is a test framework made by Facebook and is very popular in the React and wider JS ecosystems. + +In this exercise, we will work on implementing simple unit tests using Jest. + +## Jest Features + +- Multi-threaded and isolated test runner +- Provides a fake browser-like environment if needed (window, document, DOM, etc) using jsdom +- Snapshots: Jest can create text-based snapshots of rendered components. These snapshots can be checked in and show API or large object changes alongside code changes in pull requests. +- Code coverage is integrated (`--coverage`) +- Very clear error messages showing where a test failure occurred + +## How to use Jest + +- Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it! +- A `jest.config.js` file is used for configuration +- `jsdom` might not have enough API from real browsers, for those cases, polyfills are required. Place these inside `jest.setup.js` and hook up the setup file in `jest.config.js` +- in order to use `enzyme` library to test React Components, more config bits are needed inside `jest.setup.js` + +## What does a test look like? + +```ts +// describe(), it() and expect() are globally exported, so they don't need to be imported when jest runs these tests +describe('Something to be tested', () => { + it('should describe the behavior', () => { + expect(true).toBe(true); + }); +}); +``` + +## Testing React components using Enzyme + +[Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components. + +In a real app using ReactDOM, the top-level component will be rendered on the page using `ReactDOM.render()`. Enzyme provides a lighter-weight `mount()` function which is usually adequate for testing purposes. + +`mount()` returns a wrapper that can be inspected and provides functionality like `find()`, simulating clicks, etc. + +The following code demonstrates how Enzyme can be used to help test React components. + +```tsx +import React from 'react'; +import { mount } from 'enzyme'; +import { TestMe } from './TestMe'; + +describe('TestMe Component', () => { + it('should have a non-clickable component when the original InnerMe is clicked', () => { + const wrapper = mount(); + wrapper.find('#innerMe').simulate('click'); + expect(wrapper.find('#innerMe').text()).toBe('Clicked'); + }); +}); + +describe('Foo Component Tests', () => { + it('allows us to set props', () => { + const wrapper = mount(); + expect(wrapper.props().bar).toBe('baz'); + wrapper.setProps({ bar: 'foo' }); + expect(wrapper.props().bar).toBe('foo'); + + wrapper.find('button').simulate('click'); + }); +}); +``` + +## Advanced topics + +### Mocking + +Mocking functions is a large part of what makes Jest a powerful testing library. Jest actually intercepts the module loading process in Node.js, allowing it to mock entire modules if needed. + +There are many ways to mock, as you'd imagine in a language as flexible as JS. We only look at the simplest case, but there's a lot of depth here. + +To mock a function: + +```ts +it('some test function', () => { + const mockCallback = jest.fn(x => 42 + x); + mockCallback(1); + mockCallback(2); + expect(mockCallback).toHaveBeenCalledTimes(2); +}); +``` + +Read more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html). + +### Async Testing + +For testing async scenarios, the test runner needs some way to know when the scenario is finished. Jest tests can handle async scenarios using callbacks, promises, or async/await. + +```ts +// Callback +it('tests callback functions', (done) => { + setTimeout(() => { + done(); + }, 1000); +}); + +// Returning a promise +it('tests promise functions', () => { + return someFunctionThatReturnsPromise()); +}); + +// Async/await (recommended) +it('tests async functions', async () => { + expect(await someFunction()).toBe(5); +}); +``` + +# Demo + +## Jest basics + +In this repo, we can start an inner loop development of tests by running `npm test` from the root of the `frontend-bootcamp` folder. + +Take a look at code inside `demo/src`: + +1. `index.ts` exports a few functions for a counter as well as a function for squaring numbers. We'll use this last function to demonstrate how mocks work. + +2. `multiply.ts` is a contrived example of a function that is exported + +3. `index.spec.ts` is the test file + +Note how tests are re-run when either test files or source files under `src` are saved. diff --git a/bonus-jest/demo/index.html b/bonus-jest/demo/index.html new file mode 100644 index 0000000..92a9499 --- /dev/null +++ b/bonus-jest/demo/index.html @@ -0,0 +1,15 @@ + + + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
+ + + diff --git a/bonus-jest/demo/src/TestMe.spec.tsx b/bonus-jest/demo/src/TestMe.spec.tsx new file mode 100644 index 0000000..70452b6 --- /dev/null +++ b/bonus-jest/demo/src/TestMe.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { TestMe } from './TestMe'; + +describe('TestMe Component', () => { + it('should have a non-clickable component when the original InnerMe is clicked', () => { + const wrapper = mount(); + wrapper.find('#innerMe').simulate('click'); + expect(wrapper.find('#innerMe').text()).toBe('Clicked'); + }); +}); diff --git a/bonus-jest/demo/src/TestMe.tsx b/bonus-jest/demo/src/TestMe.tsx new file mode 100644 index 0000000..3d68f34 --- /dev/null +++ b/bonus-jest/demo/src/TestMe.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +export interface TestMeProps { + name: string; +} + +export interface TestMeState { + clicked: boolean; +} + +export const TestMe = (props: TestMeProps) => { + return ( +
+ +
+ ); +}; + +export class InnerMe extends React.Component { + state = { + clicked: false + }; + + onClick = () => { + this.setState({ clicked: true }); + }; + + render() { + return !this.state.clicked ? ( +
+ Hello {this.props.name}, Click Me +
+ ) : ( +
Clicked
+ ); + } +} diff --git a/bonus-jest/demo/src/index.spec.tsx b/bonus-jest/demo/src/index.spec.tsx new file mode 100644 index 0000000..6fa5c3e --- /dev/null +++ b/bonus-jest/demo/src/index.spec.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +describe('index', () => { + it('placeholder', () => { + }); +}); diff --git a/bonus-jest/demo/src/index.ts b/bonus-jest/demo/src/index.ts new file mode 100644 index 0000000..ecdd946 --- /dev/null +++ b/bonus-jest/demo/src/index.ts @@ -0,0 +1,19 @@ +import { multiply } from './multiply'; + +let counter = 0; + +export function getCount() { + return counter; +} + +export function increment() { + return ++counter; +} + +export function decrement() { + return --counter; +} + +export function square(x: number) { + return multiply(x, x); +} diff --git a/bonus-jest/demo/src/multiply.ts b/bonus-jest/demo/src/multiply.ts new file mode 100644 index 0000000..aa528c0 --- /dev/null +++ b/bonus-jest/demo/src/multiply.ts @@ -0,0 +1,3 @@ +export function multiply(x: number, y: number) { + return x * y; +} diff --git a/bonus-jest/exercise/README.md b/bonus-jest/exercise/README.md new file mode 100644 index 0000000..1860b51 --- /dev/null +++ b/bonus-jest/exercise/README.md @@ -0,0 +1,17 @@ +# Bonus: Testing TypeScript code with Jest (Exercise) + +[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) + +Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder. + +## Basic testing + +1. Look at `exercise/src/stack.ts` for a sample implementation of a stack + +2. Follow the instructions inside `stack.spec.ts` file to complete the two tests + +## Enzyme Testing + +1. Open up `exercise/src/TestMe.spec.tsx` + +2. Fill in the test using Enzyme concepts introduced in the demo diff --git a/bonus-jest/exercise/index.html b/bonus-jest/exercise/index.html new file mode 100644 index 0000000..e908cc3 --- /dev/null +++ b/bonus-jest/exercise/index.html @@ -0,0 +1,15 @@ + + + + + + +
+
+ For this step, we look at unit testing. Run + 
npm test
+ in the command line. +
+ + + diff --git a/bonus-jest/exercise/src/TestMe.spec.tsx b/bonus-jest/exercise/src/TestMe.spec.tsx new file mode 100644 index 0000000..afd5164 --- /dev/null +++ b/bonus-jest/exercise/src/TestMe.spec.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { TestMe } from './TestMe'; + +describe('TestMe Component', () => { + it('should render correctly when hovered', () => { + // TODO: + // 1. mount a Component here + // 2. use enzyme wrapper's find() method to retrieve the #innerMe element + // 3. simulate a hover with "mouseover" event via the simulate() API + // 4. make assertions with expect on the text() of the #innerMe element + }); +}); diff --git a/bonus-jest/exercise/src/TestMe.tsx b/bonus-jest/exercise/src/TestMe.tsx new file mode 100644 index 0000000..8f39d8d --- /dev/null +++ b/bonus-jest/exercise/src/TestMe.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +export interface TestMeProps { + name: string; +} + +export interface TestMeState { + enabled: boolean; +} + +export const TestMe = (props: TestMeProps) => { + return ( +
+ +
+ ); +}; + +export class InnerMe extends React.Component { + state = { + enabled: false + }; + + onMouseOver = () => { + this.setState({ enabled: true }); + }; + + render() { + return !this.state.enabled ? ( +
+ Hello {this.props.name}, Hover Over Me +
+ ) : ( +
Enabled
+ ); + } +} diff --git a/bonus-jest/exercise/src/index.ts b/bonus-jest/exercise/src/index.ts new file mode 100644 index 0000000..8b6ab17 --- /dev/null +++ b/bonus-jest/exercise/src/index.ts @@ -0,0 +1,2 @@ +export { Stack } from './stack'; +export { TestMe } from './TestMe'; diff --git a/bonus-jest/exercise/src/stack.spec.ts b/bonus-jest/exercise/src/stack.spec.ts new file mode 100644 index 0000000..03b7d9a --- /dev/null +++ b/bonus-jest/exercise/src/stack.spec.ts @@ -0,0 +1,18 @@ +// TODO: Import the stack here + +describe('Stack', () => { + it('should push item to the top of the stack', () => { + // TODO: implement test here: + // 1. Instantiate a new Stack - i.e. const stack = new Stack(); + // 2. Use stack push calls to add some items to the stack + // 3. Write assertions via the expect() API + }); + + it('should pop the item from the top of stack', () => { + // TODO: implement test here: + // 1. Instantiate a new Stack - i.e. const stack = new Stack(); + // 2. Use stack push calls to add some items to the stack + // 3. pop a few items off the stack + // 4. write assertions via the expect() API + }); +}); diff --git a/bonus-jest/exercise/src/stack.ts b/bonus-jest/exercise/src/stack.ts new file mode 100644 index 0000000..7f62d2d --- /dev/null +++ b/bonus-jest/exercise/src/stack.ts @@ -0,0 +1,27 @@ +export class Stack { + private _items: T[] = []; + + /** Add an item to the top of the stack. */ + push(item: T) { + this._items.push(item); + } + + /** Remove the top item from the stack and return it. */ + pop(): T { + if (this._items.length > 0) { + return this._items.pop(); + } + } + + /** Return the top item from the stack without removing it. */ + peek(): T { + if (this._items.length > 0) { + return this._items[this._items.length - 1]; + } + } + + /** Get the number of items in the stack/ */ + get count(): number { + return this._items.length; + } +} diff --git a/index.html b/index.html index 2dbc1d4..7693193 100644 --- a/index.html +++ b/index.html @@ -143,6 +143,14 @@ Redux: Service Calls +
  • +
    + jest: testing code +
    + demo | exercise +
    +
    +