feat(FN-668): add button visibility tests for task creation components
- Add testid to save button in InlineCreateCard for test targeting - Add tests verifying InlineCreateCard buttons are hidden when collapsed - Add tests verifying QuickEntryBox controls have hidden attribute when collapsed - Add tests for toggle behavior and button accessibility in both components
This commit is contained in:
@@ -785,6 +785,7 @@ export function InlineCreateCard({
|
|||||||
className="btn btn-primary btn-sm"
|
className="btn btn-primary btn-sm"
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
disabled={!description.trim() || submitting}
|
disabled={!description.trim() || submitting}
|
||||||
|
data-testid="save-button"
|
||||||
>
|
>
|
||||||
{submitting ? "Creating..." : "Save"}
|
{submitting ? "Creating..." : "Save"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -673,3 +673,71 @@ describe("InlineCreateCard localStorage persistence", () => {
|
|||||||
expect((textarea as HTMLTextAreaElement).value).toBe("");
|
expect((textarea as HTMLTextAreaElement).value).toBe("");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("InlineCreateCard button visibility when collapsed", () => {
|
||||||
|
it("hides all buttons when not expanded", () => {
|
||||||
|
renderCard();
|
||||||
|
// Card starts collapsed (isExpanded is false by default)
|
||||||
|
// Only the toggle button should be visible, all footer buttons should be hidden
|
||||||
|
|
||||||
|
// Footer controls should not be rendered
|
||||||
|
expect(screen.queryByTestId("plan-button")).toBeNull();
|
||||||
|
expect(screen.queryByTestId("subtask-button")).toBeNull();
|
||||||
|
expect(screen.queryByText(/Deps/)).toBeNull();
|
||||||
|
expect(screen.queryByText(/Preset/)).toBeNull();
|
||||||
|
expect(screen.queryByText(/Models/)).toBeNull();
|
||||||
|
expect(screen.queryByTestId("save-button")).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("toggle button is always visible regardless of expanded state", () => {
|
||||||
|
renderCard();
|
||||||
|
// Toggle button should always be visible
|
||||||
|
expect(screen.getByTestId("inline-create-toggle")).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shows buttons after clicking toggle to expand", () => {
|
||||||
|
renderCard();
|
||||||
|
|
||||||
|
// Initially collapsed - buttons hidden
|
||||||
|
expect(screen.queryByTestId("plan-button")).toBeNull();
|
||||||
|
expect(screen.queryByText(/Deps/)).toBeNull();
|
||||||
|
|
||||||
|
// Click toggle to expand
|
||||||
|
expandCard();
|
||||||
|
|
||||||
|
// Now buttons should be visible
|
||||||
|
expect(screen.getByTestId("plan-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("subtask-button")).toBeTruthy();
|
||||||
|
expect(screen.getByText(/Deps/)).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("save-button")).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("hides buttons again after collapsing via toggle", () => {
|
||||||
|
renderCard();
|
||||||
|
|
||||||
|
// Expand
|
||||||
|
expandCard();
|
||||||
|
expect(screen.getByTestId("plan-button")).toBeTruthy();
|
||||||
|
|
||||||
|
// Collapse
|
||||||
|
expandCard();
|
||||||
|
|
||||||
|
// Buttons should be hidden again
|
||||||
|
expect(screen.queryByTestId("plan-button")).toBeNull();
|
||||||
|
expect(screen.queryByTestId("subtask-button")).toBeNull();
|
||||||
|
expect(screen.queryByText(/Deps/)).toBeNull();
|
||||||
|
expect(screen.queryByText(/Preset/)).toBeNull();
|
||||||
|
expect(screen.queryByText(/Models/)).toBeNull();
|
||||||
|
expect(screen.queryByTestId("save-button")).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("footer div is not rendered when collapsed", () => {
|
||||||
|
renderCard();
|
||||||
|
// Footer should not be in the DOM when collapsed
|
||||||
|
expect(document.getElementById("inline-create-controls")).toBeNull();
|
||||||
|
|
||||||
|
expandCard();
|
||||||
|
// Footer should now be in the DOM
|
||||||
|
expect(document.getElementById("inline-create-controls")).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -1397,4 +1397,67 @@ describe("QuickEntryBox", () => {
|
|||||||
expect(screen.getByTestId("save-button")).toBeTruthy();
|
expect(screen.getByTestId("save-button")).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("Button visibility when collapsed", () => {
|
||||||
|
it("controls div has hidden attribute when not expanded", () => {
|
||||||
|
renderQuickEntryBox({}, { startCollapsed: true });
|
||||||
|
// Component starts collapsed (disclosure expanded state is false)
|
||||||
|
// Only the toggle button should be visible, all other buttons should be hidden
|
||||||
|
|
||||||
|
const controls = document.getElementById("quick-entry-controls");
|
||||||
|
expect(controls?.hasAttribute("hidden")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("toggle button is always visible regardless of expanded state", () => {
|
||||||
|
renderQuickEntryBox({}, { startCollapsed: true });
|
||||||
|
// Toggle button should always be visible
|
||||||
|
expect(screen.getByTestId("quick-entry-toggle")).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shows buttons after clicking toggle to expand", () => {
|
||||||
|
renderQuickEntryBox({}, { startCollapsed: true });
|
||||||
|
|
||||||
|
// Initially collapsed - controls hidden
|
||||||
|
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
|
||||||
|
|
||||||
|
// Click toggle to expand
|
||||||
|
expandQuickEntry();
|
||||||
|
|
||||||
|
// Now controls should be visible
|
||||||
|
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(false);
|
||||||
|
// And buttons inside should be accessible
|
||||||
|
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("plan-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("subtask-button")).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("hides buttons again after collapsing via toggle", () => {
|
||||||
|
renderQuickEntryBox({}, { startCollapsed: true });
|
||||||
|
|
||||||
|
// Expand
|
||||||
|
expandQuickEntry();
|
||||||
|
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(false);
|
||||||
|
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
|
||||||
|
|
||||||
|
// Collapse
|
||||||
|
expandQuickEntry();
|
||||||
|
|
||||||
|
// Controls should be hidden again
|
||||||
|
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("verifies all buttons are accessible when expanded", () => {
|
||||||
|
renderQuickEntryBox({}, { startCollapsed: true });
|
||||||
|
expandQuickEntry();
|
||||||
|
|
||||||
|
// All buttons should be accessible when expanded
|
||||||
|
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("quick-entry-models-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("plan-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("subtask-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("save-button")).toBeTruthy();
|
||||||
|
expect(screen.getByTestId("refine-button")).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user