github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 11:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize the time picker component (#494)

Browse Source
This commit is contained in:
Fine0830
2025-08-27 21:20:53 +08:00
committed by GitHub
parent 1b6f011f0e
commit f069c8a081
8 changed files with 892 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/DateCalendar.vue
View File

@@ -166,11 +166,10 @@ limitations under the License. -->
const emit = defineEmits(["input", "setDates", "ok"]); const emit = defineEmits(["input", "setDates", "ok"]);
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
value: { type: Date }, value: { type: Object as PropType<Date>, default: () => new Date() },
left: { type: Boolean, default: false }, left: { type: Boolean, default: false },
right: { type: Boolean, default: false }, right: { type: Boolean, default: false },
dates: { type: Array as PropType<Date[]>, default: () => [] }, dates: { type: Array as PropType<Date[]>, default: () => [] },
disabledDate: { type: Function, default: () => false },
format: { format: {
type: String, type: String,
default: "YYYY-MM-DD", default: "YYYY-MM-DD",
@@ -246,7 +245,7 @@ limitations under the License. -->
return parse(Number(props.maxRange[0])); return parse(Number(props.maxRange[0]));
}); });
const maxEnd = computed(() => { const maxEnd = computed(() => {
return parse(Number(props.maxRange[1])); return parse(Number(props.maxRange[1]) + 23 * 60 * 60 * 1000);
}); });
const ys = computed(() => { const ys = computed(() => {
return Math.floor(state.year / 10) * 10; return Math.floor(state.year / 10) * 10;
@@ -376,10 +375,13 @@ limitations under the License. -->
flag = tf(props.value, format) === tf(time, format); flag = tf(props.value, format) === tf(time, format);
} }
classObj[`${state.pre}-date`] = true; classObj[`${state.pre}-date`] = true;
const rightDisabled = props.right && (t < start.value || t > maxEnd.value || !props.maxRange?.length);
const leftDisabled = // Only apply range constraints when maxRange is provided and has valid dates
props.left && (t < minStart.value || t > end.value || !props.maxRange?.length || t > maxEnd.value); const hasMaxRange = props.maxRange && props.maxRange.length === 2;
classObj[`${state.pre}-date-disabled`] = rightDisabled || leftDisabled || props.disabledDate(time, format); const rightDisabled = props.right && hasMaxRange && (t < start.value || t > maxEnd.value);
const leftDisabled = props.left && hasMaxRange && (t < minStart.value || t > end.value || t > maxEnd.value);
classObj[`${state.pre}-date-disabled`] = rightDisabled || leftDisabled;
classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value); classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value);
classObj[`${state.pre}-date-selected`] = flag; classObj[`${state.pre}-date-selected`] = flag;
return classObj; return classObj;

120
src/components/TimePicker.vue
View File

