added web-app and landing

web-app/src/components/socialButton.spec.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { defineAsyncComponent } from "vue";
+import { mount, flushPromises } from "@vue/test-utils";
+import SocialBadge from "./socialButton.vue";
+
+
+const mockIconComponent = (name:string) => ({
+    default: {
+      name,
+      template: `<svg class='${name.toLowerCase()}'></svg>`,
+    },
+  });
+  
+  vi.mock("../components/icons/IconDiscord.vue", () => mockIconComponent("IconDiscord"));
+  vi.mock("../components/icons/IconTwitter.vue", () => mockIconComponent("IconTwitter"));
+  vi.mock("../components/icons/IconTelegram.vue", () => mockIconComponent("IconTelegram"));
+
+  
+
+describe("SocialBadge.vue", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = null;
+  });
+
+  it("renders the correct link", () => {
+    wrapper = mount(SocialBadge, {
+      props: {
+        href: "https://example.com",
+      },
+    });
+
+    const link = wrapper.find("a");
+    expect(link.exists()).toBe(true);
+    expect(link.attributes("href")).toBe("https://example.com");
+    expect(link.attributes("target")).toBe("_blank");
+  });
+
+  it("applies the correct color for light mode", () => {
+    wrapper = mount(SocialBadge, {
+      props: {
+        dark: false,
+      },
+    });
+
+    const badge = wrapper.find(".social-badge");
+    expect(badge.attributes("style")).toContain("color: black");
+    expect(badge.attributes("style")).toContain("border-color: black");
+  });
+
+  it("applies the correct color for dark mode", () => {
+    wrapper = mount(SocialBadge, {
+      props: {
+        dark: true,
+      },
+    });
+
+    const badge = wrapper.find(".social-badge");
+    expect(badge.attributes("style")).toContain("color: white");
+    expect(badge.attributes("style")).toContain("border-color: white");
+  });
+
+//    it("renders the correct icon based on the type prop", async () => {
+//     wrapper = mount(SocialBadge, {
+//       props: {
+//         type: "discord",
+//       },
+//     });
+//     await flushPromises();
+//     const current = wrapper.getCurrentComponent()?.setupState?.img.__asyncResolved
+//     console.log("current", current.default.name);
+    
+//     expect(current.default.name).toBe("IconDiscord");
+
+//     // expect(icon.exists()).toBe(true);
+//   });
+
+  it("does not render an icon if the type is unsupported", async () => {
+    wrapper = mount(SocialBadge, {
+      props: {
+        type: "unsupported",
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const icon = wrapper.find(".social-badge-icon").find("component");
+    expect(icon.exists()).toBe(false);
+  });
+
+  it("renders without crashing when no props are provided", () => {
+    wrapper = mount(SocialBadge);
+    
+    expect(wrapper.exists()).toBe(true);
+  });
+});