Skip to content

Commit cf18be2

Browse files
luciagirasolesluciagirasoles
committed
Add Community snapshot test
1 parent 4b89ce5 commit cf18be2

3 files changed

Lines changed: 319 additions & 2 deletions

File tree

‎app/javascript/react/components/pages/Community.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { Helmet } from 'react-helmet-async';
33

44
import SharedLayout from '../layout/SharedLayout';
5-
import '../../stylesheets/home';
6-
import '../../stylesheets/community';
5+
import '../../stylesheets/home.scss';
6+
import '../../stylesheets/community.scss';
77

88
import OurCommunitySection from '../community/OurCommunitySection';
99
import AdviceSection from '../community/AdviceSection';

‎app/javascript/react/components/pages/Community.test.jsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { HelmetProvider } from 'react-helmet-async';
4+
import Community from './Community';
5+
6+
// Mock SharedLayout component
7+
jest.mock('../layout/SharedLayout', () => {
8+
// eslint-disable-next-line react/prop-types
9+
function MockSharedLayout({ children }) {
10+
return <div className="mock-shared-layout">{children}</div>;
11+
}
12+
return MockSharedLayout;
13+
});
14+
15+
// Mock all community section components
16+
jest.mock('../community/OurCommunitySection', () => {
17+
function MockOurCommunitySection() {
18+
return <div className="mock-our-community-section">Our Community Section</div>;
19+
}
20+
return MockOurCommunitySection;
21+
});
22+
23+
jest.mock('../community/AdviceSection', () => {
24+
function MockAdviceSection() {
25+
return <div className="mock-advice-section">Advice Section</div>;
26+
}
27+
return MockAdviceSection;
28+
});
29+
30+
jest.mock('../community/CodeofConductSection', () => {
31+
function MockCodeofConductSection() {
32+
return <div className="mock-code-of-conduct-section">Code of Conduct Section</div>;
33+
}
34+
return MockCodeofConductSection;
35+
});
36+
37+
jest.mock('../community/CFPWorkingGroupSection', () => {
38+
function MockCFPWorkingGroupSection() {
39+
return <div className="mock-cfp-working-group-section">CFP Working Group Section</div>;
40+
}
41+
return MockCFPWorkingGroupSection;
42+
});
43+
44+
jest.mock('../community/BookClubSection', () => {
45+
function MockBookClubSection() {
46+
return <div className="mock-book-club-section">Book Club Section</div>;
47+
}
48+
return MockBookClubSection;
49+
});
50+
51+
jest.mock('../community/In-PersonConferenceMeetupsSection', () => {
52+
function MockInPersonConferenceMeetupsSection() {
53+
return (
54+
<div className="mock-in-person-conference-meetups-section">
55+
In-Person Conference Meetups Section
56+
</div>
57+
);
58+
}
59+
return MockInPersonConferenceMeetupsSection;
60+
});
61+
62+
jest.mock('../community/InterviewPrepSection', () => {
63+
function MockInterviewPrepSection() {
64+
return <div className="mock-interview-prep-section">Interview Prep Section</div>;
65+
}
66+
return MockInterviewPrepSection;
67+
});
68+
69+
describe('Community Component', () => {
70+
const renderWithHelmet = (component) => {
71+
return render(<HelmetProvider>{component}</HelmetProvider>);
72+
};
73+
74+
test('renders community page correctly', () => {
75+
const { container } = renderWithHelmet(<Community />);
76+
expect(container.firstChild).toMatchSnapshot();
77+
});
78+
79+
test('applies correct CSS classes to main sections', () => {
80+
const { container } = renderWithHelmet(<Community />);
81+
82+
const communitySection = container.querySelector('.community-section');
83+
expect(communitySection).toBeInTheDocument();
84+
85+
const community = container.querySelector('.community');
86+
expect(community).toBeInTheDocument();
87+
88+
const infoSection = container.querySelector('.info');
89+
expect(infoSection).toBeInTheDocument();
90+
91+
const infoLayout = container.querySelector('.info-layout');
92+
expect(infoLayout).toBeInTheDocument();
93+
});
94+
95+
test('renders Our Community section with correct styling', () => {
96+
const { container, getByText } = renderWithHelmet(<Community />);
97+
98+
expect(getByText('Our Community')).toBeInTheDocument();
99+
expect(getByText('Our Community Section')).toBeInTheDocument();
100+
101+
const ourCommunityCard = container.querySelector('.bg-color-community');
102+
expect(ourCommunityCard).toBeInTheDocument();
103+
});
104+
105+
test('renders all info cards with correct titles', () => {
106+
const { getByText } = renderWithHelmet(<Community />);
107+
108+
expect(getByText('Advice')).toBeInTheDocument();
109+
expect(getByText('Book Club')).toBeInTheDocument();
110+
expect(getByText('CFP Working Group')).toBeInTheDocument();
111+
expect(getByText('In-Person Conference Meetups')).toBeInTheDocument();
112+
expect(getByText('Code of Conduct')).toBeInTheDocument();
113+
expect(getByText('Jobs & Interview Prep')).toBeInTheDocument();
114+
});
115+
116+
test('applies correct background colors to info cards', () => {
117+
const { container } = renderWithHelmet(<Community />);
118+
119+
const bgColor1Cards = container.querySelectorAll('.bg-color-1');
120+
const bgColor2Cards = container.querySelectorAll('.bg-color-2');
121+
const bgColor3Cards = container.querySelectorAll('.bg-color-3');
122+
123+
expect(bgColor1Cards.length).toBeGreaterThan(0);
124+
expect(bgColor2Cards.length).toBeGreaterThan(0);
125+
expect(bgColor3Cards.length).toBeGreaterThan(0);
126+
});
127+
128+
test('renders all mocked section components', () => {
129+
const { getByText } = renderWithHelmet(<Community />);
130+
131+
expect(getByText('Our Community Section')).toBeInTheDocument();
132+
expect(getByText('Advice Section')).toBeInTheDocument();
133+
expect(getByText('Code of Conduct Section')).toBeInTheDocument();
134+
expect(getByText('CFP Working Group Section')).toBeInTheDocument();
135+
expect(getByText('Book Club Section')).toBeInTheDocument();
136+
expect(getByText('In-Person Conference Meetups Section')).toBeInTheDocument();
137+
expect(getByText('Interview Prep Section')).toBeInTheDocument();
138+
});
139+
140+
test('applies correct typography classes to titles', () => {
141+
const { container } = renderWithHelmet(<Community />);
142+
143+
const mainTitle = container.querySelector('.font-bold.font-syne');
144+
expect(mainTitle).toBeInTheDocument();
145+
146+
const infoTitles = container.querySelectorAll('.text-xl.font-bold.font-syne');
147+
expect(infoTitles.length).toBeGreaterThan(0);
148+
});
149+
150+
test('applies correct content typography', () => {
151+
const { container } = renderWithHelmet(<Community />);
152+
153+
const contentDivs = container.querySelectorAll('.font-noto.text-base');
154+
expect(contentDivs.length).toBeGreaterThan(0);
155+
});
156+
157+
test('renders within SharedLayout', () => {
158+
const { container } = renderWithHelmet(<Community />);
159+
160+
const sharedLayout = container.querySelector('.mock-shared-layout');
161+
expect(sharedLayout).toBeInTheDocument();
162+
});
163+
});

