Dialog to add an Author does not appear

[palfner-sse]

closes #231

[spark-sse]

bitte ein test für schreiben. Reicht dass der dialog auftaucht wenn entsprechend eine person ausgewählt wird. Im Test gerne auf dieses issue verlinken (231)

[palfner-sse]

Wie genau meinst du das? Der Dialog war die ganze Zeit sichtbar, es wurde jedoch kein Benutzername übergeben, weshalb auch kein Nutzer hinzugefügt wurde. Soll ich testen, ob der Dialog korrekt geöffnet wird, oder ob ein Nutzer erfolgreich hinzugefügt wird?

[spark-sse]

Wie genau meinst du das? Der Dialog war die ganze Zeit sichtbar, es wurde jedoch kein Benutzername übergeben, weshalb auch kein Nutzer hinzugefügt wurde. Soll ich testen, ob der Dialog korrekt geöffnet wird, oder ob ein Nutzer erfolgreich hinzugefügt wird?

dann testen ob die funktion die du behoben hast, jetzt funktioniert

[palfner-sse]

Ich schaue mir das auch noch mal in Staging an. Nicht das es da wieder verschiedene Probleme gibt.

Edit: Dialog taucht in Staging auch auf. Also kein Unterschied.

[spark-sse]

zwischendurch ging es drum, wie die onCreateAuthor methode getestet werden könnte.

ich hab mir das mal angeschaut

Mein extrahieren der methode:

// exported for testing
export function AddAuthor() {
	const [createAuthorDialog, setCreateAuthorDialog] = useState(false);
	const { mutateAsync: promoteToAuthor } = trpc.admin.promoteToAuthor.useMutation();

	async function onCreateAuthor(username?: string): Promise<void> {
		setCreateAuthorDialog(false);

		if (username) {
			try {
				await promoteToAuthor({ username });
				showToast({ type: "success", title: "Autor hinzugefügt", subtitle: username });
			} catch (error) {
				if (error instanceof TRPCClientError) {
					showToast({
						type: "error",
						title: "Fehler",
						subtitle: "Autor konnte nicht hinzugefügt werden."
					});
				}
			}
		}
	}

	return (
		<div className="mb-16 flex items-center justify-between gap-4">
			<h1 className="text-5xl">Autoren</h1>
			<button className="btn-primary" onClick={() => setCreateAuthorDialog(true)}>
				<PlusIcon className="icon h-5" />
				<span>Autor hinzufügen</span>
			</button>
			{createAuthorDialog && (
				<SearchUserDialog open={createAuthorDialog} onClose={onCreateAuthor} />
			)}
		</div>
	);
}

mein test in apps/site/__tests__/admin/authors.spec.tsx:

import { trpc } from "@self-learning/api-client";
import "@testing-library/jest-dom";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { AddAuthor } from "apps/site/pages/admin/authors";

jest.mock("@self-learning/api-client", () => ({
	trpc: {
		admin: {
			promoteToAuthor: {
				useMutation: jest.fn().mockReturnValue({
					mutateAsync: jest.fn()
				})
			}
		}
	}
}));

jest.mock("@self-learning/admin", () => ({
	SearchUserDialog: jest.fn(
		({ open, onClose }) => (
			console.log("onClose", onClose),
			console.log("open", open),
			(
				<div data-testid="search-user-dialog">
					<button onClick={() => onClose("testuser")}>Mock Close</button>
				</div>
			)
		)
	)
}));

describe("AddAuthor", () => {
	it("calls onCreateAuthor when author is being added", async () => {
		const promoteToAuthor = trpc.admin.promoteToAuthor.useMutation as jest.Mock;

		render(<AddAuthor />);
		const addButton = screen.getByRole("button", { name: /autor hinzufügen/i });
		fireEvent.click(addButton);
		fireEvent.click(screen.getByText("Mock Close"));

		await waitFor(() => {
			expect(promoteToAuthor).toHaveBeenCalledWith({ username: "testuser" });
		});
	});
});

Der test funktioniert leider so nicht. Ich kann dir gerade nicht genau sagen warum. Im Debug sehe ich das promoteToAuthor korrekt aufgerufen wird. Ich vermute mal irgendwelche async probleme im test-setup.

Vielleicht gibt das aber schon mal starthilfe

[palfner-sse]

Habe jetzt einen Test geschrieben.