Files
MeshChatX/tests/frontend/CallPageCustomImage.test.js

142 lines
4.4 KiB
JavaScript

import { mount } from "@vue/test-utils";
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import CallPage from "@/components/call/CallPage.vue";
describe("CallPage.vue - Custom Contact Images", () => {
let axiosMock;
beforeEach(() => {
axiosMock = {
get: vi.fn(),
post: vi.fn(),
patch: vi.fn(),
delete: vi.fn(),
};
window.axios = axiosMock;
// Mock FileReader
const mockFileReader = {
readAsDataURL: vi.fn(function (blob) {
this.result = "data:image/webp;base64,mock";
this.onload({ target: { result: this.result } });
}),
};
vi.stubGlobal(
"FileReader",
vi.fn(() => mockFileReader)
);
// Mock Compressor
vi.mock("compressorjs", () => {
return {
default: vi.fn().mockImplementation((file, options) => {
options.success(file);
}),
};
});
axiosMock.get.mockImplementation((url) => {
if (url.includes("/api/v1/telephone/contacts")) return Promise.resolve({ data: [] });
if (url.includes("/api/v1/telephone/status")) return Promise.resolve({ data: { enabled: true } });
if (url.includes("/api/v1/telephone/voicemail/status")) return Promise.resolve({ data: {} });
return Promise.resolve({ data: {} });
});
});
afterEach(() => {
delete window.axios;
vi.unstubAllGlobals();
vi.resetAllMocks();
});
const mountCallPage = () => {
return mount(CallPage, {
global: {
mocks: {
$t: (key) => key,
$route: { query: {} },
$router: { push: vi.fn() },
},
stubs: {
MaterialDesignIcon: true,
LxmfUserIcon: true,
Toggle: true,
RingtoneEditor: true,
},
},
});
};
it("opens add contact modal and handles image upload", async () => {
const wrapper = mountCallPage();
await wrapper.vm.$nextTick();
// Switch to contacts tab
wrapper.vm.activeTab = "contacts";
await wrapper.vm.$nextTick();
// Open add contact modal
await wrapper.vm.openAddContactModal();
expect(wrapper.vm.isContactModalOpen).toBe(true);
expect(wrapper.vm.contactForm.custom_image).toBeNull();
// Simulate image selection
const imageFile = new File([""], "profile.png", { type: "image/png" });
await wrapper.vm.onContactImageChange({ target: { files: [imageFile], value: "" } });
expect(wrapper.vm.contactForm.custom_image).toBe("data:image/webp;base64,mock");
});
it("saves contact with custom image", async () => {
const wrapper = mountCallPage();
await wrapper.vm.$nextTick();
wrapper.vm.contactForm = {
name: "New Contact",
remote_identity_hash: "hash123",
custom_image: "data:image/webp;base64,mock",
};
axiosMock.post.mockResolvedValue({ data: { message: "Contact added" } });
await wrapper.vm.saveContact(wrapper.vm.contactForm);
expect(axiosMock.post).toHaveBeenCalledWith(
"/api/v1/telephone/contacts",
expect.objectContaining({
name: "New Contact",
custom_image: "data:image/webp;base64,mock",
})
);
});
it("clears image when editing a contact", async () => {
const wrapper = mountCallPage();
await wrapper.vm.$nextTick();
const contact = {
id: 1,
name: "Existing Contact",
remote_identity_hash: "hash123",
custom_image: "existing-img",
};
await wrapper.vm.openEditContactModal(contact);
expect(wrapper.vm.contactForm.custom_image).toBe("existing-img");
// Clear image
wrapper.vm.contactForm.custom_image = null;
axiosMock.patch.mockResolvedValue({ data: { message: "Contact updated" } });
await wrapper.vm.saveContact(wrapper.vm.contactForm);
expect(axiosMock.patch).toHaveBeenCalledWith(
"/api/v1/telephone/contacts/1",
expect.objectContaining({
clear_image: true,
})
);
});
});