Zaid-maker
1 month ago
parent
fe09beaf6a
commit
7855dd97a5
@ -0,0 +1,21 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname, resolve } from 'path';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: ['./test/component/setup.js'],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, '../src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,100 @@
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import MonitorList from "../../src/components/MonitorList.vue";
|
||||
import MonitorListItem from "../../src/components/MonitorListItem.vue";
|
||||
|
||||
// Mock child components
|
||||
vi.mock("../../src/components/MonitorListItem.vue", {
|
||||
default: {
|
||||
name: "MonitorListItem",
|
||||
template: "<div class=\"monitor-list-item\"></div>"
|
||||
}
|
||||
});
|
||||
|
||||
describe("MonitorList.vue", () => {
|
||||
let wrapper;
|
||||
const mockMonitors = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Test Monitor 1",
|
||||
type: "http",
|
||||
status: "up",
|
||||
url: "https://example.com"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Test Monitor 2",
|
||||
type: "ping",
|
||||
status: "down",
|
||||
hostname: "example.org"
|
||||
}
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mount(MonitorList, {
|
||||
props: {
|
||||
monitors: mockMonitors,
|
||||
activeMonitor: null,
|
||||
showTags: true,
|
||||
showStatus: true,
|
||||
showPing: true,
|
||||
showAverage: true
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
MonitorListItem: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it("renders monitor list items", () => {
|
||||
const items = wrapper.findAllComponents(MonitorListItem);
|
||||
expect(items).toHaveLength(mockMonitors.length);
|
||||
});
|
||||
|
||||
it("emits select-monitor event when monitor is clicked", async () => {
|
||||
const items = wrapper.findAll(".monitor-list-item");
|
||||
await items[0].trigger("click");
|
||||
|
||||
expect(wrapper.emitted("select-monitor")).toBeTruthy();
|
||||
expect(wrapper.emitted("select-monitor")[0]).toEqual([mockMonitors[0]]);
|
||||
});
|
||||
|
||||
it("applies active class to selected monitor", async () => {
|
||||
await wrapper.setProps({
|
||||
activeMonitor: mockMonitors[0]
|
||||
});
|
||||
|
||||
const items = wrapper.findAll(".monitor-list-item");
|
||||
expect(items[0].classes()).toContain("active");
|
||||
expect(items[1].classes()).not.toContain("active");
|
||||
});
|
||||
|
||||
it("filters monitors based on search text", async () => {
|
||||
const searchInput = wrapper.find("input[type=\"search\"]");
|
||||
await searchInput.setValue("Test Monitor 1");
|
||||
|
||||
const items = wrapper.findAllComponents(MonitorListItem);
|
||||
expect(items).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("sorts monitors by status", async () => {
|
||||
const sortButton = wrapper.find(".sort-status");
|
||||
await sortButton.trigger("click");
|
||||
|
||||
const items = wrapper.findAllComponents(MonitorListItem);
|
||||
const firstMonitorProps = items[0].props();
|
||||
expect(firstMonitorProps.monitor.status).toBe("down");
|
||||
});
|
||||
|
||||
it("toggles visibility of columns", async () => {
|
||||
await wrapper.setProps({
|
||||
showPing: false,
|
||||
showAverage: false
|
||||
});
|
||||
|
||||
expect(wrapper.find(".ping-column").exists()).toBe(false);
|
||||
expect(wrapper.find(".average-column").exists()).toBe(false);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,114 @@
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import PingChart from "../../src/components/PingChart.vue";
|
||||
import { Line } from "vue-chartjs";
|
||||
|
||||
// Mock Chart.js components
|
||||
vi.mock("vue-chartjs", () => ({
|
||||
Line: {
|
||||
name: "Line",
|
||||
template: "<canvas></canvas>"
|
||||
}
|
||||
}));
|
||||
|
||||
describe("PingChart.vue", () => {
|
||||
let wrapper;
|
||||
const mockData = {
|
||||
labels: ["12:00", "12:01", "12:02"],
|
||||
datasets: [{
|
||||
label: "Ping",
|
||||
data: [100, 150, 120],
|
||||
borderColor: "#42b983",
|
||||
tension: 0.3
|
||||
}]
|
||||
};
|
||||
|
||||
const mockOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Response Time (ms)"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mount(PingChart, {
|
||||
props: {
|
||||
chartData: mockData,
|
||||
options: mockOptions
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Line: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it("renders the chart component", () => {
|
||||
expect(wrapper.findComponent(Line).exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("passes correct data to chart component", () => {
|
||||
const chart = wrapper.findComponent(Line);
|
||||
expect(chart.props("data")).toEqual(mockData);
|
||||
});
|
||||
|
||||
it("passes correct options to chart component", () => {
|
||||
const chart = wrapper.findComponent(Line);
|
||||
expect(chart.props("options")).toEqual(mockOptions);
|
||||
});
|
||||
|
||||
it("updates chart when data changes", async () => {
|
||||
const newData = {
|
||||
labels: ["12:03", "12:04"],
|
||||
datasets: [{
|
||||
label: "Ping",
|
||||
data: [130, 140],
|
||||
borderColor: "#42b983",
|
||||
tension: 0.3
|
||||
}]
|
||||
};
|
||||
|
||||
await wrapper.setProps({ chartData: newData });
|
||||
const chart = wrapper.findComponent(Line);
|
||||
expect(chart.props("data")).toEqual(newData);
|
||||
});
|
||||
|
||||
it("handles empty data gracefully", async () => {
|
||||
const emptyData = {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: "Ping",
|
||||
data: [],
|
||||
borderColor: "#42b983",
|
||||
tension: 0.3
|
||||
}]
|
||||
};
|
||||
|
||||
await wrapper.setProps({ chartData: emptyData });
|
||||
const chart = wrapper.findComponent(Line);
|
||||
expect(chart.props("data")).toEqual(emptyData);
|
||||
});
|
||||
|
||||
it("applies custom styling options", async () => {
|
||||
const customOptions = {
|
||||
...mockOptions,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await wrapper.setProps({ options: customOptions });
|
||||
const chart = wrapper.findComponent(Line);
|
||||
expect(chart.props("options")).toEqual(customOptions);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,52 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import Status from "../../src/components/Status.vue";
|
||||
import { UP, DOWN, PENDING, MAINTENANCE } from "../../src/util";
|
||||
|
||||
describe("Status.vue", () => {
|
||||
const mountStatus = (status) => {
|
||||
return mount(Status, {
|
||||
props: {
|
||||
status
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
it("renders UP status correctly", () => {
|
||||
const wrapper = mountStatus(UP);
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-success");
|
||||
expect(wrapper.text()).toContain("UP");
|
||||
});
|
||||
|
||||
it("renders DOWN status correctly", () => {
|
||||
const wrapper = mountStatus(DOWN);
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-danger");
|
||||
expect(wrapper.text()).toContain("DOWN");
|
||||
});
|
||||
|
||||
it("renders PENDING status correctly", () => {
|
||||
const wrapper = mountStatus(PENDING);
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-warning");
|
||||
expect(wrapper.text()).toContain("PENDING");
|
||||
});
|
||||
|
||||
it("renders MAINTENANCE status correctly", () => {
|
||||
const wrapper = mountStatus(MAINTENANCE);
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-info");
|
||||
expect(wrapper.text()).toContain("MAINTENANCE");
|
||||
});
|
||||
|
||||
it("handles unknown status gracefully", () => {
|
||||
const wrapper = mountStatus("UNKNOWN");
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-secondary");
|
||||
expect(wrapper.text()).toContain("UNKNOWN");
|
||||
});
|
||||
|
||||
it("updates when status prop changes", async () => {
|
||||
const wrapper = mountStatus(UP);
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-success");
|
||||
|
||||
await wrapper.setProps({ status: DOWN });
|
||||
expect(wrapper.find(".badge").classes()).toContain("bg-danger");
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
import { config } from "@vue/test-utils";
|
||||
import { vi } from "vitest";
|
||||
|
||||
// Setup global mocks
|
||||
vi.mock("vue-i18n", () => ({
|
||||
useI18n: () => ({
|
||||
t: (key) => key,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Global components mock
|
||||
config.global.stubs = {
|
||||
"font-awesome-icon": true,
|
||||
};
|
||||
|
||||
// Global mounting options
|
||||
config.global.mocks = {
|
||||
$t: (key) => key,
|
||||
$filters: {
|
||||
formatDateTime: vi.fn((date) => date.toString()),
|
||||
},
|
||||
};
|
||||
Loading…
Reference in new issue