microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding docs subtree

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-25 13:12:18 -08:00
parent 1adcc07a61
commit 41dcf8731d
365 changed files with 10620 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/step2-06/exercise/index.html Normal file
View File

@@ -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-06/exercise/step2-06/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body></html>

5
docs/step2-06/exercise/src/actions/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import uuid from 'uuid/v4';
export const actions = {
addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label })
};

18
docs/step2-06/exercise/src/index.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { reducer } from './reducers';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { actions } from './actions';
const store = createStore(reducer, {}, composeWithDevTools());
console.log(store.getState());
/*
TODO: dispatch several actions and see the effect to the state inside the Redux devtool
store.dispatch(actions.???);
store.dispatch(actions.???);
store.dispatch(actions.???);
*/
console.log(store.getState());

27
docs/step2-06/exercise/src/reducers/index.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Store } from '../store';
import { addTodo, remove, complete, clear } from './pureFunctions';
function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
switch (action.type) {
case 'addTodo':
return addTodo(state, action.id, action.label);
case 'remove':
return remove(state, action.id);
case 'clear':
return clear(state);
case 'complete':
return complete(state, action.id);
}
return state;
}
export function reducer(state: Store, action: any): Store {
return {
todos: todoReducer(state.todos, action),
filter: 'all'
};
}

29
docs/step2-06/exercise/src/reducers/pureFunctions.spec.ts Normal file
View File

@@ -0,0 +1,29 @@
import { addTodo, complete } from './pureFunctions';
import { Store } from '../store';
describe('TodoApp reducers', () => {
it('can add an item', () => {
const state = <Store['todos']>{};
const newState = addTodo(state, '0', 'item1');
const keys = Object.keys(newState);
expect(newState).not.toBe(state);
expect(keys.length).toBe(1);
expect(newState[keys[0]].label).toBe('item1');
expect(newState[keys[0]].completed).toBeFalsy();
});
it('can complete an item', () => {
const state = <Store['todos']>{};
let newState = addTodo(state, '0', 'item1');
const key = Object.keys(newState)[0];
newState = complete(newState, key);
expect(newState[key].completed).toBeTruthy();
});
});

36
docs/step2-06/exercise/src/reducers/pureFunctions.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Store, FilterTypes } from '../store';
export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
return { ...state, [id]: { label, completed: false } };
}
export function remove(state: Store['todos'], id: string) {
const newTodos = { ...state };
delete newTodos[id];
return newTodos;
}
export function complete(state: Store['todos'], id: string) {
const newTodos = { ...state };
newTodos[id].completed = !newTodos[id].completed;
return newTodos;
}
export function clear(state: Store['todos']) {
const newTodos = { ...state };
Object.keys(state.todos).forEach(key => {
if (state.todos[key].completed) {
delete newTodos[key];
}
});
return newTodos;
}
export function setFilter(state: Store['filter'], filter: FilterTypes) {
return filter;
}

20
docs/step2-06/exercise/src/reducers/reducer.spec.ts Normal file
View File

@@ -0,0 +1,20 @@
import { createStore } from 'redux';
import { reducer } from '.';
import { actions } from '../actions';
describe('reducers', () => {
it('should add items', () => {
// 1. use Redux's createStore() to create a store with reducer as argument
// along with the initial state
//
// 2. call store.dispatch() with some action messages to indicate the kind of
// action to perform (in this case, addTodo)
//
// 3. assert with expect() on the resultant store.getState().todos
});
// Tests left for you to do:
// - remove
// - clear
// - complete
});

14
docs/step2-06/exercise/src/store/index.ts Normal file
View File

@@ -0,0 +1,14 @@
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Store {
todos: {
[id: string]: TodoItem;
};
filter: FilterTypes;
}

2
docs/step2-06/exercise/step2-06/exercise.js Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/step2-06/exercise/step2-06/exercise.js.map Normal file
View File

File diff suppressed because one or more lines are too long