Insert events carousel

src/app/components/content/IsaacContent.tsx

@@ -21,6 +21,7 @@ import { isQuestion } from "../../services";
 import { IsaacCodeTabs } from "./IsaacCodeTabs";
 import { IsaacInteractiveCodeSnippet } from "./IsaacInteractiveCodeSnippet";
 import { IsaacCallout } from "./IsaacCallout";
+import { IsaacEventsCarousel } from "./IsaacEventsCarousel";
 const IsaacCodeSnippet = lazy(() => import("./IsaacCodeSnippet"));
 
 const classBasedLayouts = {
@@ -90,6 +91,9 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
       case "codeTabs":
         selectedComponent = <IsaacCodeTabs {...props} />;
         break;
+      case "isaacEventsCarousel":
+        selectedComponent = <IsaacEventsCarousel />;
+        break;
       default:
         switch (layout) {
           case "tabs":

src/app/components/content/IsaacEventsCarousel.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { EventsCarousel } from "../elements/EventsCarousel";
+
+export const IsaacEventsCarousel = () => {
+  return (
+    <div className="isaac-events-carousel" data-testid="isaac-events-carousel">
+      <EventsCarousel />
+      <div className="center-container">
+        <Link className="browse-events" to="/events">
+          Browse all events
+        </Link>
+      </div>
+    </div>
+  );
+};

src/scss/cs/isaac.scss

@@ -537,6 +537,14 @@ a.browse-events {
   }
 }
 
+.isaac-events-carousel {
+  padding-top: 1rem;
+
+  .center-container {
+    margin-top: 1rem;
+  }
+}
+
 .center-container {
   display: flex;
   justify-content: center;

src/test/components/elements/content/IsaacEventsCarousel.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { renderTestEnvironment } from "../../../utils";
+import { IsaacContent } from "../../../../app/components/content/IsaacContent";
+
+const IsaacEventsCarouselHarness = () => <IsaacContent doc={{ type: "isaacEventsCarousel" }} />;
+
+describe("IsaacEventsCarousel content type", () => {
+  const renderInsideIsaacContent = () =>
+    renderTestEnvironment({
+      role: "ANONYMOUS",
+      PageComponent: IsaacEventsCarouselHarness,
+      initialRouteEntries: ["/"],
+    });
+
+  it("renders the events carousel wrapper", () => {
+    renderInsideIsaacContent();
+    const wrapper = screen.getByTestId("isaac-events-carousel");
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  it("renders a 'Browse all events' link pointing to /events", () => {
+    renderInsideIsaacContent();
+    const browseLink = screen.getByRole("link", { name: /browse all events/i });
+    expect(browseLink).toBeInTheDocument();
+    expect(browseLink).toHaveAttribute("href", "/events");
+  });
+});