Added some additional operations as suggested by @RyanCavanaugh

johnnyreilly · johnnyreilly · commit 1533b1351a1a · 2015-11-04T14:26:34.000Z
diff --git a/es6-babel-react-flux-karma/README.md b/es6-babel-react-flux-karma/README.md
@@ -7,7 +7,7 @@ You'll need [node / npm](https://nodejs.org/) and [tsd](http://definitelytyped.o
 ```
 npm install
 tsd install
-npm run watch
+npm run serve
 ```
 
 This will:
diff --git a/es6-babel-react-flux-karma/src/actions/GreetingActions.ts b/es6-babel-react-flux-karma/src/actions/GreetingActions.ts
@@ -1,9 +1,23 @@
 import AppDispatcher from '../dispatcher/AppDispatcher';
 import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
 
-export function greetingChanged(targetOfGreeting: string) {
+export function addGreeting(newGreeting: string) {
   AppDispatcher.dispatch({
-    targetOfGreeting,
-    type: GreetingActionTypes.TARGET_OF_GREETING_CHANGED,
+    newGreeting,
+    type: GreetingActionTypes.ADD_GREETING
+  });
+}
+
+export function newGreetingChanged(newGreeting: string) {
+  AppDispatcher.dispatch({
+    newGreeting,
+    type: GreetingActionTypes.NEW_GREETING_CHANGED
+  });
+}
+
+export function removeGreeting(greetingToRemove: string) {
+  AppDispatcher.dispatch({
+    greetingToRemove,
+    type: GreetingActionTypes.REMOVE_GREETING
   });
 }
diff --git a/es6-babel-react-flux-karma/src/components/App.tsx b/es6-babel-react-flux-karma/src/components/App.tsx
@@ -3,6 +3,7 @@ import GreetingStore from '../stores/GreetingStore';
 import * as GreetingActions from '../actions/GreetingActions';
 import GreetingState from '../types/GreetingState';
 import WhoToGreet from './WhoToGreet';
+import Greeting from './Greeting';
 
 class App extends React.Component<any, GreetingState> {
   constructor(props) {
@@ -19,12 +20,14 @@ class App extends React.Component<any, GreetingState> {
   }
 
   render() {
-    const { targetOfGreeting } = this.state;
+    const { greetings, newGreeting } = this.state;
     return (
       <div className="container-fluid">
-        <h1>Hello { targetOfGreeting }</h1>
+        <h1>Hello People!</h1>
 
-        <WhoToGreet targetOfGreeting={ targetOfGreeting } />
+        <WhoToGreet newGreeting={ newGreeting } />
+
+        { greetings.map((g, index) => <Greeting key={ index } targetOfGreeting={ g } />) }
       </div>
     );
   }
diff --git a/es6-babel-react-flux-karma/src/components/Greeting.tsx b/es6-babel-react-flux-karma/src/components/Greeting.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react/addons';
+import * as GreetingActions from '../actions/GreetingActions';
+
+interface Props {
+  key: number;
+  targetOfGreeting: string;
+}
+
+class Greeting extends React.Component<Props, any> {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes: React.ValidationMap<Props> = {
+    targetOfGreeting: React.PropTypes.string.isRequired
+  }
+
+  render() {
+    return (
+      <p>
+        Hello { this.props.targetOfGreeting }!
+
+        <button className="btn btn-default btn-danger"
+                onClick={ this._onClick }>
+                Remove
+        </button>
+      </p>
+    );
+  }
+
+  _onClick = (event) => {
+    GreetingActions.removeGreeting(this.props.targetOfGreeting);
+  }
+}
+
+export default Greeting;
diff --git a/es6-babel-react-flux-karma/src/components/WhoToGreet.tsx b/es6-babel-react-flux-karma/src/components/WhoToGreet.tsx
@@ -2,7 +2,7 @@ import * as React from 'react/addons';
 import * as GreetingActions from '../actions/GreetingActions';
 
 interface Props {
-  targetOfGreeting: string;
+  newGreeting: string;
 }
 
 class WhoToGreet extends React.Component<Props, any> {
@@ -11,18 +11,41 @@ class WhoToGreet extends React.Component<Props, any> {
   }
 
   static propTypes: React.ValidationMap<Props> = {
-    targetOfGreeting: React.PropTypes.string.isRequired
+    newGreeting: React.PropTypes.string.isRequired
   }
 
   render() {
     return (
-      <input type="text" value={ this.props.targetOfGreeting } onChange={ this._handleTargetOfGreetingChange } />
+        <form role="form">
+          <div className="form-group">
+            <input type="text" className="form-control" placeholder="Who would you like to greet?"
+                   value={ this.props.newGreeting }
+                   onChange={ this._handleNewGreetingChange } />
+            <button type="submit" className="btn btn-default btn-primary"
+                    onClick={ this._onSubmit }
+                    disabled={ this._preventSubmission }>
+                    Add greeting
+            </button>
+          </div>
+        </form>
     );
   }
 
-  _handleTargetOfGreetingChange = (event) => {
-    const { target: { value: targetOfGreeting } } = event;
-    GreetingActions.greetingChanged(targetOfGreeting);
+  get _preventSubmission() {
+    return !this.props.newGreeting;
+  }
+
+  _handleNewGreetingChange = (event) => {
+    const { target: { value: newGreeting } } = event;
+    GreetingActions.newGreetingChanged(newGreeting);
+  }
+
+  _onSubmit = (event) => {
+    event.preventDefault();
+
+    if (!this._preventSubmission) {
+      GreetingActions.addGreeting(this.props.newGreeting);
+    }
   }
 }
 
diff --git a/es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts b/es6-babel-react-flux-karma/src/constants/action-types/GreetingActionTypes.ts
@@ -1,5 +1,7 @@
 const GreetingActionTypes = {
-  TARGET_OF_GREETING_CHANGED: 'GreetingActionTypes.TARGET_OF_GREETING_CHANGED'
+  ADD_GREETING: 'GreetingActionTypes.ADD_GREETING',
+  REMOVE_GREETING: 'GreetingActionTypes.REMOVE_GREETING',
+  NEW_GREETING_CHANGED: 'GreetingActionTypes.NEW_GREETING_CHANGED'
 };
 
 export default GreetingActionTypes;
diff --git a/es6-babel-react-flux-karma/src/index.html b/es6-babel-react-flux-karma/src/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>ES6 + TypeScript + Babel + React + Karma: The Secret Recipe</title>
+    <title>ES6 + Babel + React + Flux + Karma: The Secret Recipe</title>
 
     <!-- inject:css -->
     <!-- endinject -->
diff --git a/es6-babel-react-flux-karma/src/stores/GreetingStore.ts b/es6-babel-react-flux-karma/src/stores/GreetingStore.ts
@@ -6,7 +6,8 @@ import GreetingState from '../types/GreetingState';
 class GreeterStore extends FluxStore<GreetingState> {
   constructor(dispatcher) {
     super(dispatcher, () => ({
-      targetOfGreeting: 'James'
+      greetings: [],
+      newGreeting: ''
     }));
   }
 
@@ -16,8 +17,17 @@ class GreeterStore extends FluxStore<GreetingState> {
 
   _onDispatch(action) {
     switch(action.type) {
-      case GreetingActionTypes.TARGET_OF_GREETING_CHANGED:
-        this._state.targetOfGreeting = action.targetOfGreeting;
+      case GreetingActionTypes.ADD_GREETING:
+        this._state.newGreeting = '';
+        this._state.greetings = this._state.greetings.concat(action.newGreeting);
+        this.emitChange();
+        break;
+      case GreetingActionTypes.REMOVE_GREETING:
+        this._state.greetings = this._state.greetings.filter(g => g !== action.greetingToRemove);
+        this.emitChange();
+        break;
+      case GreetingActionTypes.NEW_GREETING_CHANGED:
+        this._state.newGreeting = action.newGreeting;
         this.emitChange();
         break;
     }
diff --git a/es6-babel-react-flux-karma/src/tsconfig.json b/es6-babel-react-flux-karma/src/tsconfig.json
@@ -20,6 +20,7 @@
         "../typings/tsd.d.ts",
         "actions/GreetingActions.ts",
         "components/App.tsx",
+        "components/Greeting.tsx",
         "components/WhoToGreet.tsx",
         "constants/action-types/GreetingActionTypes.ts",
         "dependencies.ts",
diff --git a/es6-babel-react-flux-karma/src/types/GreetingState.ts b/es6-babel-react-flux-karma/src/types/GreetingState.ts
@@ -1,5 +1,6 @@
 interface GreetingState {
-  targetOfGreeting: string;
+  greetings: string[];
+  newGreeting: string;
 }
 
 export default GreetingState;
diff --git a/es6-babel-react-flux-karma/test/components/App.tests.tsx b/es6-babel-react-flux-karma/test/components/App.tests.tsx
@@ -1,18 +1,23 @@
 import * as React from 'react/addons';
 import App from '../../src/components/App';
 import WhoToGreet from '../../src/components/WhoToGreet';
+import Greeting from '../../src/components/Greeting';
 import GreetingStore from '../../src/stores/GreetingStore';
 
 const { TestUtils } = React.addons;
 
 describe('App', () => {
   it('renders expected HTML', () => {
-    const app = render({ targetOfGreeting: 'Benjamin' });
+    const app = render({ greetings: ['James'], newGreeting: 'Benjamin' });
     expect(app).toEqual(
       <div className="container-fluid">
-        <h1>Hello { 'Benjamin' }</h1>
+        <h1>Hello People!</h1>
 
-        <WhoToGreet targetOfGreeting={ 'Benjamin' } />
+        <WhoToGreet newGreeting={ 'Benjamin' } />
+
+        { [
+          <Greeting key={ 0 } targetOfGreeting="James" />
+        ] }
       </div>
     );
   });
diff --git a/es6-babel-react-flux-karma/test/components/Greeting.tests.tsx b/es6-babel-react-flux-karma/test/components/Greeting.tests.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react/addons';
+import Greeting from '../../src/components/Greeting';
+import * as GreetingActions from '../../src/actions/GreetingActions';
+
+const { TestUtils } = React.addons;
+
+describe('Greeting', () => {
+  let handleSelectionChangeSpy: jasmine.Spy;
+  beforeEach(() => {
+    handleSelectionChangeSpy = jasmine.createSpy('handleSelectionChange');
+  });
+
+  it('given a targetOfGreeting of \'James\' it renders a p containing a greeting and a remove button', () => {
+    const targetOfGreeting = 'James';
+
+    const p = render({ targetOfGreeting });
+    expect(p.type).toBe('p');
+    expect(p.props.children[0]).toBe('Hello ');
+    expect(p.props.children[1]).toBe('James');
+    expect(p.props.children[2]).toBe('!');
+
+    const [ , , , button ] = p.props.children;
+
+    expect(button.type).toBe('button');
+    expect(button.props.className).toBe('btn btn-default btn-danger');
+    expect(button.props.children).toBe('Remove');
+  });
+
+  it('button onClick triggers an removeGreeting action', () => {
+    const targetOfGreeting = 'Benjamin';
+    const p = render({ targetOfGreeting });
+    const [ , , , button ] = p.props.children;
+    spyOn(GreetingActions, 'removeGreeting');
+
+    button.props.onClick();
+
+    expect(GreetingActions.removeGreeting).toHaveBeenCalledWith(targetOfGreeting);
+  });
+
+  function render({ targetOfGreeting }) {
+    const shallowRenderer = TestUtils.createRenderer();
+    shallowRenderer.render(<Greeting key={ 0 } targetOfGreeting={ targetOfGreeting } />);
+    return shallowRenderer.getRenderOutput();
+  }
+});
diff --git a/es6-babel-react-flux-karma/test/components/WhoToGreet.tests.tsx b/es6-babel-react-flux-karma/test/components/WhoToGreet.tests.tsx
@@ -10,28 +10,59 @@ describe('WhoToGreet', () => {
     handleSelectionChangeSpy = jasmine.createSpy('handleSelectionChange');
   });
 
-  it('given a targetOfGreeting of \'Benjamin\' then it renders an input containing that text', () => {
-    const targetOfGreeting = 'Benjamin';
-    const whoToGreet = render({ targetOfGreeting });
+  it('given a newGreeting then it renders a form containing an input containing that text and an add button', () => {
+    const newGreeting = 'James';
 
-    expect(whoToGreet.type).toBe('input');
-    expect(whoToGreet.props.type).toBe('text');
-    expect(whoToGreet.props.value).toBe(targetOfGreeting);
+    const form = render({ newGreeting });
+    expect(form.type).toBe('form');
+    expect(form.props.role).toBe('form');
+
+    const formGroup = form.props.children;
+    expect(formGroup.type).toBe('div');
+    expect(formGroup.props.className).toBe('form-group');
+
+    const [ input, button ] = formGroup.props.children;
+
+    expect(input.type).toBe('input');
+    expect(input.props.type).toBe('text');
+    expect(input.props.className).toBe('form-control');
+    expect(input.props.placeholder).toBe('Who would you like to greet?');
+    expect(input.props.value).toBe(newGreeting);
+
+    expect(button.type).toBe('button');
+    expect(button.props.type).toBe('submit');
+    expect(button.props.className).toBe('btn btn-default btn-primary');
+    expect(button.props.disabled).toBe(false);
+    expect(button.props.children).toBe('Add greeting');
+  });
+
+  it('input onChange triggers a newGreetingChanged action', () => {
+    const newGreeting = 'Benjamin';
+    const form = render({ newGreeting });
+    const formGroup = form.props.children;
+    const [ input ] = formGroup.props.children;
+    spyOn(GreetingActions, 'newGreetingChanged');
+
+    input.props.onChange({ target: { value: newGreeting }});
+
+    expect(GreetingActions.newGreetingChanged).toHaveBeenCalledWith(newGreeting);
   });
 
-  it('onChange triggers a greetingChanged action', () => {
-    const targetOfGreeting = 'Benjamin';
-    const whoToGreet = render({ targetOfGreeting });
-    spyOn(GreetingActions, 'greetingChanged');
+  it('button onClick triggers an addGreeting action', () => {
+    const newGreeting = 'Benjamin';
+    const form = render({ newGreeting });
+    const formGroup = form.props.children;
+    const [ , button ] = formGroup.props.children;
+    spyOn(GreetingActions, 'addGreeting');
 
-    whoToGreet.props.onChange({ target: { value: targetOfGreeting }});
+    button.props.onClick({ preventDefault: () => {} });
 
-    expect(GreetingActions.greetingChanged).toHaveBeenCalledWith(targetOfGreeting);
+    expect(GreetingActions.addGreeting).toHaveBeenCalledWith(newGreeting);
   });
 
-  function render({ targetOfGreeting }) {
+  function render({ newGreeting }) {
     const shallowRenderer = TestUtils.createRenderer();
-    shallowRenderer.render(<WhoToGreet targetOfGreeting={ targetOfGreeting } />);
+    shallowRenderer.render(<WhoToGreet newGreeting={ newGreeting } />);
     return shallowRenderer.getRenderOutput();
   }
 });
diff --git a/es6-babel-react-flux-karma/test/stores/GreetingStore.tests.ts b/es6-babel-react-flux-karma/test/stores/GreetingStore.tests.ts
diff --git a/es6-babel-react-flux-karma/test/tsconfig.json b/es6-babel-react-flux-karma/test/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`interface GreetingState {`
`2`		`- targetOfGreeting: string;`
	`2`	`+ greetings: string[];`
	`3`	`+ newGreeting: string;`
`3`	`4`	`}`
`4`	`5`
`5`	`6`	`export default GreetingState;`