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

.yarn/versions/b852359f.yml

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

package.json

@@ -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",

packages/examples-decorators/package.json

@@ -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",

packages/examples-decorators/src/00-chessboard/Board.tsx

@@ -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>

packages/examples-decorators/src/00-chessboard/BoardSquare.tsx

@@ -6,14 +6,15 @@ import {
 	ConnectDropTarget,
 } from 'react-dnd'
 import { Square } from './Square'
-import { canMoveKnight, moveKnight } from './Game'
 import { ItemTypes } from './ItemTypes'
-import { Overlay } from './Overlay'
+import { Overlay, OverlayType } from './Overlay'
+import { Game } from './Game'
 
 export interface BoardSquareProps {
 	x: number
 	y: number
 	children: any
+	game: Game
 
 	// Collected Props
 	isOver: boolean
@@ -37,20 +38,20 @@ const BoardSquare: FC<BoardSquareProps> = ({
 }) => {
 	const black = (x + y) % 2 === 1
 	return connectDropTarget(
-		<div style={boardSquareStyle}>
+		<div role="Space" data-testid={`(${x},${y})`} style={boardSquareStyle}>
 			<Square black={black}>{children}</Square>
-			{isOver && !canDrop && <Overlay color="red" />}
-			{!isOver && canDrop && <Overlay color="yellow" />}
-			{isOver && canDrop && <Overlay color="green" />}
+			{isOver && !canDrop && <Overlay type={OverlayType.IllegalMoveHover} />}
+			{!isOver && canDrop && <Overlay type={OverlayType.PossibleMove} />}
+			{isOver && canDrop && <Overlay type={OverlayType.LegalMoveHover} />}
 		</div>,
 	)
 }
 
 export default DropTarget(
 	ItemTypes.KNIGHT,
 	{
-		canDrop: (props: BoardSquareProps) => canMoveKnight(props.x, props.y),
-		drop: (props: BoardSquareProps) => moveKnight(props.x, props.y),
+		canDrop: ({ game, x, y }: BoardSquareProps) => game.canMoveKnight(x, y),
+		drop: ({ game, x, y }: BoardSquareProps) => game.moveKnight(x, y),
 	},
 	(connect: DropTargetConnector, monitor: DropTargetMonitor) => {
 		return {

packages/examples-decorators/src/00-chessboard/Game.ts

@@ -1,32 +1,37 @@
-let knightPosition: [number, number] = [1, 7]
-let observers: PositionObserver[] = []
-export type PositionObserver = ((position: [number, number]) => void) | null
+export type Position = [number, number]
+export type PositionObserver = ((position: Position) => void) | null
 
-function emitChange() {
-	observers.forEach((o) => o && o(knightPosition))
-}
+export class Game {
+	public knightPosition: Position = [1, 7]
+	private observers: PositionObserver[] = []
 
-export function observe(o: PositionObserver): () => void {
-	observers.push(o)
-	emitChange()
+	public observe(o: PositionObserver): () => void {
+		this.observers.push(o)
+		this.emitChange()
 
-	return (): void => {
-		observers = observers.filter((t) => t !== o)
+		return (): void => {
+			this.observers = this.observers.filter((t) => t !== o)
+		}
 	}
-}
 
-export function canMoveKnight(toX: number, toY: number): boolean {
-	const [x, y] = knightPosition
-	const dx = toX - x
-	const dy = toY - y
+	public moveKnight(toX: number, toY: number): void {
+		this.knightPosition = [toX, toY]
+		this.emitChange()
+	}
 
-	return (
-		(Math.abs(dx) === 2 && Math.abs(dy) === 1) ||
-		(Math.abs(dx) === 1 && Math.abs(dy) === 2)
-	)
-}
+	public canMoveKnight(toX: number, toY: number): boolean {
+		const [x, y] = this.knightPosition
+		const dx = toX - x
+		const dy = toY - y
 
-export function moveKnight(toX: number, toY: number): void {
-	knightPosition = [toX, toY]
-	emitChange()
+		return (
+			(Math.abs(dx) === 2 && Math.abs(dy) === 1) ||
+			(Math.abs(dx) === 1 && Math.abs(dy) === 2)
+		)
+	}
+
+	private emitChange() {
+		const pos = this.knightPosition
+		this.observers.forEach((o) => o && o(pos))
+	}
 }

packages/examples-decorators/src/00-chessboard/Overlay.tsx

@@ -1,12 +1,20 @@
 import { FC } from 'react'
 
+export enum OverlayType {
+	IllegalMoveHover = 'Illegal',
+	LegalMoveHover = 'Legal',
+	PossibleMove = 'Possible',
+}
 export interface OverlayProps {
-	color: string
+	type: OverlayType
 }
 
-export const Overlay: FC<OverlayProps> = ({ color }) => {
+export const Overlay: FC<OverlayProps> = ({ type }) => {
+	const color = getOverlayColor(type)
 	return (
 		<div
+			className="overlay"
+			role={type}
 			style={{
 				position: 'absolute',
 				top: 0,
@@ -20,3 +28,14 @@ export const Overlay: FC<OverlayProps> = ({ color }) => {
 		/>
 	)
 }
+
+function getOverlayColor(type: OverlayType): string {
+	switch (type) {
+		case OverlayType.IllegalMoveHover:
+			return 'red'
+		case OverlayType.LegalMoveHover:
+			return 'green'
+		case OverlayType.PossibleMove:
+			return 'yellow'
+	}
+}