cruise 0.1.76

YAML-driven coding agent workflow orchestrator
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ConfirmDialog } from "../components/ConfirmDialog";

describe("ConfirmDialog", () => {
  const baseProps = {
    title: "Test Title",
    message: "Are you sure?",
    confirmLabel: "Confirm",
    onConfirm: vi.fn(),
    onCancel: vi.fn(),
  };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  // --- Rendering ---

  it("renders title, message, confirm button, and cancel button", () => {
    // Given / When
    render(<ConfirmDialog {...baseProps} />);

    // Then
    expect(screen.getByRole("dialog")).toBeInTheDocument();
    expect(screen.getByText("Test Title")).toBeInTheDocument();
    expect(screen.getByText("Are you sure?")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Confirm" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
  });

  it("has aria-modal and aria-labelledby attributes for accessibility", () => {
    // Given / When
    render(<ConfirmDialog {...baseProps} />);

    // Then
    const dialog = screen.getByRole("dialog");
    expect(dialog).toHaveAttribute("aria-modal", "true");
    expect(dialog).toHaveAttribute("aria-labelledby");
  });

  // --- Interaction ---

  it("calls onConfirm when confirm button is clicked", async () => {
    // Given
    const onConfirm = vi.fn();
    render(<ConfirmDialog {...baseProps} onConfirm={onConfirm} />);

    // When
    await userEvent.click(screen.getByRole("button", { name: "Confirm" }));

    // Then
    expect(onConfirm).toHaveBeenCalledOnce();
  });

  it("calls onCancel when cancel button is clicked", async () => {
    // Given
    const onCancel = vi.fn();
    render(<ConfirmDialog {...baseProps} onCancel={onCancel} />);

    // When
    await userEvent.click(screen.getByRole("button", { name: "Cancel" }));

    // Then
    expect(onCancel).toHaveBeenCalledOnce();
  });

  it("does not call onConfirm when clicking cancel", async () => {
    // Given
    const onConfirm = vi.fn();
    render(<ConfirmDialog {...baseProps} onConfirm={onConfirm} />);

    // When
    await userEvent.click(screen.getByRole("button", { name: "Cancel" }));

    // Then
    expect(onConfirm).not.toHaveBeenCalled();
  });

  // --- Variant: destructive (default) ---

  it("applies red styling to confirm button by default (destructive variant)", () => {
    // Given / When
    render(<ConfirmDialog {...baseProps} />);

    // Then
    const confirmBtn = screen.getByRole("button", { name: "Confirm" });
    expect(confirmBtn.className).toContain("bg-red-600");
    expect(confirmBtn.className).not.toContain("bg-blue-600");
  });

  it("applies red styling to confirm button when variant is explicitly 'destructive'", () => {
    // Given / When
    render(<ConfirmDialog {...baseProps} variant="destructive" />);

    // Then
    expect(screen.getByRole("button", { name: "Confirm" }).className).toContain("bg-red-600");
  });

  // --- Variant: primary ---

  it("applies blue styling to confirm button when variant is 'primary'", () => {
    // Given / When
    render(<ConfirmDialog {...baseProps} variant="primary" />);

    // Then
    const confirmBtn = screen.getByRole("button", { name: "Confirm" });
    expect(confirmBtn.className).toContain("bg-blue-600");
    expect(confirmBtn.className).not.toContain("bg-red-600");
  });

});