cruise 0.1.67

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

import { render, screen, cleanup } from "@testing-library/react";
import { afterEach, describe, it, expect } from "vitest";
import { MarkdownViewer } from "./MarkdownViewer";

afterEach(() => cleanup());

describe("MarkdownViewer", () => {
  describe("Heading rendering", () => {
    it("H1 heading is rendered as text", () => {
      // Given
      const content = "# Hello World";
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByRole("heading", { level: 1, name: "Hello World" })).toBeInTheDocument();
    });

    it("H2 heading is rendered as text", () => {
      // Given
      const content = "## Section Title";
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByRole("heading", { level: 2, name: "Section Title" })).toBeInTheDocument();
    });
  });

  describe("GFM table", () => {
    it("GFM table is rendered with table role", () => {
      // Given
      const content = [
        "| Name | Value |",
        "| ---- | ----- |",
        "| foo  | bar   |",
      ].join("\n");
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByRole("table")).toBeInTheDocument();
    });

    it("GFM table cell content is rendered", () => {
      // Given
      const content = [
        "| Name | Value |",
        "| ---- | ----- |",
        "| foo  | bar   |",
      ].join("\n");
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByRole("cell", { name: "foo" })).toBeInTheDocument();
      expect(screen.getByRole("cell", { name: "bar" })).toBeInTheDocument();
    });
  });

  describe("className composition", () => {
    it("default prose class is applied when className is omitted", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toContain("prose");
      expect(wrapper.className).not.toContain("prose-invert");
    });

    it("adds light-mode and dark-mode prose classes for headings", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toMatch(/\bprose-headings:text-gray-900\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-headings:text-gray-100\b/);
    });

    it("adds light-mode and dark-mode prose classes for paragraphs", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toMatch(/\bprose-p:text-gray-700\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-p:text-gray-300\b/);
    });

    it("adds light-mode and dark-mode prose classes for inline code", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toMatch(/\bprose-code:text-blue-700\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-code:text-blue-300\b/);
      expect(wrapper.className).toMatch(/\bprose-code:bg-gray-100\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-code:bg-gray-800\b/);
    });

    it("adds light-mode and dark-mode prose classes for pre blocks", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toMatch(/\bprose-pre:bg-gray-100\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-pre:bg-gray-900\b/);
      expect(wrapper.className).toMatch(/\bprose-pre:border-gray-300\b/);
      expect(wrapper.className).toMatch(/\bdark:prose-pre:border-gray-700\b/);
    });

    it("additional class is appended to default when className is specified", () => {
      // Given / When
      const { container } = render(<MarkdownViewer content="text" className="p-6" />);
      // Then
      const wrapper = container.firstChild as HTMLElement;
      expect(wrapper.className).toContain("prose");
      expect(wrapper.className).toContain("p-6");
    });
  });

  describe("Inline elements", () => {
    it("inline code is rendered", () => {
      // Given
      const content = "Use `npm install` to install";
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByText("npm install")).toBeInTheDocument();
    });

    it("bullet list items are rendered", () => {
      // Given
      const content = "- item one\n- item two";
      // When
      render(<MarkdownViewer content={content} />);
      // Then
      expect(screen.getByRole("list")).toBeInTheDocument();
      expect(screen.getByText("item one")).toBeInTheDocument();
      expect(screen.getByText("item two")).toBeInTheDocument();
    });
  });
});