Skip to content

Commit ef0112b

Browse files
authored
test(contributors-loading): add loading component test coverage (JhaSourav07#3109)
## Description Adds a test suite for the contributors loading fallback component. ## Tests Added - Renders loading fallback successfully - Displays loading messages - Verifies animated loader classes - Validates centered layout and themed backdrop - Confirms accessibility attributes Fixes JhaSourav07#2288 ## Pillar - [x] 📐 Pillar 2 — Geometric SVG Improvement - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [x] I have updated `README.md` if I added a new theme or URL parameter. - [x] I have started the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [x] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents b17c8c8 + 31fe7bf commit ef0112b

1 file changed

Lines changed: 48 additions & 0 deletions

File tree

app/contributors/loading.test.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { render, screen } from '@testing-library/react';
2+
import '@testing-library/jest-dom/vitest';
3+
import { describe, it, expect } from 'vitest';
4+
import Loading from './loading';
5+
6+
describe('Contributors Loading', () => {
7+
it('renders loading fallback component', () => {
8+
render(<Loading />);
9+
10+
expect(screen.getByRole('status')).toBeInTheDocument();
11+
});
12+
13+
it('renders loading messages correctly', () => {
14+
render(<Loading />);
15+
16+
expect(screen.getByText(/loading the collective/i)).toBeInTheDocument();
17+
18+
expect(screen.getByText(/fetching contributor data from github/i)).toBeInTheDocument();
19+
});
20+
21+
it('contains animated loader elements', () => {
22+
const { container } = render(<Loading />);
23+
24+
expect(container.querySelector('.animate-spin')).toBeInTheDocument();
25+
26+
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
27+
});
28+
29+
it('maintains centered flex layout and themed backdrop', () => {
30+
const { container } = render(<Loading />);
31+
32+
const wrapper = container.firstChild as HTMLElement;
33+
34+
expect(wrapper).toHaveClass('flex');
35+
expect(wrapper).toHaveClass('min-h-screen');
36+
expect(wrapper).toHaveClass('items-center');
37+
expect(wrapper).toHaveClass('justify-center');
38+
expect(wrapper).toHaveClass('bg-[#050505]');
39+
});
40+
41+
it('renders loader container with accessibility attributes', () => {
42+
render(<Loading />);
43+
44+
const status = screen.getByRole('status');
45+
46+
expect(status).toHaveAttribute('aria-live', 'polite');
47+
});
48+
});

0 commit comments

Comments
 (0)