Merge 99b48ad into 06a4539

.travis.yml

@@ -1,11 +1,22 @@
 language: node_js
 node_js:
   - 10
+addons:
+  apt:
+    packages:
+      - libgconf-2-4
 cache:
   yarn: true
+  directories:
+    - ~/.cache
+    - ~/.npm
+    - ~/.yarn
+  override:
+    - npm ci
 before_script:
   - yarn start --silent &
 script:
   - yarn
+  - npx cypress install
   - yarn verify
   - yarn coveralls

package.json

@@ -15,21 +15,24 @@
     "coveralls": "yarn test --coverage && cat ./coverage/lcov.info | coveralls"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^9.0.2",
     "@types/classnames": "^2.2.8",
     "@types/howler": "^2.1.0",
-    "@types/jest": "^24.0.11",
-    "@types/node": "^12.0.8",
+    "@types/jest": "^24.0.17",
+    "@types/node": "^12.7.1",
     "@types/reach__router": "^1.2.3",
-    "@types/react": "^16.8.12",
-    "@types/react-dom": "^16.8.3",
+    "@types/react": "^16.9.1",
+    "@types/react-dom": "^16.8.5",
     "@types/react-redux": "^7.0.6",
     "coveralls": "^3.0.3",
     "cypress": "^3.2.0",
-    "jest-dom": "^3.5.0",
-    "react-scripts": "^2.1.8",
-    "react-testing-library": "^6.1.2",
-    "source-map-explorer": "^1.8.0",
-    "typescript": "^3.5.2"
+    "jest-dom": "^4.0.0",
+    "react-scripts": "^3.1.0",
+    "source-map-explorer": "^2.0.1",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react": "^4.0.0",
+    "typescript": "^3.5.3"
   },
   "dependencies": {
     "@bugsnag/js": "^6.3.2",
@@ -39,13 +42,15 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@reach/router": "^1.2.1",
     "classnames": "^2.2.6",
+    "global": "^4.4.0",
     "howler": "^2.1.2",
     "minimal-analytics": "^0.1.15",
     "prevent-double-tap-zoom": "^2.0.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "tslint": "^5.18.0"
   },
   "eslintConfig": {
     "extends": "react-app"

src/finding-colors/App.tsx

@@ -1,10 +1,10 @@
 import { RouteComponentProps } from "@reach/router";
 import * as React from "react";
-import BackgroundImage from "src/shared/components/BackgroundImage";
-import Grid from "src/shared/components/Grid";
-import Overlay from "src/shared/components/Overlay";
-import Button from "src/shared/components/Button";
-import { sample } from "src/shared/utils/general";
+import BackgroundImage from "shared/components/BackgroundImage";
+import Grid from "shared/components/Grid";
+import Overlay from "shared/components/Overlay";
+import Button from "shared/components/Button";
+import { sample } from "shared/utils/general";
 import "./App.css";
 import dog from "./charles-deluvio-628935-unsplash.jpg";
 

src/finding-colors/__tests__/App.test.js

@@ -1,38 +1,40 @@
-import "jest-dom/extend-expect";
+import "@testing-library/jest-dom/extend-expect";
 import React from "react";
 import {
   cleanup,
   fireEvent,
   render,
   waitForElement
-} from "react-testing-library";
+} from "@testing-library/react";
 import { mockMathRandom } from "../../shared/test-utils/mockMathRandom";
 import App from "../App";
 
 mockMathRandom();
 
 let question;
 let getByTestId;
+let getAllByTestId;
 let utils;
 
 beforeEach(() => {
   utils = render(<App />);
   getByTestId = utils.getByTestId;
+  getAllByTestId = utils.getAllByTestId;
   question = getByTestId("question");
 });
 
 afterEach(() => {
   cleanup();
 });
 
