メールアドレスの確認を行う の履歴(No.2)

Prisma への seeding†

そのために上記のリストを Prisma のデータベースに入れたい。

https://m-shige1979.hatenablog.com/entry/2021/11/20/213051

あたりを参考にしつつ、

prisma/seed.ts

LANG: ts
import { db } from '../src/lib/server/db';
import * as fs from 'fs';

async function main() {
  await db.worstPassword.deleteMany();
  const text = fs.readFileSync('./prisma/seed/10-million-password-list-top-1000000.txt', 'utf-8');
  text.split(/\n\r?|\r/).forEach(async (value, rank)=> {
    await db.worstPassword.create({data:{value, rank}})
  })
}

main()    
  .catch((e) => {
    console.error(e)
    process.exit(1)
  })
  .finally(async () => {
    await db.$disconnect()
  })

これを実行するために以下を行う

• prisma/seed に 10-million-password-list-top-100000.txt をダウンロード
• ts-node を入れて .ts ファイルを直接実行可能にする
  • 参照 https://qiita.com/mangano-ito/items/75e65071c9c482ddc335
• そして ./node_modules/.bin/ts-node prisma/seed.ts

LANG: console
$ mkdir prisma/seed
$ curl https://raw.githubusercontent.com/danielmiessler/SecLists/master/Passwords/Common-Credentials/10-million-password-list-top-100000.txt > prisma/seed/10-million-password-list-top-100000.txt
$ npm install --save typescript ts-node
$ ./node_modules/.bin/ts-node prisma/seed.ts
 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\osamu\Desktop\svelte\authtest\prisma\seed.ts
     at new NodeError (node:internal/errors:399:5)
     at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
     at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
     at defaultLoad (node:internal/modules/esm/load:81:20)
     at nextLoad (node:internal/modules/esm/loader:163:28)
     at ESMLoader.load (node:internal/modules/esm/loader:605:26)
     at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
     at new ModuleJob (node:internal/modules/esm/module_job:64:26)
     at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
     at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
   code: 'ERR_UNKNOWN_FILE_EXTENSION'
 }

エラーが出た。

https://qiita.com/nyanchu/items/82903e0463fa9d558639 を参考にして tsconfig.json を書き換える。

tsconfig.json

