Snapshot while we figure out how to push to a new remote.

Author: sarah11918

package-lock.json

@@ -2,16 +2,6 @@
   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;

src/App.css

@@ -0,0 +1,14 @@
+import React from 'react';
+import './App.css';
+import Counter from './Counter/Counter'
+
+
+function App() {
+  return (
+    <div className="App">
+      <Counter />
+    </div>
+  );
+}
+
+export default App;

src/App.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders header correctly', () => {
+  render(<App />);
+  const headerElement = screen.getByText("My Counter");
+  expect(headerElement).toBeInTheDocument();
+});

src/App.test.js

@@ -0,0 +1,7 @@
+.red {
+    color: red;
+}
+
+.green {
+    color: green;
+}

src/App.test.tsx

@@ -0,0 +1,31 @@
+import React, {useState} from 'react';
+import "./Counter.css";
+
+function Counter(){
+    const [count, setCount] = useState(0)
+    const [step, setStep] = useState(1);
+    return(
+        <div>
+            <h2 data-testid="header">My Counter</h2>
+            <h1 data-testid="counter"
+                className={`${count} >=100 ? green : ${count} < 0 ? "red" : ""}`}
+            >{count}</h1>
+
+            <button data-testid="subtract-button"
+                onClick={()=>setCount(count-step)}>-</button>
+            <input 
+                style={{width:"25%", textAlign:"center"}}
+                type="number" 
+                data-testid="input" 
+                value= {step} 
+                onChange={(element)=>setStep(parseInt(element.target.value))} />
+            <button data-testid="add-button"
+            
+                onClick={()=>setCount(count + step)}>+</button>
+            <h3 data-testid="step">{step}</h3>
+            
+        </div>
+    )
+}
+
+export default Counter

src/App.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Counter from './Counter';
+import "@testing-library/jest-dom/extend-expect"
+
+let getByTestId
+beforeEach(()=>{
+    const component = render(<Counter />)
+    getByTestId = component.getByTestId
+})
+
+
+test("header renders with correct test", ()=> {
+   
+    const headerElement = getByTestId("header");
+
+    expect(headerElement.textContent).toBe("My Counter");
+});
+
+
+test("counter element initially shows 0",()=>{
+
+    const counterElement = getByTestId("counter");
+
+    expect(counterElement.textContent).toBe("0");
+});
+
+// test("input element initially shows 1",()=>{
+
+//     const inputElement = getByTestId("input");
+
+//     expect(inputElement.value).toBe("1");
+// });
+
+test("add button renders +",()=>{
+
+    const addButton = getByTestId("add-button");
+
+    expect(addButton.textContent).toBe("+");
+});
+test("subtract button renders - ",()=>{
+
+    const subtractButton = getByTestId("subtract-button");
+
+    expect(subtractButton.textContent).toBe("-");
+});
+
+// test("input element value can be changed and used",()=>{
+
+//     const inputElement = getByTestId("input");
+//     fireEvent.change(inputElement,{target:{value: "5"}})
+//     expect(inputElement.value).toBe("5");
+// });
+test("input element value can be changed and used",()=>{
+ 
+    const inputElement = getByTestId("input");
+    const stepElement = getByTestId("step")
+
+    expect(inputElement.value).toBe("1");
+
+    fireEvent.change(inputElement,{target:{value: "5"}})
+    expect(inputElement.value).toBe("5");
+    expect(stepElement.textContent).toBe("5");
+});
+
+test("clicking on + button adds 1 to counter initially",()=>{
+
+    const addButton = getByTestId("add-button");
+    const counterElement = getByTestId("counter");
+    expect(counterElement.textContent).toBe("0")
+    fireEvent.click(addButton);
+
+    expect(counterElement.textContent).toBe("1")
+});
+
+test("changing input value then clicking add works",()=>{
+ 
+    const addButton = getByTestId("add-button");
+    const counterElement = getByTestId("counter");
+    const inputElement = getByTestId("input")
+    
+    fireEvent.change(inputElement,{target:{value: "5"}})
+    fireEvent.click(addButton);
+
+    expect(counterElement.textContent).toBe("5")
+    fireEvent.click(addButton);
+
+    expect(counterElement.textContent).toBe("10")
+});
+
+test("changing input value then clicking subtract works",()=>{
+ 
+    const subtractButton = getByTestId("subtract-button");
+    const counterElement = getByTestId("counter");
+    const inputElement = getByTestId("input")
+    
+    fireEvent.change(inputElement,{target:{value: "5"}})
+    fireEvent.click(subtractButton);
+
+    expect(counterElement.textContent).toBe("-5")
+});
+
+test("add then subtract should cancel back out to 0",()=>{
+   
+    const addButton = getByTestId("add-button");
+    const subtractButton = getByTestId("subtract-button")
+    const counterElement = getByTestId("counter");
+    const inputElement = getByTestId("input")
+    
+    fireEvent.change(inputElement,{target:{value: "5"}})
+    fireEvent.click(addButton);
+
+    expect(counterElement.textContent).toBe("5")
+    fireEvent.click(subtractButton);
+
+    expect(counterElement.textContent).toBe("0")
+});
+
+test("counter changes to green at value over 100",()=>{
+  
+    const counterElement = getByTestId("counter");
+    const inputElement = getByTestId("input");
+    const addButton = getByTestId("add-button")
+    fireEvent.change(inputElement,{target:{value: "50"}})
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+
+
+    expect(counterElement.className).toContain("green")
+});
+
+test("counter changes to red at negative values",()=>{
+
+    const counterElement = getByTestId("counter");
+    const inputElement = getByTestId("input");
+    const subtractButton = getByTestId("subtract-button")
+    fireEvent.change(inputElement,{target:{value: "50"}})
+    fireEvent.click(subtractButton);
+    fireEvent.click(subtractButton);
+
+
+    expect(counterElement.className).toContain("red")
+});

src/Counter/Counter.css

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "../.."
+		}
+	],
+	"settings": {}
+}