-it("should render App with question ORANGE", () => {
-  expect(question.textContent).toContain("ORANGE");
+it("should render App with question WHITE", () => {
+  expect(question.textContent).toContain("WHITE");
 });
 
 it("should show you won when pressing correct color", async () => {
-  const orangeButton = getByTestId(`button-orange`);
-  expect(orangeButton).toBeInTheDocument();
-  fireEvent.mouseDown(orangeButton);
+  const button = getAllByTestId(`button-purple`)[0];
+  expect(button).toBeInTheDocument();
+  fireEvent.mouseDown(button);
   await waitForElement(() => getByTestId("youwon"));
   const youWon = getByTestId("youwon");
   expect(youWon).toBeInTheDocument();

src/finding-words/App.tsx

@@ -2,14 +2,16 @@ import { faCog, faInfoCircle, faRedo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { RouteComponentProps } from "@reach/router";
 import * as React from "react";
-import Game from "src/finding-words/components/Game/";
-import AboutPage from "src/finding-words/pages/About";
-import NewGamePage from "src/finding-words/pages/NewGame";
-import SettingsPage from "src/finding-words/pages/Settings";
-import BackgroundImage from "src/shared/components/BackgroundImage";
-import BottomBar from "src/shared/components/BottomBar";
-import Button from "src/shared/components/Button";
-import Overlay from "src/shared/components/Overlay";
+
+import Game from "./components/Game/";
+import AboutPage from "./pages/About";
+import NewGamePage from "./pages/NewGame";
+import SettingsPage from "./pages/Settings";
+
+import BackgroundImage from "shared/components/BackgroundImage";
+import BottomBar from "shared/components/BottomBar";
+import Button from "shared/components/Button";
+import Overlay from "shared/components/Overlay";
 import "./App.css";
 
 const festenUrl =

src/finding-words/AppContainer.tsx

@@ -1,13 +1,9 @@
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import {
-  didLoose,
-  didWin,
-  getRemainingSolution
-} from "src/finding-words/model/puzzle-utils";
-import * as gameActions from "src/finding-words/redux/game-actions";
-import { IStoreState } from "src/finding-words/types";
-import * as navigationActions from "src/shared/redux/navigation-actions";
+import { didLoose, didWin, getRemainingSolution } from "./model/puzzle-utils";
+import * as gameActions from "./redux/game-actions";
+import { IStoreState } from "./types";
+import * as navigationActions from "shared/redux/navigation-actions";
 import App from "./App";
 
 const mapStateToProps = ({ game, navigation }: IStoreState) => {

src/finding-words/components/Game/Game.tsx

@@ -1,12 +1,7 @@
 import * as React from "react";
-import {
-  GridType,
-  IGameState,
-  IGridItem,
-  StatusEnum
-} from "src/finding-words/types";
+import { GridType, IGameState, IGridItem, StatusEnum } from "../../types";
 
-import Grid from "src/shared/components/Grid";
+import Grid from "shared/components/Grid";
 
 interface IAddAnswer {
   answer: IGridItem;

src/finding-words/components/Game/GameContainer.ts

@@ -1,14 +1,6 @@
-import {
-  isCorrectAnswer,
-  isCorrectLetter
-} from "src/finding-words/model/puzzle-utils";
-import * as actions from "src/finding-words/redux/game-actions";
-import {
-  GridType,
-  IGridItem,
-  IStoreState,
-  StatusEnum
-} from "src/finding-words/types";
+import { isCorrectAnswer, isCorrectLetter } from "../../model/puzzle-utils";
+import * as actions from "../../redux/game-actions";
+import { GridType, IGridItem, IStoreState, StatusEnum } from "../../types";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import Game from "./Game";

src/finding-words/model/__tests__/puzzle-generator.test.ts

@@ -1,4 +1,4 @@
-import { mockMathRandom } from "src/shared/test-utils/mockMathRandom";
+import { mockMathRandom } from "shared/test-utils/mockMathRandom";
 import PuzzleGenerator from "../puzzle-generator";
 
 const noise = "ABCDEFGHIJKLMNOPQRSTVWUXYZ".split("");

src/finding-words/model/__tests__/puzzle-utils.test.ts

@@ -1,5 +1,5 @@
-import { GridType, StatusEnum } from "src/finding-words/types";
-import { mockMathRandom } from "src/shared/test-utils/mockMathRandom";
+import { GridType, StatusEnum } from "../../types";
+import { mockMathRandom } from "shared/test-utils/mockMathRandom";
 import PuzzleGenerator from "../puzzle-generator";
 import { didWin, isCorrectAnswer } from "../puzzle-utils";
 

src/finding-words/model/puzzle-generator.ts

@@ -1,9 +1,9 @@
-import { GridType, IGridItem } from "src/finding-words/types";
-import { sample } from "src/shared/utils/general";
+import { sample } from "shared/utils/general";
 import {
   mirrorMatrixHorizontally,
   rotateMatrixCounterClockwise
-} from "src/shared/utils/matrix";
+} from "shared/utils/matrix";
+import { GridType, IGridItem } from "../types";
 
 class PuzzleGenerator {
   public grid: GridType;
@@ -153,12 +153,10 @@ class PuzzleGenerator {
 
   public updateIndices() {
     this.grid.forEach((columns, row) =>
-      columns.map((el, column) => {
-        this.grid[row][column] = {
-          ...el,
-          column,
-          row
-        };
+      columns.map((el, column) => this.grid[row][column] = {
+        ...el,
+        column,
+        row
       })
     );
   }

src/finding-words/model/puzzle-utils.ts

@@ -1,4 +1,4 @@
-import { GridType, IGridItem, StatusEnum } from "src/finding-words/types";
+import { GridType, IGridItem, StatusEnum } from "../types";
 
 interface ICorrectAnswer {
   answer: IGridItem;

src/finding-words/pages/About/About.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import Button from "src/shared/components/Button";
-import Overlay from "src/shared/components/Overlay";
+import Button from "shared/components/Button";
+import Overlay from "shared/components/Overlay";
 import "./About.css";
 
 interface IAboutPageProps {
@@ -13,7 +13,12 @@ const AboutPage = ({ onClose }: IAboutPageProps) => {
       <p>
         Game created by <a href="https://koenvangilst.nl">Koen van Gilst</a>
       </p>
-      <p>Extensive beta testing by my kids 🐵🐵</p>
+      <p>
+        Extensive beta testing by my kids{" "}
+        <span role="img" aria-label="two emoji monkeys">
+          🐵🐵
+        </span>
+      </p>
       <p>
         Source code on{" "}
         <a href="https://github.com/vnglst/finding-nora">Github</a>

src/finding-words/pages/NewGame/NewGame.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import Button from "src/shared/components/Button";
-import Overlay from "src/shared/components/Overlay";
+import Button from "shared/components/Button";
+import Overlay from "shared/components/Overlay";
 
 interface INewGameProps {
   onNavigate: (screen: string) => void;

src/finding-words/pages/Settings/Settings.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import Button from "src/shared/components/Button";
-import Input from "src/shared/components/Input";
-import Overlay from "src/shared/components/Overlay";
+import Button from "shared/components/Button";
+import Input from "shared/components/Input";
+import Overlay from "shared/components/Overlay";
 
 const MIN_NAME_LENGTH = 3;
 const MAX_NAME_LENGTH = 9;

src/finding-words/redux/audio-middleware.ts

@@ -1,5 +1,5 @@
-import { didWin } from "src/finding-words/model/puzzle-utils";
-import { IStoreState, StatusEnum } from "src/finding-words/types";
+import { didWin } from "../model/puzzle-utils";
+import { IStoreState, StatusEnum } from "../types";
 import { Dispatch, Middleware, MiddlewareAPI } from "redux";
 import { loadSounds } from "./audio-init";
 import { ADD_ANSWER, RESTART } from "./constants";

src/finding-words/redux/game-actions.ts

@@ -1,4 +1,4 @@
-import { IGridItem } from "src/finding-words/types";
+import { IGridItem } from "../types";
 import * as constants from "./constants";
 
 export type GameActionType =

src/finding-words/redux/reducers.ts

@@ -1,5 +1,5 @@
-import PuzzleGenerator from "src/finding-words/model/puzzle-generator";
-import { IGameState } from "src/finding-words/types";
+import PuzzleGenerator from "../model/puzzle-generator";
+import { IGameState } from "../types";
 import { ADD_ANSWER, RESTART, UPDATE_SOLUTION } from "./constants";
 import { GameActionType } from "./game-actions";
 

src/index.tsx

@@ -5,11 +5,11 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { applyMiddleware, compose, createStore } from "redux";
-import FindingColors from "src/finding-colors";
-import FindingWords from "src/finding-words";
-import { audioMiddleware } from "src/finding-words/redux/audio-middleware";
-import { IStoreState } from "src/finding-words/types";
-import rootReducer from "src/shared/redux/root-reducer";
+import FindingColors from "finding-colors";
+import FindingWords from "finding-words";
+import { audioMiddleware } from "finding-words/redux/audio-middleware";
+import { IStoreState } from "finding-words/types";
+import rootReducer from "shared/redux/root-reducer";
 import "./index.css";
 import register from "./registerServiceWorker";
 import { BugsnagErrorBoundary } from "./shared/utils/bugsnag";

src/shared/components/Button/Button.tsx

@@ -1,13 +1,20 @@
 import cx from "classnames";
-import * as React from "react";
+import React, { FunctionComponent } from "react";
 import "./Button.css";
 
-interface IButtonProps extends React.HTMLProps<HTMLButtonElement> {
+interface IButtonProps {
   children: React.ReactNode;
   className?: string;
+  disabled?: boolean;
+  onMouseDown?: React.EventHandler<React.MouseEvent<HTMLElement>>;
+  onClick?: React.EventHandler<React.MouseEvent<HTMLElement>>;
 }
 
-const Button = ({ children, className, ...other }: IButtonProps) => (
+const Button: FunctionComponent<IButtonProps> = ({
+  children,
+  className,
+  ...other
+}) => (
   <button className={cx("button", className)} {...other}>
     {children}
   </button>

src/shared/redux/navigation-reducer.ts

@@ -1,4 +1,4 @@
-import { INavigationState } from "src/finding-words/types";
+import { INavigationState } from "finding-words/types";
 import { SET_ACTIVE_PAGE } from "./constants";
 import { NavigationActionType } from "./navigation-actions";
 

src/shared/redux/root-reducer.ts

@@ -1,4 +1,4 @@
-import game from "src/finding-words/redux/reducers";
+import game from "finding-words/redux/reducers";
 import { combineReducers } from "redux";
 import navigation from "./navigation-reducer";