Webアプリケーション テスト支援スキル

概要

Webアプリケーションのテスト設計・実装を支援するスキルです。日本語テキスト検証、IME入力テスト、全角・半角混在処理など、日本語Webアプリ特有のテスト観点をカバーします。

テストの種類

種類	ツール	対象
ユニットテスト	Vitest, Jest	関数、コンポーネント単体
統合テスト	Vitest, Jest	複数モジュールの連携
E2Eテスト	Playwright	ブラウザ上のユーザー操作全体

日本語テキスト検証

全角・半角混在テスト

describe("全角・半角変換", () => {
  test("全角英数字を半角に変換できる", () => {
    expect(toHalfWidth("Ａ Ｂ Ｃ１２３")).toBe("ABC123");
  });

  test("半角カタカナを全角に変換できる", () => {
    expect(toFullWidthKatakana("ｶﾀｶﾅ")).toBe("カタカナ");
  });

  test("全角・半角混在文字列を正しく処理する", () => {
    expect(normalize("Ｔｅｓｔテスト123")).toBe("Testテスト123");
  });
});

文字コードテスト

describe("文字コード処理", () => {
  test("UTF-8の日本語文字列を正しく処理する", () => {
    const text = "日本語テスト文字列🎌";
    expect(processText(text)).toHaveLength(10);
  });

  test("Shift_JISからUTF-8への変換が正しい", () => {
    const sjisBuffer = encodeShiftJIS("日本語");
    expect(decodeToUTF8(sjisBuffer)).toBe("日本語");
  });

  test("サロゲートペア文字を正しく扱う", () => {
    const text = "𠮷野家"; // 𠮷はサロゲートペア
    expect([...text]).toHaveLength(3);
  });
});

日本語バリデーション

describe("日本語入力バリデーション", () => {
  test("電話番号の形式を検証する", () => {
    expect(isValidPhoneNumber("03-1234-5678")).toBe(true);
    expect(isValidPhoneNumber("090-1234-5678")).toBe(true);
    expect(isValidPhoneNumber("0120-123-456")).toBe(true);
    expect(isValidPhoneNumber("12345")).toBe(false);
  });

  test("郵便番号の形式を検証する", () => {
    expect(isValidPostalCode("123-4567")).toBe(true);
    expect(isValidPostalCode("1234567")).toBe(true);
    expect(isValidPostalCode("123-456")).toBe(false);
  });

  test("全角カタカナのみを許可する", () => {
    expect(isFullWidthKatakana("カタカナ")).toBe(true);
    expect(isFullWidthKatakana("ｶﾀｶﾅ")).toBe(false);
    expect(isFullWidthKatakana("かたかな")).toBe(false);
  });
});

IME入力テスト

変換確定前後の挙動

describe("IME入力処理", () => {
  test("composition中はバリデーションを実行しない", async ({ page }) => {
    const input = page.locator("#name-input");

    // IME入力開始（compositionstart）
    await input.dispatchEvent("compositionstart");
    await input.fill("にほんご");
    // 変換確定前はエラー表示されないことを確認
    await expect(page.locator(".error-message")).not.toBeVisible();

    // IME変換確定（compositionend）
    await input.dispatchEvent("compositionend");
    // 確定後にバリデーションが走ることを確認
    await expect(input).toHaveValue("にほんご");
  });
});

Composition Events のテスト観点

イベント	テスト内容
compositionstart	バリデーションの一時停止
compositionupdate	変換候補表示中の挙動
compositionend	確定後のバリデーション実行
変換キャンセル	Escキーによる入力取消の処理

ツール設定

Playwright（E2Eテスト）

// playwright.config.ts
export default defineConfig({
  use: {
    locale: "ja-JP",
    timezoneId: "Asia/Tokyo",
  },
});

Vitest（ユニット・統合テスト）

// vitest.config.ts
export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
  },
});

テストケース日本語命名規則

命名のルール

// describe: 「テスト対象」を記述
describe("郵便番号入力フォーム", () => {

  // test: 「条件 → 期待結果」の形式
  test("正しい形式の郵便番号を入力すると住所が自動補完される", () => { });
  test("不正な形式の場合はエラーメッセージが表示される", () => { });
  test("ハイフンなしの7桁数字でも受け付ける", () => { });
});

命名のポイント

• test() の説明文は「〜すると〜される」の形式で統一
• 正常系・異常系・境界値を明確に区別する
• テスト実行結果のログが日本語で読めるようにする

テスト設計時の確認事項

1. 対象ブラウザ: テスト実行環境（Chromium / Firefox / WebKit）
2. 入力パターン: 全角・半角・絵文字・サロゲートペア文字の考慮
3. ロケール依存: 日付形式、通貨表示、ソート順の検証
4. 文字数カウント: String.length と [...str].length の違いに注意