Fresh 블로그에 HTTP 테스트 붙이기: 빌드 성공 뒤에 확인할 것들

const response = await server.fetch(
  new Request("http://localhost:8000/search?q=Markdown"),
);

const html = await response.text();

import { assert, assertEquals } from "jsr:@std/assert@1.0.19";
import { SITE } from "../config.ts";

const serverUrl = new URL(
  "../_fresh/server.js",
  import.meta.url,
);

const { default: server } = await import(
  serverUrl.href
) as {
  default: {
    fetch(
      request: Request,
    ): Response | Promise<Response>;
  };
};

assert(
  typeof server.fetch === "function",
  "server.fetch가 없습니다",
);

const ORIGIN = "http://localhost:8000";
const POST_PATH = "/posts/fresh-markdown-blog";

async function request(path: string) {
  const response = await server.fetch(
    new Request(new URL(path, ORIGIN)),
  );

  const body = await response.text();

  return { response, body };
}

function assertType(
  response: Response,
  expected: string,
) {
  const actual = response.headers
    .get("content-type")
    ?.split(";")[0]
    .trim();

  assertEquals(actual, expected);
}

Deno.test(
  "home: HTML과 글 링크를 반환한다",
  async () => {
    const { response, body } = await request("/");

    assertEquals(response.status, 200);
    assertType(response, "text/html");

    assert(
      /href="\/posts\/[a-z0-9-]+"/.test(body),
    );
  },
);

Deno.test(
  "post: 본문과 canonical을 반환한다",
  async () => {
    const { response, body } = await request(
      POST_PATH,
    );

    assertEquals(response.status, 200);
    assertType(response, "text/html");

    assert(
      body.includes(
        "Fresh에서 Markdown 블로그 만들기",
      ),
    );

    const article = body.match(
      /<article\b[^>]*>([\s\S]*?)<\/article>/,
    )?.[1];

    assert(article, "글 본문이 없습니다");
    assert(article.includes("Front Matter"));

    const links = body.match(
      /<link\b[^>]*>/g,
    ) ?? [];

    const canonical = links.find(
      (tag) => /\brel="canonical"/.test(tag),
    );

    assert(
      canonical,
      "canonical link가 없습니다",
    );

    const href = canonical.match(
      /\bhref="([^"]+)"/,
    )?.[1];

    assertEquals(
      href,
      `${SITE.url}${POST_PATH}`,
    );
  },
);

Deno.test(
  "search: 서버가 검색 결과 링크를 렌더링한다",
  async () => {
    const { response, body } = await request(
      "/search?q=Markdown",
    );

    assertEquals(response.status, 200);

    assert(
      body.includes(`href="${POST_PATH}"`),
    );
  },
);

Deno.test(
  "search: 결과가 없어도 정상 응답이다",
  async () => {
    const { response, body } = await request(
      "/search?q=zz-no-match-83b0a29d",
    );

    assertEquals(response.status, 200);

    assert(
      body.includes("검색 결과가 없습니다."),
    );
  },
);

for (
  const path of [
    "/posts/does-not-exist-83b0a29d",
    "/no/such/route-83b0a29d",
  ]
) {
  Deno.test(`404: ${path}`, async () => {
    const { response, body } = await request(
      path,
    );

    assertEquals(response.status, 404);
    assertType(response, "text/html");

    assert(
      body.includes(
        "페이지를 찾을 수 없습니다",
      ),
    );

    assert(
      body.includes('href="/search"'),
    );
  });
}

Deno.test(
  "sitemap: XML과 공개 글 URL을 반환한다",
  async () => {
    const { response, body } = await request(
      "/sitemap.xml",
    );

    assertEquals(response.status, 200);
    assertType(response, "application/xml");

    assert(
      body.includes(
        '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
      ),
    );

    assert(
      body.includes(
        `<loc>${SITE.url}${POST_PATH}</loc>`,
      ),
    );
  },
);

Deno.test(
  "robots: sitemap 위치를 안내한다",
  async () => {
    const { response, body } = await request(
      "/robots.txt",
    );

    assertEquals(response.status, 200);
    assertType(response, "text/plain");

    assert(
      body.includes(
        `Sitemap: ${SITE.url}/sitemap.xml`,
      ),
    );
  },
);

Deno.test(
  "assets: HTML이 참조한 빌드 CSS를 제공한다",
  async () => {
    const home = await request("/");

    assertEquals(
      home.response.status,
      200,
    );

    const links = home.body.match(
      /<link\b[^>]*>/g,
    ) ?? [];

    const stylesheet = links.find(
      (tag) => /\brel="stylesheet"/.test(tag),
    );

    assert(
      stylesheet,
      "stylesheet link가 없습니다",
    );

    const href = stylesheet.match(
      /\bhref="([^"]+)"/,
    )?.[1];

    assert(href, "CSS href가 없습니다");

    const cssUrl = new URL(
      href,
      ORIGIN,
    );

    assertEquals(
      cssUrl.origin,
      ORIGIN,
      "외부 CSS는 이 테스트 대상이 아닙니다",
    );

    const { response, body } = await request(
      cssUrl.pathname + cssUrl.search,
    );

    assertEquals(response.status, 200);
    assertType(response, "text/css");
    assert(body.length > 0);
  },
);

async function request(path: string) {
  const response = await server.fetch(
    new Request(new URL(path, ORIGIN)),
  );

  const body = await response.text();

  return { response, body };
}

assertEquals(response.status, 404);
assertType(response, "text/html");

assert(
  body.includes(
    "페이지를 찾을 수 없습니다",
  ),
);

assert(
  /href="\/posts\/[a-z0-9-]+"/.test(body),
);

const stylesheet = links.find(
  (tag) => /\brel="stylesheet"/.test(tag),
);

const POSTS_DIR = "./content/posts";