doing step 4 demo notes

step2-01/README.md

@@ -152,17 +152,15 @@ Please complete all exercises inside the `exercise/src` folder unless otherwise
 
 Create inside `index.ts`:
 
-1. a type alias for string union type describing the states of Red-Green-Yellow traffic light
+1. a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
 
-2. a class hierarchy of your favorite metaphor (e.g. family, autombiles, animals)
-
-3. describe an object type with an interface
+2. describe a type of car with an interface: `interface Car { ... }`
 
 ## Generic
 
-Inside `index.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods
+Inside `stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods
 
-Hint: the Javascript array already has `push()` and `pop()` implemented for you. That can be your backing store.
+> Hint: the Javascript array already has `push()` and `pop()` implemented for you. That can be your backing store.
 
 Be sure to use the provided `log()` to show the functionality of `Stack<T>`
 

step2-01/exercise/src/stack.ts

@@ -0,0 +1,10 @@
+// TODO: create a Stack<T> generic class here:
+
+/**
+ *
+ *  export class Stack<T> {
+ *    push(...) { ... }
+ *    pop(...) { ... }
+ *  }
+ *
+ */

step2-04/README.md

@@ -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

step2-04/demo/src/index.spec.ts

@@ -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', () => {

step2-04/demo/src/index.ts

@@ -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);
 }

step2-04/demo/src/multiply.ts

@@ -0,0 +1,3 @@
+export function multiply(x: number, y: number) {
+  return x * y;
+}

step2-04/demo/src/store/index.ts

@@ -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;
-}

step2-04/exercise/src/stack.ts

@@ -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();
+    }
+  }
+}