mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
doing step 4 demo notes
This commit is contained in:
@@ -2,14 +2,30 @@
|
||||
|
||||
Testing Typescript code with jest. jest is a test framework made by Facebook and is very popular in the React and the wider JS ecosystem. We will work on implementing simple unit tests here in this exercise.
|
||||
|
||||
We won't go too deeply into mocks in this exercise, but feel free to play around with that yourself by reading up on this:
|
||||
https://jestjs.io/
|
||||
|
||||
https://jestjs.io/docs/en/mock-functions
|
||||
- Multi-threaded and isolated test runner
|
||||
- Provides a "fake" browser environment if needed (window, document, DOM, etc).
|
||||
- Snapshots: show API or large object changes along side code changes in pull requests
|
||||
- Code coverage is integrated (--coverage)
|
||||
- Very clear error messages of where the test failures occur
|
||||
|
||||
# Demo
|
||||
|
||||
In this repo, we can start an inner loop development of tests with the command: `npm test`
|
||||
|
||||
Take a look at code inside `demo/src`:
|
||||
|
||||
1. `index.ts` is exports a few functions for a counter as well as a test for squaring numbers but demonstrates out jest uses mocks
|
||||
|
||||
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 on save to test file changes as well as source code changes under `src`
|
||||
|
||||
# Exercise
|
||||
|
||||
1. copy the generic `Stack<T>` code you have developed in Step 2.1
|
||||
1. Run the tests by running `npm test` at the root of the bootcamp project
|
||||
|
||||
2. Run the tests by running `npm test` at the root of the bootcamp project
|
||||
2. Look at the `stack.ts` for a sample implementation of a stack
|
||||
|
||||
3. Follow the instructions inside the `stack.spec.ts` file to complete the two tests
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
import { square } from '.';
|
||||
import { multiply } from './multiply';
|
||||
|
||||
// Mocked here by jest for the entire test module file
|
||||
jest.mock('./multiply');
|
||||
|
||||
describe('jest example', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
});
|
||||
|
||||
it('should be able to give the square of two numbers', () => {
|
||||
console.log('test');
|
||||
expect(square(5)).toBe(25);
|
||||
it('should be passing in the multiple two of the same number', () => {
|
||||
square(5);
|
||||
|
||||
// .toBeCalledTimes() and .toBeCalledWith() only work on mocks - we mocked the multiply function from the
|
||||
expect(multiply).toBeCalledTimes(1);
|
||||
expect(multiply).toBeCalledWith(5, 5);
|
||||
});
|
||||
|
||||
it('should increment counter', () => {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { multiply } from './multiply';
|
||||
|
||||
let counter = 0;
|
||||
|
||||
export function getCount() {
|
||||
@@ -13,5 +15,5 @@ export function decrement() {
|
||||
}
|
||||
|
||||
export function square(x: number) {
|
||||
return x * x;
|
||||
return multiply(x, x);
|
||||
}
|
||||
|
||||
3
step2-04/demo/src/multiply.ts
Normal file
3
step2-04/demo/src/multiply.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export function multiply(x: number, y: number) {
|
||||
return x * y;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
export type FilterTypes = 'all' | 'active' | 'completed';
|
||||
|
||||
export interface TodoItem {
|
||||
label: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
export interface Store {
|
||||
todos: {
|
||||
[id: string]: TodoItem;
|
||||
};
|
||||
|
||||
filter: FilterTypes;
|
||||
}
|
||||
@@ -1 +1,13 @@
|
||||
// Place your implementation from Step 2-01 exercise here
|
||||
export class Stack<T> {
|
||||
private _items: T[] = [];
|
||||
|
||||
push(item: T) {
|
||||
this._items.push(item);
|
||||
}
|
||||
|
||||
pop(): T {
|
||||
if (this._items.length > 0) {
|
||||
return this._items.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user