Feature/testing

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.coverage

package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "big.js": "^6.1.1",
     "prop-types": "^15.8.1",
@@ -13,6 +11,7 @@
     "react-lorem-ipsum": "^1.4.10",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-test-renderer": "^17.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +44,8 @@
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.25.4",

src/App.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Routes, Route, Link } from 'react-router-dom';
 import './App.css';
-import { LoremIpsum } from 'react-lorem-ipsum';
 import Calculator from './components/Calculator';
 
 const App = () => (
@@ -27,7 +26,22 @@ function Home() {
     <>
       <main>
         <h2>Welcome to our homepage!</h2>
-        <LoremIpsum p={2} />
+        <p>
+          Lorem ipsum odor amet, consectetuer adipiscing elit. Hac luctus mi et neque non
+          interdum nisi dapibus. Natoque vestibulum penatibus consectetur purus neque
+          nullam. Ante sodales fermentum varius, sodales curabitur fames eros. Habitant
+          rutrum tincidunt at luctus nam cubilia. Himenaeos facilisi suspendisse libero
+          ac massa viverra potenti condimentum. Habitasse non hac lacinia; vulputate eget
+          amet libero placerat. Facilisi gravida dapibus elementum arcu justo lacus felis.
+        </p>
+        <p>
+          Venenatis dictum odio auctor consectetur cursus tristique habitasse feugiat.
+          In nisl duis congue rhoncus egestas congue a. Faucibus aliquet fames nascetur
+          orci placerat vehicula nunc. Mollis mauris class fames malesuada; molestie
+          curabitur senectus. Tempor etiam cursus diam dolor mattis convallis himenaeos.
+          Tortor varius nullam malesuada primis lacinia nascetur proin aliquam porttitor.
+          Vel dui pretium ullamcorper pellentesque nisi per montes vehicula.
+        </p>
       </main>
     </>
   );

src/__test__/App.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import App from '../App';
+
+describe('Test Router behaviour', () => {
+  it('When user presses Quote in navbar it will render Quote page', () => {
+    const { container } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>,
+    );
+    const quoteLink = screen.getByText('Quote');
+    fireEvent.click(quoteLink);
+    const main = container.querySelector('main');
+    expect(main).toMatchSnapshot();
+  });
+
+  it('When user presses Home in navbar it will render Home page', () => {
+    const { container } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>,
+    );
+    const homeLink = screen.getByText('Home');
+    fireEvent.click(homeLink);
+    const main = container.querySelector('main');
+    expect(main).toMatchSnapshot();
+  });
+
+  it('When user presses Calculator in navbar it will render Calculator page', () => {
+    const { container } = render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>,
+    );
+    const calculatorLink = screen.getByText('Calculator');
+    fireEvent.click(calculatorLink);
+    const main = container.querySelector('main');
+    expect(main).toMatchSnapshot();
+  });
+});

