component created

workshop/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,9 +13,11 @@
     "@types/node": "^16.11.65",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "babel-jest": "^29.1.2",
+    "jest": "^27.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-native-cli": "^2.0.1"
   }
 }

workshop/src/App.tsx

 import './App.css';
+import AmountPicker from './components/AmountPicker';
 
-function App() {
-  return (
-    <div className="App">
-      <p>Hejsan</p>
-    </div>
-  );
+const App = () => {
+  return <AmountPicker></AmountPicker>
 }
 
 export default App;

workshop/src/__tests__/App.test.tsx

-import React from 'react';
 import { render, screen } from '@testing-library/react';
+import AmountPicker from '../components/AmountPicker';
 import App from '../App';
 
-test('Hejsan is in on the page', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/Hejsan/i);
-  expect(linkElement).toBeInTheDocument();
+test('Testing + button rendering', () => {
+  render(<AmountPicker />)
+  const increaseButton = screen.getByRole('button',{name: '+'})
+  expect(increaseButton).toBeInTheDocument()
 });
+
+test('Testing - button rendering', () => {
+  render(<AmountPicker />)
+  const decreaseButton = screen.getByRole('button',{name: '-'})
+  expect(decreaseButton).toBeInTheDocument()
+});
\ No newline at end of file

workshop/src/components/AmountPicker.tsx

+import Button from "@mui/material/Button"
+import { useState } from "react"
+import { ButtonGroup, TextField } from "@mui/material"
+import { Stack } from "@mui/system"
+
+function AmountPicker() {
+    
+    const [count, setCount] = useState(0)
+
+    const increaseCount = () => {
+        setCount(count + 1)
+    }
+
+    const decreaseCount = () => {
+        setCount(count - 1)
+    }
+
+    return (
+        <div>
+            <Stack spacing={3}>
+                <Button onClick={increaseCount} variant="contained">+</Button>
+                    <div>
+                        {count}
+                    </div>
+                <Button onClick={decreaseCount} variant="contained">-</Button>
+            </Stack>
+        </div>
+    )
+}
+
+export default AmountPicker
\ No newline at end of file