is a sibling, not an ancestor.
- // Navigate up to the wrapping bru-field div, then find the inside it.
+ // Navigate up to the wrapping drp-field div, then find the inside it.
const label = screen.getByText("Content Preview");
- const fieldDiv = label.closest(".bru-field");
+ const fieldDiv = label.closest(".drp-field");
const preview = fieldDiv?.querySelector("pre") as HTMLElement;
expect(preview).toBeInTheDocument();
expect(preview).toHaveTextContent("A".repeat(1000));
diff --git a/__tests__/components/PipelineStepper.test.tsx b/__tests__/components/PipelineStepper.test.tsx
index 30049148..d530912f 100644
--- a/__tests__/components/PipelineStepper.test.tsx
+++ b/__tests__/components/PipelineStepper.test.tsx
@@ -49,7 +49,7 @@ describe("PipelineStepper", () => {
const discoveryLabel = screen.getByText("Discovery");
expect(discoveryLabel).toHaveStyle({ fontWeight: "700" });
- expect(discoveryLabel).toHaveStyle({ color: "var(--bru-black)" });
+ expect(discoveryLabel).toHaveStyle({ color: "var(--drp-black)" });
});
it("shows progress bar for current phase", () => {
@@ -63,10 +63,10 @@ describe("PipelineStepper", () => {
render();
// Direction is a completed phase (before evidence), so fontWeight is 400
- // and color is var(--bru-black) because isComplete is true
+ // and color is var(--drp-black) because isComplete is true
const directionLabel = screen.getByText("Direction");
expect(directionLabel).toHaveStyle({ fontWeight: "400" });
- expect(directionLabel).toHaveStyle({ color: "var(--bru-black)" });
+ expect(directionLabel).toHaveStyle({ color: "var(--drp-black)" });
});
it("shows incomplete phases with default styling", () => {
@@ -74,7 +74,7 @@ describe("PipelineStepper", () => {
const discoveryLabel = screen.getByText("Discovery");
expect(discoveryLabel).toHaveStyle({ fontWeight: "400" });
- expect(discoveryLabel).toHaveStyle({ color: "var(--bru-grey)" });
+ expect(discoveryLabel).toHaveStyle({ color: "var(--drp-grey)" });
});
it("handles error state", () => {
@@ -88,7 +88,7 @@ describe("PipelineStepper", () => {
const writingLabel = screen.getByText("Writing");
expect(writingLabel).toHaveStyle({ fontWeight: "700" });
- expect(writingLabel).toHaveStyle({ color: "var(--bru-black)" });
+ expect(writingLabel).toHaveStyle({ color: "var(--drp-black)" });
});
it("shows error styling for failed phase", () => {
@@ -101,7 +101,7 @@ describe("PipelineStepper", () => {
);
const fillBar = getFillBar("Scoring");
- expect(fillBar).toHaveStyle({ background: "var(--bru-error, #FF4444)" });
+ expect(fillBar).toHaveStyle({ background: "var(--drp-error, #FF4444)" });
});
it("handles invalid phase gracefully", () => {
@@ -137,6 +137,6 @@ describe("PipelineStepper", () => {
const stepWrapper = directionSpan.parentElement;
const stepperContainer = stepWrapper?.parentElement;
expect(stepperContainer).toHaveStyle({ display: "flex" });
- expect(stepperContainer).toHaveStyle({ gap: "var(--bru-space-1)" });
+ expect(stepperContainer).toHaveStyle({ gap: "var(--drp-space-1)" });
});
});
diff --git a/__tests__/components/PostEditorModal.test.tsx b/__tests__/components/PostEditorModal.test.tsx
index 99fe99b4..60d5d9ff 100644
--- a/__tests__/components/PostEditorModal.test.tsx
+++ b/__tests__/components/PostEditorModal.test.tsx
@@ -10,6 +10,44 @@ import "@testing-library/jest-dom";
import PostEditorModal from "@/components/PostEditorModal";
import { createMockScheduledPost } from "../utils/testUtils";
+// Mock @doctorproject/react components used by PostEditorModal
+jest.mock("@doctorproject/react", () => ({
+ Button: ({ children, onClick, disabled, ...props }: any) => (
+
+ ),
+ Alert: ({ variant, children }: any) => (
+ {children}
+ ),
+ Input: ({ label, id, ...props }: any) => (
+
+ {label && }
+
+
+ ),
+ Textarea: ({ label, id, ...props }: any) => (
+
+ {label && }
+
+
+ ),
+ Select: ({ label, id, children, ...props }: any) => (
+
+ {label && }
+
+
+ ),
+ Loader: ({ size }: any) => ,
+}));
+
+// Mock lucide-react icons
+jest.mock("lucide-react", () => ({
+ Save: () => S,
+}));
+
// NOTE: The save button in PostEditorModal has onClick={void handleSave} which
// evaluates to onClick={undefined} — a known component bug. The save button
// cannot be triggered via click. Tests below cover what the component actually
@@ -71,10 +109,8 @@ describe("PostEditorModal", () => {
/>,
);
- // Close button renders with class "bru-modal__close" and has no accessible text name
- const closeButton = document.querySelector(
- ".bru-modal__close",
- ) as HTMLElement;
+ // Close button is a Button with aria-label="Close"
+ const closeButton = screen.getByRole("button", { name: /close/i });
fireEvent.click(closeButton);
expect(mockOnClose).toHaveBeenCalled();
diff --git a/__tests__/components/PostGenerator.test.tsx b/__tests__/components/PostGenerator.test.tsx
index de7be7ae..efcbb5a8 100644
--- a/__tests__/components/PostGenerator.test.tsx
+++ b/__tests__/components/PostGenerator.test.tsx
@@ -13,8 +13,8 @@ import type {
AiSettings,
} from "@/lib/types";
-// Mock @bruddle/react components
-jest.mock("@bruddle/react", () => ({
+// Mock @doctorproject/react components
+jest.mock("@doctorproject/react", () => ({
Alert: ({ variant, children }: any) => (
{children}
@@ -30,6 +30,12 @@ jest.mock("@bruddle/react", () => ({
{children}
),
+ Loader: ({ size }: any) => ,
+ ProgressBar: ({ value, label }: any) => (
+
+ {label}
+
+ ),
}));
// Mock lucide-react icons
@@ -253,7 +259,7 @@ describe("PostGenerator", () => {
);
await waitFor(() => {
- expect(screen.getByTestId("icon-loader")).toBeInTheDocument();
+ expect(screen.getByTestId("loader")).toBeInTheDocument();
expect(screen.getByText(/Generating your post/i)).toBeInTheDocument();
});
});
diff --git a/__tests__/components/ResearchBrief.test.tsx b/__tests__/components/ResearchBrief.test.tsx
index f035897d..f9544d05 100644
--- a/__tests__/components/ResearchBrief.test.tsx
+++ b/__tests__/components/ResearchBrief.test.tsx
@@ -132,9 +132,9 @@ describe("ResearchBrief", () => {
it("applies correct styling classes", () => {
render();
- // The Card component with variant="raised" renders with class "bru-card--raised"
+ // The Card component with variant="raised" renders with class "drp-card--raised"
const card = screen.getByText("Research Brief").closest("div");
- expect(card).toHaveClass("bru-card--raised");
+ expect(card).toHaveClass("drp-card--raised");
});
it("shows refined topic with correct styling", () => {
@@ -144,8 +144,8 @@ describe("ResearchBrief", () => {
const refinedTopicSection = screen
.getByText("Refined Topic")
.closest("div");
- expect(refinedTopicSection).toHaveStyle({ background: "var(--bru-cream)" });
- expect(refinedTopicSection).toHaveStyle({ border: "var(--bru-border)" });
+ expect(refinedTopicSection).toHaveStyle({ background: "var(--drp-cream)" });
+ expect(refinedTopicSection).toHaveStyle({ border: "var(--drp-border)" });
});
it("handles missing refined topic", () => {
diff --git a/__tests__/components/RuleProposal.test.tsx b/__tests__/components/RuleProposal.test.tsx
index 17a08e1f..d736a945 100644
--- a/__tests__/components/RuleProposal.test.tsx
+++ b/__tests__/components/RuleProposal.test.tsx
@@ -3,13 +3,16 @@ import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { RuleProposalCard } from "@/components/learning/RuleProposal";
import type { RuleProposal, ProposalStatus } from "@/lib/knowledge/types";
-// Mock @bruddle/react components
-jest.mock("@bruddle/react", () => ({
+// Mock @doctorproject/react components
+jest.mock("@doctorproject/react", () => ({
Alert: ({ variant, children }: any) => (
{children}
),
+ Badge: ({ variant, children }: any) => (
+ {children}
+ ),
Button: ({ children, onClick, disabled, ...props }: any) => (