Connor angelis

web-app-testing/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

web-app-testing/README.md

@@ -0,0 +1,63 @@
+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.

web-app-testing/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "web-app-testing",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "styled-components": "^5.0.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"
+    ]
+  },
+  "devDependencies": {
+    "jest": "^24.9.0"
+  }
+}

web-app-testing/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>React App</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>

web-app-testing/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"
+}

web-app-testing/public/robots.txt

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

web-app-testing/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);
+  }
+}

web-app-testing/src/App.js

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import { addStrike } from './utils/addStrike'
+import { addBall } from './utils/addBall'
+import { addFoul } from './utils/foul'
+
+
+import Display from './components/Display';
+import Dashboard from './components/Dashboard';
+
+import './App.css';
+
+const Container = styled.div`
+  background-color: #D3B083;
+  height: 100vh
+`
+
+const Wrapper = styled.div`
+  width: 800px;
+  height: 40vh;
+  background-color: #486030;
+  color: white;
+  font-family: 'Montserrat', sans-serif;
+  margin: 0% auto;
+`
+
+function App() {
+  const [strike, setStrike] = useState(0);
+  const [ball, setBall] = useState(0);
+  const [foul, setFoul] = useState(0);
+
+  const baller = () => {
+    const count =  addBall(ball)
+    if(count === 5){
+      setStrike(0)
+      setBall(0)
+      setFoul(0)
+    } else {
+     setBall(count);
+    }
+  }
+
+  const striker = () =>{
+    const count = addStrike(strike)
+    if(count > 4){
+      setStrike(0)
+      setBall(0)
+      setFoul(0)
+    }
+    else {
+     setStrike(count);
+    }
+  }
+
+  const fouler = () => {
+    const count = addFoul(foul)
+    if(strike < 2){
+      setStrike(strike + 1)
+    }
+    setFoul(count);
+  }
+
+  const hit = () => {
+    setStrike(0)
+    setBall(0)
+    setFoul(0)
+  }
+
+  return (
+    <Container>
+    <Wrapper className="App">
+      <div className="header">
+      <Display strike={strike} ball={ball} foul={foul}/>
+      </div>
+
+      <div className="dashboard">
+        <Dashboard addStrike={striker} addBall={baller} hit={hit} foul={fouler}/>
+      </div>
+    </Wrapper>
+    </Container>
+  );
+}
+
+export default App

web-app-testing/src/components/Dashboard.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Dashboard(props) {
+  return(
+    <div>
+      <button onClick={props.addStrike}>Strike</button>
+      <button onClick={props.addBall}>Ball</button>
+      <button onClick={props.foul}>Foul</button>
+      <button onClick={props.hit}>Hit</button>
+    </div>
+  )}
+
+export default Dashboard;

web-app-testing/src/components/Display.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+function Display(props) {
+  return(
+  <div className="dashboard">
+    <div className="strike">
+      STRIKE: {props.strike}
+    </div>
+
+    <div className="ball">
+      BALL: {props.ball}
+    </div>
+
+    <div className="foul">
+      FOUL: {props.foul}
+    </div>
+  </div>
+  )}
+
+  export default Display;

web-app-testing/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  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',
+    monospace;
+}

web-app-testing/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();