Math Magicians: tests

README.md

@@ -47,6 +47,10 @@ open http://localhost:3000/
 
 - GitHub: [@jmoseka](https://github.com/jmoseka)
 
+👤 **Hammed Adisa**
+
+- GitHub: [@AbuRayhaan](https://github.com/AbuRayhaan)
+
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!

package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "big.js": "^6.1.1",
     "bootstrap": "^5.1.3",
@@ -45,6 +43,8 @@
     "@babel/plugin-syntax-jsx": "^7.17.12",
     "@babel/preset-env": "^7.18.0",
     "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -53,6 +53,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
+    "react-test-renderer": "^18.1.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-csstree-validator": "^1.9.0",

src/App.js

@@ -11,10 +11,9 @@ function App() {
       <div className="App container mx-5">
         <Header />
         <Routes>
-          <Route path="/home" element={<Home />} />
+          <Route exact path="/home" element={<Home />} />
           <Route path="/calculator" element={<Calculator />} />
           <Route path="/quote" element={<Quote />} />
-
         </Routes>
       </div>
     </BrowserRouter>

src/components/Calculator.js

@@ -13,7 +13,7 @@ function Calculator() {
   const { next, total } = state;
 
   return (
-    <div className="body">
+    <div data-testid="calc-1" className="body">
       <div className="container container-calc mt-5">
         <div className="heading">
           <h3>{'Let\'s do some Maths'}</h3>

src/components/__tests__/component_tests/Calculator.test.js

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/extend-expect';
+import { cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Calculator from '../../Calculator';
+
+afterEach(() => {
+  cleanup();
+});
+
+test('should match snapshot', () => {
+  const tree = renderer.create(<Calculator />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/component_tests/Header.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import { cleanup } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+import Header from '../../Header';
+
+afterEach(() => {
+  cleanup();
+});
+
+test('should match snapshot', () => {
+  const tree = renderer.create(
+    <BrowserRouter>
+      <Header />
+    </BrowserRouter>,
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/component_tests/Home.test.js

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/extend-expect';
+import { cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Home from '../../Home';
+
+afterEach(() => {
+  cleanup();
+});
+
+test('should match snapshot', () => {
+  const tree = renderer.create(<Home />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/component_tests/Quote.test.js

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/extend-expect';
+import { cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Quote from '../../Quote';
+
+afterEach(() => {
+  cleanup();
+});
+
+test('should match snapshot', () => {
+  const tree = renderer.create(<Quote />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/__tests__/component_tests/__snapshots__/Calculator.test.js.snap

@@ -0,0 +1,179 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<div
+  className="body"
+  data-testid="calc-1"
+>
+  <div
+    className="container container-calc mt-5"
+  >
+    <div
+      className="heading"
+    >
+      <h3>
+        Let's do some Maths
+      </h3>
+    </div>
+    <div
+      className="col-6"
+    >
+      <div
+        className="row"
+      >
+        <div
+          className="col-12 screen-output"
+        >
+          0
+        </div>
+      </div>
+      <div
+        className="row"
+      >
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          AC
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          /
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          %
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          +
+        </button>
+      </div>
+      <div
+        className="row"
+      >
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          7
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          8
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          9
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          x
+        </button>
+      </div>
+      <div
+        className="row"
+      >
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          4
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          5
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          6
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          -
+        </button>
+      </div>
+      <div
+        className="row"
+      >
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          1
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          2
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          3
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          +
+        </button>
+      </div>
+      <div
+        className="row"
+      >
+        <button
+          className="col-9"
+          onClick={[Function]}
+          type="button"
+        >
+          0
+        </button>
+        <button
+          className="col-3"
+          onClick={[Function]}
+          type="button"
+        >
+          =
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/__tests__/component_tests/__snapshots__/Header.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<header
+  className="container"
+>
+  <h1>
+    Math
+
+    <span
+      className="magician-color"
+    >
+      Magicians
+    </span>
+  </h1>
+  <ul
+    className="nav"
+  >
+    <li>
+      <a
+        href="/home"
+        onClick={[Function]}
+      >
+        Home
+      </a>
+    </li>
+    <span
+      className="line"
+    />
+    <li>
+      <a
+        href="/calculator"
+        onClick={[Function]}
+      >
+        Calculator
+      </a>
+    </li>
+    <span
+      className="line"
+    />
+    <li>
+      <a
+        href="/quote"
+        onClick={[Function]}
+      >
+        Quote
+      </a>
+    </li>
+  </ul>
+</header>
+`;

src/components/__tests__/component_tests/__snapshots__/Home.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<div
+  className="container mt-5"
+>
+  <h3>
+    Welcome to our page
+  </h3>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
+        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ r Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+  </p>
+  <p>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
+           ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
+           velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
+           Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
+           consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
+         vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+  </p>
+</div>
+`;

src/components/__tests__/component_tests/__snapshots__/Quote.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match snapshot 1`] = `
+<div
+  className="container container-quote"
+>
+  <blockquote>
+    <p
+      className="h5"
+    >
+      Mathematics is not about numbers, equations, 
+              computations, or algorithms: it is about understanding. -William Paul Thurston
+    </p>
+  </blockquote>
+</div>
+`;