98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
|
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);
|
||
|
|
});
|
||
|
|
});
|