adding docs subtree

2026-01-26 14:56:42 +08:00 · 2019-02-25 13:12:18 -08:00
parent 1adcc07a61
commit 41dcf8731d
365 changed files with 10620 additions and 0 deletions
--- a/docs/step2-04/README.md
+++ b/docs/step2-04/README.md
@@ -0,0 +1,68 @@
+# Step 2.4
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+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.
+
+https://jestjs.io/
+
+- 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
+
+## jest basics
+
+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`
+
+## testing React applications
+
+You can also test React Components with `jest` with the help of a partner library called `enzyme`. Take a look at the test below:
+
+```ts
+import { mount } from 'enzyme';
+
+describe('Foo Component Tests', () => {
+  it('allows us to set props', () => {
+    const wrapper = mount(<Foo bar="baz" />);
+    expect(wrapper.props().bar).toBe('baz');
+    wrapper.setProps({ bar: 'foo' });
+    expect(wrapper.props().bar).toBe('foo');
+  });
+});
+```
+
+`mount` does a full mount of the component. You can use the `enzyme` wrapper to simulate clicks, etc:
+
+```ts
+wrapper.find('button').simulate('click');
+```
+
+# Exercise
+
+## Basic Testing
+
+1. 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
+
+## Enzyme Testing
+
+1. Open up `exercise/src/TestMe.spec.tsx`
+
+2. Fill in the blank for the missing test using `enzyme` concepts introduced from the demo
+
+3. Run tests with `npm test`
--- a/docs/step2-04/demo/index.html
+++ b/docs/step2-04/demo/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><link rel="stylesheet" href="../../assets/step.css"></head><body class="ms-Fabric"><div id="markdownReadme"></div><div id="app">For this step, we look at unit testing. Run<pre>npm test</pre>in the command line.</div><script src="../../step2-04/demo/step2-04/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>
--- a/docs/step2-04/demo/src/TestMe.spec.tsx
+++ b/docs/step2-04/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 origina InnerMe is clicked', () => {
+    const wrapper = mount(<TestMe name="world" />);
+    wrapper.find('#innerMe').simulate('click');
+    expect(wrapper.find('#innerMe').text()).toBe('Clicked');
+  });
+});
--- a/docs/step2-04/demo/src/TestMe.tsx
+++ b/docs/step2-04/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 (
+    <div id="testMe">
+      <InnerMe name={props.name} />
+    </div>
+  );
+};
+
+export class InnerMe extends React.Component<TestMeProps, TestMeState> {
+  state = {
+    clicked: false
+  };
+
+  onClick = () => {
+    this.setState({ clicked: true });
+  };
+
+  render() {
+    return !this.state.clicked ? (
+      <div onClick={this.onClick} id="innerMe">
+        Hello {this.props.name}, Click Me
+      </div>
+    ) : (
+      <div id="innerMe">Clicked</div>
+    );
+  }
+}
--- a/docs/step2-04/demo/src/index.spec.ts
+++ b/docs/step2-04/demo/src/index.spec.ts
@@ -0,0 +1,39 @@
+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 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', () => {
+    const { increment } = require('.');
+    expect(increment()).toBe(1);
+  });
+
+  it('should decrement counter', () => {
+    const { decrement } = require('.');
+    expect(decrement()).toBe(-1);
+  });
+
+  it('should retrieve count', () => {
+    const { decrement, getCount, increment } = require('.');
+    increment();
+    increment();
+    decrement();
+    increment();
+
+    expect(getCount()).toBe(2);
+  });
+});
--- a/docs/step2-04/demo/src/index.ts
+++ b/docs/step2-04/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);
+}
--- a/docs/step2-04/demo/src/multiply.ts
+++ b/docs/step2-04/demo/src/multiply.ts
@@ -0,0 +1,3 @@
+export function multiply(x: number, y: number) {
+  return x * y;
+}
--- a/docs/step2-04/demo/step2-04/demo.js
+++ b/docs/step2-04/demo/step2-04/demo.js
@@ -0,0 +1,2 @@
+!function(n){var e={};function t(r){if(e[r])return e[r].exports;var u=e[r]={i:r,l:!1,exports:{}};return n[r].call(u.exports,u,u.exports,t),u.l=!0,u.exports}t.m=n,t.c=e,t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:r})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var u in n)t.d(r,u,function(e){return n[e]}.bind(null,u));return r},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=149)}({149:function(n,e,t){"use strict";t.r(e),t.d(e,"getCount",function(){return u}),t.d(e,"increment",function(){return o}),t.d(e,"decrement",function(){return i}),t.d(e,"square",function(){return f});var r=0;function u(){return r}function o(){return++r}function i(){return--r}function f(n){return function(n,e){return n*e}(n,n)}}});
+//# sourceMappingURL=demo.js.map
--- a/docs/step2-04/demo/step2-04/demo.js.map
+++ b/docs/step2-04/demo/step2-04/demo.js.map
				`@@ -0,0 +1 @@`
				`<!doctype html><html><head><link rel="stylesheet" href="../../assets/step.css"></head><body class="ms-Fabric"><div id="markdownReadme"></div><div id="app">For this step, we look at unit testing. Run<pre>npm test</pre>in the command line.</div><script src="../../step2-04/demo/step2-04/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>`