Merge pull request #44 from NitBravoA92/create-tests-cases

Create the tests cases for the components and functions

README.md

@@ -1,5 +1,6 @@
 <a name="readme-top"></a>
 <div align="center">
+  <img src=".\src\assets\images\logo.png" alt="Space Travelers Hub" width="70"  height="auto" />
   <br/>
   <h1><b>Space Travelers' Hub</b></h1>
 </div>
@@ -11,6 +12,7 @@
   - [🛠 Built With ](#-built-with-)
     - [Tech Stack ](#tech-stack-)
     - [Key Features ](#key-features-)
+    - [🚀 Live Demo ](#-live-demo-)
   - [💻 Getting Started ](#-getting-started-)
     - [Setup](#setup)
     - [Prerequisites](#prerequisites)
@@ -58,6 +60,15 @@
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 
+### 🚀 Live Demo <a name="live-demo"></a>
+
+To see the application working live, you can click on the following link that contains the demo version:
+
+- [Space Travelers' Hub - Live Demo](https://space-travelers-hub-l1ba.onrender.com/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
 ## 💻 Getting Started <a name="getting-started"></a>
 
 To get a local copy up and running, follow these steps.
@@ -173,7 +184,8 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 - [x] **Add actions and other functionality to Leave Missions**
 - [x] **Display the list of Missions Joined in the My Profile view**
 - [x] **Display the list of Rockets reserved in the My Profile view**
-- [ ] **Create Unit tests using Jest and React testing library**
+- [x] **Create Unit tests using Jest and React testing library**
+- [ ] **Deploy the final version of the project and share Link Demo in the documentation**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

package.json

@@ -52,9 +52,15 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "react-test-renderer": "^18.2.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-csstree-validator": "^1.9.0",
     "stylelint-scss": "^3.21.0"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "axios": "axios/dist/node/axios.cjs"
+    }
   }
 }

src/helpers/helper-for-test.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { render } from '@testing-library/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import rocketsReducer from '../redux/rockets/rocketsSlice';
+import missionsReducer from '../redux/missions/missionsSlice';
+
+function renderWithProviders(
+  ui,
+  {
+    preloadedState = {
+      rockets: {
+        rockets: [
+          {
+            id: '1',
+            name: 'Falcon 1',
+            description:
+              'The Falcon 1 was an expendable launch system privately developed and manufactured by SpaceX during 2006-2009.',
+            image:
+              'https://farm1.staticflickr.com/929/28787338307_3453a11a77_b.jpg',
+            reserved: true,
+          },
+        ],
+      },
+      missions: {
+        missions: [
+          {
+            mission_id: '9D1B7E0',
+            mission_name: 'Thaicom',
+            description:
+              'haicom is the name of a series of communications satellites operated from Thailand, and also the name of Thaicom Public Company Limited.',
+          },
+        ],
+      },
+    },
+    store = configureStore({
+      reducer: { rockets: rocketsReducer, missions: missionsReducer },
+      preloadedState,
+    }),
+    ...renderOptions
+  } = {},
+) {
+  function Wrapper({ children }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return { store, tree: render(ui, { wrapper: Wrapper, ...renderOptions }) };
+}
+
+export default renderWithProviders;

src/redux/rockets/rocketsSlice.js

@@ -17,10 +17,10 @@ export const getAllRockets = createAsyncThunk(actionName, async (thunkAPI) => {
 const initialState = {
   rockets: [],
   isLoading: false,
-  error: false,
+  error: null,
 };
 
-const rocketsSlice = createSlice({
+export const rocketsSlice = createSlice({
   name: 'rockets',
   initialState,
   reducers: {

src/tests/AppLogo.test.js

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import AppLogo from '../components/AppLogo';
+
+describe('The AppLogo component', () => {
+  test('renders into the DOM correctly', () => {
+    const component = renderer
+      .create(<AppLogo />)
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('should display the text: Space Travelers\' Hub', () => {
+    const component = render(<AppLogo />);
+
+    const expectedText = 'Space Travelers\' Hub';
+
+    expect(component.container).toHaveTextContent(expectedText);
+  });
+
+  test('should display an image', () => {
+    const component = render(<AppLogo />);
+
+    const logoImage = component.container.querySelector('img');
+
+    expect(logoImage).toHaveAttribute('src', 'logo.png');
+    expect(logoImage).toHaveAttribute('alt', 'Space Travelers\' Hub');
+  });
+});

src/tests/Header.test.js

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import Header from '../components/Header';
+
+describe('The Header component', () => {
+  test('renders into the DOM correctly', () => {
+    const headerComponent = renderer
+      .create(
+        <MemoryRouter>
+          <Header />
+        </MemoryRouter>,
+      )
+      .toJSON();
+    expect(headerComponent).toMatchSnapshot();
+  });
+
+  test("should render a '<nav>' element for the navigation menu with 3 link (<a>) elements", () => {
+    const component = render(
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>,
+    );
+
+    const navElement = component.container.querySelector('nav');
+    const linksElements = component.container.querySelectorAll('.nav-item a');
+
+    expect(navElement).toBeInTheDocument();
+    expect(linksElements.length).toBe(3);
+  });
+
+  test("should render an '<img>' element with the class 'logo-image'", () => {
+    const component = render(
+      <MemoryRouter>
+        <Header />
+      </MemoryRouter>,
+    );
+
+    const imgElement = component.container.querySelector('.logo-image');
+
+    expect(imgElement).toBeInTheDocument();
+  });
+});

src/tests/JoinedMissions.test.js

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/extend-expect';
+import JoinedMissions from '../components/JoinedMissions';
+import renderWithProviders from '../helpers/helper-for-test';
+
+describe('The JoinedMissions component', () => {
+  test('renders into the DOM', () => {
+    const { tree } = renderWithProviders(<JoinedMissions />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('renders an empty <ul> element when user does not have any Missions joined', () => {
+    renderWithProviders(<JoinedMissions />);
+
+    const missionsJoined = document.querySelectorAll('li');
+
+    expect(missionsJoined).toHaveLength(0);
+  });
+});

src/tests/Layout.test.js

@@ -0,0 +1,29 @@
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import Header from '../components/Header';
+import Layout from '../views/Layout';
+
+describe('The Layout component', () => {
+  test("renders the content of the 'My Profile' page correctly into the DOM", () => {
+    const component = renderer
+      .create(
+        <MemoryRouter>
+          <Layout>
+            <Header />
+            ,
+            <main>
+              <section id="missions">
+                <div className="container">
+                  <div className="my-missions service">
+                    <h2>My Missions</h2>
+                  </div>
+                </div>
+              </section>
+            </main>
+          </Layout>
+        </MemoryRouter>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+});

src/tests/MenuLink.test.js

@@ -0,0 +1,46 @@
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import MenuLink from '../components/MenuLink';
+
+describe('The MenuLink component', () => {
+  test("renders a link element (<a>) into the DOM with the title 'Rockets' ", () => {
+    const component = renderer
+      .create(
+        <MemoryRouter>
+          <MenuLink url="/rockets" pageName="Rockets" />
+        </MemoryRouter>,
+      )
+      .toJSON();
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('should render a link element (<a>) with', () => {
+    test("the title 'Missions' and a link pointing to the Missions page", () => {
+      const componentLink = render(
+        <MemoryRouter>
+          <MenuLink url="/missions" pageName="Missions" />
+        </MemoryRouter>,
+      );
+
+      const linkElement = componentLink.container.querySelector('a');
+
+      expect(componentLink.container).toHaveTextContent('Missions');
+      expect(linkElement).toHaveAttribute('href', '/missions');
+    });
+
+    test("the title 'My Profile' and a link pointing to the My Profile page", () => {
+      const componentLink = render(
+        <MemoryRouter>
+          <MenuLink url="/my-profile" pageName="My Profile" />
+        </MemoryRouter>,
+      );
+
+      const link = componentLink.container.querySelector('a');
+
+      expect(componentLink.container).toHaveTextContent('My Profile');
+      expect(link).toHaveAttribute('href', '/my-profile');
+    });
+  });
+});