LANG: json
  {
    "extends": "./.svelte-kit/tsconfig.json",
+   "ts-node": {
+     "esm": true,
+     "experimentalSpecifierResolution": "node"
+   },
    ...

これで実行はされるようになった・・・が、

LANG: console
$ ./node_modules/.bin/ts-node prisma/seed.ts
 
 <--- Last few GCs --->
 
 [54920:00000183318518E0]    42008 ms: Mark-sweep (reduce) 2047.2 (2083.1) -> 2046.6 (2083.6) MB, 765.8 / 0.0 ms  (+ 46.6 ms in 14 steps since start of marking, biggest step 4.6 ms, walltime since start of marking 828 ms) (average mu = 0.382, current mu = [54920:00000183318518E0]    44566 ms: Mark-sweep (reduce) 2047.7 (2083.6) -> 2047.3 (2084.4) MB, 2164.6 / 0.0 ms  (+ 58.2 ms in 12 steps since start of marking, biggest step 7.2 ms, walltime since start of marking 2238 ms) (average mu = 0.228, current mu
 
 <--- JS stacktrace --->
 
 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 ...

メモリ不足で落ちた。

prisma/seed.ts

LANG: ts
-   text.split(/\n\r?|\r/).forEach(async (value, rank)=> {
-     await db.worstPassword.create({data:{value, rank}})
-   })
+   const items = text.split(/\n\r?|\r/);
+   for(let rank = 0; rank < items.length; rank++) {
+     const value = items[rank];
+     await db.worstPassword.create({data:{value, rank}})
+   }

あー、考えてみれば元のコードでは forEach に与えてる async 関数を誰も await していなかったのでひたすら Promise の山が生成されてしまっていた。

素人丸出しのダメコードだった。

１つ１つの create を await するようにしたところ、時間はかかったものの、 ちゃんとデータが追加された。

npm で動かせるようにする†

package.json

LANG: json
     "dependencies": {
      "@lucia-auth/adapter-prisma": "^3.0.2",
      "@prisma/client": "^5.6.0",
      "lucia": "^2.7.4",
      "nodemailer": "^6.9.7",
      "svelte-french-toast": "^1.2.0",
      "ts-node": "^10.9.1"
    },
+   "prisma": {
+     "seed": "ts-node prisma/seed.ts"
+   }
  }

これで、

LANG: console
$ npm prisma db seed
 Environment variables loaded from .env
 Running seed command `ts-node prisma/seed.ts` ...

の形で seeding が行える。

ただ、 https://github.com/prisma/prisma/discussions/18057 などによると seeding というのはあくまで開発途上でデータベースにテストデータを入れたりするのに 使われるものなので、今回の用途のように本番環境でも使うようなのはいわゆる seeding の用途とは異なるようだ。

上記の処理は非常に長い時間もかかるので seed コマンドとは異なる形で実行できるように しておくべきっぽい。

どうするべきか要検討。

パスワードを検証するのに使う†

src/lib/formSchemas/changeProfile.ts

LANG: ts
  import { z } from 'zod';
+ import { db } from '$lib/server/db';
  
  export const schema = z
    .object({
      name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
      password: z.string().regex(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
      confirm: z.string()
    })
    .refine((data) => data.password === data.confirm, {
      message: '確認用パスワードが一致しません',
      path: ['confirm']
+   })
+   .superRefine(async (data, ctx) => {
+     const record = await db.worstPassword.findUnique({where: {value: data.password}, select: {rank: true}});
+     if(record) {
+       ctx.addIssue({
+         code: z.ZodIssueCode.custom,
+         message: `容易に推測可能なパスワードです (rank = ${record.rank})`,
+         fatal: true,
+         path: ['password'],
+       });
+       return z.NEVER;
+     }
    });

うまく判定されるようになった。

src/lib/formSchemas/resetPassword.ts や src/lib/formSchemas/signup.ts も同様に変更するため、 判定部分を切り出した。

authtest\src\lib\formSchemas\superRefine\password.ts

LANG: ts
import { z } from 'zod';
import { db } from '$lib/server/db';

export async function refinerForPassword(data: {password: string}, ctx: z.RefinementCtx) {
  const record = await db.worstPassword.findUnique({where: {value: data.password}, select: {rank: true}});
  if(record) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: `容易に推測可能なパスワードです (rank = ${record.rank})`,
      fatal: true,
      path: ['password'],
    });
    return z.NEVER;
  }
}

これを使うと個々の schema では１行追加するだけで済む。

 .superRefine(refinerForPassword);

src/lib/formSchemas/changeProfile.ts

LANG: ts
  import { z } from 'zod';
* import { refinerForPassword } from './superRefine/password'

  export const schema = z
    .object({
      name: z.string().min(3, { message: 'ユーザー名は3文字以上で入力してください' }),
      password: z.string().regex(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/, {
        message: 'パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください'
      }),
      confirm: z.string()
    })
    .refine((data) => data.password === data.confirm, {
      message: '確認用パスワードが一致しません',
      path: ['confirm']
    })
*   .superRefine(refinerForPassword);

src/lib/formSchemas/resetPassword.ts

src/lib/formSchemas/signup.ts

も同様にする。

パスワード検証 API を用意する†

サブミットしてみなくても脆弱性が分かるよう、 クライアントサイドから確認するための API を用意する。

src/routes/password-ranking/+server.ts

LANG: ts
import { json } from '@sveltejs/kit';
import { db } from '$lib/server/db'

export async function POST({ request }) {
  const { password } = await request.json();
  const record = await db.worstPassword.findUnique({where: {value: password}, select: {rank: true}});
  if(record) {
    return json(record.rank + 1);
  }
  return json(0);
}

