Button Save Cancel Delete Confirm Careful Saving Button Go home { const button = canvas.getByRole("button", { name: "Hold to confirm" }); const capture = button.setPointerCapture; button.setPointerCapture = fn(); try { await userEvent.click(button); await userEvent.pointer({ target: button, keys: "[MouseLeft>]" }); await new Promise((resolve) => setTimeout(resolve, 100)); await userEvent.pointer({ target: button, keys: "[/MouseLeft]" }); await new Promise((resolve) => setTimeout(resolve, 1900)); await expect(args.onconfirm).not.toHaveBeenCalled(); await expect(args.onclick).not.toHaveBeenCalled(); } finally { button.setPointerCapture = capture; } }} > Hold to confirm { const button = canvas.getByRole("button", { name: "Hold to delete" }); const capture = button.setPointerCapture; button.setPointerCapture = fn(); try { const bounds = button.getBoundingClientRect(); await userEvent.pointer({ target: button, keys: "[MouseLeft>]" }); await waitFor(() => expect(args.onconfirm).toHaveBeenCalledTimes(1), { timeout: 3000 }); await expect(button).toHaveAttribute("data-confirmed", "true"); await expect(canvas.getByRole("status")).toHaveTextContent("Confirmed"); await expect(button.getBoundingClientRect().width).toBe(bounds.width); await expect(button.getBoundingClientRect().height).toBe(bounds.height); await userEvent.pointer({ target: button, keys: "[/MouseLeft]" }); await userEvent.click(button); await expect(args.onconfirm).toHaveBeenCalledTimes(1); await expect(args.onclick).not.toHaveBeenCalled(); await waitFor(() => expect(button).toHaveAttribute("data-confirmed", "false"), { timeout: 2500 }); await expect(args.onconfirm).toHaveBeenCalledTimes(1); } finally { button.setPointerCapture = capture; } }} > Hold to delete { const button = canvas.getByRole("button", { name: "Hold to confirm" }); button.focus(); fireEvent.keyDown(button, { key: " " }); await waitFor(() => expect(args.onconfirm).toHaveBeenCalledTimes(1), { timeout: 3000 }); fireEvent.keyDown(button, { key: " ", repeat: true }); fireEvent.keyUp(button, { key: " " }); fireEvent.click(button); await expect(args.onclick).not.toHaveBeenCalled(); await waitFor(() => expect(button).toHaveAttribute("data-confirmed", "false"), { timeout: 2500 }); await expect(args.onconfirm).toHaveBeenCalledTimes(1); }} > Hold to confirm { const button = canvas.getByRole("button", { name: "Hold to confirm" }); button.focus(); fireEvent.keyDown(button, { key: "Enter" }); await waitFor(() => expect(args.onconfirm).toHaveBeenCalledTimes(1), { timeout: 3000 }); fireEvent.keyDown(button, { key: "Enter", repeat: true }); fireEvent.keyUp(button, { key: "Enter" }); fireEvent.click(button); await expect(args.onconfirm).toHaveBeenCalledTimes(1); await expect(args.onclick).not.toHaveBeenCalled(); }} > Hold to confirm { const button = canvas.getByRole("button", { name: "Hold to confirm" }); button.focus(); fireEvent.keyDown(button, { key: " " }); await new Promise((resolve) => setTimeout(resolve, 900)); fireEvent.keyDown(button, { key: "Escape" }); fireEvent.keyUp(button, { key: " " }); fireEvent.keyDown(button, { key: "Enter" }); await new Promise((resolve) => setTimeout(resolve, 1100)); fireEvent.keyUp(button, { key: "Enter" }); await expect(args.onconfirm).not.toHaveBeenCalled(); }} > Hold to confirm { const button = canvas.getByRole("button", { name: "Hold to delete" }); await expect(button).toBeDisabled(); fireEvent.pointerDown(button, { pointerId: 1, isPrimary: true, button: 0 }); fireEvent.keyDown(button, { key: "Enter" }); await userEvent.click(button); await new Promise((resolve) => setTimeout(resolve, 1900)); await expect(args.onconfirm).not.toHaveBeenCalled(); await expect(args.onclick).not.toHaveBeenCalled(); }} > Hold to delete Hold to delete
Star Next