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

Jump to bottom

Fix test cases warnings in src/views/tests/project.test.js #5979

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Fix test cases warnings in src/views/tests/project.test.js #5979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
930545c
Fix warnings for tests in `src/views/tests/project.test.js`
HelNershingThapa Jul 12, 2023
8765cac
Refactored `src/views/tests/taskSelection.test.js` to utilize the `cr…
HelNershingThapa Jul 12, 2023
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
5 changes: 5 additions & 0 deletions frontend/src/network/tests/mockData/projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@ export const taskDetail = (taskId) => ({
export const projectComments = {
chat: [
{
id: 1,
message:
"<p>@happy_me we do want 'significant' roads that lead to houses. Rule of thumb I use for picking classification is the usage over condition/what it looks like. If it's the main 'path' to one or maybe several homes, I would pick service; even if a vehicle can't drive it, that can be reflected with additional tags, but the road still functions as access to the home(s).</p>",
pictureUrl:
Expand All @@ -331,20 +332,23 @@ export const projectComments = {
username: 'helnershingthapa',
},
{
id: 2,
message: '<p>hello world</p>',
pictureUrl:
'https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp',
timestamp: '2023-01-03T10:54:25.805150Z',
username: 'helnershingthapa',
},
{
id: 3,
message: '<p>asdadadasdasdasd</p>',
pictureUrl:
'https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeFJheFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--a765e2377a288bccae85da6604300251d9de6d39/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVdscGFRPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--1d22b8d446683a272d1a9ff04340453ca7c374b4/bitmoji.jpg',
timestamp: '2022-10-19T09:32:52.231545Z',
username: 'Hel Nershing Thapa',
},
{
id: 4,
message:
'<p><code>test of \ncode block\nhmmm\npreview showed it as a block\nand monospace font\nbut not indented</code></p>',
pictureUrl:
Expand All @@ -353,6 +357,7 @@ export const projectComments = {
username: 'wireguy',
},
{
id: 5,
message:
'<p><code>this is a code\nblock\nshould it\nbe indented\nby 4 space?\nminor...</code></p>',
pictureUrl:
Expand Down
21 changes: 12 additions & 9 deletions frontend/src/views/project.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,15 +107,18 @@ export const UserProjectsPage = ({ management }) => {
}
}, [navigate, userToken]);

if (
!fullProjectsQuery.createdByMe &&
!fullProjectsQuery.managedByMe &&
!fullProjectsQuery.mappedByMe &&
!fullProjectsQuery.favoritedByMe &&
!fullProjectsQuery.status
) {
setProjectQuery({ managedByMe: true });
}
useEffect(() => {
if (
!fullProjectsQuery.createdByMe &&
!fullProjectsQuery.managedByMe &&
!fullProjectsQuery.mappedByMe &&
!fullProjectsQuery.favoritedByMe &&
!fullProjectsQuery.status
) {
setProjectQuery({ managedByMe: true });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
<div className="pull-center">
Expand Down
52 changes: 17 additions & 35 deletions frontend/src/views/tests/project.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '@testing-library/jest-dom';
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
import { QueryParamProvider } from 'use-query-params';
import { act, render, screen, waitFor } from '@testing-library/react';
import { act, screen, waitFor } from '@testing-library/react';

import { store } from '../../store';
import {
Expand All @@ -21,7 +21,6 @@ import {
import { setupFaultyHandlers } from '../../network/tests/server';

import { projects } from '../../network/tests/mockData/projects';
import { MemoryRouter, Route, Routes } from 'react-router-dom';

test('CreateProject renders ProjectCreate', async () => {
renderWithRouter(
Expand Down Expand Up @@ -202,21 +201,30 @@ describe('Projects Page', () => {
});

describe('Project Detail Page', () => {
window.scrollTo = jest.fn();
jest.mock('react-chartjs-2', () => ({
Doughnut: () => null,
Bar: () => null,
Line: () => null,
}));

const setup = () => {
createComponentWithMemoryRouter(
<ReduxIntlProviders>
<ProjectDetailPage />
</ReduxIntlProviders>,
{
route: '/projects/:id',
entryRoute: '/projects/123',
},
);
};

it('should render component details', async () => {
act(() => {
store.dispatch({ type: 'SET_LOCALE', locale: 'es-AR' });
});
renderWithRouter(
<ReduxIntlProviders>
<ProjectDetailPage id={123} navigate={() => jest.fn()} />
</ReduxIntlProviders>,
);
setup();
await waitFor(() => {
expect(screen.getByText(/sample project/i)).toBeInTheDocument();
expect(screen.getByText(/hello world/i)).toBeInTheDocument();
Expand All @@ -225,20 +233,7 @@ describe('Project Detail Page', () => {

it('should display private project error message', async () => {
setupFaultyHandlers();
render(
<MemoryRouter initialEntries={['/projects/123']}>
<Routes>
<Route
path="projects/:id"
element={
<ReduxIntlProviders>
<ProjectDetailPage id={123} navigate={() => jest.fn()} />
</ReduxIntlProviders>
}
/>
</Routes>
</MemoryRouter>,
);
setup();

await waitFor(() =>
expect(
Expand All @@ -249,20 +244,7 @@ describe('Project Detail Page', () => {

it('should display generic error message', async () => {
setupFaultyHandlers();
render(
<MemoryRouter initialEntries={['/projects/123']}>
<Routes>
<Route
path="projects/:id"
element={
<ReduxIntlProviders>
<ProjectDetailPage id={123} navigate={() => jest.fn()} />
</ReduxIntlProviders>
}
/>
</Routes>
</MemoryRouter>,
);
setup();

await waitFor(() =>
expect(
Expand Down
168 changes: 65 additions & 103 deletions frontend/src/views/tests/taskSelection.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,22 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
import userEvent from '@testing-library/user-event';

import { store } from '../../store';
import { ReduxIntlProviders } from '../../utils/testWithIntl';
import { ReduxIntlProviders, createComponentWithMemoryRouter } from '../../utils/testWithIntl';
import { SelectTask } from '../taskSelection';

describe('Task Selection Page', () => {
const setup = () => {
return {
user: userEvent.setup(),
...render(
<MemoryRouter initialEntries={['/projects/123/tasks']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
),
};
};
const setup = () =>
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/123/tasks',
},
);

it('should redirect to login page if the user is not logged in', () => {
act(() => {
Expand Down Expand Up @@ -232,27 +223,18 @@ describe('Task Selection Page', () => {
});

describe('Random Task Selection', () => {
const setup = () => {
return {
user: userEvent.setup(),
...render(
<MemoryRouter initialEntries={['/projects/963/tasks']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
),
};
};
const setup = () =>
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/963/tasks',
},
);

it('should not change the button text to map selected task when user selects a task for mapping', async () => {
act(() => {
Expand Down Expand Up @@ -300,21 +282,16 @@ describe('Random Task Selection', () => {

describe('Complete Project', () => {
const setup = () =>
render(
<MemoryRouter initialEntries={['/projects/6/tasks']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/6/tasks',
},
);

it('should display button to select another project', async () => {
Expand All @@ -330,21 +307,16 @@ describe('Complete Project', () => {

describe('Mapped Project', () => {
const setup = () =>
render(
<MemoryRouter initialEntries={['/projects/3/tasks']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/3/tasks',
},
);

it('should display button to validate a task', async () => {
Expand All @@ -366,21 +338,16 @@ describe('Mapped Project', () => {

describe('Resume Mapping', () => {
const setup = () =>
render(
<MemoryRouter initialEntries={['/projects/222/tasks']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/222/tasks',
},
);

it('should display button to resume mapping', async () => {
Expand Down Expand Up @@ -410,21 +377,16 @@ test('it should pre select task from the list from URL params', async () => {
});
});

render(
<MemoryRouter initialEntries={['/projects/123/tasks?search=1']}>
<Routes>
<Route
path="projects/:id/tasks"
element={
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>
}
/>
</Routes>
</MemoryRouter>,
createComponentWithMemoryRouter(
<QueryParamProvider adapter={ReactRouter6Adapter}>
<ReduxIntlProviders>
<SelectTask />
</ReduxIntlProviders>
</QueryParamProvider>,
{
route: 'projects/:id/tasks',
entryRoute: '/projects/123/tasks?search=1',
},
);
await screen.findAllByText(/last updated by/i);
expect(screen.getByPlaceholderText(/filter tasks by id or username/i)).toHaveValue('1');
Expand Down