Promptus · Seborider · Oct 29, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "3.0.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,10 +1,34 @@
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import App from "./App"
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import App from "./App";
 
-test("renders learn react link", () => {
-  render(<App />)
-  const linkElement = screen.getByText(/Click here/i)
-  expect(linkElement).toBeInTheDocument()
-})
+describe("App component", () => {
+  test("renders App with ItemsList component", async () => {
+    render(<App />);
+    const button = screen.getByText(/click here/i);
+    expect(button).toBeInTheDocument();
 
+    await waitFor(() => screen.getByText(/Times clicked/));
+  });
+
+  test("clicking button in ItemsList increases count", async () => {
+    render(<App />);
+
+    const button = screen.getByText(/click here/i);
+
+    expect(screen.getByText("0 Times clicked")).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(button);
+    });
+
+    expect(screen.getByText("1 Times clicked")).toBeInTheDocument();
+
+    await waitFor(() => {
+      fireEvent.click(button);
+    });
+
+    expect(screen.getByText("2 Times clicked")).toBeInTheDocument();
+  });
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,19 @@
-import React, { useEffect, useState } from "react"
-import "./App.css"
+import React, { useState } from "react";
+import "./App.css";
+import ItemsList from "./components/items-list/items-list";
+
+const App: React.FC = () => {
+  const [count, setCount] = useState<number>(0);
+
+  const handleIncrement = () => {
+    setCount((prevCount) => prevCount + 1);
+  };
 
-function App() {
-  const [message, setMessage] = useState("")
-  const [count, setCount] = useState(0)
-  useEffect(() => {
-    setMessage(`${count} Times clicked`)
-  })
-  const onClick = () => {
-    setCount(count + 1)
-  }
   return (
     <div className="container">
-      <a href="#" onClick={onClick}>
-        Click here
-      </a>
-      <div style={{ marginLeft: '1rem' }}>{message}</div>
+      <ItemsList count={count} onIncrement={handleIncrement} />
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;
diff --git a/src/components/items-list/items-list.css b/src/components/items-list/items-list.css
@@ -0,0 +1,23 @@
+.page-container {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.items-container {
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+
+.items-container ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.button-message-container {
+  display: flex;
+  gap: 1rem;
+  padding: 20px;
+}
diff --git a/src/components/items-list/items-list.test.tsx b/src/components/items-list/items-list.test.tsx
@@ -0,0 +1,54 @@
+jest.mock("../../services/items-api/items-api-service");
+
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ItemsList from "./items-list";
+import { fetchItems } from "../../services/items-api/items-api-service";
+import { act } from "react-dom/test-utils";
+describe("ItemsList component", () => {
+  let promise: Promise<{ id: string; label: string }[]>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    promise = Promise.resolve([{ id: "1", label: "Item 1" }]);
+
+    (fetchItems as jest.Mock).mockReturnValue(promise);
+  });
+
+  test("fetches and renders items", async () => {
+    act(() => {
+      render(<ItemsList count={0} onIncrement={() => {}} />);
+    });
+
+    await act(() => promise);
+
+    expect(screen.getByText(/Item 1 with ID: 1/)).toBeInTheDocument();
+  });
+
+  test("displays the correct click count message", async () => {
+    act(() => {
+      render(<ItemsList count={3} onIncrement={() => {}} />);
+    });
+
+    await act(() => promise);
+
+    const message = screen.getByText("3 Times clicked");
+    expect(message).toBeInTheDocument();
+  });
+
+  test("button click calls onIncrement", async () => {
+    const handleIncrement = jest.fn();
+
+    act(() => {
+      render(<ItemsList count={0} onIncrement={handleIncrement} />);
+    });
+
+    await act(() => promise);
+
+    fireEvent.click(screen.getByText("Click here"));
+
+    expect(handleIncrement).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/items-list/items-list.tsx b/src/components/items-list/items-list.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import {
+  fetchItems,
+  IListItem,
+} from "../../services/items-api/items-api-service";
+import "./items-list.css";
+
+interface ItemsListProps {
+  count: number;
+  onIncrement: () => void;
+}
+
+const ItemsList: React.FC<ItemsListProps> = ({ count, onIncrement }) => {
+  const [items, setItems] = useState<IListItem[]>([]);
+  const [message, setMessage] = useState<string>("");
+
+  useEffect(() => {
+    setMessage(`${count} Times clicked`);
+  }, [count]);
+
+  useEffect(() => {
+    fetchItems().then((data) => setItems(data));
+  }, []);
+
+  return (
+    <div className="page-container">
+      <div className="items-container">
+        <ul>
+          {items.map((item) => (
+            <li key={item.id}>
+              {item.label} with ID: {item.id}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="button-message-container">
+        <button onClick={onIncrement} aria-label="Increment counter">
+          Click here
+        </button>
+        <div className="message">{message}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ItemsList;
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,11 +1,13 @@
-import React from "react"
-import ReactDOM from "react-dom/client"
-import "./index.css"
-import App from "./App"
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement,
+);
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
-)
+  </React.StrictMode>,
+);
diff --git a/src/services/items-api/items-api-service.ts b/src/services/items-api/items-api-service.ts
@@ -0,0 +1,14 @@
+export interface IListItem {
+  id: number;
+  label: string;
+}
+
+export const fetchItems = (): Promise<IListItem[]> => {
+  return Promise.resolve([
+    { id: 1, label: "Some label 1" },
+    { id: 2, label: "Some label 2" },
+    { id: 3, label: "Some label 3" },
+    { id: 4, label: "Some label 4" },
+    { id: 5, label: "Some label 5" },
+  ]);
+};
diff --git a/src/setupTests.ts b/src/setupTests.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }