From 3b8f2e791fed9525907cc24e81e2e2f852f86bda Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 2 Feb 2026 13:08:55 -0700
Subject: [PATCH] Fixes on create component tests

---
 app/components-preview/page.tsx               |  1 -
 .../ContentLockup/ContentLockup.container.tsx |  2 +
 app/components/Create/Create.container.tsx    |  5 +-
 .../InputWithCounter.types.ts                 |  2 +
 .../InputWithCounter.view.tsx                 |  1 -
 .../ModalFooter/ModalFooter.view.tsx          |  6 +-
 app/components/Stepper/Stepper.types.ts       |  2 +-
 eslint.config.mjs                             |  8 +++
 stories/Create.stories.js                     | 36 +++--------
 tests/components/Create.test.tsx              | 63 +++++++++----------
 10 files changed, 54 insertions(+), 72 deletions(-)

diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index cccd8ff..d23e021 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -9,7 +9,6 @@ import Progress from "../components/Progress";
 import Create from "../components/Create";
 import Input from "../components/Input";
 import InputWithCounter from "../components/InputWithCounter";
-import { getAssetPath } from "../../lib/assetUtils";
 
 export default function ComponentsPreview() {
   const [alertVisible, setAlertVisible] = useState({
diff --git a/app/components/ContentLockup/ContentLockup.container.tsx b/app/components/ContentLockup/ContentLockup.container.tsx
index 637da77..d240cb2 100644
--- a/app/components/ContentLockup/ContentLockup.container.tsx
+++ b/app/components/ContentLockup/ContentLockup.container.tsx
@@ -99,6 +99,8 @@ const ContentLockupContainer = memo<ContentLockupProps>(
         titleContainer: "flex items-center justify-start w-full",
         title:
           "font-bricolage-grotesque font-bold text-[28px] leading-[36px] tracking-[0] text-[var(--color-content-default-primary)] text-left",
+        subtitle:
+          "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
         description:
           "font-inter font-normal text-[16px] leading-[24px] tracking-[0] text-[var(--color-content-default-tertiary)] text-left",
         shape: "w-[16px] h-[16px]",
diff --git a/app/components/Create/Create.container.tsx b/app/components/Create/Create.container.tsx
index eb995ca..a43ab04 100644
--- a/app/components/Create/Create.container.tsx
+++ b/app/components/Create/Create.container.tsx
@@ -50,8 +50,7 @@ const CreateContainer = memo<CreateProps>(
       if (!isOpen) return;
 
       // Store previous active element
-      previousActiveElementRef.current =
-        document.activeElement as HTMLElement;
+      previousActiveElementRef.current = document.activeElement as HTMLElement;
 
       // Lock body scroll
       document.body.style.overflow = "hidden";
@@ -108,13 +107,13 @@ const CreateContainer = memo<CreateProps>(
       };
     }, [isOpen]);
 
-
     return (
       <CreateView
         isOpen={isOpen}
         onClose={onClose}
         title={title}
         description={description}
+        // eslint-disable-next-line react/no-children-prop
         children={children}
         footerContent={footerContent}
         showBackButton={showBackButton}
diff --git a/app/components/InputWithCounter/InputWithCounter.types.ts b/app/components/InputWithCounter/InputWithCounter.types.ts
index c04ee47..ec6d43c 100644
--- a/app/components/InputWithCounter/InputWithCounter.types.ts
+++ b/app/components/InputWithCounter/InputWithCounter.types.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
 export interface InputWithCounterProps {
   label?: string;
   placeholder?: string;
@@ -8,3 +9,4 @@ export interface InputWithCounterProps {
   className?: string;
   inputClassName?: string;
 }
+/* eslint-enable no-unused-vars, @typescript-eslint/no-unused-vars */
\ No newline at end of file
diff --git a/app/components/InputWithCounter/InputWithCounter.view.tsx b/app/components/InputWithCounter/InputWithCounter.view.tsx
index 2092127..58047a9 100644
--- a/app/components/InputWithCounter/InputWithCounter.view.tsx
+++ b/app/components/InputWithCounter/InputWithCounter.view.tsx
@@ -1,4 +1,3 @@
-import { getAssetPath } from "../../../lib/assetUtils";
 import type { InputWithCounterProps } from "./InputWithCounter.types";
 
 export function InputWithCounterView({
diff --git a/app/components/ModalFooter/ModalFooter.view.tsx b/app/components/ModalFooter/ModalFooter.view.tsx
index f86cc84..b3e4fc1 100644
--- a/app/components/ModalFooter/ModalFooter.view.tsx
+++ b/app/components/ModalFooter/ModalFooter.view.tsx
@@ -30,11 +30,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button
-            variant="outlined"
-            size="medium"
-            onClick={onBack}
-          >
+          <Button variant="outlined" size="medium" onClick={onBack}>
             {defaultBackText}
           </Button>
         </div>
diff --git a/app/components/Stepper/Stepper.types.ts b/app/components/Stepper/Stepper.types.ts
index 7c635b4..f82acab 100644
--- a/app/components/Stepper/Stepper.types.ts
+++ b/app/components/Stepper/Stepper.types.ts
@@ -1,4 +1,4 @@
-export type StepperActive = 1 | 2 | 3 | 4 | 5;
+export type StepperActive = number;
 
 export interface StepperProps {
   active?: StepperActive;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 7ab6f77..4036877 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -176,6 +176,14 @@ const eslintConfig = [
       "react-hooks/exhaustive-deps": "off",
     },
   },
+  // Type definition files - interface properties are used in implementation files
+  {
+    files: ["**/*.types.ts"],
+    rules: {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
 ];
 
 export default eslintConfig;
diff --git a/stories/Create.stories.js b/stories/Create.stories.js
index 87fd449..cea920c 100644
--- a/stories/Create.stories.js
+++ b/stories/Create.stories.js
@@ -65,15 +65,10 @@ export const Default = Template.bind({});
 Default.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
-    "You can also combine or add new approaches to the list",
+  description: "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
+      <Input label="Label" placeholder="Policy name" value="" />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>
@@ -90,15 +85,10 @@ export const WithStepper = Template.bind({});
 WithStepper.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
-    "You can also combine or add new approaches to the list",
+  description: "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
+      <Input label="Label" placeholder="Policy name" value="" />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>
@@ -117,15 +107,10 @@ export const Step2 = Template.bind({});
 Step2.args = {
   isOpen: true,
   title: "How should conflicts be resolved?",
-  description:
-    "You can also combine or add new approaches to the list",
+  description: "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
-        label="Label"
-        placeholder="Enter text"
-        value=""
-      />
+      <Input label="Label" placeholder="Enter text" value="" />
     </div>
   ),
   showBackButton: true,
@@ -178,15 +163,10 @@ export const NextButtonDisabled = Template.bind({});
 NextButtonDisabled.args = {
   isOpen: true,
   title: "What do you call your group's new policy?",
-  description:
-    "You can also combine or add new approaches to the list",
+  description: "You can also combine or add new approaches to the list",
   children: (
     <div className="space-y-4">
-      <Input
-        label="Label"
-        placeholder="Policy name"
-        value=""
-      />
+      <Input label="Label" placeholder="Policy name" value="" />
       <p className="text-[12px] text-[var(--color-content-default-tertiary)]">
         0/48
       </p>
diff --git a/tests/components/Create.test.tsx b/tests/components/Create.test.tsx
index ff2dfaf..e1f7f0e 100644
--- a/tests/components/Create.test.tsx
+++ b/tests/components/Create.test.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
 import Create from "../../app/components/Create";
 import Input from "../../app/components/Input";
 
@@ -20,20 +21,22 @@ describe("Create", () => {
   });
 
   it("renders when isOpen is true", () => {
-    render(<Create {...defaultProps}>Create dialog content</Create>);
+    renderWithProviders(
+      <Create {...defaultProps}>Create dialog content</Create>,
+    );
     expect(screen.getByRole("dialog")).toBeInTheDocument();
     expect(screen.getByText("Test Create Dialog")).toBeInTheDocument();
     expect(screen.getByText("Create dialog content")).toBeInTheDocument();
   });
 
   it("does not render when isOpen is false", () => {
-    render(<Create {...defaultProps} isOpen={false} />);
+    renderWithProviders(<Create {...defaultProps} isOpen={false} />);
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
 
   it("calls onClose when close button is clicked", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     const closeButton = screen.getByLabelText("Close dialog");
     fireEvent.click(closeButton);
     expect(onClose).toHaveBeenCalledTimes(1);
@@ -41,14 +44,14 @@ describe("Create", () => {
 
   it("calls onClose when ESC key is pressed", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     fireEvent.keyDown(document, { key: "Escape" });
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it("calls onClose when overlay is clicked", () => {
     const onClose = vi.fn();
-    render(<Create {...defaultProps} onClose={onClose} />);
+    renderWithProviders(<Create {...defaultProps} onClose={onClose} />);
     const overlay = document.querySelector(".fixed.inset-0");
     if (overlay) {
       fireEvent.click(overlay);
@@ -59,7 +62,7 @@ describe("Create", () => {
   it("renders footer buttons when provided", () => {
     const onBack = vi.fn();
     const onNext = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showBackButton={true}
@@ -76,7 +79,7 @@ describe("Create", () => {
 
   it("calls onBack when back button is clicked", () => {
     const onBack = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showBackButton={true}
@@ -91,7 +94,7 @@ describe("Create", () => {
 
   it("calls onNext when next button is clicked", () => {
     const onNext = vi.fn();
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showNextButton={true}
@@ -105,7 +108,7 @@ describe("Create", () => {
   });
 
   it("disables next button when nextButtonDisabled is true", () => {
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         showNextButton={true}
@@ -118,28 +121,20 @@ describe("Create", () => {
   });
 
   it("renders stepper when currentStep and totalSteps are provided", () => {
-    render(
-      <Create
-        {...defaultProps}
-        currentStep={2}
-        totalSteps={5}
-      />,
+    renderWithProviders(
+      <Create {...defaultProps} currentStep={2} totalSteps={5} />,
     );
-    const steppers = screen.getAllByRole("progressbar");
-    // Find the stepper in the footer (not the progress bar if any)
-    const footerStepper = steppers.find((stepper) => {
-      const parent = stepper.closest(".absolute.bottom-0");
-      return parent !== null;
+    // Find the stepper by its aria-label
+    const stepper = screen.getByRole("progressbar", {
+      name: "Step 2 of 5",
     });
-    expect(footerStepper).toBeInTheDocument();
-    if (footerStepper) {
-      expect(footerStepper).toHaveAttribute("aria-valuenow", "2");
-      expect(footerStepper).toHaveAttribute("aria-valuemax", "5");
-    }
+    expect(stepper).toBeInTheDocument();
+    expect(stepper).toHaveAttribute("aria-valuenow", "2");
+    expect(stepper).toHaveAttribute("aria-valuemax", "5");
   });
 
   it("renders custom footer content", () => {
-    render(
+    renderWithProviders(
       <Create
         {...defaultProps}
         footerContent={<button>Custom Footer</button>}
@@ -149,33 +144,35 @@ describe("Create", () => {
   });
 
   it("has proper ARIA attributes", () => {
-    render(<Create {...defaultProps} ariaLabel="Test create dialog" />);
+    renderWithProviders(
+      <Create {...defaultProps} ariaLabel="Test create dialog" />,
+    );
     const dialog = screen.getByRole("dialog");
     expect(dialog).toHaveAttribute("aria-modal", "true");
     expect(dialog).toHaveAttribute("aria-label", "Test create dialog");
   });
 
   it("locks body scroll when open", () => {
-    render(<Create {...defaultProps} />);
+    renderWithProviders(<Create {...defaultProps} />);
     expect(document.body.style.overflow).toBe("hidden");
   });
 
   it("restores body scroll when closed", () => {
-    const { rerender } = render(<Create {...defaultProps} />);
+    const { rerender } = renderWithProviders(<Create {...defaultProps} />);
     expect(document.body.style.overflow).toBe("hidden");
     rerender(<Create {...defaultProps} isOpen={false} />);
     expect(document.body.style.overflow).toBe("");
   });
 
   it("traps focus within create dialog", async () => {
-    render(
+    renderWithProviders(
       <Create {...defaultProps}>
         <Input label="Test Input" />
       </Create>,
     );
 
     const closeButton = screen.getByLabelText("Close dialog");
-    const input = screen.getByLabelText("Test Input");
+    screen.getByLabelText("Test Input"); // Verify input is rendered
 
     // Focus should start on first focusable element (close button)
     await waitFor(() => {