Configured ESLint, Prettier and Github CI actions

.eslintignore

@@ -0,0 +1,2 @@
+/.expo
+node_modules

.eslintrc.js

@@ -0,0 +1,8 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
+  rules: {
+    "prettier/prettier": "error",
+  },
+};

.github/workflows/main.yml

@@ -0,0 +1,35 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  lint-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Find yarn cache location
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: JS package cache
+        uses: actions/cache@v1
+        with:
+          path: $(( steps.yarn-cache.outputs.dir ))
+          key: $(( runner.os ))-yarn-$(( hashFiles('**/yarn.lock') ))
+          restore-keys: |
+            $(( runner.os ))-yarn-
+
+      - name: Install Node Modules
+        run: yarn install
+
+      - name: Run Lint
+        run: yarn lint
+
+      - name: Run tests
+        run: yarn testFinal

__tests__/App.test.tsx

@@ -1,14 +1,14 @@
-import renderer from "react-test-renderer";
-import App from "../App";
-
-describe("<App />", () => {
-  it("has 1 child", () => {
-    const tree: any = renderer.create(<App />).toJSON();
-    expect(tree.children.length).toBe(1);
-  });
-
-  it("renders correctly", () => {
-    const tree = renderer.create(<App />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});
+import renderer from "react-test-renderer";
+import App from "../App";
+
+describe("<App />", () => {
+  it("has 1 child", () => {
+    const tree: any = renderer.create(<App />).toJSON();
+    expect(tree.children.length).toBe(1);
+  });
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<App />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

__tests__/__mocks__/boardData.mock.ts

@@ -1,6 +1,6 @@
-import { BOARD_SIZES } from "../../src/constants/common";
-import { createBoard } from "../../src/utils/common";
-
-const board = createBoard(BOARD_SIZES._3x3);
-
-export default board;
+import { BOARD_SIZES } from "../../src/constants/common";
+import { createBoard } from "../../src/utils/common";
+
+const board = createBoard(BOARD_SIZES._3x3);
+
+export default board;

__tests__/components/Board.test.tsx

@@ -1,94 +1,94 @@
-import React from "react";
-import renderer from "react-test-renderer";
-import Board from "../../src/components/Board";
-import board from "../__mocks__/boardData.mock";
-import { render, screen, userEvent } from "@testing-library/react-native";
-import { GAME_STATES, PLAYER_O, PLAYER_X } from "../../src/constants/common";
-
-const onPressCallbackGlobal = jest.fn();
-
-const mockProps = {
-  board: board,
-  gameState: GAME_STATES.inProgress,
-  disabled: false,
-  onPressUser: onPressCallbackGlobal,
-};
-
-describe("<Board />", () => {
-  const BoardComponent = () => <Board {...mockProps} />;
-
-  test("renders correctly", () => {
-    const tree = renderer.create(<BoardComponent />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test("return the correct row and col indices when first square pressed", async () => {
-    render(<BoardComponent />);
-
-    const firstSquare = screen.getByTestId("00");
-
-    expect(firstSquare).toBeDefined();
-
-    await userEvent.press(firstSquare);
-
-    //enure the correct row and column indices are correct
-    expect(onPressCallbackGlobal).toHaveBeenCalledWith(0, 0);
-  });
-
-  test("prevent pressing when board is disabled", async () => {
-    const onPressCallback = jest.fn();
-    render(
-      <Board {...mockProps} disabled={true} onPressUser={onPressCallback} />
-    );
-
-    const firstSquare = screen.getByTestId("00");
-
-    expect(firstSquare).toBeDefined();
-
-    await userEvent.press(firstSquare);
-
-    //enure callBack did not fire
-    expect(onPressCallback).not.toHaveBeenCalled();
-  });
-
-  test("should display X and O for PLAYER_X and PLAYER_O", async () => {
-    const boardCopy = board.map((arr) => arr.slice());
-    boardCopy[0][0] = PLAYER_X;
-    boardCopy[0][1] = PLAYER_O;
-    const onPressCallback = jest.fn();
-
-    render(
-      <Board {...mockProps} board={boardCopy} onPressUser={onPressCallback} />
-    );
-
-    //Player X should exist on the board
-    expect(screen.getByText("X")).toBeDefined();
-
-    //Player O should exist on the board
-    expect(screen.getByText("O")).toBeDefined();
-
-    const squareX = screen.getByTestId("00");
-    const squareO = screen.getByTestId("01");
-
-    expect(squareX).toBeDefined();
-    expect(squareO).toBeDefined();
-  });
-
-  test("should disable board when game is ended", async () => {
-    const onPressCallback = jest.fn();
-    render(
-      <Board
-        {...mockProps}
-        gameState={GAME_STATES.ended}
-        onPressUser={onPressCallback}
-      />
-    );
-
-    const square = screen.getByTestId("00");
-
-    await userEvent.press(square);
-
-    //enure board is disabled
-    expect(onPressCallback).not.toHaveBeenCalled();
-  });
-});
+import React from "react";
+import renderer from "react-test-renderer";
+import Board from "../../src/components/Board";
+import board from "../__mocks__/boardData.mock";
+import { render, screen, userEvent } from "@testing-library/react-native";
+import { GAME_STATES, PLAYER_O, PLAYER_X } from "../../src/constants/common";
+
+const onPressCallbackGlobal = jest.fn();
+
+const mockProps = {
+  board: board,
+  gameState: GAME_STATES.inProgress,
+  disabled: false,
+  onPressUser: onPressCallbackGlobal,
+};
+
+describe("<Board />", () => {
+  const BoardComponent = () => <Board {...mockProps} />;
+
+  test("renders correctly", () => {
+    const tree = renderer.create(<BoardComponent />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test("return the correct row and col indices when first square pressed", async () => {
+    render(<BoardComponent />);
+
+    const firstSquare = screen.getByTestId("00");
+
+    expect(firstSquare).toBeDefined();
+
+    await userEvent.press(firstSquare);
+
+    //enure the correct row and column indices are correct
+    expect(onPressCallbackGlobal).toHaveBeenCalledWith(0, 0);
+  });
+
+  test("prevent pressing when board is disabled", async () => {
+    const onPressCallback = jest.fn();
+    render(
+      <Board {...mockProps} disabled={true} onPressUser={onPressCallback} />,
+    );
+
+    const firstSquare = screen.getByTestId("00");
+
+    expect(firstSquare).toBeDefined();
+
+    await userEvent.press(firstSquare);
+
+    //enure callBack did not fire
+    expect(onPressCallback).not.toHaveBeenCalled();
+  });
+
+  test("should display X and O for PLAYER_X and PLAYER_O", async () => {
+    const boardCopy = board.map((arr) => arr.slice());
+    boardCopy[0][0] = PLAYER_X;
+    boardCopy[0][1] = PLAYER_O;
+    const onPressCallback = jest.fn();
+
+    render(
+      <Board {...mockProps} board={boardCopy} onPressUser={onPressCallback} />,
+    );
+
+    //Player X should exist on the board
+    expect(screen.getByText("X")).toBeDefined();
+
+    //Player O should exist on the board
+    expect(screen.getByText("O")).toBeDefined();
+
+    const squareX = screen.getByTestId("00");
+    const squareO = screen.getByTestId("01");
+
+    expect(squareX).toBeDefined();
+    expect(squareO).toBeDefined();
+  });
+
+  test("should disable board when game is ended", async () => {
+    const onPressCallback = jest.fn();
+    render(
+      <Board
+        {...mockProps}
+        gameState={GAME_STATES.ended}
+        onPressUser={onPressCallback}
+      />,
+    );
+
+    const square = screen.getByTestId("00");
+
+    await userEvent.press(square);
+
+    //enure board is disabled
+    expect(onPressCallback).not.toHaveBeenCalled();
+  });
+});