Skip to content

Commit d525936

Browse files
anyulledanyulled
committed
feat(talks): add top three talks section with awards, images, and links
1 parent ae44ae9 commit d525936

File tree

2 files changed

+160
-1
lines changed

2 files changed

+160
-1
lines changed

‎src/views/Talks/Talks.test.tsx‎

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,97 @@ describe("Talks", () => {
104104
expect(dropdownElement).toBeInTheDocument();
105105
});
106106

107-
// Tests for the new topTenTalks array
107+
// Tests for the topThreeTalks array
108+
it("renders the top three talks section with correct awards", () => {
109+
renderWithQueryClient(<Talks />);
110+
111+
// Check for award titles
112+
expect(screen.getByText("Funniest talk")).toBeInTheDocument();
113+
expect(screen.getByText("Best Rated")).toBeInTheDocument();
114+
expect(screen.getByText("Most original")).toBeInTheDocument();
115+
});
116+
117+
it("renders all top three talks with correct speaker names and talk titles", () => {
118+
renderWithQueryClient(<Talks />);
119+
120+
// Check for speaker names
121+
expect(screen.getByText("Victor Rentea")).toBeInTheDocument();
122+
expect(screen.getByText("Laura Perea")).toBeInTheDocument();
123+
expect(screen.getByText("Marc Nuri")).toBeInTheDocument();
124+
125+
// Check for talk titles
126+
expect(
127+
screen.getByText("Top 10 Rest API Design Falls"),
128+
).toBeInTheDocument();
129+
expect(screen.getByText("GenAI among us")).toBeInTheDocument();
130+
expect(
131+
screen.getByText(
132+
"Model Context Protocol Servers 101: Unlocking the Power of AI",
133+
),
134+
).toBeInTheDocument();
135+
});
136+
137+
it("renders top three talks with correct images", () => {
138+
renderWithQueryClient(<Talks />);
139+
140+
// Check for images with correct src attributes
141+
const images = screen.getAllByRole("img");
142+
const speakerImages = images.filter(
143+
(img) =>
144+
img.getAttribute("alt") === "Victor Rentea" ||
145+
img.getAttribute("alt") === "Laura Perea" ||
146+
img.getAttribute("alt") === "Marc Nuri",
147+
);
148+
149+
expect(speakerImages).toHaveLength(3);
150+
151+
const victorImage = speakerImages.find(
152+
(img) => img.getAttribute("alt") === "Victor Rentea",
153+
);
154+
const lauraImage = speakerImages.find(
155+
(img) => img.getAttribute("alt") === "Laura Perea",
156+
);
157+
const marcImage = speakerImages.find(
158+
(img) => img.getAttribute("alt") === "Marc Nuri",
159+
);
160+
161+
expect(victorImage).toHaveAttribute(
162+
"src",
163+
"https://sessionize.com/image/2fde-400o400o1-NVbZAJzrFZpcRjEe5khxjo.png",
164+
);
165+
expect(lauraImage).toHaveAttribute(
166+
"src",
167+
"https://sessionize.com/image/8df6-400o400o1-LKJE9Ej5xvBK92FtxJDo6U.png",
168+
);
169+
expect(marcImage).toHaveAttribute(
170+
"src",
171+
"https://sessionize.com/image/3a9a-400o400o1-sJBQfR5Ki5BGPEDG8GQgKM.jpg",
172+
);
173+
});
174+
175+
it("renders top three talks with correct links", () => {
176+
renderWithQueryClient(<Talks />);
177+
178+
// Check that links are correctly formatted
179+
const victorLink = screen.getByText("Victor Rentea").closest("a");
180+
const lauraLink = screen.getByText("Laura Perea").closest("a");
181+
const marcLink = screen.getByText("Marc Nuri").closest("a");
182+
183+
expect(victorLink).toHaveAttribute(
184+
"href",
185+
ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "838798"),
186+
);
187+
expect(lauraLink).toHaveAttribute(
188+
"href",
189+
ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "945091"),
190+
);
191+
expect(marcLink).toHaveAttribute(
192+
"href",
193+
ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "874255"),
194+
);
195+
});
196+
197+
// Tests for the topTenTalks array
108198
it("renders the top ten talks section", () => {
109199
renderWithQueryClient(<Talks />);
110200
expect(screen.getByText("🔝 Top Ten rated talks")).toBeInTheDocument();

‎src/views/Talks/Talks.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ interface TopRatedTalk {
3131
link: string;
3232
}
3333

34+
interface TopTalkWithSpeaker extends TopRatedTalk {
35+
speakerImage: string;
36+
award: string;
37+
}
38+
3439
const Talks: FC<React.PropsWithChildren<unknown>> = () => {
3540
const [selectedGroupId, setSelectedGroupId] = useState<TrackInfo | null>(
3641
null,
@@ -134,6 +139,36 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
134139
},
135140
];
136141

142+
const topThreeTalks: Array<TopTalkWithSpeaker> = [
143+
{
144+
id: "df057475-0b6a-4fab-8e0d-c5576230dd5c",
145+
award: "Funniest talk",
146+
speaker: "Victor Rentea",
147+
speakerImage:
148+
"https://sessionize.com/image/2fde-400o400o1-NVbZAJzrFZpcRjEe5khxjo.png",
149+
talk: "Top 10 Rest API Design Falls",
150+
link: ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "838798"),
151+
},
152+
{
153+
id: "d32cdd87-3c7d-47bb-98ec-b255d1e4b9ba",
154+
speaker: "Laura Perea",
155+
award: "Best Rated",
156+
speakerImage:
157+
"https://sessionize.com/image/8df6-400o400o1-LKJE9Ej5xvBK92FtxJDo6U.png",
158+
talk: "GenAI among us",
159+
link: ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "945091"),
160+
},
161+
{
162+
id: "11554c51-dc18-407b-b7b4-b8ad2f925b2a",
163+
speaker: "Marc Nuri",
164+
award: "Most original",
165+
speakerImage:
166+
"https://sessionize.com/image/3a9a-400o400o1-sJBQfR5Ki5BGPEDG8GQgKM.jpg",
167+
talk: "Model Context Protocol Servers 101: Unlocking the Power of AI",
168+
link: ROUTE_MEETING_DETAIL_PLAIN.replace(":id", "874255"),
169+
},
170+
];
171+
137172
const filteredTalks = selectedGroupId?.code
138173
? data?.filter((talk) => talk.groupId.toString() === selectedGroupId.code)
139174
: data;
@@ -174,6 +209,40 @@ const Talks: FC<React.PropsWithChildren<unknown>> = () => {
174209
></path>
175210
</svg>
176211
</StyledWaveContainer>
212+
<SectionWrapper color={Color.LIGHT_BLUE} marginTop={1}>
213+
<section
214+
style={{
215+
textAlign: "center",
216+
display: "flex",
217+
flexDirection: "row",
218+
margin: "1rem auto",
219+
width: "70vw",
220+
alignItems: "center",
221+
justifyContent: "space-evenly",
222+
}}
223+
>
224+
{topThreeTalks.map((talk) => (
225+
<article key={talk.id} style={{ maxWidth: "256px" }}>
226+
<h3>{talk.award}</h3>
227+
<Link
228+
to={talk.link}
229+
style={{ color: Color.BLACK_BLUE, textDecoration: "none" }}
230+
>
231+
<img
232+
src={talk.speakerImage}
233+
alt={talk.speaker}
234+
width={256}
235+
style={{ borderRadius: "5%" }}
236+
/>
237+
<p>
238+
<strong>{talk.speaker}</strong>
239+
</p>
240+
<p>{talk.talk}</p>
241+
</Link>
242+
</article>
243+
))}
244+
</section>
245+
</SectionWrapper>
177246
<SectionWrapper color={Color.WHITE} marginTop={1}>
178247
<h2>🔝 Top Ten rated talks</h2>
179248
<section

0 commit comments

Comments
 (0)