メッセージを投稿するモックを追加した

app/routes/app._index/components/post-entry.tsx

@@ -9,7 +9,7 @@ export default function PostEntry() {
     const snsUser = useSnsUser();
 
     return (
-        <Link to="app/post">
+        <Link to="/app/post-message">
             <p>{snsUser.name}</p>
             <p>投稿</p>
         </Link>

app/routes/app._index/route.tsx

@@ -21,7 +21,15 @@ export const loader = async ({
     const cookieHeader = request.headers.get("Cookie");
     const cookie = (await newlyPostedPostCookie.parse(cookieHeader)) || {};
     const postContents: PostContent[] = await context.latestPostsLoader.getLatestPosts("0");
-    if (Object.keys(cookie).length > 0 && cookie.isPosted) {
+    if (cookie.isPosted) {
+        const userPostContent: PostContent = {
+            id: "userPost",
+            createdAt: new Date(),
+            releaseVersion: cookie.releaseVersion,
+            tag: cookie.tag,
+            content: cookie.content,
+        };
+        postContents.unshift(userPostContent);
         return json(postContents);
     }
     return json(postContents);

app/routes/app.post-message/route.tsx

@@ -0,0 +1,94 @@
+import { ActionFunctionArgs, MetaFunction, redirect } from "@netlify/remix-runtime";
+import { Form } from "@remix-run/react";
+import { newlyPostedPostCookie } from "../../cookies.server";
+
+/**
+ * メッセージ投稿ページのメタ情報を設定する。
+ * @returns メッセージ投稿ページのメタ情報。
+ */
+export const meta: MetaFunction = () => {
+    return [
+        { title: "メッセージを投稿する" },
+        { name: "description", content: "FF14SNSのメッセージ投稿ページです。" },
+    ];
+}
+
+/**
+ * メッセージを投稿するアクション。
+ * @param request リクエスト。
+ * @param context コンテキスト。
+ * @returns メッセージを投稿するアクション。
+ */
+export const action = async ({
+    request,
+    context,
+}: ActionFunctionArgs) => {
+    // フォームデータを取得する。
+    const formData = await request.formData();
+    const releaseVersion = formData.get("releaseVersion");
+    const tag = formData.get("tag");
+    const content = formData.get("content");
+
+    // 投稿を保存する。
+    const cookie = {
+        releaseVersion: releaseVersion,
+        tag: tag,
+        content: content,
+        isPosted: true,
+    };
+    return redirect("/app", {
+        headers: {
+            "Set-Cookie": await newlyPostedPostCookie.serialize(cookie),
+        },
+    });
+}
+
+/**
+ * メッセージ投稿ページ。
+ * @returns メッセージ投稿ページ。
+ */
+export default function PostMessage() {
+    const releaseVersions = [
+        "パッチ5",
+        "パッチ4",
+        "パッチ3",
+        "パッチ2",
+        "パッチ1",
+    ];
+    const getReleaseVersionOptions = () => {
+        return <select name="releaseVersion">
+            {releaseVersions.map((releaseVersion, index) => {
+                return <option key={index} value={releaseVersion}>{releaseVersion}</option>;
+            })}
+        </select>;
+    }
+
+    const tags = [
+        "タグ1",
+        "タグ2",
+        "タグ3",
+        "タグ4",
+    ];
+    const getTagOptions = () => {
+        return <select name="tag">
+            {tags.map((tag, index) => {
+                return <option key={index} value={tag}>{tag}</option>;
+            })}
+        </select>;
+    }
+
+    return (
+        <Form method="post">
+            <div>
+                {getReleaseVersionOptions()}
+                {getTagOptions()}
+            </div>
+            <div>
+                <textarea name="content" placeholder="メッセージを入力してください" />
+            </div>
+            <div>
+                <button type="submit">投稿</button>
+            </div>
+        </Form>
+    );
+}

app/routes/app/route.tsx

@@ -7,7 +7,7 @@ import Header from "./components/header";
 import Footer from "./components/footer";
 
 /**
- * トップページのメタ情報を取得する。
+ * トップページのメタ情報を設定する。
  * @returns トップページのメタ情報。
  */
 export const meta: MetaFunction = () => {

tests/routes/app._index/route.spec.ts

@@ -24,6 +24,9 @@ beforeEach(async () => {
     requestWithCookie = new Request("https://example.com", {
         headers: {
             Cookie: await newlyPostedPostCookie.serialize({
+                releaseVersion: "パッチ5",
+                tag: "タグ2",
+                content: "クッキー経由の投稿テスト！",
                 isPosted: true,
             }),
         },
@@ -47,7 +50,7 @@ describe("loader", () => {
         expect(resultPostContents.length).toBe(10);
     });
 
-    test("loader should return 10 PostContent objects with cookie.", async () => {
+    test("loader should return 11 PostContent objects with cookie.", async () => {
         // ローダーを実行し、結果を取得する。
         const response = await loader({
             request: requestWithCookie,
@@ -59,6 +62,16 @@ describe("loader", () => {
         const resultPostContents = await response.json();
 
         // 結果を検証する。
-        expect(resultPostContents.length).toBe(10);
+        const expectedUserPost = {
+            id: "userPost",
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "クッキー経由の投稿テスト！",
+        }
+        expect(resultPostContents.length).toBe(11);
+        expect(resultPostContents[0].id).toBe(expectedUserPost.id);
+        expect(resultPostContents[0].releaseVersion).toBe(expectedUserPost.releaseVersion);
+        expect(resultPostContents[0].tag).toBe(expectedUserPost.tag);
+        expect(resultPostContents[0].content).toBe(expectedUserPost.content);
     });
 });

tests/routes/app.post-message/route.spec.ts

@@ -0,0 +1,53 @@
+import { describe, test, expect, beforeEach } from "@jest/globals";
+import { AppLoadContext } from "@netlify/remix-runtime";
+import appLoadContext from "../../dependency-injector/app-load-context";
+import { action } from "../../../app/routes/app.post-message/route";
+import { newlyPostedPostCookie } from "../../../app/cookies.server";
+
+/**
+ * モックリクエスト。
+ */
+let request: Request;
+
+/**
+ * モックコンテキスト。
+ */
+let context: AppLoadContext;
+
+beforeEach(async () => {
+    request = new Request("https://example.com", {
+        method: "POST",
+        body: new URLSearchParams({
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "アクション経由の投稿テスト！",
+        }),
+    });
+    context = appLoadContext;
+});
+
+describe('action', () => {
+    test('action should set cookie about post.', async () => {
+        // アクションを実行し、結果を取得する。
+        const response = await action({
+            request,
+            params: {},
+            context,
+        });
+
+        // 検証に必要な情報を取得する。
+        const status = response.status;
+        const location = response.headers.get("Location");
+        const cookie = await newlyPostedPostCookie.parse(response.headers.get("Set-Cookie"));
+
+        // 結果を検証する。
+        expect(status).toBe(302);
+        expect(location).toBe("/app");
+        expect(cookie).toEqual({
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "アクション経由の投稿テスト！",
+            isPosted: true,
+        });
+    });
+});