add tests to Buttons,DisplayQuote,NavBar components

torobucci · Apr 5, 2023 · c7f1bef · c7f1bef
1 parent 1b17d52
commit c7f1bef
Show file tree

Hide file tree

Showing 10 changed files with 349 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/tests/Buttons.test.js b/src/tests/Buttons.test.js
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import Buttons from '../components/Buttons';
+
+describe('Buttons are rendered correctly', () => {
+  test('Buttons snapshots match', () => {
+    const tree = renderer.create(<Buttons />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  test('ensure all buttons are rendered', () => {
+    render(<Buttons />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(19);
+  });
+});
diff --git a/src/tests/DisplayQuote.test.js b/src/tests/DisplayQuote.test.js
@@ -0,0 +1,22 @@
+import {
+  render, screen, act, waitFor,
+} from '@testing-library/react';
+import DisplayQuote from '../components/DisplayQuote';
+
+describe('display quote', () => {
+  test('Should display loading text', async () => {
+
+    await waitFor(() => {
+        render(<DisplayQuote />)
+      });
+    await waitFor(() => {
+      screen.getByText('Loading ...');
+
+    });
+  });
+  it('Render correctly', async () => {
+    const quote = await act(async () => render(<DisplayQuote />));
+
+    expect(quote).toMatchSnapshot();
+  });
+});
diff --git a/src/tests/NavBar.test.js b/src/tests/NavBar.test.js
@@ -0,0 +1,10 @@
+import renderer from 'react-test-renderer';
+import NavBar from '../components/NavBar';
+import { BrowserRouter} from 'react-router-dom';
+
+describe('NavBar', () => {
+  test('Should render elements correctly', () => {
+    const tree = renderer.create(<BrowserRouter><NavBar /></BrowserRouter>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+})
diff --git a/src/tests/__snapshots__/Buttons.test.js.snap b/src/tests/__snapshots__/Buttons.test.js.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons are rendered correctly Buttons snapshots match 1`] = `
+Array [
+  <button
+    className="button"
+    type="button"
+  >
+    A/C
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    +/-
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    %
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    ÷
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    7
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    8
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    9
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    x
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    4
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    5
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    6
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    -
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    1
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    2
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    3
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    +
+  </button>,
+  <button
+    className="button zero"
+    type="button"
+  >
+    0
+  </button>,
+  <button
+    className="button"
+    type="button"
+  >
+    .
+  </button>,
+  <button
+    className="button operator"
+    type="button"
+  >
+    =
+  </button>,
+]
+`;
diff --git a/src/tests/__snapshots__/DisplayQuote.test.js.snap b/src/tests/__snapshots__/DisplayQuote.test.js.snap
@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`display quote Render correctly 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <p
+        class="loading"
+      >
+        Loading ...
+      </p>
+    </div>
+  </body>,
+  "container": <div>
+    <p
+      class="loading"
+    >
+      Loading ...
+    </p>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/tests/__snapshots__/NavBar.test.js.snap b/src/tests/__snapshots__/NavBar.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar Should render elements correctly 1`] = `
+<nav
+  className="nav"
+>
+  <h1>
+    Math Magicians
+  </h1>
+  <ul>
+    <li>
+      <a
+        aria-current="page"
+        className="active"
+        href="/"
+        onClick={[Function]}
+      >
+        Home
+      </a>
+    </li>
+    <li>
+      <a
+        className=""
+        href="/calculator"
+        onClick={[Function]}
+      >
+        Calculator
+      </a>
+    </li>
+    <li>
+      <a
+        className=""
+        href="/quote"
+        onClick={[Function]}
+      >
+        Quote
+      </a>
+    </li>
+  </ul>
+</nav>
+`;
diff --git a/src/tests/calculate.test.js b/src/tests/calculate.test.js
@@ -0,0 +1,25 @@
+import calculate from "../logic/calculate";
+
+describe('calculate', () => {
+    test('equals operator should display result', () => {
+        expect(calculate({ total: 5, next: '3', operation: '+' }, '=')).toEqual({
+          total: '8',
+          next: null,
+          operation: null,
+        });
+      });
+    test('A/C button should clear data displayed', () => {
+      expect(calculate({ total: 5, next: null, operation: '+' }, 'A/C')).toEqual({
+        total: null,
+        next: null,
+        operation: null,
+      });
+    });
+    test('should calculate the correct', () => {
+        expect(calculate({ total: '7', next: '3', operation: 'x' }, '=')).toEqual({
+          total: '21',
+          next: null,
+          operation: null,
+        });
+      });
+})
diff --git a/src/tests/operate.test.js b/src/tests/operate.test.js
@@ -0,0 +1,10 @@
+import operate from "../logic/operate";
+
+describe('test operate function',()=>{
+    test('should return correct result',()=>{
+        expect(operate(3.5,4.6,'+')).toBe('8.1')
+    })
+    test('should throw an error if number is divide by 0',()=>{
+        expect(operate(2,0,'÷')).toBe("Can't divide by 0.")
+    })
+})