CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes on create component tests

Browse Source
This commit is contained in:
adilallo
2026-02-02 13:08:55 -07:00
parent a8eb9e192b
commit 3b8f2e791f
10 changed files with 54 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components-preview/page.tsx
-1
View File
@@ -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({
app/components/ContentLockup/ContentLockup.container.tsx
+2
View File
@@ -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]",
app/components/Create/Create.container.tsx
+2 -3
View File
@@ -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}
app/components/InputWithCounter/InputWithCounter.types.ts
+2
View File
@@ -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 */
app/components/InputWithCounter/InputWithCounter.view.tsx
-1
View File
@@ -1,4 +1,3 @@
import { getAssetPath } from "../../../lib/assetUtils";
import type { InputWithCounterProps } from "./InputWithCounter.types";
export function InputWithCounterView({
app/components/ModalFooter/ModalFooter.view.tsx
+1 -5
View File
@@ -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>
app/components/Stepper/Stepper.types.ts
+1 -1
View File
@@ -1,4 +1,4 @@
export type StepperActive = 1 | 2 | 3 | 4 | 5;
export type StepperActive = number;
export interface StepperProps {
active?: StepperActive;
eslint.config.mjs
+8
View File
@@ -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;
stories/Create.stories.js
+8 -28
View File
@@ -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>
tests/components/Create.test.tsx
+30 -33
View File
@@ -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(() => {