‎app/javascript/react/components/pages/__snapshots__/Community.test.jsx.snap‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Community Component renders community page correctly 1`] = `
4+
<div
5+
class="mock-shared-layout"
6+
>
7+
<div
8+
class="community-section"
9+
>
10+
<div
11+
class="community"
12+
>
13+
<div
14+
class="info-card bg-color-community"
15+
>
16+
<h2
17+
class="font-bold font-syne"
18+
>
19+
Our Community
20+
</h2>
21+
<div
22+
class="font-noto text-base"
23+
>
24+
<div
25+
class="mock-our-community-section"
26+
>
27+
Our Community Section
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
<div
34+
class="info"
35+
>
36+
<section
37+
class="info-layout"
38+
>
39+
<div
40+
class="info-card-section layout section-cards"
41+
>
42+
<div
43+
class="info-card bg-color-3"
44+
>
45+
<h2
46+
class="text-xl font-bold font-syne"
47+
>
48+
Advice
49+
</h2>
50+
<div
51+
class="font-noto text-base"
52+
>
53+
<div
54+
class="mock-advice-section"
55+
>
56+
Advice Section
57+
</div>
58+
</div>
59+
</div>
60+
<div
61+
class="info-card bg-color-1"
62+
>
63+
<h2
64+
class="text-xl font-bold font-syne"
65+
>
66+
Book Club
67+
</h2>
68+
<div
69+
class="font-noto text-base"
70+
>
71+
<div
72+
class="mock-book-club-section"
73+
>
74+
Book Club Section
75+
</div>
76+
</div>
77+
</div>
78+
<div
79+
class="info-card bg-color-2"
80+
>
81+
<h2
82+
class="text-xl font-bold font-syne"
83+
>
84+
CFP Working Group
85+
</h2>
86+
<div
87+
class="font-noto text-base"
88+
>
89+
<div
90+
class="mock-cfp-working-group-section"
91+
>
92+
CFP Working Group Section
93+
</div>
94+
</div>
95+
</div>
96+
<div
97+
class="info-card bg-color-1"
98+
>
99+
<h2
100+
class="text-xl font-bold font-syne"
101+
>
102+
In-Person Conference Meetups
103+
</h2>
104+
<div
105+
class="font-noto text-base"
106+
>
107+
<div
108+
class="mock-in-person-conference-meetups-section"
109+
>
110+
In-Person Conference Meetups Section
111+
</div>
112+
</div>
113+
</div>
114+
<div
115+
class="info-card bg-color-3"
116+
>
117+
<h2
118+
class="text-xl font-bold font-syne"
119+
>
120+
Code of Conduct
121+
</h2>
122+
<div
123+
class="font-noto text-base"
124+
>
125+
<div
126+
class="mock-code-of-conduct-section"
127+
>
128+
Code of Conduct Section
129+
</div>
130+
</div>
131+
</div>
132+
<div
133+
class="info-card bg-color-2"
134+
>
135+
<h2
136+
class="text-xl font-bold font-syne"
137+
>
138+
Jobs & Interview Prep
139+
</h2>
140+
<div
141+
class="font-noto text-base"
142+
>
143+
<div
144+
class="mock-interview-prep-section"
145+
>
146+
Interview Prep Section
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</section>
152+
</div>
153+
</div>
154+
`;

0 commit comments

Comments
 (0)