Merge pull request #6 from NewtonOmbese/testing

Testing

.babelrc

@@ -1,6 +1,4 @@
 {
-  "presets": [
-      "@babel/preset-react"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": ["@babel/plugin-syntax-jsx"]
 }

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
@@ -44,16 +43,22 @@
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-syntax-jsx": "^7.22.5",
+    "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^13.4.0",
+    "babel-jest": "^29.6.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jest-cli": "^29.6.2",
+    "react-dom": "^18.2.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-csstree-validator": "^1.9.0",
     "stylelint-scss": "^3.21.0"
-  }
+  } 
 }

src/components/Button.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/jest-globals';
+import Button from './Button';
+
+test('renders button with correct label', () => {
+  const { getByText } = render(<Button label="AC" />);
+  const buttonElement = getByText('AC');
+  expect(buttonElement).toBeInTheDocument();
+});
+
+test('calls onClick when button is clicked', () => {
+  const onClickMock = jest.fn();
+  const { getByText } = render(<Button label="AC" onClick={onClickMock} />);
+  const buttonElement = getByText('AC');
+
+  fireEvent.click(buttonElement);
+  expect(onClickMock).toHaveBeenCalled();
+});

src/components/Calculator.jsx

@@ -25,7 +25,7 @@ function Calculator() {
         <h3>Let&apos;s do some maths!</h3>
       </CalculatorText>
       <div className="calculator">
-        <div className="display">
+        <div className="display" data-testid="display">
           { calc.total }
           { calc.operation }
           { calc.next }

src/components/Calculator.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/jest-globals';
+import Calculator from './Calculator';
+
+describe('Calculator component', () => {
+  test('renders the component without errors', () => {
+    render(<Calculator />);
+  });
+
+  test('displays the initial values correctly', () => {
+    const { getByTestId } = render(<Calculator />);
+    const displayElement = getByTestId('display');
+    expect(displayElement.textContent).toBe('');
+  });
+
+  test('handles button clicks correctly', () => {
+    const { getByText, getByTestId } = render(<Calculator />);
+    const displayElement = getByTestId('display');
+
+    fireEvent.click(getByText('1'));
+    expect(displayElement.textContent).toBe('1');
+
+    fireEvent.click(getByText('+'));
+    expect(displayElement.textContent).toBe('1+');
+
+    fireEvent.click(getByText('2'));
+    expect(displayElement.textContent).toBe('1+2');
+
+    fireEvent.click(getByText('='));
+    expect(displayElement.textContent).toBe('3');
+
+    fireEvent.click(getByText('AC'));
+    expect(displayElement.textContent).toBe('');
+  });
+});

src/components/Home.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/jest-globals';
+import Home from './Home';
+
+describe('Home component', () => {
+  it('should render the title correctly', () => {
+    const { getByText } = render(<Home />);
+    const titleElement = getByText('Welcome to our page!');
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('should render the paragraphs correctly', () => {
+    const { getByText } = render(<Home />);
+    const paragraphElement1 = getByText(/Lorem ipsum/);
+    const paragraphElement2 = getByText(/Debitis, cumque nobis/);
+    expect(paragraphElement1).toBeInTheDocument();
+    expect(paragraphElement2).toBeInTheDocument();
+  });
+});

src/components/NavBar.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import '@testing-library/jest-dom/jest-globals';
+import NavBar from './NavBar';
+
+test('renders the navbar with correct label', () => {
+  render(
+    <Router>
+      <NavBar />
+    </Router>,
+  );
+
+  const labelElement = screen.getByText('Math Magicians');
+  expect(labelElement).toBeInTheDocument();
+});
+
+test('renders the navbar with correct links', () => {
+  render(
+    <Router>
+      <NavBar />
+    </Router>,
+  );
+
+  const homeLink = screen.getByRole('link', { name: 'Home' });
+  const calculatorLink = screen.getByRole('link', { name: 'Calculator' });
+  const quoteLink = screen.getByRole('link', { name: 'Quote' });
+
+  expect(homeLink).toHaveAttribute('href', '/');
+  expect(calculatorLink).toHaveAttribute('href', '/calculator');
+  expect(quoteLink).toHaveAttribute('href', '/quote');
+});
+
+test('matches snapshot', () => {
+  const { container } = render(
+    <Router>
+      <NavBar />
+    </Router>,
+  );
+  expect(container).toMatchSnapshot();
+});

src/components/Quote.jsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from 'react';
-import axios from 'axios';
 import styled from 'styled-components';
 
 function Quote() {
@@ -10,11 +9,17 @@ function Quote() {
   const apiKey = 'PR9OrpSi7kbt4/xm76yLrQ==GDPbm1EnnixMX3cm';
 
   useEffect(() => {
-    axios.get(`https://api.api-ninjas.com/v1/quotes?category=${category}`, {
+    fetch(`https://api.api-ninjas.com/v1/quotes?category=${category}`, {
       headers: { 'X-Api-Key': apiKey },
     })
       .then((response) => {
-        setQuotes(response.data);
+        if (!response.ok) {
+          throw new Error(`Request failed with status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setQuotes(data);
         setIsLoading(false);
       })
       .catch((error) => {

src/components/Quote.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/jest-globals';
+import Quote from './Quote';
+
+describe('Quote component', () => {
+  it('should render loading while fetching data', () => {
+    render(<Quote />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calculator component renders the calculator correctly 1`] = `
+<div>
+  <div
+    class="sc-bcPKhP ggJYKu"
+  >
+    <div
+      class="sc-grXZZQ egCVrU"
+    >
+      <h3>
+        Let's do some maths!
+      </h3>
+    </div>
+    <div
+      class="calculator"
+    >
+      <div
+        class="display"
+      />
+      <div
+        class="buttons-row"
+      >
+        <button
+          type="button"
+        >
+          AC
+        </button>
+        <button
+          type="button"
+        >
+          +/-
+        </button>
+        <button
+          type="button"
+        >
+          %
+        </button>
+        <button
+          type="button"
+        >
+          ÷
+        </button>
+      </div>
+      <div
+        class="buttons-row"
+      >
+        <button
+          type="button"
+        >
+          7
+        </button>
+        <button
+          type="button"
+        >
+          8
+        </button>
+        <button
+          type="button"
+        >
+          9
+        </button>
+        <button
+          type="button"
+        >
+          x
+        </button>
+      </div>
+      <div
+        class="buttons-row"
+      >
+        <button
+          type="button"
+        >
+          4
+        </button>
+        <button
+          type="button"
+        >
+          5
+        </button>
+        <button
+          type="button"
+        >
+          6
+        </button>
+        <button
+          type="button"
+        >
+          -
+        </button>
+      </div>
+      <div
+        class="buttons-row"
+      >
+        <button
+          type="button"
+        >
+          1
+        </button>
+        <button
+          type="button"
+        >
+          2
+        </button>
+        <button
+          type="button"
+        >
+          3
+        </button>
+        <button
+          type="button"
+        >
+          +
+        </button>
+      </div>
+      <div
+        class="buttons-row last-buttons"
+      >
+        <button
+          type="button"
+        >
+          0
+        </button>
+        <button
+          type="button"
+        >
+          .
+        </button>
+        <button
+          type="button"
+        >
+          =
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<div>
+  <div
+    class="sc-bcPKhP fZxdFO"
+  >
+    <h1
+      class="sc-grXZZQ jdVYuR"
+    >
+      Welcome to our page!
+    </h1>
+    <p
+      class="sc-dkjKgF kSaQVf"
+    >
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, doloremque perferendis. Eos porro harum libero voluptatem magnam? Alias voluptatem porro quas ullam. Voluptates vel ad incidunt illo ducimus explicabo beatae! Ex neque distinctio, rem earum nam optio molestias. Facilis odit quidem est recusandae numquam nemo totam alias voluptatem, minima minus, eaque, repellat perspiciatis! Tenetur totam veniam reprehenderit, dignissimos rem quia!
+    </p>
+    <p
+      class="sc-dkjKgF kSaQVf"
+    >
+      Debitis, cumque nobis possimus reprehenderit dolorem nostrum aut odio libero ipsa, consequuntur nisi vitae incidunt voluptates repellat dolor. Corrupti obcaecati eveniet est pariatur eos esse animi ut explicabo dicta earum. Mollitia enim dolore delectus, ipsum, esse tempora, sunt commodi consectetur nobis cum at rerum praesentium asperiores nihil voluptate saepe est accusamus maxime ducimus! Nemo debitis fugiat provident, reprehenderit quaerat ratione.
+    </p>
+  </div>
+</div>
+`;