WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 1f9f7bb

Browse files
adity1rautadity1raut
authored
test: enhance EventStatsWrapper tests with additional scenarios and props handling (#4950)
* test: enhance EventStatsWrapper tests with additional scenarios and props handling Signed-off-by: adity1raut <[email protected]> * test: enhance EventStatsWrapper tests with additional scenarios and props handling Signed-off-by: adity1raut <[email protected]> * test: enhance EventStatsWrapper tests with additional scenarios and props handling Signed-off-by: adity1raut <[email protected]> * test: enhance EventStatsWrapper tests with additional scenarios and props handling Signed-off-by: adity1raut <[email protected]> --------- Signed-off-by: adity1raut <[email protected]>
1 parent b725243 commit 1f9f7bb

File tree

1 file changed

+224
-6
lines changed

1 file changed

+224
-6
lines changed

‎src/components/EventStats/EventStatsWrapper.spec.tsx‎

Lines changed: 224 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import { MockedProvider } from '@apollo/react-testing';
44
import { EventStatsWrapper } from './EventStatsWrapper';
55
import { BrowserRouter } from 'react-router';
66
import { mockData } from './EventStatsMocks';
7-
import { vi, describe, expect, it } from 'vitest';
7+
import { vi, describe, expect, it, afterEach } from 'vitest';
88

9-
// Mock the modules for PieChart rendering as they require a trasformer being used (which is not done by Vitest)
10-
// These modules are used by the Feedback component
119
vi.mock('@mui/x-charts/PieChart', () => ({
1210
PieChart: () => <div data-testid="mocked-pie-chart">Test</div>,
1311
pieArcClasses: { faded: 'faded-class' },
@@ -18,6 +16,7 @@ describe('Testing Event Stats Wrapper', () => {
1816
afterEach(() => {
1917
vi.restoreAllMocks();
2018
});
19+
2120
const props = {
2221
_id: 'eventStats123',
2322
};
@@ -31,17 +30,236 @@ describe('Testing Event Stats Wrapper', () => {
3130
</MockedProvider>,
3231
);
3332

33+
// Verify initial state - modal should not be visible
34+
expect(queryByText('Event Statistics')).not.toBeInTheDocument();
35+
3436
// Open the modal
35-
fireEvent.click(queryByText('View Event Statistics') as Element);
37+
const button = queryByText('View Event Statistics') as Element;
38+
expect(button).toBeInTheDocument();
39+
fireEvent.click(button);
40+
41+
await waitFor(() =>
42+
expect(queryByText('Event Statistics')).toBeInTheDocument(),
43+
);
44+
45+
// Close the modal using close button
46+
const closeButton = queryByRole('button', { name: /close/i }) as Element;
47+
expect(closeButton).toBeInTheDocument();
48+
fireEvent.click(closeButton);
49+
50+
await waitFor(() =>
51+
expect(queryByText('Event Statistics')).not.toBeInTheDocument(),
52+
);
53+
});
54+
55+
it('Should render button with correct attributes, classes and icon wrapper', () => {
56+
const { getByText, getByLabelText, container } = render(
57+
<MockedProvider mocks={mockData}>
58+
<BrowserRouter>
59+
<EventStatsWrapper {...props} />
60+
</BrowserRouter>
61+
</MockedProvider>,
62+
);
63+
64+
// Check button text and aria-label
65+
const buttonText = getByText('View Event Statistics');
66+
expect(buttonText).toBeInTheDocument();
67+
68+
const button = getByLabelText('checkInRegistrants');
69+
expect(button).toBeInTheDocument();
70+
expect(button).toHaveClass('btn-light', 'text-secondary');
71+
expect(button.tagName).toBe('BUTTON');
72+
73+
const iconWrapper = container.querySelector('[class*="iconWrapper"]');
74+
expect(iconWrapper).toBeInTheDocument();
75+
});
76+
77+
it('Should pass correct props to EventStats and handle empty _id', async () => {
78+
const { getByText, queryByText, rerender } = render(
79+
<MockedProvider mocks={mockData}>
80+
<BrowserRouter>
81+
<EventStatsWrapper {...props} />
82+
</BrowserRouter>
83+
</MockedProvider>,
84+
);
85+
86+
// Initially EventStats should not be visible (show=false)
87+
expect(queryByText('Event Statistics')).not.toBeInTheDocument();
88+
89+
// Open modal to verify eventId prop is passed
90+
const openButton = getByText('View Event Statistics');
91+
fireEvent.click(openButton);
92+
93+
await waitFor(() => {
94+
expect(queryByText('Event Statistics')).toBeInTheDocument();
95+
});
96+
97+
// Verify the modal is actually open
98+
const modalContent = queryByText('Event Statistics');
99+
expect(modalContent).toBeVisible();
100+
101+
// Close the modal before rerendering
102+
const closeButton =
103+
queryByText('×') || document.querySelector('[aria-label*="close"]');
104+
if (closeButton) {
105+
fireEvent.click(closeButton as Element);
106+
await waitFor(() => {
107+
expect(queryByText('Event Statistics')).not.toBeInTheDocument();
108+
});
109+
}
110+
111+
// Test with empty _id to verify fallback key works - only check rendering, don't open modal
112+
rerender(
113+
<MockedProvider mocks={mockData}>
114+
<BrowserRouter>
115+
<EventStatsWrapper _id="" />
116+
</BrowserRouter>
117+
</MockedProvider>,
118+
);
119+
120+
// Button should still render with empty _id
121+
const buttonAfterRerender = getByText('View Event Statistics');
122+
expect(buttonAfterRerender).toBeInTheDocument();
123+
expect(buttonAfterRerender).toBeEnabled();
124+
});
125+
126+
it('Should maintain state consistency through multiple open/close cycles', async () => {
127+
const { queryByText, queryByRole, getByText } = render(
128+
<MockedProvider mocks={mockData}>
129+
<BrowserRouter>
130+
<EventStatsWrapper {...props} />
131+
</BrowserRouter>
132+
</MockedProvider>,
133+
);
134+
135+
// Cycle 1: Open and close
136+
const button = getByText('View Event Statistics');
137+
fireEvent.click(button);
138+
139+
await waitFor(() =>
140+
expect(queryByText('Event Statistics')).toBeInTheDocument(),
141+
);
142+
143+
let closeButton = queryByRole('button', { name: /close/i }) as Element;
144+
expect(closeButton).toBeInTheDocument();
145+
fireEvent.click(closeButton);
146+
147+
await waitFor(() =>
148+
expect(queryByText('Event Statistics')).not.toBeInTheDocument(),
149+
);
150+
151+
// Cycle 2: Open and close again
152+
fireEvent.click(button);
36153

37154
await waitFor(() =>
38155
expect(queryByText('Event Statistics')).toBeInTheDocument(),
39156
);
40157

41-
// Close the modal
42-
fireEvent.click(queryByRole('button', { name: /close/i }) as Element);
158+
closeButton = queryByRole('button', { name: /close/i }) as Element;
159+
fireEvent.click(closeButton);
160+
43161
await waitFor(() =>
44162
expect(queryByText('Event Statistics')).not.toBeInTheDocument(),
45163
);
164+
165+
// Cycle 3: One more cycle to ensure consistency
166+
fireEvent.click(button);
167+
168+
await waitFor(() =>
169+
expect(queryByText('Event Statistics')).toBeInTheDocument(),
170+
);
171+
172+
// Verify button still works after multiple cycles
173+
expect(button).toBeInTheDocument();
174+
expect(button).toBeEnabled();
175+
});
176+
177+
it('Should handle modal state changes correctly', async () => {
178+
const { getByText, queryByText, queryByRole } = render(
179+
<MockedProvider mocks={mockData}>
180+
<BrowserRouter>
181+
<EventStatsWrapper {...props} />
182+
</BrowserRouter>
183+
</MockedProvider>,
184+
);
185+
186+
// Open modal
187+
const button = getByText('View Event Statistics');
188+
fireEvent.click(button);
189+
190+
// Verify modal opened with correct content
191+
await waitFor(() => {
192+
const modal = queryByText('Event Statistics');
193+
expect(modal).toBeInTheDocument();
194+
expect(modal).toBeVisible();
195+
});
196+
197+
// Verify close button is present and functional
198+
const closeButton = queryByRole('button', { name: /close/i });
199+
expect(closeButton).toBeInTheDocument();
200+
201+
// Close and verify state change
202+
fireEvent.click(closeButton as Element);
203+
204+
await waitFor(() => {
205+
expect(queryByText('Event Statistics')).not.toBeInTheDocument();
206+
});
207+
});
208+
209+
it('Should render with correct component structure', () => {
210+
const { container, getByLabelText } = render(
211+
<MockedProvider mocks={mockData}>
212+
<BrowserRouter>
213+
<EventStatsWrapper {...props} />
214+
</BrowserRouter>
215+
</MockedProvider>,
216+
);
217+
218+
// Verify button exists
219+
const button = getByLabelText('checkInRegistrants');
220+
expect(button).toBeInTheDocument();
221+
222+
// Verify button parent structure
223+
expect(button.parentElement).toBeInTheDocument();
224+
225+
const iconWrapper = container.querySelector('[class*="iconWrapper"]');
226+
expect(iconWrapper).toBeInTheDocument();
227+
});
228+
229+
it('Should handle prop changes correctly', () => {
230+
const { rerender, getByText } = render(
231+
<MockedProvider mocks={mockData}>
232+
<BrowserRouter>
233+
<EventStatsWrapper {...props} />
234+
</BrowserRouter>
235+
</MockedProvider>,
236+
);
237+
238+
// Verify initial render
239+
expect(getByText('View Event Statistics')).toBeInTheDocument();
240+
241+
// Rerender with different _id - only verify button renders, don't open modal
242+
rerender(
243+
<MockedProvider mocks={mockData}>
244+
<BrowserRouter>
245+
<EventStatsWrapper _id="differentId" />
246+
</BrowserRouter>
247+
</MockedProvider>,
248+
);
249+
250+
// Verify component still renders correctly
251+
expect(getByText('View Event Statistics')).toBeInTheDocument();
252+
253+
// Rerender back to original _id
254+
rerender(
255+
<MockedProvider mocks={mockData}>
256+
<BrowserRouter>
257+
<EventStatsWrapper {...props} />
258+
</BrowserRouter>
259+
</MockedProvider>,
260+
);
261+
262+
// Component should still render
263+
expect(getByText('View Event Statistics')).toBeInTheDocument();
46264
});
47265
});

0 commit comments

Comments
 (0)