src/__test__/__snapshots__/App.test.js.snap

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Router behaviour When user presses Calculator in navbar it will render Calculator page 1`] = `
+<main>
+  <div
+    class="calculator-container"
+  >
+    <h2>
+      Lets do some math!
+    </h2>
+    <div
+      class="calculator"
+    >
+      <div
+        class="calculator-screen gray"
+        data-testid="calculator-screen-id"
+      >
+        0
+      </div>
+      <button
+        class="operator divide orange"
+        type="button"
+        value="÷"
+      >
+        ÷
+      </button>
+      <button
+        class="operator multiply orange"
+        type="button"
+        value="x"
+      >
+        ×
+      </button>
+      <button
+        class="operator substract orange"
+        type="button"
+        value="-"
+      >
+        -
+      </button>
+      <button
+        class="operator add orange"
+        type="button"
+        value="+"
+      >
+        +
+      </button>
+      <button
+        class="equal-sign orange"
+        type="button"
+        value="="
+      >
+        =
+      </button>
+      <button
+        class="all-clear"
+        type="button"
+        value="AC"
+      >
+        AC
+      </button>
+      <button
+        class="invert-sign"
+        type="button"
+        value="+/-"
+      >
+        +/-
+      </button>
+      <button
+        class="percentage"
+        type="button"
+        value="%"
+      >
+        %
+      </button>
+      <button
+        class="number-key zero"
+        type="button"
+        value="0"
+      >
+        0
+      </button>
+      <button
+        class="number-key one"
+        type="button"
+        value="1"
+      >
+        1
+      </button>
+      <button
+        class="number-key two"
+        type="button"
+        value="2"
+      >
+        2
+      </button>
+      <button
+        class="number-key three"
+        type="button"
+        value="3"
+      >
+        3
+      </button>
+      <button
+        class="number-key four"
+        type="button"
+        value="4"
+      >
+        4
+      </button>
+      <button
+        class="number-key five"
+        type="button"
+        value="5"
+      >
+        5
+      </button>
+      <button
+        class="number-key six"
+        type="button"
+        value="6"
+      >
+        6
+      </button>
+      <button
+        class="number-key seven"
+        type="button"
+        value="7"
+      >
+        7
+      </button>
+      <button
+        class="number-key eight"
+        type="button"
+        value="8"
+      >
+        8
+      </button>
+      <button
+        class="number-key nine"
+        type="button"
+        value="9"
+      >
+        9
+      </button>
+      <button
+        class="decimal"
+        type="button"
+        value="."
+      >
+        .
+      </button>
+    </div>
+  </div>
+</main>
+`;
+
+exports[`Test Router behaviour When user presses Home in navbar it will render Home page 1`] = `
+<main>
+  <h2>
+    Welcome to our homepage!
+  </h2>
+  <p>
+    Lorem ipsum odor amet, consectetuer adipiscing elit. Hac luctus mi et neque non interdum nisi dapibus. Natoque vestibulum penatibus consectetur purus neque nullam. Ante sodales fermentum varius, sodales curabitur fames eros. Habitant rutrum tincidunt at luctus nam cubilia. Himenaeos facilisi suspendisse libero ac massa viverra potenti condimentum. Habitasse non hac lacinia; vulputate eget amet libero placerat. Facilisi gravida dapibus elementum arcu justo lacus felis.
+  </p>
+  <p>
+    Venenatis dictum odio auctor consectetur cursus tristique habitasse feugiat. In nisl duis congue rhoncus egestas congue a. Faucibus aliquet fames nascetur orci placerat vehicula nunc. Mollis mauris class fames malesuada; molestie curabitur senectus. Tempor etiam cursus diam dolor mattis convallis himenaeos. Tortor varius nullam malesuada primis lacinia nascetur proin aliquam porttitor. Vel dui pretium ullamcorper pellentesque nisi per montes vehicula.
+  </p>
+</main>
+`;
+
+exports[`Test Router behaviour When user presses Quote in navbar it will render Quote page 1`] = `
+<main>
+  <div
+    class="quote-container"
+  >
+    <p>
+      Mathematics is not about numbers, equations, computations, or algorithms; it is about understanding. -William Paul Thurston
+    </p>
+  </div>
+</main>
+`;

src/components/Calculator.js

@@ -16,7 +16,7 @@ const Calculator = () => {
   return (
     <>
       <div className="calculator">
-        <div className="calculator-screen gray">
+        <div className="calculator-screen gray" data-testid="calculator-screen-id">
           {items.total !== null ? items.total : null}
           {items.operation !== null ? items.operation : null}
           {items.next !== null ? items.next : null}

src/components/___tests___/Calculator.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Calculator from '../Calculator';
+
+describe('Test render of Calculator component', () => {
+  it('Calculator elements are rendered correctly', () => {
+    const { container } = render(<Calculator />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('If buttons 5 and 6 are pressed, Calculator screen should change display from 0 to 56', () => {
+    // ARRANGE
+    render(<Calculator />);
+    const button5 = screen.getByText('5');
+    const button6 = screen.getByText('6');
+    const resultElement = screen.getByTestId('calculator-screen-id');
+    // ACT
+    fireEvent.click(button5);
+    fireEvent.click(button6);
+    // ASSERT
+    expect(resultElement).toMatchSnapshot();
+    expect(resultElement).toHaveTextContent('56');
+  });
+  it(`If buttons 5 and + are pressed,
+  Then we press 6 button and then =, Calculator screen should change display from 0 to 11`, () => {
+    // ARRANGE
+    render(<Calculator />);
+    const button5 = screen.getByText('5');
+    const button6 = screen.getByText('6');
+    const additionButton = screen.getByText('+');
+    const equalButton = screen.getByText('=');
+    const resultElement = screen.getByTestId('calculator-screen-id');
+    // ACT
+    fireEvent.click(button5);
+    fireEvent.click(additionButton);
+    fireEvent.click(button6);
+    fireEvent.click(equalButton);
+    // ASSERT
+    expect(resultElement).toMatchSnapshot();
+    expect(resultElement).toHaveTextContent('11');
+  });
+  it(`If buttons 5 and - are pressed,
+  Then we press 6 button and then =, Calculator screen should change display from 0 to -1`, () => {
+    // ARRANGE
+    render(<Calculator />);
+    const button5 = screen.getByText('5');
+    const button6 = screen.getByText('6');
+    const substractionButton = screen.getByText('-');
+    const equalButton = screen.getByText('=');
+    const resultElement = screen.getByTestId('calculator-screen-id');
+    // ACT
+    fireEvent.click(button5);
+    fireEvent.click(substractionButton);
+    fireEvent.click(button6);
+    fireEvent.click(equalButton);
+    // ASSERT
+    expect(resultElement).toMatchSnapshot();
+    expect(resultElement).toHaveTextContent('-1');
+  });
+  it(`If buttons 5 and x are pressed,
+  Then we press 6 button and then =, Calculator screen should change display from 0 to 30`, () => {
+    // ARRANGE
+    render(<Calculator />);
+    const button5 = screen.getByText('5');
+    const button6 = screen.getByText('6');
+    const multiplyButton = screen.getByText('×');
+    const equalButton = screen.getByText('=');
+    const resultElement = screen.getByTestId('calculator-screen-id');
+    // ACT
+    fireEvent.click(button5);
+    fireEvent.click(multiplyButton);
+    fireEvent.click(button6);
+    fireEvent.click(equalButton);
+    // ASSERT
+    expect(resultElement).toMatchSnapshot();
+    expect(resultElement).toHaveTextContent('30');
+  });
+});