From 675b5a6935b640377881ae2ab14dc1ce8b2b1763 Mon Sep 17 00:00:00 2001 From: Leung Date: Mon, 12 May 2025 15:52:25 -0500 Subject: [PATCH 1/3] test(ui): add time picker block test --- .../block-defaults/TimePickerBlock.spec.tsx | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx diff --git a/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx new file mode 100644 index 000000000..f0331d670 --- /dev/null +++ b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx @@ -0,0 +1,130 @@ +import { expect } from "vitest"; +import "@testing-library/jest-dom"; +import { fireEvent, render, screen } from "../utils"; +import { TimePickerBlock } from "@/components/block-defaults/time-picker-block/TimePickerBlock"; + +const blocks = { + "time-picker": { + data: { + style: {}, + label: "Select Time", + value: "", + variant: "picker", + ampm: true, + format: "hh:mm a", + disabled: false, + required: false, + fullWidth: true, + placeholder: "", + clearable: true, + size: "small", + views: ["hours", "minutes"], + }, + id: "time-picker", + widget: "link", + slots: { + children: { + children: [], + name: "", + }, + }, + listeners: { + onChange: [], + }, + }, + "time-picker2": { + data: { + style: {}, + label: "Select Time 2", + value: "2025-04-29T14:25:01.579Z", + variant: "picker", + ampm: true, + format: "hh:mm a", + disabled: false, + required: false, + fullWidth: true, + placeholder: "", + clearable: true, + size: "small", + views: ["hours", "minutes"], + }, + id: "time-picker2", + widget: "link", + slots: { + children: { + children: [], + name: "", + }, + }, + listeners: { + onChange: [], + }, + }, +}; + +describe("time picker block", () => { + it("renders correctly with mocked provider", async () => { + const { container } = render(, { + blocks: blocks, + }); + + const element = container.querySelector("[data-block='time-picker']"); + const inputElement = container.querySelector("input"); + expect(element).toBeInTheDocument(); + expect(inputElement).toBeInTheDocument(); + expect(inputElement.querySelector("[value='']")).toBeNull(); + expect(screen.getByText("Select Time")).toBeInTheDocument(); + }); + + it("renders time value correctly", async () => { + const { container } = render(, { + blocks: blocks, + }); + + const element = container.querySelector("[data-block='time-picker2']"); + const inputElement = container.querySelector("input"); + const buttonElement = container.querySelector("button"); + + expect(element).toBeInTheDocument(); + expect(inputElement).toBeInTheDocument(); + expect(inputElement.querySelector("[value='09:25 am']")).toBeNull(); + expect(screen.getByText("Select Time 2")).toBeInTheDocument(); + fireEvent.click(buttonElement); + + const timePickerElement = screen.getByRole("dialog"); + for (let i = 1; i < 13; i++) { + const hourValue = i < 10 ? `0${i}` : `${i}`; + if (i === 5 || i === 10) { + const textElements = screen.getAllByText(hourValue); + expect(textElements).not.toBeNull(); + expect(textElements.length).equals(2); + } else { + expect(screen.getByText(hourValue)).toBeInTheDocument(); + } + const minuteValue = (i - 1) * 5; + if (i > 3) { + expect(screen.getByText(minuteValue)).toBeInTheDocument(); + } + } + expect(screen.getByText("00")).toBeInTheDocument(); + expect(screen.getByText("AM")).toBeInTheDocument(); + expect(screen.getByText("PM")).toBeInTheDocument(); + expect(screen.getByText("OK")).toBeInTheDocument(); + let selectedElements = timePickerElement.querySelectorAll( + "[aria-selected='true']", + ); + expect(selectedElements[0].textContent).equal("09"); + expect(selectedElements[1].textContent).equal("25"); + expect(selectedElements[2].textContent).equal("AM"); + + fireEvent.click(screen.getByText("06")); + fireEvent.click(screen.getByText("30")); + fireEvent.click(screen.getByText("PM")); + selectedElements = timePickerElement.querySelectorAll( + "[aria-selected='true']", + ); + expect(selectedElements[0].textContent).equal("06"); + expect(selectedElements[1].textContent).equal("30"); + expect(selectedElements[2].textContent).equal("PM"); + }); +}); From e977980e6e5b905690664a5784a9e54e0606dcb6 Mon Sep 17 00:00:00 2001 From: Leung Date: Tue, 17 Jun 2025 16:34:53 -0500 Subject: [PATCH 2/3] test(ui): change to correct widget for timepicker --- .../src/testing/block-defaults/TimePickerBlock.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx index f0331d670..e8fd67574 100644 --- a/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx +++ b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx @@ -21,7 +21,7 @@ const blocks = { views: ["hours", "minutes"], }, id: "time-picker", - widget: "link", + widget: "timepicker", slots: { children: { children: [], @@ -49,7 +49,7 @@ const blocks = { views: ["hours", "minutes"], }, id: "time-picker2", - widget: "link", + widget: "timepicker", slots: { children: { children: [], From dec1d1c0555c3f08a32646948327546c49363a83 Mon Sep 17 00:00:00 2001 From: Leung Date: Tue, 17 Jun 2025 16:55:31 -0500 Subject: [PATCH 3/3] test(ui): change to correct config listener for timepickerblock test --- .../src/testing/block-defaults/TimePickerBlock.spec.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx index e8fd67574..58a6c9604 100644 --- a/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx +++ b/libs/renderer/src/testing/block-defaults/TimePickerBlock.spec.tsx @@ -57,7 +57,10 @@ const blocks = { }, }, listeners: { - onChange: [], + onChange: { + type: "sync", + order: [], + }, }, }, };