react tutorial: finish part one

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.3",
     "prettier": "^1.19.1",
     "react-scripts": "^3.3.0",
     "react-test-renderer": "^16.12.0"

src/components/App/App.spec.js

@@ -15,4 +15,6 @@ describe('App', () => {
     it('should render the Calculator Component', () => {
         expect(wrapper.containsMatchingElement(<Calculator />)).toEqual(true);
     });
+
+    it('should render correctly', () => expect(wrapper).toMatchSnapshot());
 });

src/components/Calculator/Calculator.css

@@ -0,0 +1,5 @@
+.calculator-container {
+    background-color: var(--calculator-background-color);
+    height: var(--calculator-height);
+    width: var(--calculator-width);
+}

src/components/Calculator/Calculator.jsx

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+import './Calculator.css';
+import Display from "../Display/Display";
+import Keypad from '../Keypad/Keypad';
 
 class Calculator extends Component {
     state = {
@@ -27,8 +30,19 @@ class Calculator extends Component {
     }
 
     render = () => {
+        // unpack the component state by using Object Destructuring
+        const { displayValue, numbers, operators } = this.state;
         return (
-            <div className="calculator-container" />
+            <div className="calculator-container">
+                <Display displayValue={displayValue}/>
+                <Keypad
+                    callOperator={this.callOperator}
+                    numbers={numbers}
+                    operators={operators}
+                    setOperator={this.setOperator}
+                    updateDisplay={this.updateDisplay}
+                />
+            </div>
         );
     }
 }

src/components/Calculator/Calculator.spec.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Calculator from './Calculator';
+import Display from '../Display/Display';
+import Keypad from '../Keypad/Keypad';
 
 describe('Calculator', () => {
     let wrapper;
@@ -10,4 +12,19 @@ describe('Calculator', () => {
     it('should render a <div />', () => {
         expect(wrapper.find('div').length).toEqual(1);
     });
+
+    it('should render the Display and Keypad Components', () => {
+        expect(wrapper.containsAllMatchingElements([
+            <Display displayValue={wrapper.instance().state.displayValue} />,
+            <Keypad
+                callOperator={wrapper.instance().callOperator}
+                numbers={wrapper.instance().state.numbers}
+                operators={wrapper.instance().state.operators}
+                setOperator={wrapper.instance().setOperator}
+                updateDisplay={wrapper.instance().updateDisplay}
+            />
+        ])).toEqual(true);
+    });
+
+    it('should render correctly', () => expect(wrapper).toMatchSnapshot());
 });

src/components/Display/Display.css

@@ -0,0 +1,17 @@
+.display-container {
+    align-items: center;
+    background: var(--display-background-color);
+    display: flex;
+    height: var(--display-height);
+    padding: 0 4%;
+    width: var(--display-width);
+}
+
+.display-value {
+    color: var(--display-text-color);
+    font-size: var(--display-text-size);
+    font-family: var(--main-font);
+    font-weight: var(--display-text-weight);
+    margin-left: auto;
+    overflow: hidden;
+}

src/components/Display/Display.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Display.css';
+
+const Display = ({ displayValue }) => <div className="display-container"><p className="display-value">{displayValue}</p></div>;
+
+Display.propTypes = { displayValue: PropTypes.string.isRequired };
+
+export default Display;

src/components/Display/Display.spec.js

@@ -0,0 +1,20 @@
+import {shallow} from 'enzyme';
+import Display from './Display';
+import React from 'react';
+
+describe('Display', () => {
+    let wrapper;
+
+    beforeEach(() => wrapper = shallow(<Display displayValue={''} />));
+
+    it('should render a <div />', () => {
+        expect(wrapper.find('div').length).toEqual(1);
+    });
+
+    it('renders the value of displayValue', () => {
+        wrapper.setProps({ displayValue: 'test' });
+        expect(wrapper.text()).toEqual('test');
+    });
+
+    it('should render correctly', () => expect(wrapper).toMatchSnapshot());
+});

src/components/Keypad/Keypad.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Keypad = ({ callOperator, numbers, operators, setOperator, updateDisplay }) =>
+    <div className="keypad-container" />;
+
+Keypad.propTypes = {
+    callOperator: PropTypes.func.isRequired,
+    numbers: PropTypes.array.isRequired,
+    operators: PropTypes.array.isRequired,
+    setOperator: PropTypes.func.isRequired,
+    updateDisplay: PropTypes.func.isRequired,
+}
+
+export default Keypad;

src/components/Keypad/Keypad.spec.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Keypad from './Keypad';
+
+describe('Keypad', () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = shallow(
+            <Keypad
+                callOperator={jest.fn()}
+                numbers={[]}
+                operators={[]}
+                setOperator={jest.fn()}
+                updateDisplay={jest.fn()}
+            />
+        );
+    });
+
+    it('should render a <div />', () => {
+        expect(wrapper.find('div').length).toEqual(1);
+    });
+});

src/index.css

@@ -1,10 +1,43 @@
-/*
-app variables
-*/
+/* app variables */
 
 :root {
+    /* background colors */
+    --display-background-color: #1d1f1f;
+
     /* font */
     --main-font: 'Orbitron', sans-serif;
+
+    /* font colors */
+    --display-text-color: #23e000;
+
+    /* font sizes */
+    --display-text-size: 4em;
+
+    /* font weights */
+    --display-text-weight: 400;
+
+    /* calculator dimensions */
+    --calculator-height: 72%;
+    --calculator-width: 36%;
+
+    /* display dimensions */
+    --display-height: 24%;
+    --display-width: 92%;
+}
+
+/*
+media query for tablet or smaller screen
+*/
+
+@media screen and (max-width: 1024px) {
+    :root {
+        /* font sizes */
+        --display-text-size: 10em;
+
+        /* calculator dimensions */
+        --calculator-height: 100%;
+        --calculator-width: 100%;
+    }
 }
 
 /*