Markup updates for automated testing.

src/components/create-or-join/CreateOrJoin.jsx

@@ -35,7 +35,7 @@ class CreateOrJoin extends React.Component {
         return (
             <Fragment>
                 <div className="font-preloader">text</div>
-                <Button size='large' className='shadow' onClick={this.props.showNewGame}>
+                <Button size='large' className='shadow action-item' onClick={this.props.showNewGame}>
                     New Game
                 </Button>
                 {(this.props.start.start.games.length > 0) || (this.props.start.start.openGames.length > 0)  ? (

src/components/farm/Board.jsx

@@ -51,6 +51,8 @@ import { buy, roll, endTurn, loan, trade, submitTradeAccept,
          leaveGame, kickPlayer, toggleRevealForTrade,
          addAIPlayer } from './interface.js'
 
+const showScreenDelay = 2000;
+
 function netWorth(player) {
     return ((player.assets.hay + player.assets.grain) * 2000) +
                 (player.assets.fruit * 5000) +
@@ -212,7 +214,7 @@ class PlayerTurnContainer extends React.Component {
         } else if (player.state === GAME_STATES.preTurn) {
             view = (
                 <Fragment>
-                    <Button onClick={this.clickRoll}>Roll</Button>{' '}{auditButton}
+                    <Button className="action-item" onClick={this.clickRoll}>Roll</Button>{' '}{auditButton}
                 </Fragment>
             );
         } else if (player.state === GAME_STATES.midTurn) {
@@ -235,7 +237,7 @@ class PlayerTurnContainer extends React.Component {
                 } else {
                     view = (
                         <Fragment>
-                            <Button onClick={endTurn}>
+                            <Button className="action-item" onClick={endTurn}>
                                 End Turn
                             </Button>{' '}{auditButton}
                         </Fragment>);
@@ -1249,7 +1251,7 @@ class Die extends React.Component {
                 </div>
                 {this.props.skip && !this.state.finalFace ?
                  (<div className='center'>
-                     <Button onClick={() => this.skip()}>Skip</Button>
+                     <Button className="action-item" onClick={() => this.skip()}>Skip</Button>
                  </div>) :
                  (<Fragment />)}
             </Fragment>
@@ -1342,7 +1344,7 @@ class Harvest extends React.Component {
                                     {this.props.crop === 'cows' ? ' head of cow' : ' acres'}</b>!
                             </div>
                             {isCurrentPlayer || this.props.currentPlayer.ai ? (
-                                 <Button onClick={() => this.nextView('roll')}>
+                                 <Button className="action-item" onClick={() => this.nextView('roll')}>
                                      Roll for harvest!
                                  </Button>
                             ) : (<Fragment />)}
@@ -1359,7 +1361,7 @@ class Harvest extends React.Component {
                              showScreen={() => this.nextView('income')}
                              skip={this.props.player.name === this.props.game.currentPlayer || this.props.currentPlayer.ai}
                              autoSkip={this.props.autoSkip === 'die'}
-                             showScreenDelay={2000} />);
+                             showScreenDelay={showScreenDelay} />);
                 break;
             case 'income':
                 view = (
@@ -1392,7 +1394,7 @@ class Harvest extends React.Component {
                         </div>
                         {isCurrentPlayer || this.props.currentPlayer.ai ? (
                              <div className='center spacer'>
-                                 <Button onClick={() => this.nextView('expense-value')}>Continue</Button>
+                                 <Button className="action-item" onClick={() => this.nextView('expense-value')}>Continue</Button>
                              </div>
                         ) : (<Fragment />)}
                     </Fragment>
@@ -1428,7 +1430,7 @@ class Harvest extends React.Component {
                         {isCurrentPlayer || this.props.currentPlayer.ai ?
                          (
                              <div className='center spacer'>
-                                 <Button onClick={this.props.nextAction}>Continue</Button>
+                                 <Button className="action-item" onClick={this.props.nextAction}>Continue</Button>
                              </div>
                          ) : (<Fragment />)}
                     </div>
@@ -1454,9 +1456,9 @@ class Moving extends React.Component {
             buttons = (<Fragment />);
         } else if (this.props.ui.playerSpaces[(this.props.currentPlayer.ai && this.props.currentPlayer.color) || this.props.player.color]
             === this.props.ui.actionValue.to) {
-            buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+            buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
         } else {
-            buttons = (<Button onClick={() => this.skip()}>Skip</Button>);
+            buttons = (<Button className="action-item" onClick={() => this.skip()}>Skip</Button>);
         }
         const { currentPlayer } = this.props;
         return (
@@ -1518,7 +1520,7 @@ class Action extends React.Component {
                         </div>
                     );
                 }
-                buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                 break;
             case 'farmers-fate':
                 view = (
@@ -1529,7 +1531,7 @@ class Action extends React.Component {
                         </GroupBox>
                     </div>
                 );
-                buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                 break;
             case 'ff-uncle-bert':
                 const { cash } = this.props.player;
@@ -1593,7 +1595,7 @@ class Action extends React.Component {
                             </div>
                         </div>
                     </div>);
-                buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                 break;
             case 'info':
                 view = (
@@ -1601,7 +1603,7 @@ class Action extends React.Component {
                         <p>{this.props.ui.actionValue}</p>
                     </div>
                 );
-                buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                 break;
             case 'harvest':
                 view = (<Harvest rolled={this.props.ui.actionValue.rolled}
@@ -1681,7 +1683,7 @@ class Action extends React.Component {
                                  autoSkip={this.props.ui.autoSkip}
                                  skip={(this.props.player.name === this.props.game.currentPlayer ||
                                         currentPlayer.ai)}
-                                 showScreenDelay={2000} />);
+                                 showScreenDelay={showScreenDelay} />);
                 buttons = (<Fragment />);
                 break;
             default:
@@ -1693,7 +1695,7 @@ class Action extends React.Component {
                                            game={this.props.game} />);
                 } else if (currentPlayer.ai) {
                     view = (
-                        <Button onClick={endAiTurn}>
+                        <Button className="action-item" onClick={endAiTurn}>
                             Next Player's Turn
                         </Button>
                     );

src/components/login-or-create-account/LoginOrCreateAccount.jsx

@@ -42,7 +42,7 @@ export default class LoginOrCreateAccount extends React.Component {
                                     createAccount={this.props.createAccount} />
                 )}
                 <div className="center">
-                    <a onClick={this.toggleLogin}>{this.state.showLogin ? 'Create Account' : 'Login'}</a>
+                    <a className="action-item" onClick={this.toggleLogin}>{this.state.showLogin ? 'Create Account' : 'Login'}</a>
                 </div>
             </>
         );

src/components/welcome/Welcome.jsx

@@ -32,7 +32,7 @@ class Welcome extends React.Component {
                   Your ancestors were farmers on one of the first transports to Alpha Centuari{`'`}s Proxima b. The growing season is short and harsh but the colonists depend on you for their food. Are you up to the challenge?
                 </div>
               </div>
-              <Button size='large' className='shadow intro' onClick={this.props.start}>
+              <Button size='large' className='shadow intro action-item' onClick={this.props.start}>
                 Begin
               </Button>
             </Fragment>