パスワード入力フォームから使う†

LANG: html
    <input type="password" name="password" bind:value={$form.password} disabled={$submitting} on:input={checkPassword} />

のように onInput イベントを拾って、

LANG: ts
  let timer: NodeJS.Timeout;
  function checkPassword(e: Event) {
    const password = (e.target as HTMLInputElement).value;
    if (password && password.length < 8) {
      errors.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
      return;
    }

    // 一旦エラーをキャンセル
    errors.update((e)=>{e.password = undefined; return e});

    // 設定待ちがあればキャンセル
    clearTimeout(timer);

    // 500 ms 後に設定
    timer = setTimeout(()=> checkPasswordSub(password), 500);
  }

  function checkPasswordSub(password: string) {
    if(!password.match(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/)) {
      errors.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
    } else {
      const method = "POST";
      const body = JSON.stringify({ password });
      const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      };
      fetch("/password-ranking", {method, headers, body})
        .then((res)=> res.json())
        .then((rank) => {
          if(rank) {
            errors.update((e)=>{e.password = [`容易に推測可能なパスワードです (rank = ${rank})`]; return e});
          } else {
            errors.update((e)=>{e.password = undefined; return e});
          }
        })
    }
  }

のようにエラーチェックする。

他でも使えるようこれをコンポーネント化したい。

コンポーネント化する†

ラベル + Input + エラー表示をひとまとめにする。

type を動的に変更すると文句を言われるので、

LANG: html
<input {...{ name, type }}

の形にしている。

src/lib/components/LabeledInput.svelte

LANG: html
<script lang="ts">
  import type { Writable } from 'svelte/store';

  export let name: string;
  export let label: string;
  export let type = "text";
  export let value: string;
  export let disabled = false;
  export let errors: Writable<{}> | undefined = undefined;

  let key = name as keyof typeof errors;
</script>

<label for={name}>{label}</label>
<input {...{ name, type }} bind:value disabled={disabled} on:input />
{#if errors && $errors[key]}<span class="invalid">{$errors[key]}</span>{/if}

<style>
  .invalid {
    color: red;
  }
</style>

パスワードに特化してエラーチェックを行うのがこちら。

src/lib/components/PasswordInput.svelte

LANG: html
<script lang="ts">
  import type { Writable } from 'svelte/store';
  import LabeledInput from '$lib/components/LabeledInput.svelte';

  export let name: string;
  export let label: string;
  export let value: string;
  export let disabled = false;
  export let errors: Writable<{password?:string[]}> | undefined = undefined;

  function checkPasswordSub(password: string) {
    if(!password.match(/^$|^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/)) {
      errors?.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
    } else {
      const method = "POST";
      const body = JSON.stringify({ password });
      const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
      };
      fetch("/password-ranking", {method, headers, body})
        .then((res)=> res.json())
        .then((rank) => {
          if(rank) {
            errors?.update((e)=>{e.password = [`容易に推測可能なパスワードです (rank = ${rank})`]; return e});
          } else {
            errors?.update((e)=>{e.password = undefined; return e});
          }
        })
    }
  }

  let timer: NodeJS.Timeout;
  function checkPassword(e: Event) {
    console.log('ok');
    const password = (e.target as HTMLInputElement).value;
    if (password && password.length < 8) {
      errors?.update((e)=>{e.password = ['パスワードは小文字・大文字・数字を一文字以上含めて8文字以上で入力してください']; return e});
      return;
    }

    // 一旦エラーをキャンセル
    errors?.update((e)=>{e.password = undefined; return e});

    // 設定待ちがあればキャンセル
    clearTimeout(timer);

    // 500 ms 後に設定
    timer = setTimeout(()=> checkPasswordSub(password), 500);
  }
</script>

<LabeledInput {...{name, label, disabled, errors}} type="password" bind:value on:input={checkPassword} />

これらを使うとフォーム定義がすっきりする。

src/routes/(loggedIn)/change-profile/+page.svelte

