Migrate Chess Example Tests from PR (#3025)

* test: merge in testing-library based tests for the chessboard example (@ryota-murakami )

* refactor: remove file

* chore: cut semver file

Author: darthtrevino

.pnp.js

@@ -0,0 +1,6 @@
+releases:
+  react-dnd-examples-decorators: patch
+  react-dnd-examples-hooks: patch
+
+declined:
+  - react-dnd-documentation

.yarn/cache/@testing-library-jest-dom-npm-5.11.9-ad0c7dbe3e-c285c044ed.zip

@@ -68,9 +68,11 @@
     "@babel/preset-typescript": "^7.12.13",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.25",
+    "@types/testing-library__jest-dom": "^5",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",

.yarn/cache/@types-testing-library__jest-dom-npm-5.9.5-5a42b58918-32aa324a83.zip

@@ -33,13 +33,15 @@
   },
   "devDependencies": {
     "@react-dnd/build": "workspace:packages/build",
+    "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@types/enzyme": "^3.10.8",
     "@types/faker": "^5.1.6",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.168",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
+    "@types/testing-library__jest-dom": "^5",
     "enzyme": "^3.11.0",
     "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",

.yarn/cache/css-npm-3.0.0-ef426b63b3-a62cc8350f.zip

@@ -1,9 +1,10 @@
-import { CSSProperties, FC } from 'react'
+import { CSSProperties, FC, useEffect, useState } from 'react'
 import BoardSquare from './BoardSquare'
+import { Game, Position } from './Game'
 import { Piece } from './Piece'
 
 export interface BoardProps {
-	knightPosition: [number, number]
+	game: Game
 }
 
 /** Styling properties applied to the board element */
@@ -20,16 +21,19 @@ const squareStyle: CSSProperties = { width: '12.5%', height: '12.5%' }
  * The chessboard component
  * @param props The react props
  */
-export const Board: FC<BoardProps> = ({
-	knightPosition: [knightX, knightY],
-}) => {
+export const Board: FC<BoardProps> = ({ game }) => {
+	const [[knightX, knightY], setKnightPos] = useState<Position>(
+		game.knightPosition,
+	)
+	useEffect(() => game.observe(setKnightPos))
+
 	function renderSquare(i: number) {
 		const x = i % 8
 		const y = Math.floor(i / 8)
 
 		return (
 			<div key={i} style={squareStyle}>
-				<BoardSquare x={x} y={y}>
+				<BoardSquare x={x} y={y} game={game}>
 					<Piece isKnight={x === knightX && y === knightY} />
 				</BoardSquare>
 			</div>