NW6 | Sabella Fisseha | Test for Card Component, Deck Component and Feature Active Row

src/components/Card/__test__/card.test.jsx

@@ -0,0 +1,31 @@
+import Card from "../Card";
+import { render, screen } from "@testing-library/react";
+
+test("should render a title", () => {
+  render(
+    <Card
+      title="countryName"
+      url="https://example.com"
+      image="test-image.jpg"
+    />
+  );
+  const titleElement = screen.getByRole("heading", { name: "countryName" });
+  expect(titleElement).toBeInTheDocument();
+});
+
+test("should render a link with the correct URL", () => {
+  render(
+    <Card title="Manchester" url="https://example.com" image="test-image.jpg" />
+  );
+  const linkElement = screen.getByRole("link", { name: "Manchester" });
+  expect(linkElement).toBeInTheDocument();
+  expect(linkElement).toHaveAttribute("href", "https://example.com");
+});
+
+test("should render an image with alt text", () => {
+  render(
+    <Card title="Manchester" url="https://example.com" image="test-image.jpg" />
+  );
+  const imageElement = screen.getByAltText("Manchester");
+  expect(imageElement).toBeInTheDocument();
+});

src/components/Deck/Deck.jsx

@@ -4,7 +4,7 @@ import cardsData from "@/data/fakeCards.json";
 
 const Deck = (props) => {
   return (
-    <div className="deck">
+    <div className="deck" data-testid="info cards">
       {cardsData.map((city, index) => (
         <Card
           key={index}

src/components/Deck/__test__/Deck.test.jsx

@@ -0,0 +1,37 @@
+import Deck from "../Deck";
+import { render, screen } from "@testing-library/react";
+
+test(" info cards should be displayed on the page for each city (Glasgow, Manchester, London).", () => {
+  render(<Deck />);
+  const cardcomponent = screen.getAllByTestId("info cards");
+  const manchester = cardcomponent.filter((card) =>
+    card.textContent.toLowerCase().includes("manchester")
+  );
+  const glasgow = cardcomponent.filter((card) =>
+    card.textContent.toLowerCase().includes("glasgow")
+  );
+  const london = cardcomponent.filter((card) =>
+    card.textContent.toLowerCase().includes("london")
+  );
+  expect(manchester.length).toBeGreaterThan(0);
+  expect(glasgow.length).toBeGreaterThan(0);
+  expect(london.length).toBeGreaterThan(0);
+});
+test("Each card should link to the correct website.", () => {
+  render(<Deck />);
+  const cardcomponent = screen.getAllByTestId("info cards");
+  cardcomponent.forEach((card) => {
+    const linkElement = card.querySelector("a");
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute("href");
+  });
+});
+test("Each card should link to the correct image.", () => {
+  render(<Deck />);
+  const cardcomponent = screen.getAllByTestId("info cards");
+  cardcomponent.forEach((card) => {
+    const imageElement = card.querySelector("img");
+    expect(imageElement).toBeInTheDocument();
+    expect(imageElement).toHaveAttribute("src");
+  });
+});

src/components/SearchResult/__test__/featureactiverow.test.jsx

@@ -0,0 +1,32 @@
+import TableBody from "../TableBody";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+test("Verify that each row of your table can be highlighted (on and off) independently when being clicked.", () => {
+  render(
+    <table>
+      <tbody>
+        <TableBody
+          id={1}
+          title={"tab"}
+          name={"he"}
+          firstName={"gr"}
+          surName={"dj"}
+          email={"df"}
+          roomId={"kd"}
+          checkInDate={"fd"}
+          checkOutDate={"v"}
+          stayNights={"om"}
+        />
+      </tbody>
+    </table>
+  );
+
+  const tableRows = screen.getAllByRole("row");
+
+  tableRows.forEach((row) => {
+    fireEvent.click(row);
+    expect(row).toHaveClass("selected");
+    fireEvent.click(row);
+    expect(row).not.toHaveClass("selected");
+  });
+});

witch main

@@ -0,0 +1,11 @@
+  Feature-Active-row
+  Feature-Search-State
+  Feature-implement-Search-functionality
+  FeatureCalculateDuration
+  Search-onSubmit
+  feature-booking-state
+* feature-card
+  feature-deck
+  fetch-bookings
+  main
+  search-results