Skip to content

Commit 252d1ae

Browse files
coder13coder13
committed
Added more tests
1 parent 2f0443b commit 252d1ae

File tree

4 files changed

+174
-1
lines changed

4 files changed

+174
-1
lines changed

‎jest.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ const config: Config = {
44
preset: 'ts-jest',
55
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
66
testEnvironment: 'jsdom',
7+
moduleNameMapper: {
8+
'^@/(.*)$': '<rootDir>/src/$1',
9+
},
710
transform: {
811
'^.+\\.(ts|tsx)?$': 'ts-jest',
912
},

‎src/components/CompetitionListItem/CompetitionListItem.test.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import '@testing-library/jest-dom';
2+
import { render, screen } from '@testing-library/react';
3+
import { MemoryRouter } from 'react-router-dom';
4+
import { CompetitionListItem } from './CompetitionListItem';
5+
6+
const baseProps = {
7+
id: '123',
8+
name: 'Test Competition',
9+
start_date: '2024-01-01',
10+
end_date: '2024-01-02',
11+
country_iso2: 'US',
12+
city: 'New York',
13+
isLive: false,
14+
isBookmarked: false,
15+
};
16+
17+
function renderWithRouter(ui: React.ReactElement) {
18+
return render(ui, {
19+
wrapper: MemoryRouter,
20+
});
21+
}
22+
23+
describe('CompetitionListItem', () => {
24+
it('renders with all props (live and bookmarked)', () => {
25+
const { baseElement } = renderWithRouter(
26+
<CompetitionListItem {...baseProps} isLive={true} isBookmarked={true} />,
27+
);
28+
expect(baseElement).toMatchSnapshot();
29+
});
30+
31+
it('renders with only isLive true', () => {
32+
renderWithRouter(<CompetitionListItem {...baseProps} isLive={true} isBookmarked={false} />);
33+
expect(screen.getByRole('listitem').querySelector('.fa-tower-broadcast')).toBeInTheDocument();
34+
expect(screen.getByRole('listitem').querySelector('.fa-bookmark')).not.toBeInTheDocument();
35+
});
36+
37+
it('renders with only isBookmarked true', () => {
38+
renderWithRouter(<CompetitionListItem {...baseProps} isLive={false} isBookmarked={true} />);
39+
expect(screen.getByRole('listitem').querySelector('.fa-bookmark')).toBeInTheDocument();
40+
expect(
41+
screen.getByRole('listitem').querySelector('.fa-tower-broadcast'),
42+
).not.toBeInTheDocument();
43+
});
44+
45+
it('renders with neither isLive nor isBookmarked', () => {
46+
renderWithRouter(<CompetitionListItem {...baseProps} isLive={false} isBookmarked={false} />);
47+
expect(
48+
screen.getByRole('listitem').querySelector('.fa-tower-broadcast'),
49+
).not.toBeInTheDocument();
50+
expect(screen.getByRole('listitem').querySelector('.fa-bookmark')).not.toBeInTheDocument();
51+
});
52+
53+
it('shows flag if country_iso2 is valid', () => {
54+
renderWithRouter(<CompetitionListItem {...baseProps} />);
55+
expect(screen.getByText('🇺🇸')).toBeInTheDocument();
56+
});
57+
58+
it('applies opacity-50 class if competition is in the past', () => {
59+
const pastProps = {
60+
...baseProps,
61+
end_date: '2000-01-01',
62+
};
63+
renderWithRouter(<CompetitionListItem {...pastProps} />);
64+
expect(screen.getByRole('listitem').className).toMatch(/opacity-50/);
65+
});
66+
67+
it('matches snapshot (default)', () => {
68+
const { baseElement } = renderWithRouter(<CompetitionListItem {...baseProps} />);
69+
expect(baseElement).toMatchSnapshot();
70+
});
71+
});

‎src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`CompetitionListItem matches snapshot (default) 1`] = `
4+
<body>
5+
<div>
6+
<a
7+
href="/competitions/123"
8+
>
9+
<li
10+
class="border bg-white list-none rounded-md px-2 py-2 flex cursor-pointer hover:bg-slate-100 group transition-colors my-1 flex-row opacity-50"
11+
>
12+
<div
13+
class="flex flex-shrink mr-2 text-2xl"
14+
>
15+
16+
🇺🇸
17+
18+
</div>
19+
<div
20+
class="flex-1"
21+
>
22+
<p
23+
class="font-normal leading-1"
24+
>
25+
26+
Test Competition
27+
28+
</p>
29+
30+
<p
31+
class="text-gray-600 text-sm leading-1"
32+
>
33+
Jan 1 – 2, 2024
34+
35+
–
36+
37+
New York
38+
</p>
39+
</div>
40+
</li>
41+
</a>
42+
</div>
43+
</body>
44+
`;
45+
46+
exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] = `
47+
<body>
48+
<div>
49+
<a
50+
href="/competitions/123"
51+
>
52+
<li
53+
class="border bg-white list-none rounded-md px-2 py-2 flex cursor-pointer hover:bg-slate-100 group transition-colors my-1 flex-row opacity-50"
54+
>
55+
<div
56+
class="flex flex-shrink mr-2 text-2xl"
57+
>
58+
59+
🇺🇸
60+
61+
</div>
62+
<div
63+
class="flex-1"
64+
>
65+
<p
66+
class="font-normal leading-1"
67+
>
68+
69+
Test Competition
70+
71+
</p>
72+
73+
<p
74+
class="text-gray-600 text-sm leading-1"
75+
>
76+
Jan 1 – 2, 2024
77+
78+
–
79+
80+
New York
81+
</p>
82+
</div>
83+
<div
84+
class="flex flex-shrink text-2xl items-center px-2"
85+
>
86+
<span
87+
class="fa fa-tower-broadcast text-green-500"
88+
/>
89+
</div>
90+
</li>
91+
</a>
92+
</div>
93+
</body>
94+
`;

‎tsconfig.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
"compilerOptions": {
33
"target": "ESNext",
44
"lib": ["dom", "dom.iterable", "esnext"],
5-
"types": ["vite/client", "vite-plugin-svgr/client", "@modyfi/vite-plugin-yaml/modules"], // need to install
5+
"types": [
6+
"vite/client",
7+
"vite-plugin-svgr/client",
8+
"@modyfi/vite-plugin-yaml/modules",
9+
"@types/jest"
10+
], // need to install
611
"allowJs": true,
712
"noImplicitAny": false,
813
"skipLibCheck": false,

0 commit comments

Comments
 (0)