Skip to content

Commit 6c443e3

Browse files
author
gk bishnoi
committed
Implemented a 'Visit' button for the Joined Organizations filter in the Talawa User Portal
1 parent 5893198 commit 6c443e3

File tree

3 files changed

+424
-67
lines changed

3 files changed

+424
-67
lines changed

‎src/components/OrganizationCard/OrganizationCard.spec.tsx

Lines changed: 188 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
2-
import { render, screen } from '@testing-library/react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import { MockedProvider } from '@apollo/client/testing';
4+
import { BrowserRouter } from 'react-router-dom';
5+
import { I18nextProvider } from 'react-i18next';
36
import OrganizationCard from './OrganizationCard';
7+
import i18nForTest from 'utils/i18nForTest';
48

59
/**
610
* This file contains unit tests for the `OrganizationCard` component.
@@ -12,38 +16,196 @@ import OrganizationCard from './OrganizationCard';
1216
* These tests utilize the React Testing Library for rendering and querying DOM elements.
1317
*/
1418

15-
describe('Testing the Organization Card', () => {
16-
it('should render props and text elements test for the page component', () => {
17-
const props = {
18-
id: '123',
19-
image: 'https://via.placeholder.com/80',
20-
firstName: 'John',
21-
lastName: 'Doe',
22-
name: 'Sample',
23-
};
19+
const mockNavigate = jest.fn();
20+
jest.mock('react-router-dom', () => ({
21+
...jest.requireActual('react-router-dom'),
22+
useNavigate: () => mockNavigate,
23+
}));
24+
25+
const defaultProps = {
26+
id: '123',
27+
name: 'Test Organization',
28+
image: 'test-image.jpg',
29+
description: 'Test Description',
30+
admins: [{ id: '1' }],
31+
members: [{ id: '1' }, { id: '2' }],
32+
address: {
33+
city: 'Test City',
34+
countryCode: 'TC',
35+
line1: 'Test Line 1',
36+
postalCode: '12345',
37+
state: 'Test State',
38+
},
39+
userRegistrationRequired: false,
40+
membershipRequests: [],
41+
};
42+
43+
describe('OrganizationCard', () => {
44+
beforeEach(() => {
45+
jest.clearAllMocks();
46+
});
2447

25-
render(<OrganizationCard {...props} />);
48+
test('renders organization card with image', () => {
49+
render(
50+
<MockedProvider>
51+
<BrowserRouter>
52+
<I18nextProvider i18n={i18nForTest}>
53+
<OrganizationCard {...defaultProps} membershipRequestStatus="" />
54+
</I18nextProvider>
55+
</BrowserRouter>
56+
</MockedProvider>,
57+
);
2658

27-
expect(screen.getByText(props.name)).toBeInTheDocument();
28-
expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
29-
expect(screen.getByText(props.firstName)).toBeInTheDocument();
30-
expect(screen.getByText(props.lastName)).toBeInTheDocument();
59+
expect(screen.getByText(defaultProps.name)).toBeInTheDocument();
60+
expect(screen.getByText(/admins: 1/i)).toBeInTheDocument();
61+
expect(screen.getByText(/members: 2/i)).toBeInTheDocument();
62+
expect(screen.getByRole('img')).toBeInTheDocument();
3163
});
3264

33-
it('Should render text elements when props value is not passed', () => {
34-
const props = {
35-
id: '123',
65+
test('renders organization card without image', () => {
66+
const propsWithoutImage = {
67+
...defaultProps,
3668
image: '',
37-
firstName: 'John',
38-
lastName: 'Doe',
39-
name: 'Sample',
4069
};
4170

42-
render(<OrganizationCard {...props} />);
71+
render(
72+
<MockedProvider>
73+
<BrowserRouter>
74+
<I18nextProvider i18n={i18nForTest}>
75+
<OrganizationCard
76+
{...propsWithoutImage}
77+
membershipRequestStatus=""
78+
/>
79+
</I18nextProvider>
80+
</BrowserRouter>
81+
</MockedProvider>,
82+
);
83+
84+
expect(screen.getByTestId('emptyContainerForImage')).toBeInTheDocument();
85+
});
86+
87+
test('renders "Join Now" button when membershipRequestStatus is empty', () => {
88+
render(
89+
<MockedProvider>
90+
<BrowserRouter>
91+
<I18nextProvider i18n={i18nForTest}>
92+
<OrganizationCard {...defaultProps} membershipRequestStatus="" />
93+
</I18nextProvider>
94+
</BrowserRouter>
95+
</MockedProvider>,
96+
);
97+
98+
expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
99+
});
100+
101+
test('renders "Visit" button when membershipRequestStatus is accepted', () => {
102+
render(
103+
<MockedProvider>
104+
<BrowserRouter>
105+
<I18nextProvider i18n={i18nForTest}>
106+
<OrganizationCard
107+
{...defaultProps}
108+
membershipRequestStatus="accepted"
109+
/>
110+
</I18nextProvider>
111+
</BrowserRouter>
112+
</MockedProvider>,
113+
);
114+
115+
const visitButton = screen.getByTestId('manageBtn');
116+
expect(visitButton).toBeInTheDocument();
117+
118+
fireEvent.click(visitButton);
119+
expect(mockNavigate).toHaveBeenCalledWith('/user/organization/123');
120+
});
121+
122+
test('renders "Withdraw" button when membershipRequestStatus is pending', () => {
123+
render(
124+
<MockedProvider>
125+
<BrowserRouter>
126+
<I18nextProvider i18n={i18nForTest}>
127+
<OrganizationCard
128+
{...defaultProps}
129+
membershipRequestStatus="pending"
130+
/>
131+
</I18nextProvider>
132+
</BrowserRouter>
133+
</MockedProvider>,
134+
);
135+
136+
expect(screen.getByTestId('withdrawBtn')).toBeInTheDocument();
137+
});
138+
139+
test('displays address when provided', () => {
140+
render(
141+
<MockedProvider>
142+
<BrowserRouter>
143+
<I18nextProvider i18n={i18nForTest}>
144+
<OrganizationCard {...defaultProps} membershipRequestStatus="" />
145+
</I18nextProvider>
146+
</BrowserRouter>
147+
</MockedProvider>,
148+
);
149+
150+
expect(screen.getByText(/Test City/i)).toBeInTheDocument();
151+
expect(screen.getByText(/TC/i)).toBeInTheDocument();
152+
});
153+
154+
test('displays organization description', () => {
155+
render(
156+
<MockedProvider>
157+
<BrowserRouter>
158+
<I18nextProvider i18n={i18nForTest}>
159+
<OrganizationCard {...defaultProps} membershipRequestStatus="" />
160+
</I18nextProvider>
161+
</BrowserRouter>
162+
</MockedProvider>,
163+
);
164+
165+
expect(screen.getByText('Test Description')).toBeInTheDocument();
166+
});
167+
168+
test('displays correct button based on membership status', () => {
169+
// Test for empty status (Join Now button)
170+
const { rerender } = render(
171+
<MockedProvider>
172+
<BrowserRouter>
173+
<I18nextProvider i18n={i18nForTest}>
174+
<OrganizationCard {...defaultProps} membershipRequestStatus="" />
175+
</I18nextProvider>
176+
</BrowserRouter>
177+
</MockedProvider>,
178+
);
179+
expect(screen.getByTestId('joinBtn')).toBeInTheDocument();
180+
181+
// Test for accepted status (Visit button)
182+
rerender(
183+
<MockedProvider>
184+
<BrowserRouter>
185+
<I18nextProvider i18n={i18nForTest}>
186+
<OrganizationCard
187+
{...defaultProps}
188+
membershipRequestStatus="accepted"
189+
/>
190+
</I18nextProvider>
191+
</BrowserRouter>
192+
</MockedProvider>,
193+
);
194+
expect(screen.getByTestId('manageBtn')).toBeInTheDocument();
43195

44-
expect(screen.getByText(props.name)).toBeInTheDocument();
45-
expect(screen.getByText(/Owner:/i)).toBeInTheDocument();
46-
expect(screen.getByText(props.firstName)).toBeInTheDocument();
47-
expect(screen.getByText(props.lastName)).toBeInTheDocument();
196+
// Test for pending status (Withdraw button)
197+
rerender(
198+
<MockedProvider>
199+
<BrowserRouter>
200+
<I18nextProvider i18n={i18nForTest}>
201+
<OrganizationCard
202+
{...defaultProps}
203+
membershipRequestStatus="pending"
204+
/>
205+
</I18nextProvider>
206+
</BrowserRouter>
207+
</MockedProvider>,
208+
);
209+
expect(screen.getByTestId('withdrawBtn')).toBeInTheDocument();
48210
});
49211
});

0 commit comments

Comments
 (0)