import { test, expect } from '@playwright/test';

/**
 * Generated by Hover on 2026-06-06.
 * Original prompt: 只测试登录
 * Outcome: 登出后状态已恢复为 "signed out"，登录表单重新出现。
 *
 * Steps:
 *   1. Fill email="alice@example.com", password="password"
 *   2. Click Submit button
 *   3. Click Log out button
 *
 * Expected:
 *   • After login: Login area shows "signed in", Log out button appears, form hidden
 *   • After logout: Login area shows "signed out", login form reappears
 *
 * Selectors prefer getByRole / getByLabel / getByText — generated from
 * the agent's natural-language element descriptions, not raw CSS ids,
 * so the spec survives markup changes that don't touch semantics.
 */
test('login', async ({ page }) => {
  await test.step("When · Fill email=\"alice@example.com\", password=\"password\"", async () => {
    const emailEl = page.getByRole('textbox', { name: "email" });
    await expect(emailEl).toBeVisible();
    await emailEl.fill("alice@example.com");

    const passwordEl = page.getByRole('textbox', { name: "password" });
    await expect(passwordEl).toBeVisible();
    await passwordEl.fill("password");
  });

  await test.step("When · Click Submit button", async () => {
    const el = page.getByRole('button', { name: "Submit" });
    await expect(el).toBeVisible();
    await el.click();
    await expect(page.getByText("signed in")).toBeVisible();
    await expect(page.getByRole('button', { name: "Log out" })).toBeVisible();
    await expect(page.getByRole('textbox', { name: "email" })).not.toBeVisible();
  });

  await test.step("When · Click Log out button", async () => {
    const el = page.getByRole('button', { name: "Log out" });
    await expect(el).toBeVisible();
    await el.click();
    await expect(page.getByText("signed out")).toBeVisible();
    await expect(page.getByRole('textbox', { name: "email" })).toBeVisible();
  });
});
