Adrian guadalupe

README 2.md

@@ -0,0 +1,79 @@
+# Testing II
+
+In this project, you will demonstrate proficiency by writing unit tests and production code to satisfy the _Minimum Viable Product_ described below.
+
+Some of the topics covered were:
+
+- introduction to testing a React application.
+- using the `react-testing-library` testing framework.
+- writing unit tests for React components.
+
+## Instructions
+
+**Read these requirements carefully. Understand exactly what is expected _before_ starting.**
+
+You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the _twenty-minute rule_ and post questions to your cohort's help channel before seeking support from your PM and Instructor.
+
+## Commits
+
+Please push your code often and use descriptive commit messages, this helps you and your project manager.
+
+## Project Description
+
+In this project, you will **write unit tests and the implementation code** for a React application for _Baseball Stadium_ personnel. The application helps them enter information about the game and have that information shown in the _Score Board Display_ for fans to see.
+
+The requirements are listed under the _Minimum Viable Product_ section below.
+
+## Project Set Up
+
+Follow these steps to setup your git _fork_ and _branch_.
+
+- [ ] Fork this repository.
+- [ ] Use GitHub's website to add your project manager as collaborator on **your fork**.
+- [ ] **Clone your forked version** of the repository (**Not Lambda's**!).
+- [ ] Create a new branch: `git checkout -b <firstName-lastName>`.
+- [ ] Commit changes to your `<firstName-lastName>` branch.
+- [ ] Push often to your branch: `git push origin <firstName-lastName>`.
+
+Follow these steps for completing your project.
+
+- [ ] Submit a Pull-Request to merge the `<firstName-lastName>` branch into the master branch on your fork. **Please don't merge your own pull request**
+- [ ] Use GitHub's website to add your project manager as a reviewer on the pull-request.
+- [ ] Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
+
+## Minimum Viable Product
+
+After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
+
+Your job is to design and build a React application that includes at least two components: `Display` and `Dashboard`. **For the MVP you only need to record information about a player's _"at bat"_**.
+
+The specifications are listed below.
+
+### Count Rules
+
+- balls and strikes reset to 0 when a player reaches 3 strikes or 4 balls.
+- balls and strikes reset to 0 when a `hit` is recorded.
+- a `foul` increases strikes up to 2. With no strikes, a foul makes it 1 strike. With 1 strike, a foul makes it 2 strikes. With two strikes a foul has no effect, count stays at 2 strikes.
+
+### Display
+
+- display the count of `balls` and `strikes` for the at-bat.
+- should be updated when the user records activity on the `Dashboard` component.
+
+### Dashboard
+
+- provide a button that the person in charge can press every time there is a `strike`, `ball`, `foul` or `hit`.
+- there is **NO** need to specify the type of hit (single, double, etc).
+- changes recorded on this component should update the information shown by the `Display` component.
+
+Feel free add other components and organize and name your components any way you want to satisfy the requirements. **Make it up and make it happen developer!**.
+
+## Stretch Problem
+
+This section is **optional** and not counted towards MVP. Start working on it after you're done with the main assignment.
+
+- Expand the solution to keep track of all the activity of a single inning. Include the number of outs and track them.
+- Expand the solution to keep track of the number of runs and errors in the inning.
+- Expand the solution to keep track of which bases are occupied and to record hits, doubles, triples and home runs.
+- Expand the solution to keep track of all activity across all innings. Display the current inning.
+- Work on [this repository for extra practice testing a legacy React application](https://github.com/LambdaSchool/React-Testing).

README.md

@@ -1,79 +1,68 @@
-# Testing II
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-In this project, you will demonstrate proficiency by writing unit tests and production code to satisfy the _Minimum Viable Product_ described below.
+## Available Scripts
 
-Some of the topics covered were:
+In the project directory, you can run:
 
-- introduction to testing a React application.
-- using the `react-testing-library` testing framework.
-- writing unit tests for React components.
+### `yarn start`
 
-## Instructions
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-**Read these requirements carefully. Understand exactly what is expected _before_ starting.**
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
 
-You are allowed, and encouraged, to collaborate with your peers while working on this assignment. Remember to follow the _twenty-minute rule_ and post questions to your cohort's help channel before seeking support from your PM and Instructor.
+### `yarn test`
 
-## Commits
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-Please push your code often and use descriptive commit messages, this helps you and your project manager.
+### `yarn build`
 
-## Project Description
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-In this project, you will **write unit tests and the implementation code** for a React application for _Baseball Stadium_ personnel. The application helps them enter information about the game and have that information shown in the _Score Board Display_ for fans to see.
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
 
-The requirements are listed under the _Minimum Viable Product_ section below.
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-## Project Set Up
+### `yarn eject`
 
-Follow these steps to setup your git _fork_ and _branch_.
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
-- [ ] Fork this repository.
-- [ ] Use GitHub's website to add your project manager as collaborator on **your fork**.
-- [ ] **Clone your forked version** of the repository (**Not Lambda's**!).
-- [ ] Create a new branch: `git checkout -b <firstName-lastName>`.
-- [ ] Commit changes to your `<firstName-lastName>` branch.
-- [ ] Push often to your branch: `git push origin <firstName-lastName>`.
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Follow these steps for completing your project.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
-- [ ] Submit a Pull-Request to merge the `<firstName-lastName>` branch into the master branch on your fork. **Please don't merge your own pull request**
-- [ ] Use GitHub's website to add your project manager as a reviewer on the pull-request.
-- [ ] Your project manager will count the project as complete by merging the branch back into the master branch of your forked repository.
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Minimum Viable Product
+## Learn More
 
-After a set of interviews with the potential users of the solution, we gathered the following information about the desired functionality. Not all the information provided by our clients is relevant to the design of the solution, but it's included to help understand the requirements.
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-Your job is to design and build a React application that includes at least two components: `Display` and `Dashboard`. **For the MVP you only need to record information about a player's _"at bat"_**.
+To learn React, check out the [React documentation](https://reactjs.org/).
 
-The specifications are listed below.
+### Code Splitting
 
-### Count Rules
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
 
-- balls and strikes reset to 0 when a player reaches 3 strikes or 4 balls.
-- balls and strikes reset to 0 when a `hit` is recorded.
-- a `foul` increases strikes up to 2. With no strikes, a foul makes it 1 strike. With 1 strike, a foul makes it 2 strikes. With two strikes a foul has no effect, count stays at 2 strikes.
+### Analyzing the Bundle Size
 
-### Display
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
 
-- display the count of `balls` and `strikes` for the at-bat.
-- should be updated when the user records activity on the `Dashboard` component.
+### Making a Progressive Web App
 
-### Dashboard
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
 
-- provide a button that the person in charge can press every time there is a `strike`, `ball`, `foul` or `hit`.
-- there is **NO** need to specify the type of hit (single, double, etc).
-- changes recorded on this component should update the information shown by the `Display` component.
+### Advanced Configuration
 
-Feel free add other components and organize and name your components any way you want to satisfy the requirements. **Make it up and make it happen developer!**.
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
 
-## Stretch Problem
+### Deployment
 
-This section is **optional** and not counted towards MVP. Start working on it after you're done with the main assignment.
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
 
-- Expand the solution to keep track of all the activity of a single inning. Include the number of outs and track them.
-- Expand the solution to keep track of the number of runs and errors in the inning.
-- Expand the solution to keep track of which bases are occupied and to record hits, doubles, triples and home runs.
-- Expand the solution to keep track of all activity across all innings. Display the current inning.
-- Work on [this repository for extra practice testing a legacy React application](https://github.com/LambdaSchool/React-Testing).
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "testing-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.0.2",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Adrian's Baseball Scoreboard</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

src/App.css

@@ -0,0 +1,38 @@
+.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;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Display from './components/Display';
+import Dashboard from './components/Dashboard';
+import './App.css';
+
+
+function App() {
+  const [balls, setBalls] = useState(0);
+  const [strikes, setStrikes] = useState(0);
+  const [atBat, setAtBat] = useState(1);
+
+  return (
+    <div className="App">
+      <Display balls={balls} strikes={strikes} atBat={atBat} />
+      <Dashboard 
+        balls={balls} 
+        strikes={strikes} 
+        setBalls={setBalls} 
+        setStrikes={setStrikes} 
+        atBat={atBat} 
+        setAtBat={setAtBat} />
+    </div>
+  );
+}
+
+export default App;