Test moving of a piece

test/features/games_test.exs

@@ -15,6 +15,21 @@ defmodule Chess.GamesTest do
     assert page_has_chess_board
   end
 
+  test "can move a piece" do
+    navigate_to "/"
+    create_game
+
+    click({:css, "#e2"})
+
+    assert has_class?({:css, "#e2"}, "selected")
+    assert square_has_piece("e2", "white", "pawn")
+
+    click({:css, "#e4"})
+
+    assert !square_has_piece("e2", "white", "pawn")
+    assert square_has_piece("e4", "white", "pawn")
+  end
+
   defp create_game do
     click({:css, "form.create-game button[type='submit']"})
   end
@@ -26,4 +41,9 @@ defmodule Chess.GamesTest do
   defp page_has_chess_board do
     element_displayed?({:css, ".board"})
   end
+
+  defp square_has_piece(square, colour, piece) do
+    has_class?({:css, "##{square}"}, colour) &&
+      has_class?({:css, "##{square}"}, piece)
+  end
 end

web/static/js/components/chess-board-square.js

@@ -43,20 +43,30 @@ class ChessBoardSquare extends React.Component {
     }
   }
 
-  render() {
+  squareId() {
+    return this.props.file + this.props.rank;
+  }
+
+  squareClass() {
     if (this.props.piece == undefined) {
-      var squareClass = "board-square";
+      return "board-square";
     }
     else {
-      var squareClass = classNames(
+      return classNames(
         "board-square",
         this.props.piece.type,
         this.props.piece.colour,
         { "selected": this.isSelectedSquare() }
       )
     }
+  }
 
-    return <div className={squareClass} onClick={this.selectSquare} />
+  render() {
+    return <div
+      id={this.squareId()}
+      className={this.squareClass()}
+      onClick={this.selectSquare}
+    />
   }
 }