Self-Hosted
/
uptime-kuma
mirror of https://github.com/louislam/uptime-kuma
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve component tests

Browse Source
pull/5364/head
Zaid-maker 1 month ago
parent 7855dd97a5
commit 74decf6d5a
4 changed files with 135 additions and 136 deletions
Show Stats Download Patch File Download Diff File

4
package.json
Unescape View File

@ -25,12 +25,12 @@
"start-server-dev": "cross-env NODE_ENV=development node server/server.js",
"start-server-dev:watch": "cross-env NODE_ENV=development node --watch server/server.js",
"build": "vite build --config ./config/vite.config.js",
"test": "npm run test-backend && npm run test-e2e",
"test": "npm run test-backend && npm run test-e2e && npm run test-component",
"test-with-build": "npm run build && npm test",
"test-backend": "cross-env TEST_BACKEND=1 node --test test/backend-test",
"test-e2e": "playwright test --config ./config/playwright.config.js",
"test-e2e-ui": "playwright test --config ./config/playwright.config.js --ui --ui-port=51063",
"test-component": "vitest --config ./config/vitest.config.js",
"test-component": "vitest run --config ./config/vitest.config.js",
"playwright-codegen": "playwright codegen localhost:3000 --save-storage=./private/e2e-auth.json",
"playwright-show-report": "playwright show-report ./private/playwright-report",
"tsc": "tsc",

110
test/component/MonitorList.spec.js
Unescape View File