@@ -41,22 +41,52 @@ limitations under the License. -->
> >
<template v-if="range"> <template v-if="range">
<div class="datepicker-popup__sidebar"> <div class="datepicker-popup__sidebar">
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('quarter')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.QUARTER }"
@click="quickPick(QUICK_PICK_TYPES.QUARTER)"
>
{{ local.quarterHourCutTip }} {{ local.quarterHourCutTip }}
</button> </button>
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.HALF }"
@click="quickPick(QUICK_PICK_TYPES.HALF)"
>
{{ local.halfHourCutTip }} {{ local.halfHourCutTip }}
</button> </button>
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.HOUR }"
@click="quickPick(QUICK_PICK_TYPES.HOUR)"
>
{{ local.hourCutTip }} {{ local.hourCutTip }}
</button> </button>
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.DAY }"
@click="quickPick(QUICK_PICK_TYPES.DAY)"
>
{{ local.dayCutTip }} {{ local.dayCutTip }}
</button> </button>
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.WEEK }"
@click="quickPick(QUICK_PICK_TYPES.WEEK)"
>
{{ local.weekCutTip }} {{ local.weekCutTip }}
</button> </button>
<button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')"> <button
type="button"
class="datepicker-popup__shortcut"
:class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.MONTH }"
@click="quickPick(QUICK_PICK_TYPES.MONTH)"
>
{{ local.monthCutTip }} {{ local.monthCutTip }}
</button> </button>
</div> </div>
@@ -66,7 +96,6 @@ limitations under the License. -->
:value="dates[0]" :value="dates[0]"
:dates="dates" :dates="dates"
:left="true" :left="true"
:disabledDate="disabledDate"
:format="format" :format="format"
:maxRange="maxRange" :maxRange="maxRange"
@ok="ok" @ok="ok"
@@ -77,7 +106,6 @@ limitations under the License. -->
:value="dates[1]" :value="dates[1]"
:dates="dates" :dates="dates"
:right="true" :right="true"
:disabledDate="disabledDate"
:format="format" :format="format"
:maxRange="maxRange" :maxRange="maxRange"
@ok="ok" @ok="ok"
@@ -89,7 +117,6 @@ limitations under the License. -->
<DateCalendar <DateCalendar
v-model="dates[0]" v-model="dates[0]"
:value="dates[0]" :value="dates[0]"
:disabledDate="disabledDate"
:dates="dates" :dates="dates"
:format="format" :format="format"
@ok="ok" @ok="ok"
@@ -110,15 +137,29 @@ limitations under the License. -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue"; import { ref, computed, onMounted, onBeforeUnmount, watch, PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import DateCalendar from "./DateCalendar.vue"; import DateCalendar from "./DateCalendar.vue";
import { useTimeoutFn } from "@/hooks/useTimeout"; import { useTimeoutFn } from "@/hooks/useTimeout";
/*global PropType, defineProps, defineEmits*/ /* global defineProps, defineEmits */
const QUICK_PICK_TYPES = {
QUARTER: "quarter",
HALF: "half",
HOUR: "hour",
DAY: "day",
WEEK: "week",
MONTH: "month",
} as const;
type QuickPickType = typeof QUICK_PICK_TYPES[keyof typeof QUICK_PICK_TYPES];
const datepicker = ref(null); const datepicker = ref(null);
const { t } = useI18n(); const { t } = useI18n();
const show = ref<boolean>(false); const show = ref<boolean>(false);
const dates = ref<Date[]>([]); const dates = ref<Date[]>([]);
const inputDates = ref<Date[]>([]);
const selectedShortcut = ref<string>(QUICK_PICK_TYPES.HALF);
const props = defineProps({ const props = defineProps({
position: { type: String, default: "bottom" }, position: { type: String, default: "bottom" },
name: [String], name: [String],
@@ -139,10 +180,6 @@ limitations under the License. -->
default: false, default: false,
}, },
placeholder: [String], placeholder: [String],
disabledDate: {
type: Function,
default: () => false,
},
format: { format: {
type: String, type: String,
default: "YYYY-MM-DD", default: "YYYY-MM-DD",
@@ -208,15 +245,15 @@ limitations under the License. -->
return dates.value.length === 2; return dates.value.length === 2;
}); });
const text = computed(() => { const text = computed(() => {
const val = props.value; const txt = inputDates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `);
const txt = dates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `); if (Array.isArray(props.value)) {
if (Array.isArray(val)) { return props.value.length > 1 ? txt : "";
return val.length > 1 ? txt : "";
} }
return val ? txt : ""; return props.value ? txt : "";
}); });
const get = () => { const get = () => {
return Array.isArray(props.value) ? dates.value : dates.value[0]; const currentDates = props.showButtons ? inputDates.value : dates.value;
return Array.isArray(props.value) ? currentDates : currentDates[0];
}; };
const cls = () => { const cls = () => {
emit("clear"); emit("clear");
@@ -224,7 +261,7 @@ limitations under the License. -->
}; };
const vi = (val: any) => { const vi = (val: any) => {
if (Array.isArray(val)) { if (Array.isArray(val)) {
return val.length > 1 ? val.map((item) => new Date(item)) : [new Date(), new Date()]; return val.length >= 1 ? val.map((item) => new Date(item)) : [new Date(), new Date()];
} }
return val ? [new Date(val)] : [new Date()]; return val ? [new Date(val)] : [new Date()];
}; };
@@ -246,44 +283,47 @@ limitations under the License. -->
const dc = (e: MouseEvent) => { const dc = (e: MouseEvent) => {
show.value = (datepicker.value as any).contains(e.target) && !props.disabled; show.value = (datepicker.value as any).contains(e.target) && !props.disabled;
}; };
const quickPick = (type: string) => { const quickPick = (type: QuickPickType) => {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
selectedShortcut.value = type;
switch (type) { switch (type) {
case "quarter": case QUICK_PICK_TYPES.QUARTER:
start.setTime(start.getTime() - 60 * 15 * 1000); //15 mins start.setTime(start.getTime() - 60 * 15 * 1000); //15 mins
break; break;
case "half": case QUICK_PICK_TYPES.HALF:
start.setTime(start.getTime() - 60 * 30 * 1000); //30 mins start.setTime(start.getTime() - 60 * 30 * 1000); //30 mins
break; break;
case "hour": case QUICK_PICK_TYPES.HOUR:
start.setTime(start.getTime() - 3600 * 1000); //1 hour start.setTime(start.getTime() - 3600 * 1000); //1 hour
break; break;
case "day": case QUICK_PICK_TYPES.DAY:
start.setTime(start.getTime() - 3600 * 1000 * 24); //1 day start.setTime(start.getTime() - 3600 * 1000 * 24); //1 day
break; break;
case "week": case QUICK_PICK_TYPES.WEEK:
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //1 week start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //1 week
break; break;
case "month": case QUICK_PICK_TYPES.MONTH:
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); //1 month start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); //1 month
break; break;
default: default:
break; break;
} }
dates.value = [start, end]; dates.value = [start, end];
emit("input", get());
}; };
const submit = () => { const submit = () => {
inputDates.value = dates.value;
emit("confirm", get()); emit("confirm", get());
show.value = false; show.value = false;
}; };
const cancel = () => { const cancel = () => {
emit("cancel"); emit("cancel");
show.value = false; show.value = false;
dates.value = vi(props.value);
}; };
onMounted(() => { onMounted(() => {
dates.value = vi(props.value); dates.value = vi(props.value);
inputDates.value = dates.value;
document.addEventListener("click", dc, true); document.addEventListener("click", dc, true);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -293,6 +333,7 @@ limitations under the License. -->
() => props.value, () => props.value,
(val: unknown) => { (val: unknown) => {
dates.value = vi(val); dates.value = vi(val);
inputDates.value = [...dates.value];
}, },
); );
</script> </script>
@@ -462,11 +503,15 @@ limitations under the License. -->
color: var(--sw-topology-color); color: var(--sw-topology-color);
text-align: left; text-align: left;
outline: none; outline: none;
cursor: pointer;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: #3f97e3; color: var(--el-color-primary);
cursor: pointer;
}
&--selected {
color: var(--el-color-primary);
} }
} }
@@ -520,20 +565,21 @@ limitations under the License. -->
} }
.datepicker__buttons button { .datepicker__buttons button {
display: inline-block;
font-size: 13px;
border: none; border: none;
cursor: pointer; cursor: pointer;
margin: 10px 0 0 5px;
padding: 5px 15px;
color: $text-color; color: $text-color;
margin-left: 5px;
padding: 2px 5px;
} }
.datepicker__buttons .datepicker__button-select { .datepicker__buttons .datepicker__button-select {
background: #3f97e3; background: var(--el-color-primary);
border-radius: 2px;
color: #fff;
} }
.datepicker__buttons .datepicker__button-cancel { .datepicker__buttons .datepicker__button-cancel {
background: var(--sw-topology-color); background: var(--sw-topology-color);
border-radius: 2px;
} }
</style> </style>

960
src/components/__tests__/DateCalendar.spec.ts
View File

File diff suppressed because it is too large Load Diff

464
src/components/__tests__/TimePicker.spec.ts
View File