LANG: html
<script lang="ts">
  import type { PageData } from './$types';
  import { superForm } from 'sveltekit-superforms/client';
  import LabeledInput from '$lib/components/LabeledInput.svelte';
  import PasswordInput from '$lib/components/PasswordInput.svelte';

  export let data: PageData;
  const { form, message, errors, submitting, capture, restore, enhance } = superForm(data.form, {
    taintedMessage: false
  });
  export const snapshot = { capture, restore };
</script>

<div>
  <h1>ユーザー情報の変更</h1>
  {#if $message}<span class="invalid">{$message}</span>{/if}
  <form method="POST" use:enhance>

    <LabeledInput name="name" label="ユーザー名" bind:value={$form.name} disabled={$submitting} {errors} />

    <LabeledInput name="email" label="メールアドレス" value={data.user.email} disabled={true} />

    <PasswordInput name="password" label="パスワード（変更しないなら何も入力しない）" value={$form.password} disabled={$submitting} errors={errors} />

    <LabeledInput name="confirm" label="パスワード（確認）" type="password" value={$form.confirm} disabled={$submitting} {errors} />

    <div><button disabled={$submitting}>ユーザー情報を変更</button></div>
  </form>
</div>

他の form もこれに準じて直す。

サーバーの起動†

デバッグサーバーでテストするならこう

LANG: console
$ DATABASE_URL="file:test.db" bash -c 'prisma migrate reset -f && pnpm dev --port 4173'

ビルド済みでテストするならこう

LANG: console
$ DATABASE_URL="file:test.db" bash -c 'prisma migrate reset -f && pnpm build && pnpm preview --port 4173'

これを package.json に入れる方法が良く分からない？

https://qiita.com/riversun/items/d45b26f4a7aad6e51b69 によると、

LANG: console
$ npm install --save-dev cross-env

しておいて、

package.json

+    "test-dev": "cross-env DATABASE_URL='file:test.db' prisma migrate reset -f && cross-env DATABASE_URL='file:test.db' vite dev --port 4173",
+    "test-preview": "cross-env DATABASE_URL='file:test.db' prisma migrate reset -f && cross-env DATABASE_URL='file:test.db' vite build && cross-env DATABASE_URL='file:test.db' vite preview --port 4173"

こうかな？

テストの実行†

上記のコマンドでサーバーを起動しておいて、

playwright.config.ts

LANG: ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  webServer: {
    command: "",
    port: 4173,
    reuseExistingServer: !process.env.CI,
  },
  testDir: 'tests',
  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
};

export default config;

および

package.json

-    "test:integration": "playwright test",
+    "test:integration": "cross-env DATABASE_URL='file:test.db' playwright test",

の設定で

LANG: console
$ pnpm test:integration

とすればいい。

テスト時のメールは実際に送信する代わりにファイルに保存する†

src/lib/server/transporter.ts

LANG: ts
import { createTransport, type SentMessageInfo, type SendMailOptions } from "nodemailer";
import { env } from "$env/dynamic/private";
import * as fs from "fs";

export const transporter = createTransport({
  host: "localhost",
  port: 25,
});

if(env.DATABASE_URL=='file:dev.db' || env.DATABASE_URL=='file:test.db') {
  transporter.sendMail = async (mailOptions: SendMailOptions) => {
    console.log(process.cwd());
    console.log(mailOptions);
    fs.writeFileSync('test-results/mailOptions.txt', JSON.stringify(mailOptions));
    return null as SentMessageInfo;
  };
}

テストを書く†

https://playwright.dev/docs/api/class-test

例えばこんな風に書ける。

LANG: ts
test('/signup へフォームを送信', async ({ page }) => {
 await page.goto('/signup', {waitUntil: 'load'});

 await page.locator('input[name="email"]').fill('test@example.com');
 Promise.all([
   page.locator('input[name="email"]').press('Enter'),
   page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
 ]);
 await expect(page.getByRole('heading', { name: 'Welcome to Svelte' })).toBeVisible();
});

