Merge pull request #14 from gerpanese/create-flashcard

Create flashcard (Frontend)
gerpanese · Mar 14, 2018 · 927cec8 · 927cec8
2 parents 4fe2721 + 4401d00
commit 927cec8
Show file tree

Hide file tree

Showing 18 changed files with 464 additions and 59 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-3"]
+}
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['raf/polyfill'],
+};
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "hack": "webpack && webpack-dev-server --inline",
     "postinstall": "webpack",
     "start": "webpack && node server/bin/www",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "yarn test -- --watch"
   },
   "dependencies": {
     "babel": "^6.23.0",
@@ -16,6 +17,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-spread": "^6.22.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
@@ -34,6 +36,7 @@
     "open-browser-webpack-plugin": "^0.0.5",
     "pg": "^7.4.1",
     "prop-types": "^15.6.0",
+    "raf": "^3.4.0",
     "react": "^16.2.0",
     "react-confirm-alert": "^1.0.8",
     "react-dom": "^16.2.0",
@@ -63,9 +66,11 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
+    "fetch-mock": "^6.1.0",
     "jest": "^21.2.1",
     "json-loader": "^0.5.7",
     "react-addons-test-utils": "^15.6.2",
+    "redux-mock-store": "^1.5.1",
     "sinon": "^4.3.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,8 @@
   <head>
     <title>kovoel</title>
   </head>
-  <body id="root">   
+  <body>
+    <div id="root"></div>   
   </body>
   <script src="bundle.js"></script>
 </html>
diff --git a/src/__tests__/actions/createCard.js b/src/__tests__/actions/createCard.js
@@ -0,0 +1,53 @@
+import {
+  updateFrontText,
+  updateBackText,
+  saveCard,
+  discardCard,
+} from '../../actions/createCard';
+
+describe('src/__tests__/actions/createCard.js', () => {
+  describe('updateFrontText', () => {
+    it('should create an action to update front side text', () => {
+      const fakeText = 'Test updateFrontText';
+      const expectedAction = {
+        type: 'UPDATE_FRONT_TEXT',
+        frontText: fakeText,
+      };
+      const actualAction = updateFrontText(fakeText);
+      expect(actualAction).toEqual(expectedAction);
+    });
+  });
+
+  describe('updateBackText', () => {
+    it('should create an action to update back side text', () => {
+      const fakeText = 'Test updateBackText';
+      const expectedAction = {
+        type: 'UPDATE_BACK_TEXT',
+        backText: fakeText,
+      };
+      const actualAction = updateBackText(fakeText);
+      expect(actualAction).toEqual(expectedAction);
+    });
+  });
+
+  describe('saveCard', () => {
+    // Need to add test for POST /cards feature
+    it('should create an action to save card to database', async () => {
+      const expectedAction = {
+        type: 'SAVE_CARD',
+      };
+      const actualAction = await saveCard();
+      expect(actualAction).toEqual(expectedAction);
+    });
+  });
+
+  describe('discardCard', () => {
+    it('should create an action to discard card', () => {
+      const expectedAction = {
+        type: 'DISCARD_CARD',
+      };
+      const actualAction = discardCard();
+      expect(actualAction).toEqual(expectedAction);
+    });
+  });
+});
diff --git a/src/__tests__/components/CreateCard.js b/src/__tests__/components/CreateCard.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import CreateCard from '../../components/CreateCard';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const setup = () => {
+  const props = {
+    frontText: '',
+    backText: '',
+    updateFrontText: jest.fn(),
+    updateBackText: jest.fn(),
+    saveCard: jest.fn(),
+    discardCard: jest.fn(),
+  };
+  const enzymeWrapper = mount(<CreateCard {...props} />);
+  return {
+    props,
+    enzymeWrapper,
+  };
+};
+
+describe('src/components/CreateCard.jsx', () => {
+  it('should render CreateCard component', () => {
+    const { enzymeWrapper } = setup();
+    expect(enzymeWrapper.find('.CreateCard').hasClass('CreateCard')).toBe(true);
+  });
+
+  it('should call updateFrontText if front side text is changed', () => {
+    const { enzymeWrapper, props } = setup();
+    const frontTextInput = enzymeWrapper.find('#frontText');
+    expect(props.updateFrontText.mock.calls.length).toBe(0);
+    frontTextInput.instance().value = 'Updated FrontText';
+    frontTextInput.simulate('change');
+    expect(props.updateFrontText.mock.calls.length).toBe(1);
+  });
+
+  it('should call updateBackText if back side text is changed', () => {
+    const { enzymeWrapper, props } = setup();
+    const backTextInput = enzymeWrapper.find('#backText');
+    expect(props.updateBackText.mock.calls.length).toBe(0);
+    backTextInput.instance().value = 'Updated BackText';
+    backTextInput.simulate('change');
+    expect(props.updateBackText.mock.calls.length).toBe(1);
+  });
+
+  it('should call discardCard if back side text is changed', () => {
+    const { enzymeWrapper, props } = setup();
+    const discardButton = enzymeWrapper.find('#discardButton');
+    expect(props.discardCard.mock.calls.length).toBe(0);
+    discardButton.simulate('click');
+    expect(props.discardCard.mock.calls.length).toBe(1);
+  });
+
+  it('should call Web Speech Api method on click', () => {
+    // Should be implemented later
+    expect(1).toBe(1);
+  });
+
+  it('should call saveCard if save button on click', () => {
+    const { enzymeWrapper, props } = setup();
+    const saveButton = enzymeWrapper.find('#saveButton');
+    expect(props.saveCard.mock.calls.length).toBe(0);
+    saveButton.simulate('click');
+    expect(props.saveCard.mock.calls.length).toBe(1);
+  });
+});
+
diff --git a/src/__tests__/containers/CreateCard.js b/src/__tests__/containers/CreateCard.js
@@ -0,0 +1,8 @@
+import CreateCardContainer from '../../containers/CreateCard';
+import CreateCardComponent from '../../components/CreateCard';
+
+describe('src/containers/CreateCard', () => {
+  it('should includes CreateCard component as a wrapped component', () => {
+    expect(CreateCardContainer.WrappedComponent).toEqual(CreateCardComponent);
+  });
+});
diff --git a/src/__tests__/index.js b/src/__tests__/index.js
diff --git a/src/__tests__/reducers/index.js b/src/__tests__/reducers/index.js
@@ -0,0 +1,93 @@
+import reducer from '../../reducers/index';
+
+describe('todos reducer', () => {
+  it('should return the default state', () => {
+    // Setup
+    const expected = {
+      frontText: '',
+      backText: '',
+    };
+
+    // Exercise
+    const actual = reducer(undefined, {});
+
+    // Assert
+    expect(actual).toEqual(expected);
+  });
+
+  it('should handle UPDATE_FRONT_TEXT', () => {
+    // Setup
+    const expected = {
+      frontText: 'test front text',
+    };
+    const mockAction = {
+      type: 'UPDATE_FRONT_TEXT',
+      frontText: 'test front text',
+    };
+
+    // Exercise
+    const actual = reducer({}, mockAction);
+
+    // Assert
+    expect(actual).toEqual(expected);
+  });
+
+  it('should handle UPDATE_BACK_TEXT', () => {
+    // Setup
+    const expected = {
+      backText: 'test back text',
+    };
+    const mockAction = {
+      type: 'UPDATE_BACK_TEXT',
+      backText: 'test back text',
+    };
+
+    // Exercise
+    const actual = reducer({}, mockAction);
+
+    // Assert
+    expect(actual).toEqual(expected);
+  });
+
+  it('should handle SAVE_CARD', () => {
+    // Setup
+    const initialState = {
+      frontText: 'Existing test back text',
+      backText: 'Existing test back text',
+    };
+    const expected = {
+      frontText: '',
+      backText: '',
+    };
+    const mockAction = {
+      type: 'SAVE_CARD',
+    };
+
+    // Exercise
+    const actual = reducer(initialState, mockAction);
+
+    // Assert
+    expect(actual).toEqual(expected);
+  });
+
+  it('should handle DISCARD_CARD', () => {
+    // Setup
+    const initialState = {
+      frontText: 'Existing test back text',
+      backText: 'Existing test back text',
+    };
+    const expected = {
+      frontText: '',
+      backText: '',
+    };
+    const mockAction = {
+      type: 'DISCARD_CARD',
+    };
+
+    // Exercise
+    const actual = reducer(initialState, mockAction);
+
+    // Assert
+    expect(actual).toEqual(expected);
+  });
+});
diff --git a/src/actions/createCard.js b/src/actions/createCard.js
@@ -0,0 +1,24 @@
+const updateFrontText = frontText => ({
+  type: 'UPDATE_FRONT_TEXT',
+  frontText,
+});
+
+const updateBackText = backText => ({
+  type: 'UPDATE_BACK_TEXT',
+  backText,
+});
+
+const saveCard = () => ({
+  type: 'SAVE_CARD',
+});
+
+const discardCard = () => ({
+  type: 'DISCARD_CARD',
+});
+
+export {
+  updateFrontText,
+  updateBackText,
+  saveCard,
+  discardCard,
+};
diff --git a/src/actions/index.js b/src/actions/index.js
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,24 +1,13 @@
 import React, { Component } from 'react';
 import propTypes from 'prop-types';
-import WebSpeechApi from '../utils/WebSpeechApi';
+import CreateCard from '../containers/CreateCard';
 
 class App extends Component {
   render() {
-
-    const test = new WebSpeechApi();
-/*
-    // speech a text
-    // test.speech('owarimasho', 'ja-JP');
-
-    // hear a text
-    test.hear('ja-JP', 
-      (text) => { test.speech(text, 'ja-JP') } ,
-      errorMessage => console.log(errorMessage));
-*/
     return (
       <div className="App">
-      Hello Gerpanese!!
-
+        Hello Gerpanese!!
+        <CreateCard />
       </div>
     );
   }