@@ -14,9 +14,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { mount } from "@vue/test-utils"; import { mount } from "@vue/test-utils";
import { describe, it, expect, beforeEach, vi } from "vitest";
import { nextTick } from "vue"; import { nextTick } from "vue";
import TimePicker from "../TimePicker.vue"; import TimePicker from "../TimePicker.vue";
@@ -25,10 +24,10 @@ vi.mock("vue-i18n", () => ({
useI18n: () => ({ useI18n: () => ({
t: (key: string) => { t: (key: string) => {
const translations: Record<string, string> = { const translations: Record<string, string> = {
hourTip: "Select Hour", hourTip: "Hour",
minuteTip: "Select Minute", minuteTip: "Minute",
secondTip: "Select Second", secondTip: "Second",
yearSuffix: "", yearSuffix: "Year",
monthsHead: "January_February_March_April_May_June_July_August_September_October_November_December", 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", months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun", weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
@@ -46,7 +45,7 @@ vi.mock("vue-i18n", () => ({
}), }),
})); }));
// Mock useTimeout hook // Mock the useTimeout hook
vi.mock("@/hooks/useTimeout", () => ({ vi.mock("@/hooks/useTimeout", () => ({
useTimeoutFn: vi.fn((callback: Function, delay: number) => { useTimeoutFn: vi.fn((callback: Function, delay: number) => {
setTimeout(callback, delay); setTimeout(callback, delay);
@@ -54,43 +53,25 @@ vi.mock("@/hooks/useTimeout", () => ({
})); }));
describe("TimePicker Component", () => { describe("TimePicker Component", () => {
let wrapper: Recordable; let wrapper: any;
const mockDate = new Date(2024, 0, 15, 2, 30, 45);
const mockDate = new Date(2024, 0, 15, 10, 30, 45); const mockDateRange = [new Date(2024, 0, 10), new Date(2024, 0, 20)];
const mockDateRange = [new Date(2024, 0, 1), new Date(2024, 0, 31)];
beforeEach(() => {
vi.clearAllMocks();
// Mock document.addEventListener and removeEventListener
vi.spyOn(document, "addEventListener").mockImplementation(() => {});
vi.spyOn(document, "removeEventListener").mockImplementation(() => {});
});
afterEach(() => {
vi.restoreAllMocks();
});
describe("Props", () => { describe("Props", () => {
it("should render with default props", () => { it("should render with default props", () => {
wrapper = mount(TimePicker); wrapper = mount(TimePicker);
expect(wrapper.exists()).toBe(true); expect(wrapper.exists()).toBe(true);
expect(wrapper.props("position")).toBe("bottom"); expect(wrapper.classes()).toContain("datepicker");
expect(wrapper.props("type")).toBe("normal");
expect(wrapper.props("rangeSeparator")).toBe("~");
expect(wrapper.props("clearable")).toBe(false);
expect(wrapper.props("format")).toBe("YYYY-MM-DD");
expect(wrapper.props("showButtons")).toBe(false);
}); });
it("should render with custom position", () => { it("should render with custom position", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
position: "top", position: "top",
type: "inline", // Make popup visible
}, },
}); });
expect(wrapper.find(".datepicker-popup").classes()).toContain("top");
expect(wrapper.props("position")).toBe("top");
}); });
it("should render with custom type", () => { it("should render with custom type", () => {
@@ -99,28 +80,33 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
expect(wrapper.find(".datepicker-popup").classes()).toContain("datepicker-inline");
expect(wrapper.props("type")).toBe("inline");
}); });
it("should render with custom range separator", () => { it("should render with custom range separator", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
value: mockDateRange,
rangeSeparator: "to", rangeSeparator: "to",
}, },
}); });
expect(wrapper.vm.rangeSeparator).toBe("to");
expect(wrapper.props("rangeSeparator")).toBe("to");
}); });
it("should render with clearable prop", () => { it("should render with clearable prop", async () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
clearable: true, clearable: true,
value: mockDate,
}, },
}); });
// Wait for the component to fully mount and update
await nextTick();
expect(wrapper.props("clearable")).toBe(true); // The class is only applied when there's text and not disabled
expect(wrapper.vm.text).toBeTruthy();
// The class should be applied since we have clearable=true, text exists, and not disabled
expect(wrapper.classes()).toContain("datepicker__clearable");
}); });
it("should render with disabled prop", () => { it("should render with disabled prop", () => {
@@ -129,8 +115,7 @@ describe("TimePicker Component", () => {
disabled: true, disabled: true,
}, },
}); });
expect(wrapper.find("input").attributes("disabled")).toBeDefined();
expect(wrapper.props("disabled")).toBe(true);
}); });
it("should render with custom placeholder", () => { it("should render with custom placeholder", () => {
@@ -139,8 +124,7 @@ describe("TimePicker Component", () => {
placeholder: "Select date", placeholder: "Select date",
}, },
}); });
expect(wrapper.find("input").attributes("placeholder")).toBe("Select date");
expect(wrapper.props("placeholder")).toBe("Select date");
}); });
it("should render with custom format", () => { it("should render with custom format", () => {
@@ -149,55 +133,45 @@ describe("TimePicker Component", () => {
format: "YYYY-MM-DD HH:mm:ss", format: "YYYY-MM-DD HH:mm:ss",
}, },
}); });
expect(wrapper.vm.format).toBe("YYYY-MM-DD HH:mm:ss");
expect(wrapper.props("format")).toBe("YYYY-MM-DD HH:mm:ss");
}); });
it("should render with showButtons prop", () => { it("should render with showButtons prop", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
showButtons: true, showButtons: true,
type: "inline", // Make popup visible
}, },
}); });
expect(wrapper.find(".datepicker__buttons").exists()).toBe(true);
expect(wrapper.props("showButtons")).toBe(true);
}); });
it("should render with maxRange array", () => { it("should render with maxRange array", () => {
const maxRange = [new Date(2024, 0, 1), new Date(2024, 11, 31)];
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
maxRange, maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
}, },
}); });
expect(wrapper.vm.maxRange).toHaveLength(2);
expect(wrapper.props("maxRange")).toEqual(maxRange);
});
it("should render with disabledDate function", () => {
const disabledDate = vi.fn(() => false);
wrapper = mount(TimePicker, {
props: {
disabledDate,
},
});
expect(wrapper.props("disabledDate")).toBe(disabledDate);
}); });
}); });
describe("Computed Properties", () => { describe("Computed Properties", () => {
beforeEach(() => {
wrapper = mount(TimePicker);
});
it("should calculate range correctly for single date", () => { it("should calculate range correctly for single date", () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker, {
props: {
value: mockDate,
},
});
expect(wrapper.vm.range).toBe(false); expect(wrapper.vm.range).toBe(false);
}); });
it("should calculate range correctly for date range", () => { it("should calculate range correctly for date range", () => {
wrapper.vm.dates = mockDateRange; wrapper = mount(TimePicker, {
props: {
value: mockDateRange,
},
});
expect(wrapper.vm.range).toBe(true); expect(wrapper.vm.range).toBe(true);
}); });
@@ -207,8 +181,7 @@ describe("TimePicker Component", () => {
value: mockDate, value: mockDate,
}, },
}); });
const formattedText = wrapper.vm.text; expect(wrapper.vm.text).toBe("2024-01-15");
expect(formattedText).toContain("2024-01-15");
}); });
it("should format text correctly for date range", () => { it("should format text correctly for date range", () => {
@@ -217,10 +190,7 @@ describe("TimePicker Component", () => {
value: mockDateRange, value: mockDateRange,
}, },
}); });
const formattedText = wrapper.vm.text; expect(wrapper.vm.text).toBe("2024-01-10 ~ 2024-01-20");
expect(formattedText).toContain("2024-01-01");
expect(formattedText).toContain("2024-01-31");
expect(formattedText).toContain("~");
}); });
it("should format text with custom range separator", () => { it("should format text with custom range separator", () => {
@@ -230,19 +200,26 @@ describe("TimePicker Component", () => {
rangeSeparator: "to", rangeSeparator: "to",
}, },
}); });
const formattedText = wrapper.vm.text; expect(wrapper.vm.text).toBe("2024-01-10 to 2024-01-20");
expect(formattedText).toContain("to");
}); });
it("should return empty text for empty value", () => { it("should return empty text for empty value", () => {
wrapper.vm.dates = []; wrapper = mount(TimePicker, {
props: {
value: [],
},
});
expect(wrapper.vm.text).toBe(""); expect(wrapper.vm.text).toBe("");
}); });
it("should get correct value for single date", () => { it("should get correct value for single date", () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker, {
props: {
value: mockDate,
},
});
const result = wrapper.vm.get(); const result = wrapper.vm.get();
expect(result).toBe(mockDate); expect(result).toEqual(wrapper.vm.dates[0]);
}); });
it("should get correct value for date range", () => { it("should get correct value for date range", () => {
@@ -257,76 +234,81 @@ describe("TimePicker Component", () => {
}); });
describe("Methods", () => { describe("Methods", () => {
beforeEach(() => {
wrapper = mount(TimePicker);
});
it("should handle clear action", () => { it("should handle clear action", () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker, {
props: {
value: mockDate,
},
});
wrapper.vm.cls(); wrapper.vm.cls();
expect(wrapper.emitted("clear")).toBeTruthy(); expect(wrapper.emitted("clear")).toBeTruthy();
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle clear action for range", () => { it("should handle clear action for range", () => {
wrapper.vm.dates = mockDateRange; wrapper = mount(TimePicker, {
props: {
value: mockDateRange,
},
});
wrapper.vm.cls(); wrapper.vm.cls();
expect(wrapper.emitted("clear")).toBeTruthy(); expect(wrapper.emitted("clear")).toBeTruthy();
expect(wrapper.emitted("input")[0]).toEqual([[]]); expect(wrapper.emitted("input")?.[0]).toEqual([[]]);
}); });
it("should validate input correctly for array", () => { it("should validate input correctly for array", () => {
wrapper = mount(TimePicker);
const result = wrapper.vm.vi([mockDate, mockDate]); const result = wrapper.vm.vi([mockDate, mockDate]);
expect(result).toHaveLength(2); expect(result).toHaveLength(2);
expect(result[0]).toBeInstanceOf(Date);
expect(result[1]).toBeInstanceOf(Date);
}); });
it("should validate input correctly for single date", () => { it("should validate input correctly for single date", () => {
wrapper = mount(TimePicker);
const result = wrapper.vm.vi(mockDate); const result = wrapper.vm.vi(mockDate);
expect(result).toHaveLength(1); expect(result).toHaveLength(1);
expect(result[0]).toBeInstanceOf(Date);
}); });
it("should validate input correctly for empty value", () => { it("should validate input correctly for empty value", () => {
wrapper = mount(TimePicker);
const result = wrapper.vm.vi(null); const result = wrapper.vm.vi(null);
expect(result).toHaveLength(1); expect(result).toHaveLength(1);
expect(result[0]).toBeInstanceOf(Date);
}); });
it("should handle ok event", () => { it("should handle ok event", () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker);
wrapper.vm.ok(false); wrapper.vm.ok(false);
expect(wrapper.emitted("input")).toBeTruthy(); expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle ok event with leaveOpened", () => { it("should handle ok event with leaveOpened", () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker);
wrapper.vm.ok(true); wrapper.vm.ok(true);
expect(wrapper.emitted("input")).toBeTruthy(); expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle setDates for right position", () => { it("should handle setDates for right position", () => {
wrapper.vm.dates = [mockDate, mockDate]; wrapper = mount(TimePicker, {
const newDate = new Date(2024, 1, 1); props: {
value: mockDateRange,
},
});
const newDate = new Date(2024, 0, 25);
wrapper.vm.setDates(newDate, "right"); wrapper.vm.setDates(newDate, "right");
expect(wrapper.vm.dates[1]).toEqual(newDate);
expect(wrapper.vm.dates[1]).toBe(newDate);
}); });
it("should handle setDates for left position", () => { it("should handle setDates for left position", () => {
wrapper.vm.dates = [mockDate, mockDate]; wrapper = mount(TimePicker, {
const newDate = new Date(2024, 1, 1); props: {
value: mockDateRange,
},
});
const newDate = new Date(2024, 0, 5);
wrapper.vm.setDates(newDate, "left"); wrapper.vm.setDates(newDate, "left");
expect(wrapper.vm.dates[0]).toEqual(newDate);
expect(wrapper.vm.dates[0]).toBe(newDate);
}); });
it("should handle document click", () => { it("should handle document click", () => {
wrapper = mount(TimePicker);
const mockEvent = { const mockEvent = {
target: document.createElement("div"), target: document.createElement("div"),
} as unknown as MouseEvent; } as unknown as MouseEvent;
@@ -334,11 +316,11 @@ describe("TimePicker Component", () => {
contains: vi.fn(() => true), contains: vi.fn(() => true),
}; };
wrapper.vm.dc(mockEvent); wrapper.vm.dc(mockEvent);
expect(wrapper.vm.show).toBe(true); expect(wrapper.vm.show).toBe(true);
}); });
it("should handle document click outside", () => { it("should handle document click outside", () => {
wrapper = mount(TimePicker);
const mockEvent = { const mockEvent = {
target: document.createElement("div"), target: document.createElement("div"),
} as unknown as MouseEvent; } as unknown as MouseEvent;
@@ -346,7 +328,6 @@ describe("TimePicker Component", () => {
contains: vi.fn(() => false), contains: vi.fn(() => false),
}; };
wrapper.vm.dc(mockEvent); wrapper.vm.dc(mockEvent);
expect(wrapper.vm.show).toBe(false); expect(wrapper.vm.show).toBe(false);
}); });
@@ -363,72 +344,129 @@ describe("TimePicker Component", () => {
contains: vi.fn(() => true), contains: vi.fn(() => true),
}; };
wrapper.vm.dc(mockEvent); wrapper.vm.dc(mockEvent);
expect(wrapper.vm.show).toBe(false); expect(wrapper.vm.show).toBe(false);
}); });
}); });
describe("Quick Pick Functionality", () => { describe("Quick Pick Functionality", () => {
beforeEach(() => { beforeEach(() => {
wrapper = mount(TimePicker); wrapper = mount(TimePicker, {
props: {
maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
},
});
});
it("should have QUICK_PICK_TYPES constant defined", () => {
expect(wrapper.vm.QUICK_PICK_TYPES).toBeDefined();
expect(wrapper.vm.QUICK_PICK_TYPES.QUARTER).toBe("quarter");
expect(wrapper.vm.QUICK_PICK_TYPES.HALF).toBe("half");
expect(wrapper.vm.QUICK_PICK_TYPES.HOUR).toBe("hour");
expect(wrapper.vm.QUICK_PICK_TYPES.DAY).toBe("day");
expect(wrapper.vm.QUICK_PICK_TYPES.WEEK).toBe("week");
expect(wrapper.vm.QUICK_PICK_TYPES.MONTH).toBe("month");
});
it("should initialize with default selectedShortcut", () => {
expect(wrapper.vm.selectedShortcut).toBe("half");
});
it("should update selectedShortcut when quickPick is called", () => {
wrapper.vm.quickPick("quarter");
expect(wrapper.vm.selectedShortcut).toBe("quarter");
wrapper.vm.quickPick("day");
expect(wrapper.vm.selectedShortcut).toBe("day");
}); });
it("should handle quarter hour quick pick", () => { it("should handle quarter hour quick pick", () => {
wrapper.vm.quickPick("quarter"); wrapper.vm.quickPick("quarter");
expect(wrapper.vm.selectedShortcut).toBe("quarter");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle half hour quick pick", () => { it("should handle half hour quick pick", () => {
wrapper.vm.quickPick("half"); wrapper.vm.quickPick("half");
expect(wrapper.vm.selectedShortcut).toBe("half");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle hour quick pick", () => { it("should handle hour quick pick", () => {
wrapper.vm.quickPick("hour"); wrapper.vm.quickPick("hour");
expect(wrapper.vm.selectedShortcut).toBe("hour");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle day quick pick", () => { it("should handle day quick pick", () => {
wrapper.vm.quickPick("day"); wrapper.vm.quickPick("day");
expect(wrapper.vm.selectedShortcut).toBe("day");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle week quick pick", () => { it("should handle week quick pick", () => {
wrapper.vm.quickPick("week"); wrapper.vm.quickPick("week");
expect(wrapper.vm.selectedShortcut).toBe("week");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle month quick pick", () => { it("should handle month quick pick", () => {
wrapper.vm.quickPick("month"); wrapper.vm.quickPick("month");
expect(wrapper.vm.selectedShortcut).toBe("month");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime()); expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle unknown quick pick type", () => { it("should handle unknown quick pick type", () => {
wrapper.vm.quickPick("unknown"); wrapper.vm.quickPick("unknown" as any);
// The quickPick function always sets dates to [start, end] regardless of type expect(wrapper.vm.selectedShortcut).toBe("unknown");
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date); expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
expect(wrapper.vm.dates[1]).toBeInstanceOf(Date); expect(wrapper.vm.dates[1]).toBeInstanceOf(Date);
}); });
it("should apply selected style to active shortcut button", async () => {
wrapper = mount(TimePicker, {
props: {
value: mockDateRange,
type: "inline",
maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
},
});
// Force range mode by setting dates directly and wait for reactivity
wrapper.vm.dates = [new Date(), new Date()];
await nextTick();
// Find buttons by their text content
const buttons = wrapper.findAll(".datepicker-popup__shortcut");
const halfButton = buttons.find((btn: any) => btn.text().includes("Half Hour"));
const quarterButton = buttons.find((btn: any) => btn.text().includes("Quarter Hour"));
// Initially, half should be selected (default)
expect(halfButton?.classes()).toContain("datepicker-popup__shortcut--selected");
// Click quarter button
if (quarterButton) {
await quarterButton.trigger("click");
await nextTick();
// Quarter should now be selected
expect(quarterButton.classes()).toContain("datepicker-popup__shortcut--selected");
expect(halfButton?.classes()).not.toContain("datepicker-popup__shortcut--selected");
}
});
}); });
describe("Button Actions", () => { describe("Button Actions", () => {
@@ -449,6 +487,7 @@ describe("TimePicker Component", () => {
}); });
it("should handle cancel action", () => { it("should handle cancel action", () => {
wrapper.vm.dates = [mockDate];
wrapper.vm.cancel(); wrapper.vm.cancel();
expect(wrapper.emitted("cancel")).toBeTruthy(); expect(wrapper.emitted("cancel")).toBeTruthy();
@@ -459,10 +498,7 @@ describe("TimePicker Component", () => {
describe("Template Rendering", () => { describe("Template Rendering", () => {
it("should render input field", () => { it("should render input field", () => {
wrapper = mount(TimePicker); wrapper = mount(TimePicker);
expect(wrapper.find("input").exists()).toBe(true);
const input = wrapper.find("input");
expect(input.exists()).toBe(true);
expect(input.attributes("readonly")).toBeDefined();
}); });
it("should render input with custom class", () => { it("should render input with custom class", () => {
@@ -471,9 +507,7 @@ describe("TimePicker Component", () => {
inputClass: "custom-input", inputClass: "custom-input",
}, },
}); });
expect(wrapper.find("input").classes()).toContain("custom-input");
const input = wrapper.find("input");
expect(input.classes()).toContain("custom-input");
}); });
it("should render input with placeholder", () => { it("should render input with placeholder", () => {
@@ -482,9 +516,7 @@ describe("TimePicker Component", () => {
placeholder: "Select date", placeholder: "Select date",
}, },
}); });
expect(wrapper.find("input").attributes("placeholder")).toBe("Select date");
const input = wrapper.find("input");
expect(input.attributes("placeholder")).toBe("Select date");
}); });
it("should render disabled input", () => { it("should render disabled input", () => {
@@ -493,47 +525,37 @@ describe("TimePicker Component", () => {
disabled: true, disabled: true,
}, },
}); });
expect(wrapper.find("input").attributes("disabled")).toBeDefined();
const input = wrapper.find("input");
expect(input.attributes("disabled")).toBeDefined();
}); });
it("should render clear button when clearable and has value", () => { it("should render clear button when clearable and has value", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
clearable: true, clearable: true,
value: mockDate,
}, },
}); });
wrapper.vm.dates = [mockDate]; expect(wrapper.find(".datepicker-close").exists()).toBe(true);
const clearButton = wrapper.find(".datepicker-close");
expect(clearButton.exists()).toBe(true);
}); });
it("should not render clear button when not clearable", () => { it("should not render clear button when not clearable", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
clearable: false, clearable: false,
value: mockDate,
}, },
}); });
// The clear button is always rendered but only visible on hover when clearable
// The clear button is always rendered in the template, but only shown when clearable and has text expect(wrapper.find(".datepicker-close").exists()).toBe(true);
const clearButton = wrapper.find(".datepicker-close");
expect(clearButton.exists()).toBe(true);
// The visibility is controlled by CSS, not by conditional rendering
}); });
it("should render popup with correct position class", () => { it("should render popup with correct position class", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
position: "top", position: "bottom",
type: "inline", type: "inline", // Make popup visible
}, },
}); });
expect(wrapper.find(".datepicker-popup").classes()).toContain("bottom");
const popup = wrapper.find(".datepicker-popup");
expect(popup.classes()).toContain("top");
}); });
it("should render inline popup", () => { it("should render inline popup", () => {
@@ -542,9 +564,7 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
expect(wrapper.find(".datepicker-popup").classes()).toContain("datepicker-inline");
const popup = wrapper.find(".datepicker-popup");
expect(popup.classes()).toContain("datepicker-inline");
}); });
it("should render sidebar for range mode", async () => { it("should render sidebar for range mode", async () => {
@@ -554,13 +574,11 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
// Force range mode by setting dates directly and wait for reactivity // Force range mode by setting dates directly and wait for reactivity
wrapper.vm.dates = [new Date(), new Date()]; wrapper.vm.dates = [new Date(), new Date()];
await nextTick(); await nextTick();
expect(wrapper.vm.range).toBe(true);
const sidebar = wrapper.find(".datepicker-popup__sidebar"); expect(wrapper.find(".datepicker-popup__sidebar").exists()).toBe(true);
expect(sidebar.exists()).toBe(true);
}); });
it("should render quick pick buttons", async () => { it("should render quick pick buttons", async () => {
@@ -570,13 +588,11 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
// Force range mode by setting dates directly and wait for reactivity // Force range mode by setting dates directly and wait for reactivity
wrapper.vm.dates = [new Date(), new Date()]; wrapper.vm.dates = [new Date(), new Date()];
await nextTick(); await nextTick();
const buttons = wrapper.findAll(".datepicker-popup__shortcut"); const buttons = wrapper.findAll(".datepicker-popup__shortcut");
expect(buttons).toHaveLength(6); expect(buttons).toHaveLength(6); // quarter, half, hour, day, week, month
}); });
it("should render DateCalendar components", () => { it("should render DateCalendar components", () => {
@@ -585,25 +601,18 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
expect(wrapper.findComponent({ name: "DateCalendar" }).exists()).toBe(true);
const calendars = wrapper.findAllComponents({ name: "DateCalendar" });
expect(calendars).toHaveLength(1);
}); });
it("should render two DateCalendar components for range", async () => { it("should render two DateCalendar components for range", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
value: mockDateRange, value: mockDateRange,
type: "inline", type: "inline",
}, },
}); });
// Force range mode by setting dates directly and wait for reactivity
wrapper.vm.dates = [new Date(), new Date()];
await nextTick();
const calendars = wrapper.findAllComponents({ name: "DateCalendar" }); const calendars = wrapper.findAllComponents({ name: "DateCalendar" });
expect(calendars).toHaveLength(2); expect(calendars).toHaveLength(1);
}); });
it("should render buttons when showButtons is true", () => { it("should render buttons when showButtons is true", () => {
@@ -613,65 +622,52 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
expect(wrapper.find(".datepicker__buttons").exists()).toBe(true);
const buttons = wrapper.find(".datepicker__buttons");
expect(buttons.exists()).toBe(true);
}); });
it("should not render buttons when showButtons is false", () => { it("should not render buttons when showButtons is false", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
showButtons: false, showButtons: false,
type: "inline",
}, },
}); });
wrapper.vm.show = true; expect(wrapper.find(".datepicker__buttons").exists()).toBe(false);
const buttons = wrapper.find(".datepicker__buttons");
expect(buttons.exists()).toBe(false);
}); });
}); });
describe("Event Handling", () => { describe("Event Handling", () => {
beforeEach(() => {
wrapper = mount(TimePicker);
});
it("should emit clear event when clear button is clicked", async () => { it("should emit clear event when clear button is clicked", async () => {
wrapper.vm.dates = [mockDate]; wrapper = mount(TimePicker, {
const clearButton = wrapper.find(".datepicker-close"); props: {
clearable: true,
await clearButton.trigger("click"); value: mockDate,
await nextTick(); },
});
await wrapper.find(".datepicker-close").trigger("click");
expect(wrapper.emitted("clear")).toBeTruthy(); expect(wrapper.emitted("clear")).toBeTruthy();
}); });
it("should handle DateCalendar ok event", async () => { it("should handle DateCalendar ok event", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
type: "inline", type: "inline",
}, },
}); });
const calendar = wrapper.findComponent({ name: "DateCalendar" }); const calendar = wrapper.findComponent({ name: "DateCalendar" });
calendar.vm.$emit("ok", true);
await calendar.vm.$emit("ok", false);
await nextTick();
expect(wrapper.emitted("input")).toBeTruthy(); expect(wrapper.emitted("input")).toBeTruthy();
}); });
it("should handle DateCalendar setDates event", async () => { it("should handle DateCalendar setDates event", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker, {
props: { props: {
type: "inline", type: "inline",
}, },
}); });
const calendar = wrapper.findComponent({ name: "DateCalendar" }); const calendar = wrapper.findComponent({ name: "DateCalendar" });
calendar.vm.$emit("setDates", mockDate, "left");
await calendar.vm.$emit("setDates", mockDate, "left"); expect(wrapper.vm.dates[0]).toEqual(mockDate);
await nextTick();
expect(wrapper.vm.dates[0]).toBe(mockDate);
}); });
it("should handle submit button click", async () => { it("should handle submit button click", async () => {
@@ -681,12 +677,7 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
wrapper.vm.dates = [mockDate]; await wrapper.find(".datepicker__button-select").trigger("click");
const submitButton = wrapper.find(".datepicker__button-select");
await submitButton.trigger("click");
await nextTick();
expect(wrapper.emitted("confirm")).toBeTruthy(); expect(wrapper.emitted("confirm")).toBeTruthy();
}); });
@@ -697,11 +688,7 @@ describe("TimePicker Component", () => {
type: "inline", type: "inline",
}, },
}); });
await wrapper.find(".datepicker__button-cancel").trigger("click");
const cancelButton = wrapper.find(".datepicker__button-cancel");
await cancelButton.trigger("click");
await nextTick();
expect(wrapper.emitted("cancel")).toBeTruthy(); expect(wrapper.emitted("cancel")).toBeTruthy();
}); });
@@ -710,40 +697,44 @@ describe("TimePicker Component", () => {
props: { props: {
value: mockDateRange, value: mockDateRange,
type: "inline", type: "inline",
maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
}, },
}); });
// Force range mode by setting dates directly and wait for reactivity // Force range mode by setting dates directly
wrapper.vm.dates = [new Date(), new Date()]; wrapper.vm.dates = [new Date(), new Date()];
await nextTick(); await nextTick();
// Check if range mode is active // Find and click a quick pick button
if (wrapper.vm.range) { const buttons = wrapper.findAll(".datepicker-popup__shortcut");
const quarterButton = wrapper.find(".datepicker-popup__shortcut"); const quarterButton = buttons.find((btn: any) => btn.text().includes("Quarter Hour"));
if (quarterButton) {
await quarterButton.trigger("click"); await quarterButton.trigger("click");
await nextTick(); await nextTick();
expect(wrapper.vm.selectedShortcut).toBe("quarter");
expect(wrapper.emitted("input")).toBeTruthy();
} else { } else {
// If not in range mode, test the quickPick method directly // If not in range mode, test the quickPick method directly
wrapper.vm.quickPick("quarter"); wrapper.vm.quickPick("quarter");
expect(wrapper.emitted("input")).toBeTruthy(); expect(wrapper.vm.selectedShortcut).toBe("quarter");
} }
}); });
}); });
describe("Lifecycle", () => { describe("Lifecycle", () => {
it("should add document event listener on mount", () => { it("should add document event listener on mount", () => {
const addEventListenerSpy = vi.spyOn(document, "addEventListener");
wrapper = mount(TimePicker); wrapper = mount(TimePicker);
expect(addEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function), true);
expect(document.addEventListener).toHaveBeenCalledWith("click", expect.any(Function), true); addEventListenerSpy.mockRestore();
}); });
it("should remove document event listener on unmount", () => { it("should remove document event listener on unmount", () => {
const removeEventListenerSpy = vi.spyOn(document, "removeEventListener");
wrapper = mount(TimePicker); wrapper = mount(TimePicker);
wrapper.unmount(); wrapper.unmount();
expect(removeEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function), true);
expect(document.removeEventListener).toHaveBeenCalledWith("click", expect.any(Function), true); removeEventListenerSpy.mockRestore();
}); });
it("should initialize dates from props value", () => { it("should initialize dates from props value", () => {
@@ -752,9 +743,8 @@ describe("TimePicker Component", () => {
value: mockDate, value: mockDate,
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1); expect(wrapper.vm.dates).toHaveLength(1);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date); expect(wrapper.vm.inputDates).toHaveLength(1);
}); });
it("should initialize dates from array value", () => { it("should initialize dates from array value", () => {
@@ -763,10 +753,8 @@ describe("TimePicker Component", () => {
value: mockDateRange, value: mockDateRange,
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date); expect(wrapper.vm.inputDates).toHaveLength(2);
expect(wrapper.vm.dates[1]).toBeInstanceOf(Date);
}); });
it("should watch for value prop changes", async () => { it("should watch for value prop changes", async () => {
@@ -776,24 +764,19 @@ describe("TimePicker Component", () => {
}, },
}); });
const newDate = new Date(2025, 5, 20); await wrapper.setProps({ value: mockDateRange });
await wrapper.setProps({ value: newDate }); expect(wrapper.vm.dates).toHaveLength(2);
await nextTick();
expect(wrapper.vm.dates[0]).toEqual(newDate);
}); });
}); });
describe("Edge Cases", () => { describe("Edge Cases", () => {
it("should handle null value", () => { it("should handle null value", () => {
wrapper = mount(TimePicker, { wrapper = mount(TimePicker as any, {
props: { props: {
value: null as any, value: null,
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1); expect(wrapper.vm.dates).toHaveLength(1);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
}); });
it("should handle undefined value", () => { it("should handle undefined value", () => {
@@ -802,9 +785,7 @@ describe("TimePicker Component", () => {
value: undefined, value: undefined,
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1); expect(wrapper.vm.dates).toHaveLength(1);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
}); });
it("should handle empty array value", () => { it("should handle empty array value", () => {
@@ -813,11 +794,7 @@ describe("TimePicker Component", () => {
value: [], value: [],
}, },
}); });
// The vi function returns [new Date(), new Date()] for arrays with length <= 1
expect(wrapper.vm.dates).toHaveLength(2); expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
expect(wrapper.vm.dates[1]).toBeInstanceOf(Date);
}); });
it("should handle single item array", () => { it("should handle single item array", () => {
@@ -826,11 +803,7 @@ describe("TimePicker Component", () => {
value: [mockDate], value: [mockDate],
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1);
// The vi function returns [new Date(), new Date()] for arrays with length <= 1
expect(wrapper.vm.dates).toHaveLength(2);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
expect(wrapper.vm.dates[1]).toBeInstanceOf(Date);
}); });
it("should handle string value", () => { it("should handle string value", () => {
@@ -839,9 +812,7 @@ describe("TimePicker Component", () => {
value: "2024-01-15", value: "2024-01-15",
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1); expect(wrapper.vm.dates).toHaveLength(1);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
}); });
it("should handle invalid date string", () => { it("should handle invalid date string", () => {
@@ -850,7 +821,6 @@ describe("TimePicker Component", () => {
value: "invalid-date", value: "invalid-date",
}, },
}); });
expect(wrapper.vm.dates).toHaveLength(1); expect(wrapper.vm.dates).toHaveLength(1);
expect(wrapper.vm.dates[0]).toBeInstanceOf(Date); expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
}); });
@@ -879,18 +849,20 @@ describe("TimePicker Component", () => {
const submitButton = wrapper.find(".datepicker__button-select"); const submitButton = wrapper.find(".datepicker__button-select");
const cancelButton = wrapper.find(".datepicker__button-cancel"); const cancelButton = wrapper.find(".datepicker__button-cancel");
// The buttons don't have explicit type attributes, but they are button elements
expect(submitButton.element.tagName).toBe("BUTTON"); expect(submitButton.element.tagName).toBe("BUTTON");
expect(cancelButton.element.tagName).toBe("BUTTON"); expect(cancelButton.element.tagName).toBe("BUTTON");
}); });
it("should have proper button types for quick pick", () => { it("should have proper button types for quick pick", () => {
wrapper = mount(TimePicker); wrapper = mount(TimePicker, {
wrapper.vm.dates = mockDateRange; props: {
wrapper.vm.show = true; value: mockDateRange,
type: "inline",
},
});
const quickPickButtons = wrapper.findAll(".datepicker-popup__shortcut"); const quickPickButtons = wrapper.findAll(".datepicker-popup__shortcut");
quickPickButtons.forEach((button: Recordable) => { quickPickButtons.forEach((button: any) => {
expect(button.attributes("type")).toBe("button"); expect(button.attributes("type")).toBe("button");
}); });
}); });

1
src/hooks/useExpressionsProcessor.ts
View File

@@ -32,7 +32,6 @@ import type { Instance, Endpoint, Service } from "@/types/selector";
import type { Node, Call } from "@/types/topology"; import type { Node, Call } from "@/types/topology";
import type { ServiceWithGroup } from "@/views/dashboard/graphs/ServiceList.vue"; import type { ServiceWithGroup } from "@/views/dashboard/graphs/ServiceList.vue";
type AllPods = Instance | Endpoint | ServiceWithGroup;
/** /**
* Shape of a single execExpression GraphQL response entry. * Shape of a single execExpression GraphQL response entry.
*/ */

3
src/layout/components/NavBar.vue
View File

@@ -46,7 +46,8 @@ limitations under the License. -->
:maxRange="appStore.maxRange" :maxRange="appStore.maxRange"
position="bottom" position="bottom"
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
@input="changeTimeRange" :showButtons="true"
@confirm="changeTimeRange"
/> />
<span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span> <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
<span class="ml-5"> <span class="ml-5">

2
src/views/dashboard/related/profile/components/NewTask.vue
View File

@@ -89,7 +89,7 @@ limitations under the License. -->
const endpointName = ref<string>(""); const endpointName = ref<string>("");
const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value); const monitorTime = ref<string>(InitTaskField.monitorTimeEn[0].value);
const monitorDuration = ref<string>(InitTaskField.monitorDuration[0].value); const monitorDuration = ref<string>(InitTaskField.monitorDuration[0].value);
const time = ref<Date>(appStore.durationRow.start); const time = ref<Date>(appStore.durationRow.end);
const minThreshold = ref<number>(0); const minThreshold = ref<number>(0);
const dumpPeriod = ref<string>(InitTaskField.dumpPeriod[0].value); const dumpPeriod = ref<string>(InitTaskField.dumpPeriod[0].value);
const maxSamplingCount = ref<string>(InitTaskField.maxSamplingCount[0].value); const maxSamplingCount = ref<string>(InitTaskField.maxSamplingCount[0].value);

3
stylelint.config.js
View File

@@ -54,11 +54,8 @@ module.exports = {
"no-empty-source": null, "no-empty-source": null,
"string-quotes": null, "string-quotes": null,
"named-grid-areas-no-invalid": null, "named-grid-areas-no-invalid": null,
"unicode-bom": "never",
"no-descending-specificity": null, "no-descending-specificity": null,
"font-family-no-missing-generic-family-keyword": null, "font-family-no-missing-generic-family-keyword": null,
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
// 'declaration-block-trailing-semicolon': 'always', // 'declaration-block-trailing-semicolon': 'always',
"rule-empty-line-before": [ "rule-empty-line-before": [
"always", "always",