でもこれを、

LANG: ts
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('form button').click();

とすると email フィールドへの入力が送信データに反映されないケースがあったり（svelte による reactivity が発揮される前にフォームが送信されてしまうため？）、

なぜか fill を２回繰り返さないと書き込み自体を行えないケースがあったり、

LANG: ts
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com'); // 念のためもう一度 orz

なかなかに落とし穴も多そうな雰囲気だ？

• locator と WaitForSelector, $, $$ の違い https://qiita.com/ko-he-8/items/85116e1d99ed4b176657
• npm playwright codegen で操作手順の記録ができる https://playwright.dev/docs/codegen-intro
• 以前 --ui オプションで GUI が立ち上がるのを確認した記録があるのだけれど、このプロジェクトにインストールされているバージョンだとそんなオプションないと言われる？
• https://www.summerbud.org/dev-notes/playwright-tips-that-will-make-your-life-easier
  • .fill などは readonly や disable の間はそうじゃなくなるまで待つらしい
  • race condition を避けるために Promise.all を使う
• DEBUG=pw:api pnpm test:integration で verbose な出力が得られる
• テストは test( を test.skip( にするとスキップできる

tests/auth.test.ts

LANG: ts
import { expect, test, type Page, type TestInfo } from '@playwright/test';
import type { SendMailOptions } from "nodemailer";
import * as fs from "fs";
import { db } from '../src/lib/server/db.js';

test.setTimeout(5000);

let testId = 0;
let screenshotId = 0;
let screenshotTitle = "";
async function screenshot(page: Page, info: TestInfo) {
  if(screenshotTitle != info.title) {
    testId++;
    screenshotTitle = info.title;
    screenshotId = 0;
  }
  await page.screenshot({path: `test-results/ss${testId.toString().padStart(4, '0')}-${info.title.replaceAll("/","_")}${++screenshotId}.png`})
}

test('データベースをクリアする', async () => {
  await db.emailVerification.deleteMany()
  await db.authUser.deleteMany();

  expect(await db.emailVerification.count()).toBe(0);
  expect(await db.authUser.count()).toBe(0);
});

test('インデックスページを表示できる', async ({ page }, info) => {
  await page.goto('/', {waitUntil: 'load'});
  await expect(page.getByRole('heading', { name: 'Welcome to Svelte' })).toBeVisible();
  await screenshot(page, info);
});

test('/signup のメールアドレスの検証', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});
  
  await page.locator('input[name="email"]').fill('');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await page.locator('input[name="email"]').fill('abcd@');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await page.locator('input[name="email"]').fill('@abcc');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('メールアドレスが不正です');

  await screenshot(page, info);
});

test('メールアドレスを入力する /signup', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');

  await expect(page.locator('form button')).not.toBeVisible();
  await page.waitForLoadState('load');
  await expect(page.url()).toBe('http://localhost:4173/');

  await expect(page.locator('.toaster .message')).toHaveText('メールを送信しました')
  await page.waitForTimeout(200);

  await screenshot(page, info);
});

test('連続して送ろうとするとエラーになる', async ({ page }, info) => {
  await page.goto('/signup', {waitUntil: 'load'});

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');

  await expect(page.locator('input[name="email"]+.invalid')).toContainText('先ほどメールを送信しましたのでしばらく経ってから試してください');
  await screenshot(page, info);
});

