diff --git a/src/2023/Cfp/CfpSection2023.test.tsx b/src/2023/Cfp/CfpSection2023.test.tsx
new file mode 100644
index 000000000..e8bacfd8e
--- /dev/null
+++ b/src/2023/Cfp/CfpSection2023.test.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import CfpSection2023 from "./CfpSection2023";
+import { useWindowSize } from "react-use";
+import conferenceData from "../../data/2023.json";
+import { data } from "./CfpData";
+
+// Mock useWindowSize to control the window size in tests
+jest.mock("react-use", () => ({
+ ...jest.requireActual("react-use"),
+ useWindowSize: jest.fn(),
+}));
+
+describe("CfpSection2023", () => {
+ beforeEach(() => {
+ // Reset the mock before each test
+ (useWindowSize as jest.Mock).mockReset();
+ (useWindowSize as jest.Mock).mockReturnValue({ width: 1024 }); // Default width
+ });
+
+ it("should render without crashing", () => {
+ render();
+ });
+
+ it("should render the title and subtitle", () => {
+ render();
+ expect(
+ screen.getByText("CFP Committee", { exact: false }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText(
+ "We're excited to announce the members of the Call for Papers committee for the next DevBcn conference! These experienced professionals will be reviewing and selecting the best talks and workshops for the upcoming event.",
+ ),
+ ).toBeInTheDocument();
+ });
+
+ it("should render the tracks and members", () => {
+ render();
+ data.forEach((track) => {
+ expect(screen.getAllByText(track.name, { exact: false })).not.toBeNull();
+ track.members
+ .filter((member) => member.photo !== "")
+ .forEach((member) => {
+ expect(
+ screen.getAllByText(member.name, { exact: false }),
+ ).not.toBeNull();
+ });
+ });
+ });
+
+ it("should render member photos", () => {
+ render();
+ data.forEach((track) => {
+ track.members
+ .filter((member) => member.photo !== "")
+ .forEach((member) => {
+ const image = screen.getAllByAltText(member.name);
+ expect(image).not.toBeNull();
+ expect(image.at(0)).toHaveAttribute("src", member.photo);
+ });
+ });
+ });
+
+ it("should render twitter links", () => {
+ render();
+ data.forEach((track) => {
+ track.members
+ .filter((member) => member.twitter !== "")
+ .forEach((member) => {
+ const twitterLinks = screen.getAllByRole("link");
+ const twitterLink = twitterLinks.find(
+ (link) => link.getAttribute("href") === member.twitter,
+ );
+ expect(twitterLink).toBeInTheDocument();
+ expect(twitterLink).toHaveAttribute("href", member.twitter);
+ });
+ });
+ });
+
+ it("should render linkedIn links", () => {
+ render();
+ data.forEach((track) => {
+ track.members
+ .filter((member) => member.linkedIn !== "")
+ .forEach((member) => {
+ const linkedInLinks = screen.getAllByRole("link");
+ const linkedInLink = linkedInLinks.find(
+ (link) => link.getAttribute("href") === member.linkedIn,
+ );
+ expect(linkedInLink).toBeInTheDocument();
+ expect(linkedInLink).toHaveAttribute("href", member.linkedIn);
+ });
+ });
+ });
+
+ it("should update the document title", async () => {
+ render();
+ await waitFor(() => {
+ expect(document.title).toBe(
+ `CFP Committee - DevBcn - ${conferenceData.edition}`,
+ );
+ });
+ });
+
+ it("should not render the icons when the width is smaller than the breakpoint", () => {
+ (useWindowSize as jest.Mock).mockReturnValue({ width: 767 });
+ render();
+ const lessIcon = screen.queryByAltText("more than - icon");
+ const moreIcon = screen.queryByAltText("Less than - icon");
+ expect(lessIcon).not.toBeInTheDocument();
+ expect(moreIcon).not.toBeInTheDocument();
+ });
+});
diff --git a/src/2023/Cfp/CfpSection2023.tsx b/src/2023/Cfp/CfpSection2023.tsx
index 0acac71e7..c03e02a41 100644
--- a/src/2023/Cfp/CfpSection2023.tsx
+++ b/src/2023/Cfp/CfpSection2023.tsx
@@ -35,7 +35,9 @@ const MemberName = styled.h5`
text-align: left;
`;
-const CfpTrackComponent: FC> = ({ track }) => (
+const CfpTrackComponent: FC> = ({
+ track,
+}) => (
<>
{track.name}
@@ -90,8 +92,14 @@ const CfpSection2023: FC> = () => {
/>
{width > MOBILE_BREAKPOINT && (
<>
-
-
+
+
)}
diff --git a/src/services/buildSlashes.ts b/src/services/buildSlashes.ts
new file mode 100644
index 000000000..299f3fa89
--- /dev/null
+++ b/src/services/buildSlashes.ts
@@ -0,0 +1,10 @@
+export const buildSlashes = (module: number) => {
+ const slashesElement = document.getElementById("Slashes");
+
+ const slashesWidth = slashesElement?.offsetWidth ?? 0;
+ let slashes = "";
+ for (let index = 0; index < slashesWidth; index++) {
+ if (index % module === 0) slashes += "/ ";
+ }
+ return slashes;
+};
diff --git a/src/views/Home/components/Sponsors/BasicSponsor.tsx b/src/views/Home/components/Sponsors/BasicSponsor.tsx
index c0e0c2eed..99c0b10c3 100644
--- a/src/views/Home/components/Sponsors/BasicSponsor.tsx
+++ b/src/views/Home/components/Sponsors/BasicSponsor.tsx
@@ -11,39 +11,31 @@ import {
StyledSponsorTitleSlashesContainer,
} from "./Sponsors.style";
import SponsorBadge from "./SponsorBadge";
-import {Color} from "../../../../styles/colors";
-import {BIG_BREAKPOINT} from "../../../../constants/BreakPoints";
-import {buildSlashes} from "./Sponsors";
-import {useWindowSize} from "react-use";
-import React, {FC, useCallback, useEffect, useState} from "react";
-import {Sponsor} from "./SponsorsData";
+import { Color } from "../../../../styles/colors";
+import { BIG_BREAKPOINT } from "../../../../constants/BreakPoints";
+import React, { FC } from "react";
+import { Sponsor } from "./SponsorsData";
+import { useSponsorsHook } from "./useSponsorsHook";
interface Props {
sponsors: Array | null;
}
-export const BasicSponsor: FC> = ({sponsors}) => {
- const { width } = useWindowSize();
- const [slashes, setSlashes] = useState("");
- const [isHovered, setIsHovered] = useState(false);
-
- useEffect(() => {
- const newSlashes = buildSlashes(2);
-
- setSlashes(newSlashes);
- }, [width]);
-
- const handleHoverSponsorBasic = useCallback(() => setIsHovered(true), []);
- const handleUnHoverSponsorBasic = useCallback(() => setIsHovered(false), []);
-
+export const BasicSponsor: FC> = ({
+ sponsors,
+}) => {
+ const { width, slashes, isHovered, handleHover, handleUnHover } =
+ useSponsorsHook({
+ numberOfSlashGroups: 2,
+ });
return (
<>
{sponsors !== null && sponsors.length > 0 && (