fix: specs and remove form from component

Author: Maximilian Heinz

src/App.css

@@ -4,9 +4,8 @@ describe('actions', () => {
   it('should create incrementCounter action', () => {
     const expectedAction = {
       type: actions.INCREMENT_COUNTER,
-      value: 0,
     };
-    expect(actions.incrementCounter(0)).toEqual(expectedAction);
+    expect(actions.incrementCounter()).toEqual(expectedAction);
   });
 
   it('should create loadCount action', () => {

src/App.spec.tsx

@@ -20,54 +20,65 @@ export type LOAD_COUNT_ERROR = typeof LOAD_COUNT_ERROR;
 
 export type Action =
   // UI actions
-  | { type: INCREMENT_COUNTER, value: number }
+  | { type: INCREMENT_COUNTER }
   | { type: RESET_COUNTER }
 
   // API Requests
-  | { type: 'SAVE_COUNT', value: number }
+  | { type: 'SAVE_COUNT'; value: number }
   | { type: 'SAVE_COUNT_SUCCESS' }
   | { type: 'SAVE_COUNT_ERROR' } & E
   | { type: 'LOAD_COUNT' }
-  | { type: 'LOAD_COUNT_SUCCESS', value: number }
+  | { type: 'LOAD_COUNT_SUCCESS'; value: number }
   | { type: 'LOAD_COUNT_ERROR' } & E;
 
-export const incrementCounter = (value: number): Action => ({
-  type: INCREMENT_COUNTER,
-  value,
-});
+export function incrementCounter(): Action {
+  return {
+    type: INCREMENT_COUNTER,
+  };
+}
 
-export const resetCounter = (): Action => ({
-  type: RESET_COUNTER,
-});
+export function resetCounter(): Action {
+  return {
+    type: RESET_COUNTER,
+  };
+}
 
-export const saveCount = (value: number): Action => ({
-  type: SAVE_COUNT,
-  value,
-});
+export function saveCount(value: number): Action {
+  return {
+    type: SAVE_COUNT,
+    value,
+  };
+}
 
-export const saveCountSuccess = (): Action => ({
-  type: SAVE_COUNT_SUCCESS,
-});
+export function saveCountSuccess(): Action {
+  return {
+    type: SAVE_COUNT_SUCCESS,
+  };
+}
 
-export const saveCountError = (error: Error): Action => ({
-  type: SAVE_COUNT_ERROR,
-  error,
-});
+export function saveCountError(error: Error): Action {
+  return {
+    type: SAVE_COUNT_ERROR,
+    error,
+  };
+}
 
-export const loadCount = (): Action => ({
-  type: LOAD_COUNT,
-});
+export function loadCount(): Action {
+  return {
+    type: LOAD_COUNT,
+  };
+}
 
-export const loadCountSuccess = (value: number): Action => {
+export function loadCountSuccess(value: number): Action {
   return {
     type: LOAD_COUNT_SUCCESS,
     value,
   };
-};
+}
 
-export const loadCountError = (error: Error): Action => {
+export function loadCountError(error: Error): Action {
   return {
     type: LOAD_COUNT_ERROR,
     error,
   };
-};
+}

src/App.tsx

@@ -9,24 +9,22 @@ exports[`components/Counter renders 1`] = `
       0
     </strong>
   </div>
-  <form>
-    <button
-      onClick={[Function]}
-    >
-      click me!
-    </button>
-    <button
-      disabled={false}
-      onClick={[Function]}
-    >
-      save
-    </button>
-    <button
-      disabled={false}
-      onClick={[Function]}
-    >
-      load
-    </button>
-  </form>
+  <button
+    onClick={[Function]}
+  >
+    click me!
+  </button>
+  <button
+    disabled={false}
+    onClick={[Function]}
+  >
+    save
+  </button>
+  <button
+    disabled={false}
+    onClick={[Function]}
+  >
+    load
+  </button>
 </div>
 `;

src/actions/__tests__/actions.spec.ts

@@ -14,7 +14,7 @@ interface StateProps {
 interface DispatchProps {
   loadCount: () => Action;
   saveCount: (value: number) => Action;
-  incrementCounter: (value: number) => Action;
+  incrementCounter: () => Action;
 }
 
 interface OwnProps {}
@@ -27,7 +27,7 @@ class CounterContainerComponent extends React.Component<Props, {}> {
   };
 
   increment = () => {
-    this.props.incrementCounter(1);
+    this.props.incrementCounter();
   };
 
   render() {
@@ -36,18 +36,13 @@ class CounterContainerComponent extends React.Component<Props, {}> {
         <div className="hero">
           <strong>{this.props.counter}</strong>
         </div>
-        <form>
-          <button onClick={this.increment}>click me!</button>
-          <button disabled={this.props.isSaving} onClick={this.saveCount}>
-            {this.props.isSaving ? 'saving...' : 'save'}
-          </button>
-          <button
-            disabled={this.props.isLoading}
-            onClick={this.props.loadCount}
-          >
-            {this.props.isLoading ? 'loading...' : 'load'}
-          </button>
-        </form>
+        <button onClick={this.increment}>click me!</button>
+        <button disabled={this.props.isSaving} onClick={this.saveCount}>
+          {this.props.isSaving ? 'saving...' : 'save'}
+        </button>
+        <button disabled={this.props.isLoading} onClick={this.props.loadCount}>
+          {this.props.isLoading ? 'loading...' : 'load'}
+        </button>
       </div>
     );
   }

src/actions/index.ts

@@ -28,10 +28,10 @@ describe('reducer', () => {
     expect(reducer(undefined, { type: 'noOp' })).toEqual(state);
   });
 
-  it('incrementCounter() should return the initial state', () => {
-    expect(reducer(undefined, incrementCounter(5))).toEqual({
+  it('incrementCounter() should increment counter by 1', () => {
+    expect(reducer(undefined, incrementCounter())).toEqual({
       ...state,
-      counter: 5,
+      counter: 1,
     });
   });
 

src/components/__tests__/__snapshots__/counter.spec.tsx.snap

@@ -22,7 +22,7 @@ export const reducer: LoopReducer<All, actions.Action> = (
 ): All | Loop<All, actions.Action> => {
   switch (action.type) {
     case 'INCREMENT_COUNTER':
-      return { ...state, counter: state.counter + action.value };
+      return { ...state, counter: state.counter + 1 };
     case 'RESET_COUNTER':
       return { ...state, counter: 0 };
     case 'LOAD_COUNT':