feat: let Studio create the topics and projects publishing requires
Publishing needs a topic and nothing could create one. The backend now owns that surface; this is its consumer — the management contract vendored, a gateway over its nine operations, and one Studio screen that lists, creates, and deletes topics and projects. The screen adds no CSS. It reuses the classes the working-copy list already uses, so it inherits Studio's spacing, type, and colour rather than growing a second visual vocabulary beside them. Scope stops at list/create/delete: renaming, phase changes, and visibility are implemented in the backend and declared in the contract, but their screens are a separate design. Two real defects surfaced while making the public port async, and both would have shipped: The search page and the header search dialog shared a query key. With an empty query, `["tech-log","search",""]` was identical for both, so react-query handed one surface the other's cache — different shapes — and the page died reading a field that was not there. Keys now name the surface. The explore filter's selects are uncontrolled and read `defaultValue`, which React applies once. Their options arrive later now, so the first render had nothing to match and the value stayed empty: a topic in the URL no longer showed as selected. The form key includes whether the catalog has arrived, so it remounts with the options present. Controlled inputs would be the other answer, but this form submits to build a URL — the URL owns the value. The route brought its own bookkeeping: a build chunk, a manual accessibility evidence file, and the CI artifact baseline that counts them. The gate pins a digest of its own shape precisely so a new route cannot slip in without that count being reviewed. Test harnesses that render public screens now assemble the query providers and await the settled paint, because the screens they render became async.
This commit is contained in:
DongHyeonka
@@ -26,6 +26,7 @@ import { ApplicationProvider } from "../../../src/presentation/providers/applica
|
||||
import { createGroupedRouteObjects } from "../../../src/presentation/routes/app-router.tsx";
|
||||
import { PLATFORM_ROUTE_CODECS } from "../../../src/presentation/routes/platform-route-codecs.ts";
|
||||
import { createTestApplication } from "../../helpers/create-test-application.ts";
|
||||
import { renderWithQueryProviders } from "../../helpers/query-providers.tsx";
|
||||
|
||||
const routeCodecs = Object.freeze({
|
||||
...PLATFORM_ROUTE_CODECS,
|
||||
@@ -63,7 +64,7 @@ afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
|
||||
async function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
|
||||
const definition = TECH_LOG_ROUTE_REGISTRY[routeId];
|
||||
const runtime = TECH_LOG_ROUTE_RUNTIME_CONTRACT[routeId];
|
||||
const Component = routeComponents[routeId];
|
||||
@@ -95,6 +96,7 @@ function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
|
||||
);
|
||||
const techLog = createTechLogFeatureInstalledInput(MOCK_STUDIO_INSTALL_CONTEXT).input;
|
||||
const view = render(
|
||||
renderWithQueryProviders(
|
||||
<ApplicationProvider
|
||||
application={createTestApplication({
|
||||
featureInputs: { "tech-log": techLog },
|
||||
@@ -102,7 +104,10 @@ function renderDocumentRoute(routeId: DocumentRouteId, initialEntry: string) {
|
||||
>
|
||||
<RouterProvider router={router} />
|
||||
</ApplicationProvider>,
|
||||
);
|
||||
));
|
||||
// 포트가 async 가 되면서 첫 페인트에는 데이터가 없다. 화면이 정착한 뒤
|
||||
// 단언하도록 여기서 한 번 기다린다 — 각 테스트에 흩어 놓으면 빠뜨린 곳이 생긴다.
|
||||
await screen.findByRole("main");
|
||||
return { ...view, router };
|
||||
}
|
||||
|
||||
@@ -195,8 +200,8 @@ describe("TechLog canonical Public documents", () => {
|
||||
},
|
||||
])(
|
||||
"renders $path with exact metadata, evidence, and ordered relations",
|
||||
({ routeId, path, title, kind, topic, project, published, evidence, relations }) => {
|
||||
const { container } = renderDocumentRoute(routeId, path);
|
||||
async ({ routeId, path, title, kind, topic, project, published, evidence, relations }) => {
|
||||
const { container } = await renderDocumentRoute(routeId, path);
|
||||
const main = screen.getByRole("main");
|
||||
|
||||
expect(within(main).getByRole("heading", { level: 1, name: title })).toBeVisible();
|
||||
@@ -222,8 +227,8 @@ describe("TechLog canonical Public documents", () => {
|
||||
},
|
||||
);
|
||||
|
||||
it("preserves the specialized Fetch Join layout, TOC, rendered blocks, anchors, and evidence media", () => {
|
||||
const { container } = renderDocumentRoute(
|
||||
it("preserves the specialized Fetch Join layout, TOC, rendered blocks, anchors, and evidence media", async () => {
|
||||
const { container } = await renderDocumentRoute(
|
||||
"TECH_LOG_CASE",
|
||||
"/cases/collection-fetch-join-pagination",
|
||||
);
|
||||
@@ -253,8 +258,8 @@ describe("TechLog canonical Public documents", () => {
|
||||
expect(image).toHaveAttribute("loading", "lazy");
|
||||
});
|
||||
|
||||
it("uses the generic Case markup and omits source relations for the canonical empty state", () => {
|
||||
const generic = renderDocumentRoute(
|
||||
it("uses the generic Case markup and omits source relations for the canonical empty state", async () => {
|
||||
const generic = await renderDocumentRoute(
|
||||
"TECH_LOG_CASE",
|
||||
"/cases/redis-adapter-ttl-boundary",
|
||||
);
|
||||
@@ -264,7 +269,7 @@ describe("TechLog canonical Public documents", () => {
|
||||
);
|
||||
generic.unmount();
|
||||
|
||||
const empty = renderDocumentRoute(
|
||||
const empty = await renderDocumentRoute(
|
||||
"TECH_LOG_CASE",
|
||||
"/cases/collection-fetch-join-pagination?state=relations-empty",
|
||||
);
|
||||
@@ -273,8 +278,8 @@ describe("TechLog canonical Public documents", () => {
|
||||
expect(screen.queryByRole("heading", { name: "이 기록의 연결" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("preserves Reference rule order and resolved Question evidence and empty copy", () => {
|
||||
const reference = renderDocumentRoute(
|
||||
it("preserves Reference rule order and resolved Question evidence and empty copy", async () => {
|
||||
const reference = await renderDocumentRoute(
|
||||
"TECH_LOG_REFERENCE",
|
||||
"/references/state-and-nonce-boundary",
|
||||
);
|
||||
@@ -290,7 +295,7 @@ describe("TechLog canonical Public documents", () => {
|
||||
expect(screen.getByText("마지막 검증 2026.08.09")).toBeVisible();
|
||||
reference.unmount();
|
||||
|
||||
renderDocumentRoute(
|
||||
await renderDocumentRoute(
|
||||
"TECH_LOG_QUESTION",
|
||||
"/questions/collection-fetch-join-with-pagination",
|
||||
);
|
||||
@@ -311,16 +316,16 @@ describe("TechLog topics and Public not-found routing", () => {
|
||||
["jpa", "JPA", "목록 조회, 연관 로딩과 페이지 경계를 함께 검증한 기록입니다.", "3개의 관련 기록"],
|
||||
["authentication", "Authentication", "브라우저와 Edge, Resource Server 사이의 인증 책임과 신뢰 경계를 검증한 기록입니다.", "2개의 관련 기록"],
|
||||
["redis", "Redis", "애플리케이션 정책과 Redis 저장 명령의 책임 경계를 검증한 기록입니다.", "1개의 관련 기록"],
|
||||
])("aggregates /topics/%s with exact copy and count", (slug, title, description, count) => {
|
||||
renderDocumentRoute("TECH_LOG_TOPIC", `/topics/${slug}`);
|
||||
])("aggregates /topics/%s with exact copy and count", async (slug, title, description, count) => {
|
||||
await renderDocumentRoute("TECH_LOG_TOPIC", `/topics/${slug}`);
|
||||
|
||||
expect(screen.getByRole("heading", { level: 1, name: title })).toBeVisible();
|
||||
expect(screen.getByText(description)).toBeVisible();
|
||||
expect(screen.getByText(count)).toBeVisible();
|
||||
});
|
||||
|
||||
it("keeps JPA topic records in canonical published order", () => {
|
||||
const { container } = renderDocumentRoute("TECH_LOG_TOPIC", "/topics/jpa");
|
||||
it("keeps JPA topic records in canonical published order", async () => {
|
||||
const { container } = await renderDocumentRoute("TECH_LOG_TOPIC", "/topics/jpa");
|
||||
|
||||
expect(
|
||||
Array.from(container.querySelectorAll(".public-record-list > li > a"), (link) =>
|
||||
@@ -339,7 +344,7 @@ describe("TechLog topics and Public not-found routing", () => {
|
||||
["TECH_LOG_QUESTION" as const, "/questions/not-registered"],
|
||||
["TECH_LOG_TOPIC" as const, "/topics/not-registered"],
|
||||
])("keeps the unreachable client fallback accessible for %s", async (routeId, path) => {
|
||||
const { container, router } = renderDocumentRoute(routeId, path);
|
||||
const { container, router } = await renderDocumentRoute(routeId, path);
|
||||
|
||||
expect(router.state.location.pathname).toBe(path);
|
||||
expect(
|
||||
|
||||
Reference in New Issue
Block a user