basic four buttons work with tests

Author: sarah11918

src/App.js

@@ -1,15 +1,56 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
-import Counter from './Counter/Counter'
+//import Counter from './Counter/Counter'
 import Scoreboard from './Baseball/Scoreboard';
+import Display from './Baseball/components/Display.js';
+import Controls from './Baseball/components/Controls';
 
 
 function App() {
+  const [strikes, setStrikes] = useState(0);
+  const [balls, setBalls] = useState (0);
+
+  const throwStrike = () => {
+    if (strikes === 2){
+      setStrikes(0);
+      setBalls(0);
+    } else {
+    setStrikes(strikes + 1);
+    }
+  };
+
+  const throwBall = () => {
+    if(balls === 3) {
+      setBalls(0);
+      setStrikes(0);
+    }
+    else
+    {
+    setBalls(balls + 1);
+    }
+  };
+
+  const throwFoul = () => {
+    if (strikes < 2 ){
+      setStrikes(strikes + 1)
+    }
+  };
+
+  const throwHit = () => {
+    setStrikes(0);
+    setBalls(0);
+  };
   return (
     <div className="App">
-      <Scoreboard />
+      <Display strikes={strikes} balls={balls}/>
+      <Controls 
+        executeStrike={throwStrike}
+        executeBall={throwBall}
+        executeFoul={throwFoul}
+        executeHit={throwHit}
+      />
     </div>
   );
 }
 
-export default App;
+export default App;

src/App.test.js

@@ -1,7 +1,92 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import App from './App';
 
 test('renders header correctly', () => {
   render(<App />);
 });
+
+test("Strike button increases strikes by one when clicked", ()=> {
+  
+  render(<App/>);
+  const strikeButton = screen.getByRole("button", {name: /strike/i});
+  fireEvent.click(strikeButton);
+  fireEvent.click(strikeButton);
+  const strikeElement = screen.getByText("Strikes: 2");
+  expect(strikeElement).toBeInTheDocument();
+});
+
+test ("ball button increases ball count by 1", () => {
+  render(<App />);
+  const ballButton = screen.getByRole("button", {name: /ball/i});
+  fireEvent.click(ballButton);
+  const ballElement = screen.getByText("Balls: 1");
+  expect(ballElement).toBeInTheDocument();
+});
+
+test ("foul button increases strikes", ()=> {
+  render (<App />);
+  const foulButton = screen.getByRole("button", {name: /foul/i});
+  fireEvent.click(foulButton);
+  const strikesElement = screen.getByText("Strikes: 1");
+  expect(strikesElement).toBeInTheDocument();
+});
+
+test ("foul button does NOT increase strikes if there are 2 strikes", ()=> {
+  render (<App />);
+  const foulButton = screen.getByRole("button", {name: /foul/i});
+  fireEvent.click(foulButton);
+  fireEvent.click(foulButton);
+  fireEvent.click(foulButton);
+  const strikesElement = screen.getByText("Strikes: 2");
+  expect(strikesElement).toBeInTheDocument();
+});
+
+test("hit button clears both balls and strikes", ()=>{
+  render(<App />);
+  const hitButton = screen.getByRole("button", {name: /hit/i});
+  const strikeButton = screen.getByRole("button", {name: /strike/i});
+  const ballButton = screen.getByRole("button", {name: /ball/i})
+  fireEvent.click(strikeButton);
+  fireEvent.click(strikeButton);
+  fireEvent.click(ballButton);
+  fireEvent.click(hitButton);
+  const strikesElement = screen.getByText("Strikes: 0");
+  const ballsElement = screen.getByText("Balls: 0");
+  expect(strikesElement).toBeInTheDocument();
+  expect(ballsElement).toBeInTheDocument();
+})
+
+test("3rd strike is a strikout, resets all counts", ()=>{
+  render(<App />);
+  
+  const strikeButton = screen.getByRole("button", {name: /strike/i});
+  const ballButton = screen.getByRole("button", {name: /ball/i})
+  fireEvent.click(strikeButton);
+  fireEvent.click(ballButton);
+  fireEvent.click(ballButton);
+  fireEvent.click(strikeButton);
+  fireEvent.click(strikeButton);
+  
+  const strikesElement = screen.getByText("Strikes: 0");
+  const ballsElement = screen.getByText("Balls: 0");
+  expect(strikesElement).toBeInTheDocument();
+  expect(ballsElement).toBeInTheDocument();
+})
+
+test("4th ball is a walk, resets all counts", ()=>{
+  render(<App />);
+  
+  const strikeButton = screen.getByRole("button", {name: /strike/i});
+  const ballButton = screen.getByRole("button", {name: /ball/i})
+  fireEvent.click(ballButton);
+  fireEvent.click(ballButton);
+  fireEvent.click(ballButton);
+  fireEvent.click(strikeButton);
+  fireEvent.click(ballButton);
+  
+  const strikesElement = screen.getByText("Strikes: 0");
+  const ballsElement = screen.getByText("Balls: 0");
+  expect(strikesElement).toBeInTheDocument();
+  expect(ballsElement).toBeInTheDocument();
+});

