fix(canvas/test): wrap render() in act() for SettingsPanel open/close tests #1183

Closed
core-fe wants to merge 1 commits from fix/settingspanel-act-flush into main
@@ -122,33 +122,33 @@ describe("SettingsPanel — closed by default", () => {
describe("SettingsPanel — open / close", () => {
it("renders SecretsTab when panel is open", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-xyz" />);
act(() => { render(<SettingsPanel workspaceId="ws-xyz" />); });
expect(screen.getByTestId("secrets-tab")).toBeTruthy();
expect(screen.getByText(/workspaceId=ws-xyz/i)).toBeTruthy();
});
it("renders TokensTab tab in tabs list", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
expect(screen.getByRole("tab", { name: /workspace tokens/i })).toBeTruthy();
});
it("renders Org API Keys tab in tabs list", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
expect(screen.getByRole("tab", { name: /org api keys/i })).toBeTruthy();
});
it("Secrets tab is default active", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
expect(screen.getByTestId("secrets-tab")).toBeTruthy();
expect(screen.getByRole("tab", { name: /secrets/i }).getAttribute("data-state")).toBe("active");
});
it("Tokens tab trigger exists with correct aria attributes", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
const tab = screen.getByRole("tab", { name: /workspace tokens/i });
// Radix Tabs.Trigger has role="tab" and aria-selected
expect(tab).toBeTruthy();
@@ -161,14 +161,14 @@ describe("SettingsPanel — open / close", () => {
it("Close button calls closePanel", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
fireEvent.click(screen.getByRole("button", { name: /close settings/i }));
expect(mockClosePanel).toHaveBeenCalled();
});
it("calls fetchSecrets(workspaceId) when panel opens", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-fetch-test" />);
act(() => { render(<SettingsPanel workspaceId="ws-fetch-test" />); });
expect(mockFetchSecrets).toHaveBeenCalledWith("ws-fetch-test");
});
});
@@ -179,7 +179,7 @@ describe("SettingsPanel — unsaved changes guard", () => {
it("shows guard when panel closing with isAddFormOpen=true", () => {
storeState.isPanelOpen = true;
storeState.isAddFormOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
fireEvent.click(screen.getByRole("button", { name: /close settings/i }));
expect(screen.getByTestId("unsaved-guard")).toBeTruthy();
});
@@ -187,7 +187,7 @@ describe("SettingsPanel — unsaved changes guard", () => {
it("guard shows when editingKey is set (dirty form)", () => {
storeState.isPanelOpen = true;
storeState.editingKey = "GITHUB_TOKEN";
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
fireEvent.click(screen.getByRole("button", { name: /close settings/i }));
expect(screen.getByTestId("unsaved-guard")).toBeTruthy();
});
@@ -195,7 +195,7 @@ describe("SettingsPanel — unsaved changes guard", () => {
it("'Keep editing' closes guard but panel stays open", () => {
storeState.isPanelOpen = true;
storeState.editingKey = "GITHUB_TOKEN";
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
// Trigger close attempt
fireEvent.click(screen.getByRole("button", { name: /close settings/i }));
expect(screen.getByTestId("unsaved-guard")).toBeTruthy();
@@ -209,7 +209,7 @@ describe("SettingsPanel — unsaved changes guard", () => {
it("'Discard' button on guard calls closePanel", () => {
storeState.isPanelOpen = true;
storeState.isAddFormOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
fireEvent.click(screen.getByRole("button", { name: /close settings/i }));
fireEvent.click(screen.getByTestId("guard-discard"));
expect(mockClosePanel).toHaveBeenCalled();
@@ -221,13 +221,13 @@ describe("SettingsPanel — unsaved changes guard", () => {
describe("SettingsPanel — accessibility", () => {
it("Dialog.Content has aria-label='Settings: API Keys'", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
expect(document.querySelector('[aria-label="Settings: API Keys"]')).toBeTruthy();
});
it("TabList has aria-label='Settings sections'", () => {
storeState.isPanelOpen = true;
render(<SettingsPanel workspaceId="ws-1" />);
act(() => { render(<SettingsPanel workspaceId="ws-1" />); });
expect(document.querySelector('[aria-label="Settings sections"]')).toBeTruthy();
});
});