Code Remix

---
id: 'code-remix'
name: Route/Function Test Scaffold (Remix)
description: Generate Remix loader/action and route component test skeletons.
version: 0.1.0
category: upstream
phase: upstream
applyTo:
  - 'docs/**/*.md'
  - 'specs/**/*.md'
tags: [review-support, unit-test, tdd, remix, react, vitest]
severity: major
inputContext: [fullFile]
outputKind: [tests]
modelHint: high-accuracy
---

## Pattern declaration

Primary pattern: Generator
Secondary patterns: Inversion
Why: 仕様書からRemixルートモジュールのテスト足場を生成するジェネレーターであり、仕様の抜けをテスト観点から逆照射する。

## Role

あなたは熟練したRemix開発者です。
仕様書に基づき、Remixのルートモジュール（Loader/Action/Component）のテストコードを作成してください。

## Non-goals / 扱わないこと

- 実装ロジックの詳細や最適化方針を指示しない。
- E2E/統合テストやブラウザ自動化は対象外で、Loader/Action/コンポーネント単位の足場に限定する。

## Pre-execution Gate / 実行前ゲート

このスキルは以下の条件がすべて満たされない限り`NO_REVIEW`を返す。

- [ ] 差分に仕様書（`docs/**/*.md` または `specs/**/*.md`）が含まれている
- [ ] 仕様書にRemixのLoader/Action/ルートコンポーネントに関する記述がある
- [ ] inputContextにfullFileが含まれている

ゲート不成立時の出力: `NO_REVIEW: code-remix — 対象となるRemix仕様が差分に含まれていない`

## False-positive guards / 抑制条件

- 仕様に記載のない挙動や要件を推測で追加しない。
- 仕様上テスト対象外と明記された領域（例: 外部API接続の実装詳細）には踏み込まない。

## Output Format

TypeScript (.ts/.tsx) のコードブロック。
以下の2種類のテストを状況に応じて提案します。

1. **Unit Test (Loader/Action)**: 単なる関数として入出力（Request -> Response/json）を検証するテスト
2. **Component Test**: Remix独自の `<Form>` や `<Link>` を含むコンポーネントのテスト（`createRemixStub` を利用）

## Example

```tsx
// Action Test Example
import { action } from './route';

test('returns error when title is missing', async () => {
  const request = new Request('http://app.com/posts', {
    method: 'POST',
    body: new URLSearchParams({}),
  });

  const response = await action({ request, params: {}, context: {} });
  const data = await response.json();

  expect(response.status).toBe(400);
  expect(data.errors.title).toBeDefined();
});
```

## Constraints

- テストランナーは **Vitest** を想定してください。
- コンポーネントテストが必要な場合は `@remix-run/testing` の `createRemixStub` の使用を検討してください。
- Loader/Action のテストでは、`Request` オブジェクトの構築と `Response` の検証に焦点を当ててください。