Component cleanup

tests/pages/decision-approaches.test.jsx

@@ -26,16 +26,15 @@ describe("Create flow decision-approaches page", () => {
   test("renders sidebar description with add link", () => {
     render(<DecisionApproachesScreen />);
 
-    const description = screen.getByText((content, element) => {
-      if (element?.tagName !== "P") return false;
-      const text = element.textContent ?? "";
-      return (
-        text.includes("Select as many as you need") &&
-        text.includes("add") &&
-        text.includes("new decision making approaches")
-      );
+    const addControl = screen.getByRole("button", {
+      name: /^add$/,
     });
-    expect(description).toBeInTheDocument();
+    expect(addControl).toBeInTheDocument();
+
+    const description = addControl.parentElement;
+    expect(description).not.toBeNull();
+    expect(description?.textContent).toMatch(/Select as many as you need/);
+    expect(description?.textContent).toMatch(/new decision making approaches/);
   });
 
   test("renders message box with title and checkboxes", () => {

tests/pages/home.test.jsx

@@ -20,7 +20,7 @@ describe("Page", () => {
     ).toBeGreaterThan(0);
 
     // Wait for dynamically imported components to load
-    // Check numbered cards section (using getAllByText since there are multiple instances)
+    // Check CardSteps section (using getAllByText since there are multiple instances)
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -70,10 +70,10 @@ describe("Page", () => {
     ).toBeGreaterThan(0);
   });
 
-  test("renders numbered cards with correct data", async () => {
+  test("renders CardSteps section with correct data", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component to load
+    // Wait for dynamically imported CardSteps component to load
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -140,7 +140,7 @@ describe("Page", () => {
 
     // Wait for dynamically imported components to load
     // LogoWall - should be present (even if just the component structure)
-    // NumberedCards
+    // CardSteps
     await waitFor(() => {
       expect(
         screen.getAllByText("How CommunityRule works").length,
@@ -192,7 +192,7 @@ describe("Page", () => {
       ).length,
     ).toBeGreaterThan(0);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(
         screen.getAllByText(
@@ -239,12 +239,12 @@ describe("Page", () => {
     );
   });
 
-  test("renders numbered card items with correct content", async () => {
+  test("renders CardSteps step tiles with correct content", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
-      // Check all three numbered card items (using getAllByText since there are multiple instances)
+      // Three Step tiles inside CardSteps
       expect(
         screen.getAllByText("Document how your community makes decisions")
           .length,

tests/pages/page-flow.test.jsx

@@ -70,7 +70,7 @@ describe("Page Flow Integration", () => {
     expect(screen.getByAltText("Mutual Aid CO")).toBeInTheDocument();
     expect(screen.getByAltText("CU Boulder")).toBeInTheDocument();
 
-    // Numbered Cards section - wait for dynamically imported component
+    // CardSteps section — wait for dynamically imported component
     await waitFor(() => {
       expect(
         screen.getByRole("heading", { name: /How CommunityRule works/ }),
@@ -153,10 +153,10 @@ describe("Page Flow Integration", () => {
     expect(ctaButton).toBeInTheDocument();
   });
 
-  test("numbered cards display with correct icons and colors", async () => {
+  test("CardSteps section shows step tiles with expected icon/color props", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       const cards = screen.getAllByText(
         /Document how your community|Build an operating manual|Get a link to your manual/,
@@ -189,11 +189,10 @@ describe("Page Flow Integration", () => {
     const seeAll = screen.getByRole("link", { name: "See all templates" });
     expect(seeAll).toHaveAttribute("href", "/templates");
 
-    // Check that create rule button is present
-    const createButton = screen.getByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButton = screen.getByRole("button", {
+      name: "See how it works",
     });
-    expect(createButton).toBeInTheDocument();
+    expect(seeHowButton).toBeInTheDocument();
   });
 
   test("ask organizer section has proper call-to-action", () => {

tests/pages/user-journey.test.jsx

@@ -57,7 +57,7 @@ describe("User Journey Integration", () => {
     const learnButton = learnButtons[0];
     await user.click(learnButton);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(screen.getByText("How CommunityRule works")).toBeInTheDocument();
     });
@@ -77,14 +77,14 @@ describe("User Journey Integration", () => {
     expect(screen.getByText("Petition")).toBeInTheDocument();
 
     // User clicks on a governance type to create a rule
-    const createButtons = screen.getAllByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButtons = screen.getAllByRole("button", {
+      name: "See how it works",
     });
-    expect(createButtons.length).toBeGreaterThan(0);
+    expect(seeHowButtons.length).toBeGreaterThan(0);
 
-    await user.click(createButtons[0]);
+    await user.click(seeHowButtons[0]);
     // Button should remain interactive
-    expect(createButtons[0]).toBeInTheDocument();
+    expect(seeHowButtons[0]).toBeInTheDocument();
   });
 
   test("user navigates through the application using header navigation", async () => {
@@ -127,10 +127,10 @@ describe("User Journey Integration", () => {
     expect(askLink).toHaveAttribute("href", "#contact");
   });
 
-  test("user explores the process through numbered cards", async () => {
+  test("user explores the process through CardSteps", async () => {
     render(<Page />);
 
-    // Wait for dynamically imported NumberedCards component
+    // Wait for dynamically imported CardSteps component
     await waitFor(() => {
       expect(
         screen.getByText("Document how your community makes decisions"),
@@ -278,10 +278,10 @@ describe("User Journey Integration", () => {
     ).toBeInTheDocument();
 
     // 6. User can take action
-    const createButtons = screen.getAllByRole("button", {
-      name: "Create CommunityRule",
+    const seeHowButtons = screen.getAllByRole("button", {
+      name: "See how it works",
     });
-    expect(createButtons.length).toBeGreaterThan(0);
+    expect(seeHowButtons.length).toBeGreaterThan(0);
 
     // 7. User can get help if needed
     expect(screen.getByText("Still have questions?")).toBeInTheDocument();