Merge pull request #339 from code-dot-org/unit-tests

Setup React unit tests + unit test <Button/>

Author: Madelyn Kasula

package.json

@@ -5,9 +5,19 @@
   "main": "dist/main.js",
   "jest": {
     "testEnvironment": "node",
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
     "moduleNameMapper": {
-      ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav)$": "identity-obj-proxy",
-      "^@ml(.*)$": "<rootDir>/src/$1"
+      ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif)$": "identity-obj-proxy",
+      "^@ml(.*)$": "<rootDir>/src/$1",
+      "^@public(.*)$": "<rootDir>/public/$1"
+    },
+    "setupTestFrameworkScriptFile": "<rootDir>/test/setup.js",
+    "globals": {
+      "window": {},
+      "location": {}
     }
   },
   "scripts": {
@@ -55,6 +65,8 @@
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.0.5",
     "css-loader": "^3.2.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-15.4": "^1.3.1",
     "eslint": ">=4.18.2",
     "eslint-plugin-react": "^7.11.0",
     "file-loader": "^4.2.0",
@@ -69,8 +81,10 @@
     "query-string": "4.1.0",
     "radium": "^0.25.2",
     "react": "~15.4.0",
+    "react-addons-test-utils": "~15.4.0",
     "react-dom": "~15.4.0",
     "react-test-renderer": "~15.4.0",
+    "sinon": "^7.5.0",
     "style-loader": "^1.0.0",
     "svm": "uponthesun/svmjs",
     "url-loader": "^2.2.0",

src/oceans/init.js

@@ -6,7 +6,7 @@ import constants, {Modes} from './constants';
 import {setInitialState, setSetStateCallback} from './state';
 import {render as renderCanvas} from './renderer';
 import {toMode} from './toMode';
-import {loadSounds, injectSoundAPIs} from './models/soundLibrary';
+import * as soundLibrary from './models/soundLibrary';
 
 //
 // Required in options:
@@ -16,15 +16,15 @@ import {loadSounds, injectSoundAPIs} from './models/soundLibrary';
 //  onContinue
 //
 export const initAll = function(options) {
-  const { canvas, backgroundCanvas } = options;
+  const {canvas, backgroundCanvas} = options;
 
   canvas.width = backgroundCanvas.width = constants.canvasWidth;
   canvas.height = backgroundCanvas.height = constants.canvasHeight;
 
   // Pass registerSound and playSound from options to soundLibrary.
-  injectSoundAPIs(options);
+  soundLibrary.injectSoundAPIs(options);
 
-  loadSounds();
+  soundLibrary.loadSounds();
 
   // Set initial state for UI elements.
   setInitialState({

src/oceans/models/guide.js

@@ -467,7 +467,7 @@ const guides = [
   }
 ];
 
-export function getCurrentGuide() {
+const getCurrentGuide = () => {
   if (queryStrFor('guide') === 'off') {
     return null;
   }
@@ -493,9 +493,9 @@ export function getCurrentGuide() {
   }
 
   return null;
-}
+};
 
-export function dismissCurrentGuide() {
+const dismissCurrentGuide = () => {
   const currentGuide = getCurrentGuide();
 
   // If we have a current guide, and it's actually showing (rather than still
@@ -511,4 +511,9 @@ export function dismissCurrentGuide() {
   }
 
   return false;
-}
+};
+
+export default {
+  getCurrentGuide,
+  dismissCurrentGuide
+};

src/oceans/models/soundLibrary.js

@@ -39,18 +39,24 @@ const soundLibrary = {
   ]
 };
 
-export const injectSoundAPIs = ({registerSound, playSound}) => {
+const injectSoundAPIs = ({registerSound, playSound}) => {
   registerSoundAPI = registerSound;
   playSoundAPI = playSound;
 };
 
-export const loadSounds = () => {
+const loadSounds = () => {
   Object.entries(soundLibrary).forEach(([_, category]) =>
     category.forEach(sound => registerSoundAPI({id: sound, mp3: sound}))
   );
 };
 
-export const playSound = (categoryName, volume = undefined) => {
+const playSound = (categoryName, volume = undefined) => {
   const index = randomInt(0, soundLibrary[categoryName].length - 1);
   playSoundAPI(soundLibrary[categoryName][index], {volume: volume || 1.0});
 };
+
+export default {
+  injectSoundAPIs,
+  loadSounds,
+  playSound
+};

src/oceans/renderer.js

@@ -27,7 +27,7 @@ import aiBotNo from '@public/images/ai-bot/ai-bot-no.png';
 import redScanner from '@public/images/ai-bot/red-scanner.png';
 import greenScanner from '@public/images/ai-bot/green-scanner.png';
 import blueScanner from '@public/images/ai-bot/blue-scanner.png';
-import {playSound} from './models/soundLibrary';
+import * as soundLibrary from './models/soundLibrary';
 import bluePredictionFrame from '@public/images/blue-prediction-frame.png';
 import questionIcon from '@public/images/question-icon.png';
 import greenPredictionFrame from '@public/images/green-prediction-frame.png';
@@ -485,9 +485,9 @@ const drawPredictBot = state => {
 
   if (scannerImg !== lastScannerImg) {
     if (scannerImg === botImages.likeScanner) {
-      playSound('sortyes');
+      soundLibrary.playSound('sortyes');
     } else if (scannerImg === botImages.dislikeScanner) {
-      playSound('sortno');
+      soundLibrary.playSound('sortno');
     }
     lastScannerImg = scannerImg;
   }

src/oceans/ui.jsx

@@ -23,8 +23,8 @@ import arrowDownImage from '@public/images/arrow-down.png';
 import snail from '@public/images/snail-large.png';
 import loadingGif from '@public/images/loading.gif';
 import Typist from 'react-typist';
-import {getCurrentGuide, dismissCurrentGuide} from './models/guide';
-import {playSound} from './models/soundLibrary';
+import * as guide from './models/guide';
+import * as soundLibrary from './models/soundLibrary';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faPlay,
@@ -662,7 +662,7 @@ class Content extends React.Component {
   }
 }
 
-let Button = class Button extends React.Component {
+let UnwrappedButton = class Button extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     style: PropTypes.object,
@@ -671,33 +671,30 @@ let Button = class Button extends React.Component {
     sound: PropTypes.string
   };
 
-  onClick(event) {
-    dismissCurrentGuide();
+  onClick = event => {
+    guide.dismissCurrentGuide();
     const clickReturnValue = this.props.onClick(event);
 
     if (clickReturnValue !== false) {
-      if (this.props.sound && clickReturnValue !== false) {
-        playSound(this.props.sound);
-      } else {
-        playSound('other');
-      }
+      const sound = this.props.sound || 'other';
+      soundLibrary.playSound(sound);
     }
-  }
+  };
 
   render() {
     return (
       <button
         type="button"
         className={this.props.className}
         style={[styles.button, this.props.style]}
-        onClick={event => this.onClick(event)}
+        onClick={this.onClick}
       >
         {this.props.children}
       </button>
     );
   }
 };
-Button = Radium(Button);
+export const Button = Radium(UnwrappedButton); // Exported for unit tests.
 
 let ConfirmationDialog = class ConfirmationDialog extends React.Component {
   static propTypes = {
@@ -1251,11 +1248,11 @@ let Pond = class Pond extends React.Component {
     if (state.showRecallFish) {
       currentFishSet = state.recallFish;
       nextFishSet = state.pondFish;
-      playSound('yes');
+      soundLibrary.playSound('yes');
     } else {
       currentFishSet = state.pondFish;
       nextFishSet = state.recallFish;
-      playSound('no');
+      soundLibrary.playSound('no');
     }
 
     // Don't call arrangeFish if fish have already been arranged.
@@ -1275,7 +1272,7 @@ let Pond = class Pond extends React.Component {
 
   onPondClick = e => {
     // Don't allow pond clicks if a Guide is currently showing.
-    if (getCurrentGuide()) {
+    if (guide.getCurrentGuide()) {
       return;
     }
 
@@ -1328,7 +1325,7 @@ let Pond = class Pond extends React.Component {
             }
           });
           fishClicked = true;
-          playSound('yes');
+          soundLibrary.playSound('yes');
 
           if (
             state.appMode === AppMode.FishShort ||
@@ -1351,7 +1348,7 @@ let Pond = class Pond extends React.Component {
 
       if (!fishClicked) {
         setState({pondClickedFish: null});
-        playSound('no');
+        soundLibrary.playSound('no');
       }
     }
   };
@@ -1368,9 +1365,9 @@ let Pond = class Pond extends React.Component {
       });
 
       if (state.pondPanelShowing) {
-        playSound('sortno');
+        soundLibrary.playSound('sortno');
       } else {
-        playSound('sortyes');
+        soundLibrary.playSound('sortyes');
       }
     }
 
@@ -1480,15 +1477,15 @@ let Guide = class Guide extends React.Component {
   }
 
   dismissGuideClick() {
-    const dismissed = dismissCurrentGuide();
+    const dismissed = guide.dismissCurrentGuide();
     if (dismissed) {
-      playSound('other');
+      soundLibrary.playSound('other');
     }
   }
 
   render() {
     const state = getState();
-    const currentGuide = getCurrentGuide();
+    const currentGuide = guide.getCurrentGuide();
 
     let guideBgStyle = [styles.guideBackground];
     if (currentGuide) {
@@ -1505,7 +1502,7 @@ let Guide = class Guide extends React.Component {
     // Start playing the typing sounds.
     if (!state.guideShowing && !state.guideTypingTimer && currentGuide) {
       const guideTypingTimer = setInterval(() => {
-        playSound('no', 0.5);
+        soundLibrary.playSound('no', 0.5);
       }, 1000 / 10);
       setState({guideTypingTimer});
     }

test/setup.js

@@ -0,0 +1,4 @@
+import Adapter from 'enzyme-adapter-react-15.4';
+import enzyme from 'enzyme';
+
+enzyme.configure({adapter: new Adapter()});

test/unit/oceans/ui.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+import {Button} from '@ml/oceans/ui';
+import * as guide from '@ml/oceans/models/guide';
+import * as soundLibrary from '@ml/oceans/models/soundLibrary';
+
+const DEFAULT_PROPS = {
+  // radiumConfig.userAgent is required because our unit tests run in the "node" testEnvironment
+  // (this is necessary for our tensorflow tests), so Radium thinks we are server-side rendering.
+  // See also: https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent
+  radiumConfig: {userAgent: 'user-agent'}
+};
+
+describe('Button', () => {
+  let onClickMock, playSoundSpy;
+
+  beforeEach(() => {
+    soundLibrary.injectSoundAPIs({playSound: sinon.fake()});
+    playSoundSpy = sinon.spy(soundLibrary, 'playSound');
+    onClickMock = sinon.fake.returns(false);
+  });
+
+  afterEach(() => {
+    soundLibrary.playSound.restore();
+  });
+
+  it('dismisses guide on click', () => {
+    const dismissCurrentGuideSpy = sinon.spy(guide, 'dismissCurrentGuide');
+    const wrapper = shallow(
+      <Button {...DEFAULT_PROPS} onClick={onClickMock} />
+    );
+
+    wrapper.simulate('click');
+    expect(dismissCurrentGuideSpy.calledOnce);
+
+    guide.dismissCurrentGuide.restore();
+  });
+
+  it('calls onClick prop on click', () => {
+    const wrapper = shallow(
+      <Button {...DEFAULT_PROPS} onClick={onClickMock} />
+    );
+
+    wrapper.simulate('click');
+    expect(onClickMock.calledOnce);
+  });
+
+  it('does not play a sound if onClick prop returns false', () => {
+    const wrapper = shallow(
+      <Button {...DEFAULT_PROPS} onClick={onClickMock} />
+    );
+
+    wrapper.simulate('click');
+    expect(!playSoundSpy.called);
+  });
+
+  describe('onClick prop does not return false', () => {
+    it('plays sound if supplied', () => {
+      onClickMock = sinon.fake.returns(true);
+      const wrapper = shallow(
+        <Button {...DEFAULT_PROPS} onClick={onClickMock} sound="sortyes" />
+      );
+
+      wrapper.simulate('click');
+      expect(playSoundSpy.withArgs('sortyes').calledOnce);
+    });
+
+    it('plays "other" sound if sound not supplied', () => {
+      onClickMock = sinon.fake.returns(true);
+      const wrapper = shallow(
+        <Button {...DEFAULT_PROPS} onClick={onClickMock} />
+      );
+
+      wrapper.simulate('click');
+      expect(playSoundSpy.withArgs('other').calledOnce);
+    });
+  });
+});