Merge pull request #342 from code-dot-org/tests

Unit test <Train/> component

Author: Madelyn Kasula

src/oceans/models/index.js

@@ -1,6 +1,6 @@
 import {init as initLoading} from './loading';
 import {init as initWords} from './words';
-import {init as initTraining} from './train';
+import train from './train';
 import {init as initPredicting} from './predict';
 import {init as initPond} from './pond';
 import {Modes} from '../constants';
@@ -17,7 +17,7 @@ export const init = state => {
       initWords();
       break;
     case Modes.Training:
-      initTraining();
+      train.init();
       break;
     case Modes.Predicting:
       initPredicting();

src/oceans/models/train.js

@@ -5,7 +5,7 @@ import SimpleTrainer from '../../utils/SimpleTrainer';
 import SVMTrainer from '../../utils/SVMTrainer';
 import {generateOcean} from '../../utils/generateOcean';
 
-export const init = () => {
+const init = () => {
   const state = getState();
 
   let trainer = state.trainer;
@@ -38,7 +38,7 @@ export const init = () => {
   });
 };
 
-export const onClassifyFish = doesLike => {
+const onClassifyFish = doesLike => {
   const state = getState();
 
   // No-op if animation is currently in progress.
@@ -73,3 +73,8 @@ export const onClassifyFish = doesLike => {
 
   return true;
 };
+
+export default {
+  init,
+  onClassifyFish
+};

src/oceans/state.js

@@ -36,7 +36,9 @@ const initialState = {
   pondFishMaxExplainValue: 1,
   pondRecallFishMaxExplainValue: 1,
   guideDismissals: [],
-  guideShowing: false
+  guideShowing: false,
+  showConfirmationDialog: false,
+  confirmationDialogOnYes: null
 };
 let state = {...initialState};
 

src/oceans/ui.jsx

@@ -12,7 +12,7 @@ import {
   resetTraining,
   friendlyNameForFishPart
 } from './helpers';
-import {onClassifyFish} from './models/train';
+import train from './models/train';
 import {arrangeFish} from './models/pond';
 import colors from './colors';
 import aiBotHead from '@public/images/ai-bot/ai-bot-head.png';
@@ -875,7 +875,7 @@ let UnwrappedWords = class Words extends React.Component {
 };
 export const Words = Radium(UnwrappedWords); // Exported for unit tests.
 
-let Train = class Train extends React.Component {
+let UnwrappedTrain = class Train extends React.Component {
   state = {
     headOpen: false
   };
@@ -906,7 +906,7 @@ let Train = class Train extends React.Component {
         </div>
         <div style={styles.counter}>
           <img src={counterIcon} style={styles.counterImg} />
-          <span style={styles.counterNum}>
+          <span style={styles.counterNum} id="uitest-train-count">
             {Math.min(999, state.yesCount + state.noCount)}
           </span>
         </div>
@@ -927,7 +927,7 @@ let Train = class Train extends React.Component {
             style={styles.trainButtonNo}
             onClick={() => {
               this.setState({headOpen: true});
-              return onClassifyFish(false);
+              return train.onClassifyFish(false);
             }}
             sound={'no'}
           >
@@ -939,7 +939,7 @@ let Train = class Train extends React.Component {
             style={styles.trainButtonYes}
             onClick={() => {
               this.setState({headOpen: true});
-              return onClassifyFish(true);
+              return train.onClassifyFish(true);
             }}
             sound={'yes'}
           >
@@ -958,7 +958,7 @@ let Train = class Train extends React.Component {
     );
   }
 };
-Train = Radium(Train);
+export const Train = Radium(UnwrappedTrain); // Exported for unit tests.
 
 const defaultTimeScale = 1;
 const timeScales = [1, 2];
@@ -1590,10 +1590,6 @@ let Guide = class Guide extends React.Component {
 Guide = Radium(Guide);
 
 export default class UI extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     const state = getState();
     const currentMode = getState().currentMode;

test/unit/oceans/models/train.test.js

@@ -1,7 +1,7 @@
 const {initFishData} = require('@ml/utils/fishData');
 import {setState, getState, resetState} from '@ml/oceans/state';
 import {ClassType, Modes} from '@ml/oceans/constants';
-import {init, onClassifyFish} from '@ml/oceans/models/train.js';
+import train from '@ml/oceans/models/train.js';
 
 describe('Model quality test', () => {
   beforeAll(() => {
@@ -17,7 +17,7 @@ describe('Model quality test', () => {
   });
 
   test('init state', () => {
-    init();
+    train.init();
     const state = getState();
     expect(state).toBeTruthy();
     expect(state.trainer).toBeTruthy();
@@ -26,11 +26,11 @@ describe('Model quality test', () => {
   });
 
   test('state changes on classify', () => {
-    init();
+    train.init();
     // Set isRunning to false to simulate animation ending
     setState({isRunning: false});
     const previousState = getState();
-    expect(onClassifyFish(true)).toBe(true);
+    expect(train.onClassifyFish(true)).toBe(true);
     const newState = getState();
     expect(newState.trainingIndex).toBe(previousState.trainingIndex + 1);
     expect(newState.yesCount).toBe(previousState.yesCount + 1);

test/unit/oceans/ui.test.js

@@ -2,9 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {shallow} from 'enzyme';
 import sinon from 'sinon';
-import {Button, ConfirmationDialog, Words, wordSet} from '@ml/oceans/ui';
+import {Button, ConfirmationDialog, Words, wordSet, Train} from '@ml/oceans/ui';
 import guide from '@ml/oceans/models/guide';
 import soundLibrary from '@ml/oceans/models/soundLibrary';
+import train from '@ml/oceans/models/train';
 import modeHelpers from '@ml/oceans/modeHelpers';
 import {setState, getState, resetState} from '@ml/oceans/state';
 import {AppMode, Modes} from '@ml/oceans/constants';
@@ -197,3 +198,124 @@ describe('Words', () => {
     });
   });
 });
+
+describe('Train', () => {
+  let classifyFishStub;
+
+  beforeEach(() => {
+    classifyFishStub = sinon.stub(train, 'onClassifyFish');
+  });
+
+  afterEach(() => {
+    train.onClassifyFish.restore();
+  });
+
+  it('displays the current training count', () => {
+    setState({yesCount: 10, noCount: 23});
+    const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+    const trainCount = wrapper.find('#uitest-train-count');
+
+    expect(trainCount.text()).toEqual('33');
+  });
+
+  it('displays 999 if current training count is greater than 999', () => {
+    setState({yesCount: 1000, noCount: 1});
+    const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+    const trainCount = wrapper.find('#uitest-train-count');
+
+    expect(trainCount.text()).toEqual('999');
+  });
+
+  it('sets state to display confirmation dialog when erase icon is clicked', () => {
+    const initialState = getState();
+    expect(initialState.showConfirmationDialog).toBeFalsy();
+    expect(initialState.confirmationDialogOnYes).toBeNull();
+
+    const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+    const eraseIcon = wrapper.find('FontAwesomeIcon').at(0);
+    eraseIcon.simulate('click');
+
+    const newState = getState();
+    expect(newState.showConfirmationDialog).toBeTruthy();
+    expect(newState.confirmationDialogOnYes).not.toBeNull();
+  });
+
+  describe('train "no" button', () => {
+    const getNoButton = wrapper => wrapper.find('Button').at(0);
+
+    it('displays the current word when not in AppMode.CreaturesVTrash', () => {
+      setState({appMode: 'not-creatures-v-trash', word: 'Spooky'});
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      const noButton = getNoButton(wrapper).render();
+
+      expect(noButton.text().trimLeft()).toEqual('Not Spooky');
+    });
+
+    it('displays "no" in AppMode.CreaturesVTrash', () => {
+      setState({appMode: AppMode.CreaturesVTrash, word: 'Spooky'});
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      const noButton = getNoButton(wrapper).render();
+
+      expect(noButton.text().trimLeft()).toEqual('No');
+    });
+
+    it('classifies fish on click', () => {
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      getNoButton(wrapper).simulate('click');
+
+      expect(classifyFishStub.withArgs(false).callCount).toEqual(1);
+    });
+
+    it('opens bot head on click', () => {
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+
+      expect(wrapper.state().headOpen).toBeFalsy();
+      getNoButton(wrapper).simulate('click');
+      expect(wrapper.state().headOpen).toBeTruthy();
+    });
+  });
+
+  describe('train "yes" button', () => {
+    const getYesButton = wrapper => wrapper.find('Button').at(1);
+
+    it('displays the current word when not in AppMode.CreaturesVTrash', () => {
+      setState({appMode: 'not-creatures-v-trash', word: 'Spooky'});
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      const noButton = getYesButton(wrapper).render();
+
+      expect(noButton.text().trimLeft()).toEqual('Spooky');
+    });
+
+    it('displays "yes" in AppMode.CreaturesVTrash', () => {
+      setState({appMode: AppMode.CreaturesVTrash, word: 'Spooky'});
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      const noButton = getYesButton(wrapper).render();
+
+      expect(noButton.text().trimLeft()).toEqual('Yes');
+    });
+
+    it('classifies fish on click', () => {
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+      getYesButton(wrapper).simulate('click');
+
+      expect(classifyFishStub.withArgs(true).callCount).toEqual(1);
+    });
+
+    it('opens bot head on click', () => {
+      const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+
+      expect(wrapper.state().headOpen).toBeFalsy();
+      getYesButton(wrapper).simulate('click');
+      expect(wrapper.state().headOpen).toBeTruthy();
+    });
+  });
+
+  it('transitions to Modes.Predicting when continue button is clicked', () => {
+    const toModeStub = sinon.stub(modeHelpers, 'toMode');
+    const wrapper = shallow(<Train {...DEFAULT_PROPS} />);
+    const continueButton = wrapper.find('Button').at(2);
+    continueButton.simulate('click');
+
+    expect(toModeStub.withArgs(Modes.Predicting).callCount).toEqual(1);
+  });
+});