Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Test suites for components using Jest #13

Merged
merged 1 commit into from
Dec 12, 2023
Merged

Add Test suites for components using Jest #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23,562 changes: 13,951 additions & 9,611 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 15 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@
"@mui/icons-material": "^5.14.19",
"@reduxjs/toolkit": "^2.0.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.2",
"date-fns": "^2.30.0",
"formik": "^2.4.5",
"identity-obj-proxy": "^3.0.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^4.24.0",
Expand Down Expand Up @@ -55,15 +54,29 @@
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/plugin-syntax-jsx": "^7.23.3",
"@babel/preset-react": "^7.23.3",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"react-test-renderer": "^18.2.0",
"redux-mock-store": "^1.5.4",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^21.0.0",
"stylelint-csstree-validator": "^1.9.0",
"stylelint-scss": "^3.21.0"
},
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!axios)"
],
"moduleNameMapper": {
"\\.(css|scss|jpg|jpeg|png|gif)$": "identity-obj-proxy"
}
}
}
22 changes: 22 additions & 0 deletions src/__tests__/AddNewCar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import '@testing-library/jest-dom';
import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import AddNewCarForm from '../pages/UserDashboard/AddNewCar/AddNewCarForm';
import store from '../redux/store';

describe('AddNewCarForm Component', () => {
it('renders AddNewCarForm', () => {
const component = render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<AddNewCarForm />
</BrowserRouter>
</Provider>
</React.StrictMode>,
);
expect(component).toMatchSnapshot();
});
});
53 changes: 53 additions & 0 deletions src/__tests__/DashboardHome.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import Router from '../routes/routes';
import { USERS_DASHBOARD } from '../routes/routeConstants';

const mockStore = configureMockStore();

describe('DashboardHome Component', () => {
it('renders cars present', () => {
const store = mockStore({
authentication: {
authenticatedUser: {
username: 'testuser',
},
status: 'succeeded',
},
cars: {
cars: [
{
id: 1,
name: 'Test Vehicle',
description: 'Test Description',
pricePerHr: 20,
seating_capacity: 4,
image: 'test_image.png',
},
{
id: 2,
name: 'Vehicle two',
descrrption: 'Vehicle two Description',
pricePerHr: 10,
seating_capacity: 6,
image: 'test_image.png',
},
],
},
});

const { container } = render(
<Provider store={store}>
<MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
<Router />
</MemoryRouter>
</Provider>,
);

expect(container).toMatchSnapshot();
});
});
48 changes: 48 additions & 0 deletions src/__tests__/DeleteList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import DeleteList from '../components/DeleteCars/DeleteList';

const mockStore = configureMockStore();

describe('DeleteList Component', () => {
it('renders cars present to delete', () => {
const store = mockStore({
authentication: {
authenticatedUser: {
username: 'testuser',
},
status: 'succeeded',
},
cars: {
cars: [
{
id: 1,
name: 'Test Vehicle',
},
{
id: 2,
name: 'Vehicle two',
},
{
id: 3,
name: 'Vehicle three',
},
],
},
});

const { container } = render(
<Provider store={store}>
<MemoryRouter>
<DeleteList />
</MemoryRouter>
</Provider>,
);

expect(container).toMatchSnapshot();
});
});
57 changes: 57 additions & 0 deletions src/__tests__/ItemDetail.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import Router from '../routes/routes';
import { USERS_DASHBOARD } from '../routes/routeConstants';

const mockStore = configureMockStore();

describe('ItemDetail Page', () => {
it('renders ItemDetail page for car ID 1', async () => {
const store = mockStore({
authentication: {
authenticatedUser: {
username: 'testuser',
},
status: 'succeeded',
},
cars: {
cars: [
{
id: 1,
name: 'Test Vehicle',
description: 'Test Description',
pricePerHr: 20,
seating_capacity: 4,
image: 'test_image.png',
},
{
id: 2,
name: 'Vehicle two',
description: 'Vehicle two Description',
pricePerHr: 10,
seating_capacity: 6,
image: 'test_image.png',
},
],
},
});

render(
<Provider store={store}>
<MemoryRouter initialEntries={[`${USERS_DASHBOARD}`]}>
<Router />
</MemoryRouter>
</Provider>,
);

userEvent.click(screen.getByTestId('each-item-container-link-1'));
await waitFor(() => {
expect(screen.getByText('Test Vehicle')).toBeInTheDocument();
expect(screen.getByText('Test Description')).toBeInTheDocument();
});
});
});
44 changes: 44 additions & 0 deletions src/__tests__/MyReservationsList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import MyReservations from '../pages/LandingPage/MyReservation/MyReservation';

const mockStore = configureMockStore();

describe('MyReservations Component', () => {
it('renders reservations present', () => {
const store = mockStore({
authentication: {
authenticatedUser: {
username: 'testuser',
},
status: 'succeeded',
},
reservation: {
reservations: [
{
date: '2023-10-10',
city: 'City A',
},
{
date: '2022-11-11',
city: 'City B',
},
],
},
});

const { container } = render(
<Provider store={store}>
<MemoryRouter>
<MyReservations />
</MemoryRouter>
</Provider>,
);

expect(container).toMatchSnapshot();
});
});
35 changes: 35 additions & 0 deletions src/__tests__/ReserveCar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import '@testing-library/jest-dom';
import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import ReserveCarFrom from '../components/ReserveCars/ReserveCarForm';

const mockStore = configureMockStore();

describe('ReserveCarForm Component', () => {
it('renders ReserveCarForm correctly', () => {
const store = mockStore({
reservation: {
status: 'idle',
},
});

render(
<Provider store={store}>
<MemoryRouter>
<ReserveCarFrom id={1} username="testuser" name="Test Car" />
</MemoryRouter>
</Provider>,
);

expect(screen.getByText('Username')).toBeInTheDocument();
expect(screen.getByText('Car Name')).toBeInTheDocument();
expect(screen.getByText('Select Date')).toBeInTheDocument();
expect(screen.getByText('Select City')).toBeInTheDocument();
expect(screen.getByText('Book Now')).toBeInTheDocument();
expect(screen.getByDisplayValue('testuser')).toBeInTheDocument();
expect(screen.getByDisplayValue('Test Car')).toBeInTheDocument();
});
});
22 changes: 22 additions & 0 deletions src/__tests__/SignIn.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import '@testing-library/jest-dom/';
import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { render } from '@testing-library/react';
import store from '../redux/store';
import SignIn from '../pages/Auth/SignIn/SignIn';

describe('Login component', () => {
test('should render login page', () => {
const component = render(
<React.StrictMode>
<Provider store={store}>
<Router>
<SignIn />
</Router>
</Provider>
</React.StrictMode>,
);
expect(component).toMatchSnapshot();
});
});
22 changes: 22 additions & 0 deletions src/__tests__/SignUp.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import '@testing-library/jest-dom/';
import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { render } from '@testing-library/react';
import store from '../redux/store';
import SignUp from '../pages/Auth/SignUp/SignUp';

describe('SignUp component', () => {
test('should render SignUp page', () => {
const component = render(
<React.StrictMode>
<Provider store={store}>
<Router>
<SignUp />
</Router>
</Provider>
</React.StrictMode>,
);
expect(component).toMatchSnapshot();
});
});
Loading
Loading