add counter and tests

package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --watchAll=false --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -34,5 +34,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/components/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    }
   }
 }

src/App.css

@@ -1,19 +1,5 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -23,16 +9,3 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/components/App.js

@@ -0,0 +1,13 @@
+import Counter from './Counter';
+import '../App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <h1>Welcome to my website!</h1>
+      <Counter />
+    </div>
+  );
+}
+
+export default App;

src/components/Counter.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+
+export default function Counter() {
+  const [count, setCount] = useState(0);
+  function increment() {
+    setCount((count) => count + 1);
+  }
+  function decrement() {
+    setCount((count) => count - 1);
+  }
+  return (
+    <div>
+      <h2>Counter</h2>
+      <p data-testid="count">{count}</p>
+      <button onClick={increment}> + </button>
+      <button onClick={decrement}> - </button>
+    </div>
+  );
+}

src/index.js

@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import App from './components/App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/tests/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from '../components/App';
+
+test('renders welcome message', () => {
+  render(<App />);
+  const welcomeMessage = screen.getByText(/Welcome to my website!/i);
+  expect(welcomeMessage).toBeInTheDocument();
+});

src/tests/Counter.test.js

@@ -0,0 +1,22 @@
+// import necessary react testing library helpers here
+// import the Counter component here
+
+beforeEach(() => {
+  // Render the Counter component here
+})
+
+test('renders counter message', () => {
+  // Complete the unit test below based on the objective in the line above
+});
+
+test('should render initial count with value of 0', () => {
+  // Complete the unit test below based on the objective in the line above
+});
+
+test('clicking + increments the count', () => {
+  // Complete the unit test below based on the objective in the line above
+});
+
+test('clicking - decrements the count', () => {
+  // Complete the unit test below based on the objective in the line above
+});