Tests to event page components addition + bug fixes (#229)

Co-authored-by: sonylomo <sonylomo1@gmail.com>

[Have you read the contributing guidelines ?](https://github.com/SpaceyaTech/SYT-Web-Redesign/blob/Dev/docs/CONTRIBUTING.md)

# What is the purpose of your _pull request_?

- [ ] Bug fix
- [ ] New feature
- [ ] Documentation

# Proposed changes

# Warning

Please read these points carefully and answer honestly with an `X`
into all the boxes. Example : [X]

Before submitting a _pull request_ make sure you have:

- [ ] Read the guidelines for contributing.
- [ ] Wrote some tests.
- [ ] Respected the linting guidelines (read the guide below for help).

## How to Check and Fix Linting Issues

Run `npm run validate`. This command will run prettier and eslint checks to ensure linting guidelines are respected.

- If the command exits with code 0 (build is successful), there are no linting issues.

- If the command exits with a code other than 0, scroll up the command output and look for identified linting issues. Fix them and revalidate to check if the issues have been resolved by re-running the command.

src/components/GoBackBtn.jsx

@@ -5,6 +5,7 @@ function GoBackBtn() {
   return (
     <NavLink
       to={-1}
+      data-testid="go-back-button"
       className="border cursor-pointer rounded-full bg-white p-1 w-fit"
     >
       <div className="flex-center bg-green-light rounded-full px-3 py-1.5 gap-2">

src/pages/events/sections/EventsSection.jsx

@@ -89,7 +89,10 @@ function EventsSection() {
 
       {isSuccess && (
         <div className="w-full flex items-center flex-col">
-          <div className="flex items-center justify-between mb-6 gap-12">
+          <div
+            data-testId="categories-list"
+            className="flex items-center justify-between mb-6 gap-12"
+          >
             {isSuccess && (
               <div className="flex items-center justify-center space-x-4 w-full md:w-fit mx-auto overflow-auto">
                 {uniqueCategory.map((category) => (
@@ -110,7 +113,10 @@ function EventsSection() {
             )}
           </div>
 
-          <div className="w-full grid grid-cols-1 sm:grid-cols-2 place-content-center lg:grid-cols-3 gap-8">
+          <div
+            data-testId="events-list"
+            className="w-full grid grid-cols-1 sm:grid-cols-2 place-content-center lg:grid-cols-3 gap-8"
+          >
             {/* {Array.isArray(events) &&
               events.map((event) => <EventCard key={event.id} event={event} />)} */}
             {filteredEvents?.map((event) => (

tests/pages/events-page.spec.js

@@ -0,0 +1,48 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:5173/events");
+});
+
+test.describe("Events page tests", () => {
+  test("should have correct metadata", async ({ page }) => {
+    await expect(page).toHaveTitle("Upcoming Events - SpaceYaTech");
+    const descriptionMeta = await page.locator("meta[name='description']");
+    await expect(descriptionMeta).toHaveAttribute(
+      "content",
+      "Upcoming tech events powered by SpaceYaTech."
+    );
+    const ogImageMeta = await page.locator("meta[property='og:image']");
+    await expect(ogImageMeta).toHaveAttribute(
+      "content",
+      "https://apis.spaceyatech.com/media/blog-images/syt.png"
+    );
+  });
+  test("should have a go back button", async ({ page }) => {
+    const goBackButton = page.getByTestId("go-back-button");
+    await expect(goBackButton).toBeVisible();
+  });
+
+  test("should have a featured carousel", async ({ page }) => {
+    const featuredCarousel = page.locator("text=Featured Events");
+    await expect(featuredCarousel).toBeVisible();
+  });
+  test("should have a Search event", async ({ page }) => {
+    await expect(page.getByRole("button", { name: "Search" })).toBeVisible();
+  });
+  test("should have event list on start", async ({ page }) => {
+    await page.waitForSelector("[data-testId=\"events-list\"]");
+    const eventsList = page.getByTestId("events-list");
+    await expect(eventsList).toBeVisible();
+  });
+
+  test("should have categories list on start", async ({ page }) => {
+    await page.waitForSelector("[data-testId=\"categories-list\"]");
+    const categoriesList = page.getByTestId("categories-list");
+    await expect(categoriesList).toBeVisible();
+  });
+
+  test("should have a loader when loading events", async ({ page }) => {
+    await expect(page.getByText("Loading events...")).toBeVisible();
+  });
+});

vite.config.js.timestamp-1726468811508-c6c9efaa18449.mjs

@@ -0,0 +1,39 @@
+// vite.config.js
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+import react from "file:///home/kibuchi/Projects/SYT/SYT-Web-Redesign/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import million from "file:///home/kibuchi/Projects/SYT/SYT-Web-Redesign/node_modules/million/dist/packages/compiler.mjs";
+import {
+  defineConfig,
+  loadEnv,
+} from "file:///home/kibuchi/Projects/SYT/SYT-Web-Redesign/node_modules/vite/dist/node/index.js";
+var __vite_injected_original_import_meta_url =
+  "file:///home/kibuchi/Projects/SYT/SYT-Web-Redesign/vite.config.js";
+var __filename = fileURLToPath(__vite_injected_original_import_meta_url);
+var __dirname = dirname(__filename);
+var vite_config_default = defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  return {
+    define: {
+      "process.env.REACT_APP_API_BASE_URL": JSON.stringify(
+        env.REACT_APP_API_BASE_URL
+      ),
+    },
+    plugins: [million.vite({ auto: true }), react()],
+    test: {
+      include: ["src/**/*.test.js"],
+    },
+    server: {
+      watch: {
+        usePolling: true,
+      },
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+  };
+});
+export { vite_config_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9raWJ1Y2hpL1Byb2plY3RzL1NZVC9TWVQtV2ViLVJlZGVzaWduXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvaG9tZS9raWJ1Y2hpL1Byb2plY3RzL1NZVC9TWVQtV2ViLVJlZGVzaWduL3ZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9ob21lL2tpYnVjaGkvUHJvamVjdHMvU1lUL1NZVC1XZWItUmVkZXNpZ24vdml0ZS5jb25maWcuanNcIjsvKiBlc2xpbnQtZGlzYWJsZSBpbXBvcnQvbm8tZXh0cmFuZW91cy1kZXBlbmRlbmNpZXMgKi9cbi8qIGVzbGludC1kaXNhYmxlIG5vLXVuZGVyc2NvcmUtZGFuZ2xlICovXG4vLy8gPHJlZmVyZW5jZSB0eXBlcz1cInZpdGVzdFwiIC8+XG5pbXBvcnQgcGF0aCwgeyBkaXJuYW1lIH0gZnJvbSBcInBhdGhcIjtcbmltcG9ydCB7IGZpbGVVUkxUb1BhdGggfSBmcm9tIFwidXJsXCI7XG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI7XG5pbXBvcnQgbWlsbGlvbiBmcm9tIFwibWlsbGlvbi9jb21waWxlclwiO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnLCBsb2FkRW52IH0gZnJvbSBcInZpdGVcIjtcblxuY29uc3QgX19maWxlbmFtZSA9IGZpbGVVUkxUb1BhdGgoaW1wb3J0Lm1ldGEudXJsKTtcbmNvbnN0IF9fZGlybmFtZSA9IGRpcm5hbWUoX19maWxlbmFtZSk7XG5cbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoKHsgbW9kZSB9KSA9PiB7XG4gIGNvbnN0IGVudiA9IGxvYWRFbnYobW9kZSwgcHJvY2Vzcy5jd2QoKSwgXCJcIik7XG4gIHJldHVybiB7XG4gICAgZGVmaW5lOiB7XG4gICAgICBcInByb2Nlc3MuZW52LlJFQUNUX0FQUF9BUElfQkFTRV9VUkxcIjogSlNPTi5zdHJpbmdpZnkoXG4gICAgICAgIGVudi5SRUFDVF9BUFBfQVBJX0JBU0VfVVJMXG4gICAgICApLFxuICAgIH0sXG4gICAgcGx1Z2luczogW21pbGxpb24udml0ZSh7IGF1dG86IHRydWUgfSksIHJlYWN0KCldLFxuICAgIHRlc3Q6IHtcbiAgICAgIGluY2x1ZGU6IFtcInNyYy8qKi8qLnRlc3QuanNcIl0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHdhdGNoOiB7XG4gICAgICAgIHVzZVBvbGxpbmc6IHRydWUsXG4gICAgICB9LFxuICAgIH0sXG4gICAgcmVzb2x2ZToge1xuICAgICAgYWxpYXM6IHtcbiAgICAgICAgXCJAXCI6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsIFwiLi9zcmNcIiksXG4gICAgICB9LFxuICAgIH0sXG4gIH07XG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFHQSxPQUFPLFFBQVEsZUFBZTtBQUM5QixTQUFTLHFCQUFxQjtBQUM5QixPQUFPLFdBQVc7QUFDbEIsT0FBTyxhQUFhO0FBQ3BCLFNBQVMsY0FBYyxlQUFlO0FBUHdKLElBQU0sMkNBQTJDO0FBUy9PLElBQU0sYUFBYSxjQUFjLHdDQUFlO0FBQ2hELElBQU0sWUFBWSxRQUFRLFVBQVU7QUFHcEMsSUFBTyxzQkFBUSxhQUFhLENBQUMsRUFBRSxLQUFLLE1BQU07QUFDeEMsUUFBTSxNQUFNLFFBQVEsTUFBTSxRQUFRLElBQUksR0FBRyxFQUFFO0FBQzNDLFNBQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxNQUNOLHNDQUFzQyxLQUFLO0FBQUEsUUFDekMsSUFBSTtBQUFBLE1BQ047QUFBQSxJQUNGO0FBQUEsSUFDQSxTQUFTLENBQUMsUUFBUSxLQUFLLEVBQUUsTUFBTSxLQUFLLENBQUMsR0FBRyxNQUFNLENBQUM7QUFBQSxJQUMvQyxNQUFNO0FBQUEsTUFDSixTQUFTLENBQUMsa0JBQWtCO0FBQUEsSUFDOUI7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLE9BQU87QUFBQSxRQUNMLFlBQVk7QUFBQSxNQUNkO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0wsS0FBSyxLQUFLLFFBQVEsV0FBVyxPQUFPO0FBQUEsTUFDdEM7QUFBQSxJQUNGO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==