@ -1,7 +1,6 @@
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", {
@ -11,90 +10,115 @@ vi.mock("../../src/components/MonitorListItem.vue", {
}
});
vi.mock("../../src/components/Confirm.vue", {
default: {
name: "Confirm",
template: "<div class=\"confirm-dialog\"></div>"
}
});
vi.mock("../../src/components/MonitorListFilter.vue", {
default: {
name: "MonitorListFilter",
template: "<div class=\"monitor-list-filter\"></div>"
}
});
describe("MonitorList.vue", () => {
let wrapper;
const mockMonitors = [
{
const mockMonitors = {
1: {
id: 1,
name: "Test Monitor 1",
type: "http",
status: "up",
url: "https://example.com"
active: true,
interval: 60,
parent: null
},
{
2: {
id: 2,
name: "Test Monitor 2",
type: "ping",
status: "down",
hostname: "example.org"
active: false,
interval: 60,
parent: null
}
];
};
const mockRouter = {
push: vi.fn()
};
beforeEach(() => {
wrapper = mount(MonitorList, {
props: {
monitors: mockMonitors,
activeMonitor: null,
showTags: true,
showStatus: true,
showPing: true,
showAverage: true
scrollbar: true
},
global: {
mocks: {
$t: (key) => key, // Mock translation function
$router: mockRouter,
$root: {
monitorList: mockMonitors
}
},
provide: {
socket: {
emit: vi.fn()
}
},
stubs: {
MonitorListItem: true
MonitorListItem: {
name: "MonitorListItem",
template: "<div class='monitor-list-item' :class='{ active: active }' @click='$emit(\"click\")'><slot></slot></div>",
props: ["active"]
},
Confirm: true,
MonitorListFilter: true,
"font-awesome-icon": true,
"router-link": true
}
}
});
});
it("renders monitor list items", () => {
const items = wrapper.findAllComponents(MonitorListItem);
expect(items).toHaveLength(mockMonitors.length);
const items = wrapper.findAll("[data-testid='monitor-list'] .monitor-list-item");
expect(items.length).toBe(2);
});
it("emits select-monitor event when monitor is clicked", async () => {
const items = wrapper.findAll(".monitor-list-item");
const items = wrapper.findAll("[data-testid='monitor-list'] .monitor-list-item");
await items[0].trigger("click");
expect(wrapper.emitted("select-monitor")).toBeTruthy();
expect(wrapper.emitted("select-monitor")[0]).toEqual([mockMonitors[0]]);
expect(wrapper.emitted("select-monitor")[0]).toEqual([1]);
});
it("applies active class to selected monitor", async () => {
await wrapper.setProps({
activeMonitor: mockMonitors[0]
});
const items = wrapper.findAll(".monitor-list-item");
await wrapper.setData({ selectedMonitorId: 1 });
const items = wrapper.findAll("[data-testid='monitor-list'] .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);
await wrapper.setData({ searchText: "Test Monitor 1" });
const items = wrapper.findAll("[data-testid='monitor-list'] .monitor-list-item");
expect(items.length).toBe(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");
await wrapper.setData({ sortBy: "status" });
const items = wrapper.findAll("[data-testid='monitor-list'] .monitor-list-item");
expect(items.length).toBe(2);
});
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);
it("toggles selection mode", async () => {
await wrapper.setData({ selectionMode: true });
const items = wrapper.findAll("[data-testid='monitor-list'] .monitor-list-item");
expect(items.length).toBe(2);
expect(wrapper.vm.selectionMode).toBe(true);
});
});

122
test/component/PingChart.spec.js
Unescape View File

@ -1,49 +1,42 @@
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>"
}
// Mock Chart.js
vi.mock("chart.js", () => ({
Chart: vi.fn(),
registerables: []
}));
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 mockMonitorId = 1;
const monitorList = {
1: {
id: 1,
name: "Test Monitor",
interval: 60,
type: "http"
}
};
const mockOptions = {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: "Response Time (ms)"
}
}
}
const mockStorage = {
"chart-period-1": "24"
};
beforeEach(() => {
wrapper = mount(PingChart, {
props: {
chartData: mockData,
options: mockOptions
monitorId: mockMonitorId
},
global: {
mocks: {
$t: (key) => key, // Mock translation function
$root: {
monitorList,
storage: () => mockStorage
}
},
stubs: {
Line: true
}
@ -55,60 +48,37 @@ describe("PingChart.vue", () => {
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("initializes with correct period options", () => {
expect(wrapper.vm.chartPeriodOptions).toEqual({
0: "recent",
3: "3h",
6: "6h",
24: "24h",
168: "1w"
});
});
it("passes correct options to chart component", () => {
const chart = wrapper.findComponent(Line);
expect(chart.props("options")).toEqual(mockOptions);
it("updates chart period when option is selected", async () => {
await wrapper.setData({ chartPeriodHrs: "24" });
expect(wrapper.vm.chartPeriodHrs).toBe("24");
});
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("shows loading state while fetching data", async () => {
await wrapper.setData({ loading: true });
expect(wrapper.find(".chart-wrapper").classes()).toContain("loading");
});
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("computes correct chart options", () => {
const options = wrapper.vm.chartOptions;
expect(options.responsive).toBe(true);
expect(options.maintainAspectRatio).toBe(false);
expect(options.scales.x.type).toBe("time");
});
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);
it("handles empty chart data gracefully", () => {
expect(wrapper.vm.chartRawData).toBe(null);
const chartData = wrapper.vm.chartData;
expect(chartData.datasets).toBeDefined();
expect(chartData.datasets.length).toBe(2); // One for ping data, one for status
});
});

35
test/component/Status.spec.js
Unescape View File

@ -8,45 +8,50 @@ describe("Status.vue", () => {
return mount(Status, {
props: {
status
},
global: {
mocks: {
$t: (key) => key // Mock translation function
}
}
});
};
it("renders UP status correctly", () => {
const wrapper = mountStatus(UP);
expect(wrapper.find(".badge").classes()).toContain("bg-success");
expect(wrapper.text()).toContain("UP");
const wrapper = mountStatus(1); // UP status
expect(wrapper.find(".badge").classes()).toContain("bg-primary");
expect(wrapper.text()).toBe("Up");
});
it("renders DOWN status correctly", () => {
const wrapper = mountStatus(DOWN);
const wrapper = mountStatus(0); // DOWN status
expect(wrapper.find(".badge").classes()).toContain("bg-danger");
expect(wrapper.text()).toContain("DOWN");
expect(wrapper.text()).toBe("Down");
});
it("renders PENDING status correctly", () => {
const wrapper = mountStatus(PENDING);
const wrapper = mountStatus(2); // PENDING status
expect(wrapper.find(".badge").classes()).toContain("bg-warning");
expect(wrapper.text()).toContain("PENDING");
expect(wrapper.text()).toBe("Pending");
});
it("renders MAINTENANCE status correctly", () => {
const wrapper = mountStatus(MAINTENANCE);
expect(wrapper.find(".badge").classes()).toContain("bg-info");
expect(wrapper.text()).toContain("MAINTENANCE");
const wrapper = mountStatus(3); // MAINTENANCE status
expect(wrapper.find(".badge").classes()).toContain("bg-maintenance");
expect(wrapper.text()).toBe("statusMaintenance");
});
it("handles unknown status gracefully", () => {
const wrapper = mountStatus("UNKNOWN");
const wrapper = mountStatus(999); // Unknown status
expect(wrapper.find(".badge").classes()).toContain("bg-secondary");
expect(wrapper.text()).toContain("UNKNOWN");
expect(wrapper.text()).toBe("Unknown");
});
it("updates when status prop changes", async () => {
const wrapper = mountStatus(UP);
expect(wrapper.find(".badge").classes()).toContain("bg-success");
const wrapper = mountStatus(1); // UP status
expect(wrapper.find(".badge").classes()).toContain("bg-primary");
await wrapper.setProps({ status: DOWN });
await wrapper.setProps({ status: 0 }); // Change to DOWN status
expect(wrapper.find(".badge").classes()).toContain("bg-danger");
});
});

Write Preview
Loading…
Cancel
Save