@stanlemon/app-template 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -11,6 +11,7 @@
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
     "test": "jest",
+    "test:watch": "jest -w",
     "test:coverage": "jest --coverage",
     "lint": "eslint --ext js,jsx,ts,tsx ./src/",
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./src/"

package/src/App.test.tsx

@@ -1,18 +1,45 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import App from "./App";
 
-test.skip("<App/>", () => {
-  render(<App />);
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () =>
+      Promise.resolve({
+        token: "token",
+        user: {
+          name: "Test Tester",
+          email: "test@test.com",
+          username: "test",
+          password: "password",
+        },
+      }),
+  })
+) as jest.Mock;
 
-  // The header is present
-  expect(screen.getByRole("heading")).toHaveTextContent("Hello World!");
+test("<App/>", async () => {
+  act(() => {
+    render(<App />);
+  });
+
+  // A fetch request will be made, and then the page will be initialized, wait for that
+  await waitFor(() => {
+    // The header is present
+    expect(screen.getByRole("heading")).toHaveTextContent("Hello World!");
+  });
 
   // Type some data into the input
-  userEvent.type(screen.getByRole("textbox"), "The first item");
+  userEvent.type(screen.getByLabelText("Item"), "The first item");
 
   // Click the add button
-  fireEvent.click(screen.getByRole("button"));
+  fireEvent.click(screen.getByText("Add", { selector: "button" }));
 
   // Now we should have a list item with the text we entered
   expect(screen.getByRole("listitem")).toHaveTextContent("The first item");

package/src/App.tsx

@@ -30,6 +30,7 @@ export type User = {
 };
 
 export default function App() {
+  const [initialized, setInitialized] = useState<boolean>(false);
   const [session, setSession] = useState<Session | null>(null);
   const [value, setValue] = useState<string>("");
   const [items, setItems] = useState<string[]>([]);
@@ -45,6 +46,8 @@ export default function App() {
       },
     })
       .then((response) => {
+        setInitialized(true);
+
         if (!response.ok) {
           throw new Error(response.statusText);
         }
@@ -57,13 +60,21 @@ export default function App() {
       .catch((err) => {
         console.error(err);
       });
-  }, [session?.token]);
+  }, [session?.token, initialized]);
 
   const addItem = () => {
     setItems([...items, value]);
     setValue("");
   };
 
+  if (!initialized) {
+    return (
+      <div>
+        <em>Loading...</em>
+      </div>
+    );
+  }
+
   return (
     <SessionContext.Provider value={contextValue}>
       <Header />
@@ -87,6 +98,7 @@ export default function App() {
       </div>
       <Input
         label="Item"
+        name="item"
         value={value}
         onChange={(value) => setValue(value)}
         onEnter={addItem}

package/src/Input.tsx

@@ -1,5 +1,6 @@
 export default function Input({
   type = "text",
+  name,
   value = "",
   label,
   placeholder,
@@ -12,6 +13,7 @@ export default function Input({
   error,
 }: {
   type?: string;
+  name: string;
   value?: string;
   label?: string;
   placeholder?: string;
@@ -31,9 +33,10 @@ export default function Input({
 
   return (
     <>
-      {label && <label>{label}</label>}
+      {label && <label htmlFor={name}>{label}</label>}
       <input
         type={type}
+        id={name}
         onChange={handleChange}
         onKeyPress={handleKeyPress}
         placeholder={placeholder}

package/src/Login.tsx

@@ -62,11 +62,13 @@ export default function Login() {
         </div>
       )}
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}

package/src/Register.tsx

@@ -58,12 +58,14 @@ export default function Register() {
   return (
     <div>
       <Input
+        name="username"
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
         error={errors.username}
       />
       <Input
+        name="password"
         type="password"
         label="Password"
         value={values.password}

package/db.json

@@ -1,12 +0,0 @@
-{
-  "users": [
-    {
-      "username": "user",
-      "password": "$2a$10$5oHnfhEv5ezdqcVf7k1KNeQ2VVX4Jv0p5tZmhroqbS117umUBrIJO",
-      "id": "defb1788-f2b9-4f74-9a72-f397788592bb",
-      "verification_token": "BkWPUmVb9",
-      "created_at": "2022-03-08T00:42:01.041Z",
-      "last_updated": "2022-03-08T00:42:01.041Z"
-    }
-  ]
-}