Skip to content

Commit 48012c2

Browse files
author
Madelyn Kasula
authored
Merge pull request #344 from code-dot-org/predict-tests
<Predict/> tests
2 parents 20470f1 + 03db3a5 commit 48012c2

File tree

2 files changed

+120
-8
lines changed

2 files changed

+120
-8
lines changed

‎src/oceans/ui.jsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -968,7 +968,7 @@ const MediaControl = Object.freeze({
968968
FastForward: 'fast-forward'
969969
});
970970

971-
let Predict = class Predict extends React.Component {
971+
let UnwrappedPredict = class Predict extends React.Component {
972972
state = {
973973
displayControls: false,
974974
timeScale: defaultTimeScale
@@ -1040,14 +1040,12 @@ let Predict = class Predict extends React.Component {
10401040
this.state.timeScale !== defaultTimeScale
10411041
) {
10421042
selectedControl = MediaControl.FastForward;
1043-
} else {
1044-
selectedControl = MediaControl.Play;
10451043
}
10461044

10471045
return (
10481046
<Body>
10491047
{this.state.displayControls && (
1050-
<div style={styles.mediaControls}>
1048+
<div style={styles.mediaControls} id="uitest-media-ctrl">
10511049
<span
10521050
onClick={() => this.onScaleTime(true)}
10531051
style={[
@@ -1090,21 +1088,29 @@ let Predict = class Predict extends React.Component {
10901088
</div>
10911089
)}
10921090
{!state.isRunning && !state.isPaused && (
1093-
<Button style={styles.continueButton} onClick={this.onRun}>
1091+
<Button
1092+
style={styles.continueButton}
1093+
onClick={this.onRun}
1094+
id="uitest-run-btn"
1095+
>
10941096
<FontAwesomeIcon icon={faPlay} />
10951097
&nbsp; &nbsp; Run
10961098
</Button>
10971099
)}
10981100
{(state.isRunning || state.isPaused) && state.canSkipPredict && (
1099-
<Button style={styles.continueButton} onClick={this.onContinue}>
1101+
<Button
1102+
style={styles.continueButton}
1103+
onClick={this.onContinue}
1104+
id="uitest-continue-btn"
1105+
>
11001106
Continue
11011107
</Button>
11021108
)}
11031109
</Body>
11041110
);
11051111
}
11061112
};
1107-
Predict = Radium(Predict);
1113+
export const Predict = Radium(UnwrappedPredict); // Exported for unit tests.
11081114

11091115
class PondPanel extends React.Component {
11101116
onPondPanelClick(e) {

‎test/unit/oceans/ui.test.js‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@ import React from 'react';
22
import ReactDOM from 'react-dom';
33
import {shallow} from 'enzyme';
44
import sinon from 'sinon';
5-
import {Button, ConfirmationDialog, Words, wordSet, Train} from '@ml/oceans/ui';
5+
import {
6+
Button,
7+
ConfirmationDialog,
8+
Words,
9+
wordSet,
10+
Train,
11+
Predict
12+
} from '@ml/oceans/ui';
613
import guide from '@ml/oceans/models/guide';
714
import soundLibrary from '@ml/oceans/models/soundLibrary';
815
import train from '@ml/oceans/models/train';
916
import modeHelpers from '@ml/oceans/modeHelpers';
1017
import {setState, getState, resetState} from '@ml/oceans/state';
1118
import {AppMode, Modes} from '@ml/oceans/constants';
19+
import colors from '@ml/oceans/colors';
1220

1321
const DEFAULT_PROPS = {
1422
// radiumConfig.userAgent is required because our unit tests run in the "node" testEnvironment
@@ -208,6 +216,7 @@ describe('Train', () => {
208216

209217
afterEach(() => {
210218
train.onClassifyFish.restore();
219+
resetState();
211220
});
212221

213222
it('displays the current training count', () => {
@@ -319,3 +328,100 @@ describe('Train', () => {
319328
expect(toModeStub.withArgs(Modes.Predicting).callCount).toEqual(1);
320329
});
321330
});
331+
332+
describe('Predict', () => {
333+
afterEach(() => {
334+
resetState();
335+
});
336+
337+
it('displays media controls when run button is clicked', () => {
338+
setState({isRunning: false, isPaused: false});
339+
const wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
340+
341+
expect(wrapper.exists('#uitest-run-btn')).toBeTruthy();
342+
expect(wrapper.exists('#uitest-media-ctrl')).toBeFalsy();
343+
344+
wrapper.find('#uitest-run-btn').simulate('click');
345+
346+
const newState = getState();
347+
expect(newState.isRunning).toBeTruthy();
348+
expect(newState.runStartTime).not.toBeNull();
349+
expect(wrapper.exists('#uitest-run-btn')).toBeFalsy();
350+
expect(wrapper.exists('#uitest-media-ctrl')).toBeTruthy();
351+
});
352+
353+
it('does not display media controls when run button is clicked in AppMode.CreaturesVTrashDemo', () => {
354+
setState({
355+
appMode: AppMode.CreaturesVTrashDemo,
356+
isRunning: false,
357+
isPaused: false
358+
});
359+
const wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
360+
361+
expect(wrapper.exists('#uitest-media-ctrl')).toBeFalsy();
362+
wrapper.find('#uitest-run-btn').simulate('click');
363+
expect(wrapper.exists('#uitest-media-ctrl')).toBeFalsy();
364+
});
365+
366+
it('highlights the selected media control based on state', () => {
367+
const getCtrl = (wrapper, i) =>
368+
wrapper.find('#uitest-media-ctrl > span').at(i);
369+
const getIconName = wrapper =>
370+
wrapper.find('FontAwesomeIcon').prop('icon').iconName;
371+
let wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
372+
373+
// Press play
374+
wrapper.find('#uitest-run-btn').simulate('click');
375+
let play = getCtrl(wrapper, 1);
376+
expect(getIconName(play)).toEqual('pause');
377+
// Play & pause icons should not be highlighted, even when it's the selected control.
378+
// Only rewind & fast-forward are highlighted when selected.
379+
expect(play.prop('style').color).toEqual(colors.white);
380+
381+
// Press play again to pause
382+
play.simulate('click');
383+
play = getCtrl(wrapper, 1);
384+
expect(getIconName(play)).toEqual('play');
385+
expect(play.prop('style').color).toEqual(colors.white);
386+
387+
// Press rewind
388+
let rewind = getCtrl(wrapper, 0);
389+
rewind.simulate('click');
390+
rewind = getCtrl(wrapper, 0);
391+
expect(rewind.prop('style').color).toEqual(colors.orange);
392+
expect(rewind.childAt(0).text()).toEqual('x2');
393+
394+
// Press rewind again to change time scale
395+
rewind.simulate('click');
396+
rewind = getCtrl(wrapper, 0);
397+
expect(rewind.prop('style').color).toEqual(colors.orange);
398+
expect(rewind.childAt(0).text()).toEqual('');
399+
400+
// Press fast-forward
401+
let fastForward = getCtrl(wrapper, 2);
402+
fastForward.simulate('click');
403+
fastForward = getCtrl(wrapper, 2);
404+
expect(fastForward.prop('style').color).toEqual(colors.orange);
405+
expect(fastForward.childAt(1).text()).toEqual('x2');
406+
407+
// Press fast-forward again to change time scale
408+
fastForward.simulate('click');
409+
fastForward = getCtrl(wrapper, 2);
410+
expect(fastForward.prop('style').color).toEqual(colors.white);
411+
expect(fastForward.childAt(1).text()).toEqual('');
412+
});
413+
414+
it('displays the continue button based on state', () => {
415+
setState({isRunning: false, isPaused: false, canSkipPredict: false});
416+
let wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
417+
expect(wrapper.exists('#uitest-continue-btn')).toBeFalsy();
418+
419+
setState({isRunning: true, isPaused: false, canSkipPredict: true});
420+
wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
421+
expect(wrapper.exists('#uitest-continue-btn')).toBeTruthy();
422+
423+
setState({isRunning: false, isPaused: true, canSkipPredict: true});
424+
wrapper = shallow(<Predict {...DEFAULT_PROPS} />);
425+
expect(wrapper.exists('#uitest-continue-btn')).toBeTruthy();
426+
});
427+
});

0 commit comments

Comments
 (0)