confluence-templates-directory.spec.ts

confluence-templates-directory.spec.tstests/e2e/specs/confluence-templates-directory.spec.tsraw ← specs4,363 B← Back to the app
1/**
2 * T-141 — the /templates DIRECTORY UI E2E (search + category filter +
3 * description), on top of the snapshot→list→apply loop covered by
4 * confluence-templates.spec.ts.
5 *
6 * The filters are SERVER-side: `GET /workspaces/:id/templates?search=&category=`
7 * (search = case-insensitive contains on name+description, category = exact).
8 * This spec snapshots two templates into DIFFERENT categories (via the API,
9 * which carries category/description) and verifies the web directory:
10 *   - the category dropdown lists the categories present,
11 *   - selecting a category narrows the list to that category's templates,
12 *   - search narrows by name (case-insensitive),
13 *   - each row shows its description,
14 *   - "Clear" restores the unfiltered union.
15 *
16 * Origin: `https://notion.filps.com` (Caddy single-origin — see the other
17 * confluence-* specs).
18 */
19import { test, expect } from "../fixtures";
20import { createPage } from "../utils/api";
21import type { PageDto } from "../fixtures";
22 
23interface TemplateDto {
24  id: string;
25  name: string;
26  category: string | null;
27  description: string | null;
28}
29 
30async function makeTemplate(
31  api: import("@playwright/test").APIRequestContext,
32  wsId: string,
33  name: string,
34  category: string,
35  description: string
36): Promise<TemplateDto> {
37  const src = (await createPage(api, wsId, { title: name })) as PageDto;
38  const res = await api.post(`/api/v1/pages/${src.id}/templates`, {
39    data: { name, category, description }
40  });
41  expect(res.status(), await res.text()).toBe(201);
42  return (await res.json()) as TemplateDto;
43}
44 
45test.describe("Templates directory — T-141 (search + category)", () => {
46  test("category filter, name search, description, and Clear", async ({
47    authPage,
48    api,
49    freshWorkspace
50  }) => {
51    const ws = await freshWorkspace("Template Dir Space");
52    const meeting = await makeTemplate(api, ws.id, "Standup Notes", "meetings", "Daily team standup");
53    const incident = await makeTemplate(api, ws.id, "Incident Report", "engineering", "Post-incident writeup");
54 
55    await authPage.goto(`/w/${ws.slug}/templates`);
56    await expect(authPage.getByTestId(`template-item-${meeting.id}`)).toBeVisible({ timeout: 15_000 });
57 
58    // Both rows show their description (the directory's human-readable line).
59    await expect(authPage.getByTestId(`template-desc-${meeting.id}`)).toHaveText("Daily team standup");
60    await expect(authPage.getByTestId(`template-desc-${incident.id}`)).toHaveText("Post-incident writeup");
61 
62    // The category dropdown offers the categories present in the directory
63    // (the list is a cross-workspace union — built-in templates from other
64    // workspaces the user belongs to contribute categories — so assert the
65    // two we created are present, not an exact set).
66    const select = authPage.getByTestId("template-category");
67    const options = await select.locator("option").allInnerTexts();
68    expect(options).toEqual(expect.arrayContaining(["All categories", "engineering", "meetings"]));
69 
70    // Category filter → only the matching template remains.
71    await select.selectOption("meetings");
72    await expect(authPage.getByTestId(`template-item-${meeting.id}`)).toBeVisible();
73    await expect(authPage.getByTestId(`template-item-${incident.id}`)).toHaveCount(0);
74    // The row also carries the category badge.
75    await expect(authPage.getByTestId(`template-category-badge-${meeting.id}`)).toHaveText("meetings");
76 
77    // Reset the category (search and category COMBINE server-side — an
78    // "incident" search under category=meetings would be empty by design),
79    // then name search (case-insensitive) → only the matching template.
80    await select.selectOption("");
81    const search = authPage.getByTestId("template-search");
82    await search.fill("incident");
83    await expect(authPage.getByTestId(`template-item-${incident.id}`)).toBeVisible();
84    await expect(authPage.getByTestId(`template-item-${meeting.id}`)).toHaveCount(0);
85 
86    // Clear → the unfiltered union is back.
87    await authPage.getByTestId("template-clear-filters").click();
88    await expect(search).toHaveValue("");
89    await expect(select).toHaveValue("");
90    await expect(authPage.getByTestId(`template-item-${meeting.id}`)).toBeVisible();
91    await expect(authPage.getByTestId(`template-item-${incident.id}`)).toBeVisible();
92  });
93});
94