react tutorial: first commit

package.json

@@ -12,8 +12,11 @@
     "react-dom": "^16.12.0"
   },
   "devDependencies": {
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "prettier": "^1.19.1",
-    "react-scripts": "3.2.0"
+    "react-scripts": "^3.3.0",
+    "react-test-renderer": "^16.12.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
+    <link href="https://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <title>Calcultronic 5000</title>
   </head>

src/components/App/App.css

@@ -0,0 +1,7 @@
+.app-container {
+    height: 100vh;
+    width: 100vw;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}

src/components/App/App.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import './App.css';
+import Calculator from "../Calculator/Calculator";
+
+const App = () => <div className="app-container"><Calculator/></div>;
+
+export default App;

src/components/App/App.spec.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import App from './App';
+import Calculator from "../Calculator/Calculator";
+
+describe('App', () => {
+    let wrapper;
+
+    beforeEach(() => wrapper = shallow(<App />));
+
+    it('should render a <div />', () => {
+        expect(wrapper.find('div').length).toEqual(1);
+    });
+
+    it('should render the Calculator Component', () => {
+        expect(wrapper.containsMatchingElement(<Calculator />)).toEqual(true);
+    });
+});

src/components/Calculator/Calculator.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+class Calculator extends Component {
+    state = {
+        // value to be displayed in <Display />
+        displayValue: '0',
+        // values to be displayed in number <Keys />
+        numbers: [],
+        // values to be displayed in operator <Keys />
+        operators: [],
+        // operator selected for math operation
+        selectedOperator: '',
+        // stored value to use for math operation
+        storedValue: '',
+    }
+
+    callOperator = () => {
+        console.log('call operation');
+    }
+
+    setOperator = () => {
+        console.log('set operation');
+    }
+
+    updateDisplay = () => {
+        console.log('update display');
+    }
+
+    render = () => {
+        return (
+            <div className="calculator-container" />
+        );
+    }
+}
+
+export default Calculator;

src/components/Calculator/Calculator.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Calculator from './Calculator';
+
+describe('Calculator', () => {
+    let wrapper;
+
+    beforeEach(() => wrapper = shallow(<Calculator />));
+
+    it('should render a <div />', () => {
+        expect(wrapper.find('div').length).toEqual(1);
+    });
+});

src/index.css

@@ -0,0 +1,17 @@
+/*
+app variables
+*/
+
+:root {
+    /* font */
+    --main-font: 'Orbitron', sans-serif;
+}
+
+/*
+app CSS reset
+*/
+
+body, div, p {
+    margin: 0;
+    padding: 0;
+}

src/index.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './index.css';
+import App from './components/App/App';
 
-ReactDOM.render(<div>Hello World!</div>, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));

src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });