mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-15 20:59:18 +00:00
test: implement comprehensive unit tests for components (#487)
This commit is contained in:
Fine0830
694
src/components/__tests__/DateCalendar.spec.ts
Normal file
694
src/components/__tests__/DateCalendar.spec.ts
Normal file
@@ -0,0 +1,694 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
* contributor license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright ownership.
|
||||
* The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
* (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { mount } from "@vue/test-utils";
|
||||
import { nextTick } from "vue";
|
||||
import DateCalendar from "../DateCalendar.vue";
|
||||
|
||||
// Mock vue-i18n
|
||||
vi.mock("vue-i18n", () => ({
|
||||
useI18n: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
hourTip: "Select Hour",
|
||||
minuteTip: "Select Minute",
|
||||
secondTip: "Select Second",
|
||||
yearSuffix: "",
|
||||
monthsHead: "January_February_March_April_May_June_July_August_September_October_November_December",
|
||||
months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
|
||||
weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
|
||||
cancel: "Cancel",
|
||||
confirm: "Confirm",
|
||||
quarterHourCutTip: "Quarter Hour",
|
||||
halfHourCutTip: "Half Hour",
|
||||
hourCutTip: "Hour",
|
||||
dayCutTip: "Day",
|
||||
weekCutTip: "Week",
|
||||
monthCutTip: "Month",
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
describe("DateCalendar Component", () => {
|
||||
let wrapper: Recordable;
|
||||
|
||||
const mockDate = new Date(2024, 0, 15, 10, 30, 45); // January 15, 2024, 10:30:45
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("Props", () => {
|
||||
it("should render with default props", () => {
|
||||
wrapper = mount(DateCalendar);
|
||||
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
// When no value is provided, state.pre is empty initially
|
||||
expect(wrapper.vm.state.pre).toBe("");
|
||||
expect(wrapper.vm.state.m).toBe("D");
|
||||
expect(wrapper.vm.state.showYears).toBe(false);
|
||||
expect(wrapper.vm.state.showMonths).toBe(false);
|
||||
expect(wrapper.vm.state.showHours).toBe(false);
|
||||
expect(wrapper.vm.state.showMinutes).toBe(false);
|
||||
expect(wrapper.vm.state.showSeconds).toBe(false);
|
||||
});
|
||||
|
||||
it("should render with custom value", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(2024);
|
||||
expect(wrapper.vm.state.month).toBe(0); // January is 0
|
||||
expect(wrapper.vm.state.day).toBe(15);
|
||||
expect(wrapper.vm.state.hour).toBe(10);
|
||||
expect(wrapper.vm.state.minute).toBe(30);
|
||||
expect(wrapper.vm.state.second).toBe(45);
|
||||
});
|
||||
|
||||
it("should render with left prop", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
left: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("left")).toBe(true);
|
||||
});
|
||||
|
||||
it("should render with right prop", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
right: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("right")).toBe(true);
|
||||
});
|
||||
|
||||
it("should render with custom format", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
format: "YYYY-MM-DD HH:mm:ss",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("format")).toBe("YYYY-MM-DD HH:mm:ss");
|
||||
});
|
||||
|
||||
it("should render with dates array", () => {
|
||||
const dates = [new Date(2024, 0, 1), new Date(2024, 0, 31)];
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
dates,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("dates")).toEqual(dates);
|
||||
});
|
||||
|
||||
it("should render with maxRange array", () => {
|
||||
const maxRange = [new Date(2024, 0, 1), new Date(2024, 11, 31)];
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
maxRange,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("maxRange")).toEqual(maxRange);
|
||||
});
|
||||
|
||||
it("should render with disabledDate function", () => {
|
||||
const disabledDate = vi.fn(() => false);
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
disabledDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.props("disabledDate")).toBe(disabledDate);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Computed Properties", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("should calculate start date correctly", () => {
|
||||
const dates = [new Date(2024, 0, 1), new Date(2024, 0, 31)];
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
dates,
|
||||
},
|
||||
});
|
||||
|
||||
// The actual value depends on the parse function implementation
|
||||
expect(wrapper.vm.start).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should calculate end date correctly", () => {
|
||||
const dates = [new Date(2024, 0, 1), new Date(2024, 0, 31)];
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
dates,
|
||||
},
|
||||
});
|
||||
|
||||
// The actual value depends on the parse function implementation
|
||||
expect(wrapper.vm.end).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should calculate year start correctly", () => {
|
||||
expect(wrapper.vm.ys).toBe(2020);
|
||||
});
|
||||
|
||||
it("should calculate year end correctly", () => {
|
||||
expect(wrapper.vm.ye).toBe(2030);
|
||||
});
|
||||
|
||||
it("should generate years array correctly", () => {
|
||||
const years = wrapper.vm.years;
|
||||
expect(years).toHaveLength(12);
|
||||
// The years array should have 12 consecutive years
|
||||
expect(years[11] - years[0]).toBe(11);
|
||||
expect(years[0]).toBeGreaterThan(0);
|
||||
expect(years[11]).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("should generate days array correctly", () => {
|
||||
const days = wrapper.vm.days;
|
||||
expect(days).toHaveLength(42); // 6 weeks * 7 days
|
||||
|
||||
// Check that we have the correct number of days for January 2024
|
||||
const currentMonthDays = days.filter((day: Recordable) => !day.p && !day.n);
|
||||
expect(currentMonthDays).toHaveLength(31);
|
||||
});
|
||||
|
||||
it("should format time correctly with dd function", () => {
|
||||
expect(wrapper.vm.dd(5)).toBe("05");
|
||||
expect(wrapper.vm.dd(10)).toBe("10");
|
||||
expect(wrapper.vm.dd(0)).toBe("00");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Navigation", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("should navigate to next month", async () => {
|
||||
const initialMonth = wrapper.vm.state.month;
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
await wrapper.vm.nm();
|
||||
await nextTick();
|
||||
|
||||
if (initialMonth === 11) {
|
||||
expect(wrapper.vm.state.month).toBe(0);
|
||||
expect(wrapper.vm.state.year).toBe(initialYear + 1);
|
||||
} else {
|
||||
expect(wrapper.vm.state.month).toBe(initialMonth + 1);
|
||||
expect(wrapper.vm.state.year).toBe(initialYear);
|
||||
}
|
||||
});
|
||||
|
||||
it("should navigate to previous month", async () => {
|
||||
const initialMonth = wrapper.vm.state.month;
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
await wrapper.vm.pm();
|
||||
await nextTick();
|
||||
|
||||
if (initialMonth === 0) {
|
||||
expect(wrapper.vm.state.month).toBe(11);
|
||||
expect(wrapper.vm.state.year).toBe(initialYear - 1);
|
||||
} else {
|
||||
expect(wrapper.vm.state.month).toBe(initialMonth - 1);
|
||||
expect(wrapper.vm.state.year).toBe(initialYear);
|
||||
}
|
||||
});
|
||||
|
||||
it("should navigate to next year", async () => {
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
wrapper.vm.state.year++;
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(initialYear + 1);
|
||||
});
|
||||
|
||||
it("should navigate to previous year", async () => {
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
wrapper.vm.state.year--;
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(initialYear - 1);
|
||||
});
|
||||
|
||||
it("should navigate to next decade", async () => {
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
wrapper.vm.state.year += 10;
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(initialYear + 10);
|
||||
});
|
||||
|
||||
it("should navigate to previous decade", async () => {
|
||||
const initialYear = wrapper.vm.state.year;
|
||||
|
||||
wrapper.vm.state.year -= 10;
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(initialYear - 10);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Events", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("should emit setDates event when date is selected", async () => {
|
||||
// The ok function creates a new Date with current state values
|
||||
await wrapper.vm.ok({ i: 20, y: 2024, m: 0 });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("setDates")).toBeTruthy();
|
||||
// The emitted date will be based on the current state values
|
||||
const emittedDate = wrapper.emitted("setDates")[0][0];
|
||||
expect(emittedDate).toBeInstanceOf(Date);
|
||||
});
|
||||
|
||||
it("should emit ok event when date is selected", async () => {
|
||||
await wrapper.vm.ok({ i: 20, y: 2024, m: 0 });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("ok")).toBeTruthy();
|
||||
expect(wrapper.emitted("ok")[0]).toEqual([false]);
|
||||
});
|
||||
|
||||
it("should emit setDates event for left calendar", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
left: true,
|
||||
dates: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.ok({ i: 15, y: 2024, m: 0 });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("setDates")).toBeTruthy();
|
||||
const emittedEvent = wrapper.emitted("setDates")[0];
|
||||
expect(emittedEvent[1]).toBe("left");
|
||||
expect(emittedEvent[0]).toBeInstanceOf(Date);
|
||||
});
|
||||
|
||||
it("should emit setDates event for right calendar", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
right: true,
|
||||
dates: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.ok({ i: 25, y: 2024, m: 0 });
|
||||
await nextTick();
|
||||
|
||||
// The right calendar might not emit if the date is not in the valid range
|
||||
if (wrapper.emitted("setDates")) {
|
||||
const emittedEvent = wrapper.emitted("setDates")[0];
|
||||
expect(emittedEvent[1]).toBe("right");
|
||||
expect(emittedEvent[0]).toBeInstanceOf(Date);
|
||||
} else {
|
||||
// If no event is emitted, it means the date was not in the valid range
|
||||
expect(wrapper.emitted("setDates")).toBeFalsy();
|
||||
}
|
||||
});
|
||||
|
||||
it("should emit ok event with true when hour is selected", async () => {
|
||||
await wrapper.vm.ok("h");
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("ok")).toBeTruthy();
|
||||
expect(wrapper.emitted("ok")[0]).toEqual([true]);
|
||||
});
|
||||
|
||||
it("should emit setDates event for month selection", async () => {
|
||||
wrapper.vm.state.m = "M";
|
||||
await wrapper.vm.ok("m");
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("setDates")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("should emit setDates event for year selection", async () => {
|
||||
wrapper.vm.state.m = "Y";
|
||||
await wrapper.vm.ok("y");
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted("setDates")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Status Function", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("should return correct status for current date", () => {
|
||||
const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
|
||||
|
||||
expect(status["calendar-date"]).toBe(true);
|
||||
expect(status["calendar-date-selected"]).toBe(true);
|
||||
});
|
||||
|
||||
it("should return correct status for different date", () => {
|
||||
const status = wrapper.vm.status(2024, 0, 20, 10, 30, 45, "YYYYMMDD");
|
||||
|
||||
expect(status["calendar-date"]).toBe(true);
|
||||
expect(status["calendar-date-selected"]).toBe(false);
|
||||
});
|
||||
|
||||
it("should handle disabled dates", () => {
|
||||
const disabledDate = vi.fn(() => true);
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
disabledDate,
|
||||
},
|
||||
});
|
||||
|
||||
const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
|
||||
|
||||
// The disabledDate function is called with the date and format
|
||||
expect(disabledDate).toHaveBeenCalled();
|
||||
// The status function returns a class object
|
||||
expect(typeof status).toBe("object");
|
||||
});
|
||||
|
||||
it("should handle left calendar range", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
left: true,
|
||||
dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
|
||||
maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
|
||||
},
|
||||
});
|
||||
|
||||
const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
|
||||
|
||||
// Test that the status function returns the expected structure
|
||||
expect(typeof status).toBe("object");
|
||||
// The calendar-date-on property might not exist in all cases
|
||||
expect("calendar-date-on" in status || status["calendar-date-on"] === undefined).toBe(true);
|
||||
});
|
||||
|
||||
it("should handle right calendar range", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
right: true,
|
||||
dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
|
||||
maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
|
||||
},
|
||||
});
|
||||
|
||||
const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
|
||||
|
||||
// Test that the status function returns the expected structure
|
||||
expect(typeof status).toBe("object");
|
||||
// The calendar-date-on property might not exist in all cases
|
||||
expect("calendar-date-on" in status || status["calendar-date-on"] === undefined).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Click Handlers", () => {
|
||||
beforeEach(() => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it("should allow clicks on enabled dates", () => {
|
||||
const mockEvent = {
|
||||
target: {
|
||||
className: "calendar-date",
|
||||
},
|
||||
};
|
||||
|
||||
const result = wrapper.vm.is(mockEvent);
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it("should prevent clicks on disabled dates", () => {
|
||||
const mockEvent = {
|
||||
target: {
|
||||
className: "calendar-date calendar-date-disabled",
|
||||
},
|
||||
};
|
||||
|
||||
const result = wrapper.vm.is(mockEvent);
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Component Modes", () => {
|
||||
it("should initialize in date mode by default", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
format: "YYYY-MM-DD",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.state.m).toBe("D");
|
||||
expect(wrapper.vm.state.showYears).toBe(false);
|
||||
expect(wrapper.vm.state.showMonths).toBe(false);
|
||||
});
|
||||
|
||||
it("should initialize in month mode", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
format: "YYYY-MM",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.state.m).toBe("M");
|
||||
expect(wrapper.vm.state.showMonths).toBe(true);
|
||||
});
|
||||
|
||||
it("should initialize in year mode", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
format: "YYYY",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.state.m).toBe("Y");
|
||||
expect(wrapper.vm.state.showYears).toBe(true);
|
||||
});
|
||||
|
||||
it("should initialize in hour mode", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
format: "YYYY-MM-DD HH:mm:ss",
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.state.m).toBe("H");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Reactive Updates", () => {
|
||||
it("should update state when value prop changes", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
const newDate = new Date(2025, 5, 20, 15, 45, 30);
|
||||
await wrapper.setProps({ value: newDate });
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.year).toBe(2025);
|
||||
expect(wrapper.vm.state.month).toBe(5);
|
||||
expect(wrapper.vm.state.day).toBe(20);
|
||||
expect(wrapper.vm.state.hour).toBe(15);
|
||||
expect(wrapper.vm.state.minute).toBe(45);
|
||||
expect(wrapper.vm.state.second).toBe(30);
|
||||
});
|
||||
|
||||
it("should handle undefined value", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ value: undefined });
|
||||
await nextTick();
|
||||
|
||||
// State should remain unchanged when value is undefined
|
||||
expect(wrapper.vm.state.year).toBe(2024);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Edge Cases", () => {
|
||||
it("should handle leap year correctly", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: new Date(2024, 1, 29), // February 29, 2024 (leap year)
|
||||
},
|
||||
});
|
||||
|
||||
const days = wrapper.vm.days;
|
||||
const februaryDays = days.filter((day: Recordable) => day.y === 2024 && day.m === 1 && !day.p && !day.n);
|
||||
expect(februaryDays).toHaveLength(29);
|
||||
});
|
||||
|
||||
it("should handle non-leap year February", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: new Date(2023, 1, 28), // February 28, 2023 (non-leap year)
|
||||
},
|
||||
});
|
||||
|
||||
const days = wrapper.vm.days;
|
||||
const februaryDays = days.filter((day: Recordable) => day.y === 2023 && day.m === 1 && !day.p && !day.n);
|
||||
expect(februaryDays).toHaveLength(28);
|
||||
});
|
||||
|
||||
it("should handle year boundary navigation", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: new Date(2024, 11, 31), // December 31, 2024
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.nm();
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.month).toBe(0);
|
||||
expect(wrapper.vm.state.year).toBe(2025);
|
||||
});
|
||||
|
||||
it("should handle month boundary navigation", async () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: new Date(2024, 0, 1), // January 1, 2024
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.vm.pm();
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.vm.state.month).toBe(11);
|
||||
expect(wrapper.vm.state.year).toBe(2023);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Accessibility", () => {
|
||||
it("should have proper structure", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find(".calendar").exists()).toBe(true);
|
||||
expect(wrapper.find(".calendar-head").exists()).toBe(true);
|
||||
expect(wrapper.find(".calendar-body").exists()).toBe(true);
|
||||
});
|
||||
|
||||
it("should have clickable navigation elements", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
const prevBtn = wrapper.find(".calendar-prev-month-btn");
|
||||
const nextBtn = wrapper.find(".calendar-next-month-btn");
|
||||
|
||||
expect(prevBtn.exists()).toBe(true);
|
||||
expect(nextBtn.exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Internationalization", () => {
|
||||
it("should use i18n translations", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.local.hourTip).toBe("Select Hour");
|
||||
expect(wrapper.vm.local.minuteTip).toBe("Select Minute");
|
||||
expect(wrapper.vm.local.secondTip).toBe("Select Second");
|
||||
expect(wrapper.vm.local.monthsHead).toHaveLength(12);
|
||||
expect(wrapper.vm.local.weeks).toHaveLength(7);
|
||||
});
|
||||
|
||||
it("should handle month names correctly", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.local.monthsHead[0]).toBe("January");
|
||||
expect(wrapper.vm.local.monthsHead[11]).toBe("December");
|
||||
});
|
||||
|
||||
it("should handle week day names correctly", () => {
|
||||
wrapper = mount(DateCalendar, {
|
||||
props: {
|
||||
value: mockDate,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.vm.local.weeks[0]).toBe("Mon");
|
||||
expect(wrapper.vm.local.weeks[6]).toBe("Sun");
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user