Merge 3c52c19 into 7169f82

package.json

@@ -15,30 +15,28 @@
     "coveralls": "yarn test --coverage && cat ./coverage/lcov.info | coveralls"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^9.0.2",
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.1.3",
     "@types/classnames": "^2.2.8",
     "@types/howler": "^2.1.0",
-    "@types/jest": "^24.0.17",
-    "@types/node": "^12.7.1",
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.3",
     "@types/reach__router": "^1.2.3",
-    "@types/react": "^16.9.1",
-    "@types/react-dom": "^16.8.5",
-    "@types/react-redux": "^7.0.6",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.2",
     "coveralls": "^3.0.3",
     "cypress": "^3.2.0",
     "jest-dom": "^4.0.0",
     "react-scripts": "^3.1.1",
     "source-map-explorer": "^2.0.1",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-react": "^4.0.0",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.2"
   },
   "dependencies": {
-    "@bugsnag/js": "^6.3.2",
-    "@bugsnag/plugin-react": "^6.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@bugsnag/js": "^6.4.0",
+    "@bugsnag/plugin-react": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
+    "@fortawesome/free-solid-svg-icons": "^5.10.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@reach/router": "^1.2.1",
     "classnames": "^2.2.6",
@@ -48,9 +46,8 @@
     "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",
-    "tslint": "^5.18.0"
+    "react-redux": "^7.1.1",
+    "redux": "^4.0.1"
   },
   "browserslist": [
     ">1%",

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

@@ -75,7 +75,7 @@ it("should render About page when info icon is clicked", async () => {
   expect(queryByText(/Koen van Gilst/)).not.toBeInTheDocument();
 });
 
-it("should render Settings page when cog icon is clicked", async () => {
+it("should be possible to change the name", async () => {
   const { getByLabelText, getByText, getByRole } = renderWithRedux(<App />);
 
   const button = getByLabelText("Settings");
@@ -94,6 +94,40 @@ it("should render Settings page when cog icon is clicked", async () => {
   expect(heading).toHaveTextContent("TIBO");
 });
 
+it("should be not possible to change to a too short name", async () => {
+  const { getByLabelText, getByText, getByRole, debug } = renderWithRedux(
+    <App />
+  );
+
+  const button = getByLabelText("Settings");
+
+  fireEvent.mouseDown(button);
+
+  expect(getByText(/Finding.../)).toBeInTheDocument();
+
+  const input = getByRole("textbox");
+
+  fireEvent.change(input, { target: { value: "TIB" } });
+
+  fireEvent.click(getByText("Save"));
+
+  expect(getByRole("textbox")).toHaveClass("invalid");
+
+  expect(getByText("Save")).toBeDisabled();
+
+  expect(getByRole("heading")).toHaveTextContent("NORA");
+
+  fireEvent.change(input, { target: { value: "THIS IS TO LONG A NAME" } });
+
+  fireEvent.click(getByText("Save"));
+
+  expect(getByRole("textbox")).toHaveClass("invalid");
+
+  expect(getByText("Save")).toBeDisabled();
+
+  expect(getByRole("heading")).toHaveTextContent("NORA");
+});
+
 it("should be possible to restart the game", async () => {
   const { getByLabelText, getByText, queryByText } = renderWithRedux(<App />);
 

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

@@ -3,7 +3,7 @@ import Button from "shared/components/Button";
 import Input from "shared/components/Input";
 import Overlay from "shared/components/Overlay";
 
-const MIN_NAME_LENGTH = 3;
+const MIN_NAME_LENGTH = 4;
 const MAX_NAME_LENGTH = 9;
 
 interface ISettingsProps {
@@ -27,29 +27,29 @@ class Settings extends React.Component<ISettingsProps, ISettingsState> {
   public render() {
     const { solution, updateSolution, restart, onNavigate } = this.props;
     const { value } = this.state;
-    const valid =
-      value.length > MIN_NAME_LENGTH && value.length <= MAX_NAME_LENGTH;
 
     return (
       <Overlay>
         <p>Finding...</p>
         <Input
           type="text"
-          valid={valid}
+          valid={this.isValid(value)}
           name="solution"
           maxLength={9}
           value={value}
           placeholder={solution.join("")}
           onChange={e => {
-            this.setState({ value: e.currentTarget.value.toUpperCase() });
-            const newSolution = e.currentTarget.value.split("");
-            if (valid) {
+            const newValue = e.currentTarget.value.toUpperCase();
+            this.setState({ value: newValue });
+
+            if (this.isValid(newValue)) {
+              const newSolution = newValue.split("");
               updateSolution(newSolution);
             }
           }}
         />
         <Button
-          disabled={!valid}
+          disabled={!this.isValid(value)}
           onClick={() => {
             restart();
             onNavigate("home");
@@ -60,6 +60,10 @@ class Settings extends React.Component<ISettingsProps, ISettingsState> {
       </Overlay>
     );
   }
+
+  private isValid(value: string) {
+    return value.length >= MIN_NAME_LENGTH && value.length <= MAX_NAME_LENGTH;
+  }
 }
 
 export default Settings;