Skip to content

Commit 0e84785

Browse files
aadhil2k4aadhil2k4
authored
Tests for src/components/Venue/VenueCard.tsx (PalisadoesFoundation#3711)
* Tests for src/components/Venue/VenueCard.tsx * Fix URL issue
1 parent d72e4c3 commit 0e84785

File tree

7 files changed

+281
-0
lines changed

7 files changed

+281
-0
lines changed

‎docs/docs/auto-docs/components/Venues/VenueCardMocks/variables/MOCK_HANDLE_DELETE.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Variable: MOCK\_HANDLE\_DELETE
6+
7+
> `const` **MOCK\_HANDLE\_DELETE**: `Mock`
8+
9+
Defined in: [src/components/Venues/VenueCardMocks.ts:29](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/Venues/VenueCardMocks.ts#L29)

‎docs/docs/auto-docs/components/Venues/VenueCardMocks/variables/MOCK_HANDLE_EDIT.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Variable: MOCK\_HANDLE\_EDIT
6+
7+
> `const` **MOCK\_HANDLE\_EDIT**: `Mock`
8+
9+
Defined in: [src/components/Venues/VenueCardMocks.ts:28](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/Venues/VenueCardMocks.ts#L28)

‎docs/docs/auto-docs/components/Venues/VenueCardMocks/variables/MOCK_VENUE_ITEM.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Variable: MOCK\_VENUE\_ITEM
6+
7+
> `const` **MOCK\_VENUE\_ITEM**: `object`
8+
9+
Defined in: [src/components/Venues/VenueCardMocks.ts:3](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/Venues/VenueCardMocks.ts#L3)
10+
11+
## Type declaration
12+
13+
### \_id
14+
15+
> **\_id**: `string` = `'1'`
16+
17+
### capacity
18+
19+
> **capacity**: `string` = `'500'`
20+
21+
### description
22+
23+
> **description**: `string` = `'A spacious venue for large events and gatherings.'`
24+
25+
### image
26+
27+
> **image**: `any` = `null`
28+
29+
### name
30+
31+
> **name**: `string` = `'Grand Hall'`

‎docs/docs/auto-docs/components/Venues/VenueCardMocks/variables/MOCK_VENUE_ITEM_LONG_TEXT.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Variable: MOCK\_VENUE\_ITEM\_LONG\_TEXT
6+
7+
> `const` **MOCK\_VENUE\_ITEM\_LONG\_TEXT**: `object`
8+
9+
Defined in: [src/components/Venues/VenueCardMocks.ts:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/Venues/VenueCardMocks.ts#L19)
10+
11+
## Type declaration
12+
13+
### \_id
14+
15+
> **\_id**: `string` = `'4'`
16+
17+
### capacity
18+
19+
> **capacity**: `string` = `'300'`
20+
21+
### description
22+
23+
> **description**: `string` = `'This is a very long description that should be truncated. It contains more than seventy five characters to ensure we can test the truncation logic properly. This text will be cut off.'`
24+
25+
### image
26+
27+
> **image**: `any` = `null`
28+
29+
### name
30+
31+
> **name**: `string` = `'This is a very long venue name that should definitely be truncated in the display'`

‎docs/docs/auto-docs/components/Venues/VenueCardMocks/variables/MOCK_VENUE_ITEM_WITH_IMAGE.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
[Admin Docs](/)
2+
3+
***
4+
5+
# Variable: MOCK\_VENUE\_ITEM\_WITH\_IMAGE
6+
7+
> `const` **MOCK\_VENUE\_ITEM\_WITH\_IMAGE**: `object`
8+
9+
Defined in: [src/components/Venues/VenueCardMocks.ts:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/Venues/VenueCardMocks.ts#L11)
10+
11+
## Type declaration
12+
13+
### \_id
14+
15+
> **\_id**: `string` = `'2'`
16+
17+
### capacity
18+
19+
> **capacity**: `string` = `'200'`
20+
21+
### description
22+
23+
> **description**: `string` = `'A modern conference room with all amenities.'`
24+
25+
### image
26+
27+
> **image**: `string` = `'https://surl.li/odyiad'`
28+
29+
### name
30+
31+
> **name**: `string` = `'Conference Room'`

‎src/components/Venues/VenueCard.spec.tsx‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
4+
import VenueCard from './VenueCard';
5+
import {
6+
MOCK_VENUE_ITEM,
7+
MOCK_VENUE_ITEM_WITH_IMAGE,
8+
MOCK_VENUE_ITEM_LONG_TEXT,
9+
MOCK_HANDLE_EDIT,
10+
MOCK_HANDLE_DELETE,
11+
} from './VenueCardMocks';
12+
import i18n from 'utils/i18nForTest';
13+
import { I18nextProvider } from 'react-i18next';
14+
15+
describe('VenueCard Component', () => {
16+
test('renders venue details correctly', (): void => {
17+
render(
18+
<I18nextProvider i18n={i18n}>
19+
<VenueCard
20+
venueItem={MOCK_VENUE_ITEM}
21+
index={0}
22+
showEditVenueModal={MOCK_HANDLE_EDIT}
23+
handleDelete={MOCK_HANDLE_DELETE}
24+
/>
25+
</I18nextProvider>,
26+
);
27+
expect(screen.getByText('Grand Hall')).toBeInTheDocument();
28+
expect(screen.getByText('Capacity: 500')).toBeInTheDocument();
29+
expect(
30+
screen.getByText('A spacious venue for large events and gatherings.'),
31+
).toBeInTheDocument();
32+
});
33+
34+
test('displays default image when venue has no image', (): void => {
35+
render(
36+
<I18nextProvider i18n={i18n}>
37+
<VenueCard
38+
venueItem={MOCK_VENUE_ITEM}
39+
index={0}
40+
showEditVenueModal={MOCK_HANDLE_EDIT}
41+
handleDelete={MOCK_HANDLE_DELETE}
42+
/>
43+
</I18nextProvider>,
44+
);
45+
const imgElement = screen.getByAltText(
46+
'image not found',
47+
) as HTMLImageElement;
48+
expect(imgElement).toBeInTheDocument();
49+
expect(imgElement.src).toContain('defaultImg.png');
50+
});
51+
52+
test('displays provided image when available', (): void => {
53+
render(
54+
<I18nextProvider i18n={i18n}>
55+
<VenueCard
56+
venueItem={MOCK_VENUE_ITEM_WITH_IMAGE}
57+
index={0}
58+
showEditVenueModal={MOCK_HANDLE_EDIT}
59+
handleDelete={MOCK_HANDLE_DELETE}
60+
/>
61+
</I18nextProvider>,
62+
);
63+
const imgElement = screen.getByAltText(
64+
'image not found',
65+
) as HTMLImageElement;
66+
expect(imgElement).toBeInTheDocument();
67+
expect(imgElement.src).toBe('https://surl.li/odyiad');
68+
});
69+
70+
test('handles edit button click', (): void => {
71+
render(
72+
<I18nextProvider i18n={i18n}>
73+
<VenueCard
74+
venueItem={MOCK_VENUE_ITEM}
75+
index={0}
76+
showEditVenueModal={MOCK_HANDLE_EDIT}
77+
handleDelete={MOCK_HANDLE_DELETE}
78+
/>
79+
</I18nextProvider>,
80+
);
81+
const editButton = screen.getByTestId('updateVenueBtn1');
82+
fireEvent.click(editButton);
83+
expect(MOCK_HANDLE_EDIT).toHaveBeenCalledWith(MOCK_VENUE_ITEM);
84+
});
85+
86+
test('handles delete button click', (): void => {
87+
render(
88+
<I18nextProvider i18n={i18n}>
89+
<VenueCard
90+
venueItem={MOCK_VENUE_ITEM}
91+
index={0}
92+
showEditVenueModal={MOCK_HANDLE_EDIT}
93+
handleDelete={MOCK_HANDLE_DELETE}
94+
/>
95+
</I18nextProvider>,
96+
);
97+
const deleteButton = screen.getByTestId('deleteVenueBtn1');
98+
fireEvent.click(deleteButton);
99+
expect(MOCK_HANDLE_DELETE).toHaveBeenCalledWith('1');
100+
});
101+
102+
test('truncates long venue name correctly', (): void => {
103+
render(
104+
<I18nextProvider i18n={i18n}>
105+
<VenueCard
106+
venueItem={MOCK_VENUE_ITEM_LONG_TEXT}
107+
index={0}
108+
showEditVenueModal={MOCK_HANDLE_EDIT}
109+
handleDelete={MOCK_HANDLE_DELETE}
110+
/>
111+
</I18nextProvider>,
112+
);
113+
114+
expect(
115+
screen.getByText('This is a very long venue...'),
116+
).toBeInTheDocument();
117+
expect(
118+
screen.queryByText(
119+
'This is a very long venue name that should definitely be truncated in the display',
120+
),
121+
).not.toBeInTheDocument();
122+
});
123+
124+
test('displays short name and description without truncation', (): void => {
125+
render(
126+
<I18nextProvider i18n={i18n}>
127+
<VenueCard
128+
venueItem={MOCK_VENUE_ITEM}
129+
index={0}
130+
showEditVenueModal={MOCK_HANDLE_EDIT}
131+
handleDelete={MOCK_HANDLE_DELETE}
132+
/>
133+
</I18nextProvider>,
134+
);
135+
136+
expect(screen.getByText('Grand Hall')).toBeInTheDocument();
137+
expect(
138+
screen.getByText('A spacious venue for large events and gatherings.'),
139+
).toBeInTheDocument();
140+
});
141+
});

‎src/components/Venues/VenueCardMocks.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { vi } from 'vitest';
2+
3+
export const MOCK_VENUE_ITEM = {
4+
_id: '1',
5+
name: 'Grand Hall',
6+
image: null,
7+
capacity: '500',
8+
description: 'A spacious venue for large events and gatherings.',
9+
};
10+
11+
export const MOCK_VENUE_ITEM_WITH_IMAGE = {
12+
_id: '2',
13+
name: 'Conference Room',
14+
image: 'https://surl.li/odyiad',
15+
capacity: '200',
16+
description: 'A modern conference room with all amenities.',
17+
};
18+
19+
export const MOCK_VENUE_ITEM_LONG_TEXT = {
20+
_id: '4',
21+
name: 'This is a very long venue name that should definitely be truncated in the display',
22+
image: null,
23+
capacity: '300',
24+
description:
25+
'This is a very long description that should be truncated. It contains more than seventy five characters to ensure we can test the truncation logic properly. This text will be cut off.',
26+
};
27+
28+
export const MOCK_HANDLE_EDIT = vi.fn();
29+
export const MOCK_HANDLE_DELETE = vi.fn();

0 commit comments

Comments
 (0)