src/Baseball/Scoreboard.jsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import Display from './components/Display';
+import Controls from './components/Controls';
+
 
 function Scoreboard(){
     return(
+        <>
         <Display strikes={2} balls={1}/>
+        <Controls />
+        </>
     )
 }
 

src/Baseball/components/Controls.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Controls({executeStrike, executeBall, executeFoul, executeHit}){
+    return(
+        <div>
+            <button onClick={executeStrike}>strike</button>
+            <button onClick={executeBall}>ball</button>
+            <button onClick={executeFoul}>foul</button>
+            <button onClick={executeHit}>hit</button>
+        </div>
+    )
+}

src/Baseball/components/Controls.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {fireEvent, render, screen} from '@testing-library/react';
+import Controls from './Controls'
+
+test("Controls component renders the four buttons", ()=> {
+    render(<Controls />);
+    const strikeButton = screen.getByRole("button", {name:/strike/i});
+    const ballButton = screen.getByRole("button", {name:/ball/i});
+    const foulButton = screen.getByRole("button", {name:/foul/i});
+    const hitButton = screen.getByRole("button", {name:/hit/i});
+    expect(strikeButton).toBeInTheDocument();
+    expect(ballButton).toBeInTheDocument();
+    expect(foulButton).toBeInTheDocument();
+    expect(hitButton).toBeInTheDocument();
+});
+
+// test("Strike button receives and executes a prop function", ()=>{
+//     render(<Controls executeStrike={ ()=>console.log('strike') } />);
+//     const strikeButton = screen.getByRole("button", {name:/strike/i});
+//     fireEvent.click(strikeButton);
+// })
+
+// test("Strike button receives and executes a prop function", ()=>{
+//     let clicked = false
+//     render(<Controls executeStrike={ ()=>clicked = true } />);
+//     const strikeButton = screen.getByRole("button", {name:/strike/i});
+//     fireEvent.click(strikeButton);
+//     expect(clicked).toBe(true);
+// })
+
+test("Strike button receives and executes a prop function", ()=>{
+    let click = jest.fn();
+    render(<Controls executeStrike={click} />);
+    const strikeButton = screen.getByRole("button", {name:/strike/i});
+    fireEvent.click(strikeButton);
+    expect(click).toBeCalled();
+});
+
+test("Ball button receives and executes a prop function", ()=>{
+    let click = jest.fn();
+    render(<Controls executeBall={click} />);
+    const ballButton = screen.getByRole("button", {name:/ball/i});
+    fireEvent.click(ballButton);
+    expect(click).toBeCalled();
+});
+
+test("Foul button receives and executes a prop function", ()=>{
+    let click = jest.fn();
+    render(<Controls executeFoul={click} />);
+    const foulButton = screen.getByRole("button", {name:/foul/i});
+    fireEvent.click(foulButton);
+    expect(click).toBeCalled();
+});
+
+test("Hit button receives and executes a prop function", ()=>{
+    let click = jest.fn();
+    render(<Controls executeHit={click} />);
+    const hitButton = screen.getByRole("button", {name:/hit/i});
+    fireEvent.click(hitButton);
+    expect(click).toBeCalled();
+});