test('サインアップを続ける', async ({ page }, info) => {
  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="name"]+.invalid')).toContainText('文字');

  await expect(page.locator('input[name="name"]')).not.toHaveProperty('disabled');
  await page.locator('input[name="name"]').fill('First Family');
  await page.locator('input[name="name"]').fill('First Family'); // 1回だと失敗することがある？？？
  await page.locator('input[name="name"]').press('Enter');
  await screenshot(page, info);
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await screenshot(page, info);
  await expect(page.locator('input[name="name"]+.invalid')).not.toBeVisible();
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.fill('input[name="password"]', 'aaaaaaaa');
  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.fill('input[name="password"]', 'Aa1aaaaa');
  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).not.toBeVisible();
  await expect(page.locator('input[name="confirm"]+.invalid')).toContainText('一致しません');

  await page.fill('input[name="confirm"]', 'Aa1aaaaa');
  await screenshot(page, info);

  await page.click('form button');
  await expect(page.locator('form button')).not.toHaveProperty('disabled');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('サインアップしました')
  await page.waitForTimeout(200);
  await screenshot(page, info);

  // ログアウトする
  await logout(page, info);

  await page.waitForTimeout(200);
  await screenshot(page, info);
});

async function logout(page: Page, info: TestInfo) {
  Promise.all([
    page.goto('/logout', {waitUntil: 'load'}),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログアウトしました')
  await page.waitForTimeout(200);
  await screenshot(page, info);
}

async function login(page: Page, email='test@example.com', password='Aa1aaaaa') {
  await page.goto('/login', {waitUntil: 'load'});
  await page.locator('input[name="email"]').fill(email);
  await page.locator('input[name="password"]').fill(password);
  await page.locator('input[name="password"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインしました');
}

test('ログインしていないのにログアウトする', async ({ page }, info) => {
  await page.goto('/logout', {waitUntil: 'load'});

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインユーザーのみアクセス可能です')
  await page.waitForTimeout(200);
  await screenshot(page, info);
});

test('ログインする', async ({ page }, info) => {
  // ログインする

  await page.goto('/login', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('入力して下さい');

  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('入力して下さい');

  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await screenshot(page, info);
  await page.locator('input[name="password"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toHaveText('ログインしました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
});

test('名前やパスワードを変更する', async ({ page }, info)=> {
  // ログイン
  await login(page);

  // 名前・パスワードを変更する（実際にはしない）
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="name"]').press('Enter');
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更されませんでした');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // 名前を変更する
  await page.goto('/change-profile', {waitUntil: 'load'});

  await page.locator('input[name="name"]').fill('First Middle Family');
  await page.locator('input[name="name"]').fill('First Middle Family');
  await page.locator('input[name="name"]').press('Enter');
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('名前が変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // パスワードを変更する
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="password"]').fill('Aa1aaaa');
  await page.locator('input[name="password"]').fill('Aa1aaaa');
  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');
  
  await page.locator('input[name="password"]').fill('Aa1aaaab');
  await page.locator('input[name="password"]').fill('Aa1aaaab');
  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]')).not.toHaveProperty('disabled');
  await expect(page.locator('input[name="confirm"]+.invalid')).toContainText('一致しません');
  
  await page.locator('input[name="confirm"]').fill('Aa1aaaab');
  await page.locator('input[name="confirm"]').fill('Aa1aaaab');
  await page.locator('input[name="confirm"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードが変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  // 名前とパスワードを変更する
  await page.goto('/change-profile', {waitUntil: 'load'});
  await screenshot(page, info);
  await expect(page.locator('input[name="name"]')).toHaveValue('First Middle Family');

  await page.locator('input[name="name"]').fill('First Family');
  await page.locator('input[name="name"]').fill('First Family');
 
  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await screenshot(page, info);

  await page.locator('input[name="confirm"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードと名前が変更されました');
  await page.waitForTimeout(200);
  await screenshot(page, info);
  
  await logout(page, info);
});

test('メールアドレスを変更する', async ({ page }, info)=> {
  // ログイン
  await login(page);

  await page.goto('/change-email', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('不正です');

  await page.locator('input[name="email"]').fill('changed@example.com');
  await page.locator('input[name="email"]').press('Enter');
  
  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await expect(page.locator('input[name="name"]')).toHaveValue('First Family');
  await expect(page.locator('input[name="email-old"]')).toHaveValue('test@example.com');
  await expect(page.locator('input[name="email-new"]')).toHaveValue('changed@example.com');

  Promise.all([
    page.locator('form button').click(),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);

  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  // ログアウト
  await logout(page, info);

});

test('新しいメールアドレスでログインしてから元に戻す', async ({ page }, info)=> {
  
  await login(page, 'changed@example.com');

  await page.goto('/change-email', {waitUntil: 'load'});
  await page.locator('input[name="email"]').fill('test@example.com');
  await page.locator('input[name="email"]').fill('test@example.com');
  await Promise.all([
    page.locator('input[name="email"]').press('Enter'),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');

  const mailOptions2 = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions2.text).toContain('http');
  await page.goto((mailOptions2.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await page.locator('form button').click();

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('変更しました');

  await logout(page, info);
});

test('パスワードのリセットを行う', async ({ page }, info) => {
  await page.goto('/reset-password', {waitUntil: 'load'});
  await screenshot(page, info);

  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('不正です');

  await page.locator('input[name="email"]').fill('notfound@example.com');
  await page.locator('input[name="email"]').press('Enter');
  await expect(page.locator('input[name="email"]+.invalid')).toContainText('登録されていません');
  
  await page.locator('input[name="email"]').fill('test@example.com');
  Promise.all([
    page.locator('input[name="email"]').press('Enter'),
    page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'})
  ]);
  
  await expect(page.locator('.toaster .message').nth(0)).toContainText('送信しました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

  const mailOptions = JSON.parse(fs.readFileSync('test-results/mailOptions.txt', 'utf-8')) as SendMailOptions;
  await expect(mailOptions.text).toContain('http');
  await page.goto((mailOptions.text as string).split(/\n/)[1], {waitUntil: 'load'});
  await screenshot(page, info);

  await expect(page.locator('input[name="name"]')).toHaveValue('First Family');
  await expect(page.locator('input[name="email"]')).toHaveValue('test@example.com');

  await page.locator('input[name="password"]').press('Enter');
  await expect(page.locator('input[name="password"]+.invalid')).toContainText('文字');

  await page.locator('input[name="password"]').fill('Aa1aaaaa');
  await page.locator('input[name="confirm"]').fill('Aa1aaaaa');
  await screenshot(page, info);
  await page.locator('input[name="confirm"]').press('Enter');

  await page.waitForNavigation({url: 'http://localhost:4173/', waitUntil: 'load'});
  await expect(page.locator('.toaster .message').nth(0)).toContainText('パスワードを変更してログインしました');
  await page.waitForTimeout(200);
  await screenshot(page, info);

});

LANG: console
$ pnpm test:integration

> authtest@0.0.1 test:integration C:\Users\osamu\Desktop\svelte\authtest
> cross-env DATABASE_URL='file:test.db'; playwright test

Running 12 tests using 1 worker

  ✓  1 auth.test.ts:13:1 › データベースをクリアする (44ms)
  ✓  2 auth.test.ts:21:1 › インデックスページを表示できる (351ms)
  ✓  3 auth.test.ts:27:1 › /signup のメールアドレスの検証 (580ms)
  ✓  4 auth.test.ts:48:1 › メールアドレスを入力する /signup (749ms)
  ✓  5 auth.test.ts:64:1 › 連続して送ろうとするとエラーになる (509ms)
  ✓  6 auth.test.ts:75:1 › サインアップを続ける (2s)
  ✓  7 auth.test.ts:146:1 › ログインしていないのにログアウトする (569ms)
  ✓  8 auth.test.ts:155:1 › ログインする (1s)
  ✓  9 auth.test.ts:181:1 › 名前やパスワードを変更する (4s)
  ✓  10 auth.test.ts:256:1 › メールアドレスを変更する (2s)
  ✓  11 auth.test.ts:297:1 › 新しいメールアドレスでログインしてから元に戻す (1s)
  ✓  12 auth.test.ts:321:1 › パスワードのリセットを行う (2s)

  Slow test file: auth.test.ts (16s)
  Consider splitting slow test files to speed up parallel execution

  12 passed (17s)