1
0
forked from baron/baron-sso

코드 테스트 실패 수정

This commit is contained in:
2026-06-11 08:55:41 +09:00
parent 4d77060b5d
commit 0bb3ccb850
13 changed files with 517 additions and 382 deletions

View File

@@ -1,8 +1,8 @@
import { describe, expect, it } from "vitest";
import type { TenantSummary } from "../../../lib/adminApi";
import {
filterTenantViewRowsBySearch,
filterTenantsByScope,
filterTenantViewRowsBySearch,
getTenantSearchMatchIds,
getTenantViewRows,
resolveTenantSelectionIds,
@@ -107,7 +107,8 @@ describe("TenantListPage tenant list helpers", () => {
true,
);
expect(filterTenantViewRowsBySearch(treeRows, "team-1").map((row) => row.id))
.toEqual(["team-1"]);
expect(
filterTenantViewRowsBySearch(treeRows, "team-1").map((row) => row.id),
).toEqual(["team-1"]);
});
});

View File

@@ -106,8 +106,8 @@ import {
type TenantImportResolution,
} from "../utils/tenantCsvImport";
import {
filterTenantViewRowsBySearch,
filterTenantsByScope,
filterTenantViewRowsBySearch,
getTenantSearchMatchIds,
getTenantViewRows,
resolveTenantSelectionIds,

View File

@@ -837,6 +837,7 @@ func main() {
dev.Get("/users", devHandler.SearchUsers)
dev.Get("/clients", devHandler.ListClients)
dev.Post("/clients", devHandler.CreateClient)
dev.Put("/clients/:id/users/me/metadata", devHandler.SelfUpdateRPUserMetadata)
dev.Get("/clients/:id/users/:userId/metadata", devHandler.GetRPUserMetadata)
dev.Put("/clients/:id/users/:userId/metadata", devHandler.UpsertRPUserMetadata)
dev.Get("/clients/:id", devHandler.GetClient)

View File

@@ -573,6 +573,30 @@ func (h *DevHandler) canManageClientRelations(c *fiber.Ctx, profile *domain.User
return canAccessClientByLegacyScope(profile, summary)
}
func (h *DevHandler) canManageRPUserMetadata(c *fiber.Ctx, profile *domain.UserProfileResponse, summary clientSummary) bool {
if profile == nil {
return false
}
if normalizeUserRole(profile.Role) == domain.RoleSuperAdmin {
return true
}
return h.canOperateClientByPermit(c, profile, summary, "manage")
}
func (h *DevHandler) canSelfUpdateRPUserMetadata(c *fiber.Ctx, profile *domain.UserProfileResponse, summary clientSummary) bool {
if profile == nil {
return false
}
if normalizeUserRole(profile.Role) == domain.RoleSuperAdmin {
return true
}
if h.Keto == nil {
return true
}
allowed, err := h.checkProfileKetoPermission(c, profile, "RelyingParty", summary.ID, "access")
return err == nil && allowed
}
func (h *DevHandler) auditClientIDsByPermit(c *fiber.Ctx, profile *domain.UserProfileResponse, clientFilter string) map[string]struct{} {
ids := make(map[string]struct{})
if profile == nil || h.Hydra == nil {
@@ -1612,7 +1636,7 @@ func (h *DevHandler) UpsertRPUserMetadata(c *fiber.Ctx) error {
if err != nil {
return errorJSON(c, fiber.StatusNotFound, "client not found")
}
if !h.canManageClientRelations(c, profile, summary) {
if !h.canManageRPUserMetadata(c, profile, summary) {
return errorJSON(c, fiber.StatusForbidden, "forbidden: insufficient permission to update client metadata")
}
@@ -1645,6 +1669,73 @@ func (h *DevHandler) UpsertRPUserMetadata(c *fiber.Ctx) error {
return c.JSON(row)
}
func (h *DevHandler) SelfUpdateRPUserMetadata(c *fiber.Ctx) error {
clientID := strings.TrimSpace(c.Params("id"))
if clientID == "" {
return errorJSON(c, fiber.StatusBadRequest, "client id is required")
}
if h.RPUserMetadataRepo == nil {
return errorJSON(c, fiber.StatusServiceUnavailable, "rp user metadata repository unavailable")
}
profile := h.getCurrentProfile(c)
if profile == nil || strings.TrimSpace(profile.ID) == "" {
return errorJSON(c, fiber.StatusUnauthorized, "unauthorized: authentication required")
}
summary, err := h.loadClientSummary(c.Context(), clientID)
if err != nil {
return errorJSON(c, fiber.StatusNotFound, "client not found")
}
if !h.canSelfUpdateRPUserMetadata(c, profile, summary) {
return errorJSON(c, fiber.StatusForbidden, "forbidden: insufficient permission to update own client metadata")
}
var req struct {
Metadata map[string]any `json:"metadata"`
}
if err := c.BodyParser(&req); err != nil {
return errorJSON(c, fiber.StatusBadRequest, "invalid request body")
}
if req.Metadata == nil {
req.Metadata = map[string]any{}
}
filteredMetadata, err := filterSelfWritableRPUserMetadata(req.Metadata, summary.Metadata)
if err != nil {
return errorJSON(c, fiber.StatusForbidden, err.Error())
}
normalizedMetadata, err := normalizeRPUserMetadataForClient(filteredMetadata, summary.Metadata)
if err != nil {
return errorJSON(c, fiber.StatusBadRequest, err.Error())
}
userID := strings.TrimSpace(profile.ID)
mergedMetadata := domain.JSONMap{}
if existing, err := h.RPUserMetadataRepo.Get(c.Context(), clientID, userID); err == nil && existing != nil {
for key, value := range existing.Metadata {
mergedMetadata[key] = value
}
}
for key, value := range normalizedMetadata {
mergedMetadata[key] = value
}
row := &domain.RPUserMetadata{
ClientID: clientID,
UserID: userID,
Metadata: mergedMetadata,
}
if err := h.RPUserMetadataRepo.Upsert(c.Context(), row); err != nil {
return errorJSON(c, fiber.StatusInternalServerError, err.Error())
}
if err := h.syncRPUserMetadataToKratos(c.Context(), userID, clientID, mergedMetadata); err != nil {
return errorJSON(c, fiber.StatusInternalServerError, err.Error())
}
return c.JSON(row)
}
func (h *DevHandler) syncRPUserMetadataToKratos(ctx context.Context, userID string, clientID string, metadata domain.JSONMap) error {
if h == nil || h.KratosAdmin == nil {
return nil
@@ -1769,6 +1860,33 @@ func normalizeRPUserMetadataForClient(metadata map[string]any, clientMetadata ma
return normalized, nil
}
func filterSelfWritableRPUserMetadata(metadata map[string]any, clientMetadata map[string]any) (map[string]any, error) {
schemas, err := rpUserMetadataClaimSchemas(clientMetadata)
if err != nil {
return nil, err
}
filtered := map[string]any{}
for rawKey, rawValue := range metadata {
key := strings.TrimSpace(rawKey)
if key == "" || isEmptyRPUserMetadataValue(rawValue) {
continue
}
if strings.HasSuffix(key, "_permissions") {
return nil, fmt.Errorf("rp user metadata permission cannot be updated by user: %s", key)
}
schema, ok := schemas[key]
if !ok {
return nil, fmt.Errorf("rp user metadata claim is not configured: %s", key)
}
if normalizeCustomClaimPermission(schema.WritePermission) != "user_and_admin" {
return nil, fmt.Errorf("rp user metadata claim is admin only: %s", key)
}
filtered[key] = rawValue
}
return filtered, nil
}
func rpUserMetadataClaimSchemas(clientMetadata map[string]any) (map[string]rpUserMetadataClaimSchema, error) {
rawClaims, ok := clientMetadata[domain.MetadataIDTokenClaims]
if !ok || rawClaims == nil {

View File

@@ -125,6 +125,100 @@ func TestDevHandler_RPUserMetadataRoundTrip(t *testing.T) {
repo.AssertExpectations(t)
}
func TestDevHandler_RPUserMetadataAdminUpsertRequiresRPManage(t *testing.T) {
transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
if r.URL.Path == "/clients/client-1" {
return httpJSONAny(r, http.StatusOK, map[string]any{
"client_id": "client-1",
"client_name": "Client One",
"metadata": map[string]any{
"tenant_id": "tenant-1",
"id_token_claims": []map[string]any{
{
"namespace": "rp_claims",
"key": "approvalLevel",
"valueType": "text",
"value": "A",
"readPermission": "user_and_admin",
"writePermission": "user_and_admin",
},
},
},
}), nil
}
return httpJSONAny(r, http.StatusNotFound, nil), nil
})
t.Run("tenant grant does not allow rp user metadata admin upsert", func(t *testing.T) {
repo := new(devMockRPUserMetadataRepo)
repo.On("Upsert", mock.Anything, mock.AnythingOfType("*domain.RPUserMetadata")).Return(nil).Maybe()
keto := new(devMockKetoService)
keto.On("CheckPermission", mock.Anything, "User:operator-1", "RelyingParty", "client-1", "manage").Return(false, nil)
keto.On("CheckPermission", mock.Anything, "User:operator-1", "Tenant", "tenant-1", "grant_dev_permissions").Return(true, nil).Maybe()
h := &DevHandler{
Hydra: &service.HydraAdminService{
AdminURL: "http://hydra.test",
HTTPClient: &http.Client{Transport: transport},
},
Keto: keto,
RPUserMetadataRepo: repo,
}
app := fiber.New()
app.Use(func(c *fiber.Ctx) error {
c.Locals("user_profile", &domain.UserProfileResponse{ID: "operator-1", Role: domain.RoleUser})
return c.Next()
})
app.Put("/api/v1/dev/clients/:id/users/:userId/metadata", h.UpsertRPUserMetadata)
body, _ := json.Marshal(map[string]any{
"metadata": map[string]any{"approvalLevel": "B"},
})
req := httptest.NewRequest(http.MethodPut, "/api/v1/dev/clients/client-1/users/user-1/metadata", bytes.NewReader(body))
req.Header.Set("Content-Type", "application/json")
resp, _ := app.Test(req, -1)
require.Equal(t, http.StatusForbidden, resp.StatusCode)
repo.AssertNotCalled(t, "Upsert", mock.Anything, mock.Anything)
keto.AssertExpectations(t)
})
t.Run("rp manage allows rp user metadata admin upsert", func(t *testing.T) {
repo := new(devMockRPUserMetadataRepo)
repo.On("Upsert", mock.Anything, mock.MatchedBy(func(row *domain.RPUserMetadata) bool {
return row.ClientID == "client-1" &&
row.UserID == "user-1" &&
row.Metadata["approvalLevel"] == "B"
})).Return(nil).Once()
keto := new(devMockKetoService)
keto.On("CheckPermission", mock.Anything, "User:operator-1", "RelyingParty", "client-1", "manage").Return(true, nil)
h := &DevHandler{
Hydra: &service.HydraAdminService{
AdminURL: "http://hydra.test",
HTTPClient: &http.Client{Transport: transport},
},
Keto: keto,
RPUserMetadataRepo: repo,
}
app := fiber.New()
app.Use(func(c *fiber.Ctx) error {
c.Locals("user_profile", &domain.UserProfileResponse{ID: "operator-1", Role: domain.RoleUser})
return c.Next()
})
app.Put("/api/v1/dev/clients/:id/users/:userId/metadata", h.UpsertRPUserMetadata)
body, _ := json.Marshal(map[string]any{
"metadata": map[string]any{"approvalLevel": "B"},
})
req := httptest.NewRequest(http.MethodPut, "/api/v1/dev/clients/client-1/users/user-1/metadata", bytes.NewReader(body))
req.Header.Set("Content-Type", "application/json")
resp, _ := app.Test(req, -1)
require.Equal(t, http.StatusOK, resp.StatusCode)
repo.AssertExpectations(t)
keto.AssertExpectations(t)
})
}
func TestDevHandler_RPUserMetadataMirrorsToKratosTraits(t *testing.T) {
transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
if r.URL.Path == "/clients/client-1" {
@@ -201,6 +295,130 @@ func TestDevHandler_RPUserMetadataMirrorsToKratosTraits(t *testing.T) {
kratos.AssertExpectations(t)
}
func TestDevHandler_SelfUpdateRPUserMetadataHonorsWritePermission(t *testing.T) {
transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
if r.URL.Path == "/clients/client-1" {
return httpJSONAny(r, http.StatusOK, map[string]any{
"client_id": "client-1",
"client_name": "Client One",
"metadata": map[string]any{
"tenant_id": "tenant-1",
"id_token_claims": []map[string]any{
{
"namespace": "rp_claims",
"key": "approvalLevel",
"valueType": "text",
"value": "A",
"readPermission": "user_and_admin",
"writePermission": "user_and_admin",
},
{
"namespace": "rp_claims",
"key": "internalRank",
"valueType": "text",
"value": "S",
"readPermission": "admin_only",
"writePermission": "admin_only",
},
},
},
}), nil
}
return httpJSONAny(r, http.StatusNotFound, nil), nil
})
t.Run("rejects admin_only claim", func(t *testing.T) {
repo := new(devMockRPUserMetadataRepo)
repo.On("Upsert", mock.Anything, mock.AnythingOfType("*domain.RPUserMetadata")).Return(nil).Maybe()
h := &DevHandler{
Hydra: &service.HydraAdminService{
AdminURL: "http://hydra.test",
HTTPClient: &http.Client{Transport: transport},
},
RPUserMetadataRepo: repo,
}
app := fiber.New()
app.Use(func(c *fiber.Ctx) error {
c.Locals("user_profile", &domain.UserProfileResponse{ID: "user-1", Role: domain.RoleUser})
return c.Next()
})
app.Put("/api/v1/dev/clients/:id/users/me/metadata", h.SelfUpdateRPUserMetadata)
body, _ := json.Marshal(map[string]any{
"metadata": map[string]any{"internalRank": "A"},
})
req := httptest.NewRequest(http.MethodPut, "/api/v1/dev/clients/client-1/users/me/metadata", bytes.NewReader(body))
req.Header.Set("Content-Type", "application/json")
resp, _ := app.Test(req, -1)
require.Equal(t, http.StatusForbidden, resp.StatusCode)
repo.AssertNotCalled(t, "Upsert", mock.Anything, mock.Anything)
})
t.Run("allows user_and_admin claim for self", func(t *testing.T) {
repo := new(devMockRPUserMetadataRepo)
repo.On("Get", mock.Anything, "client-1", "user-1").Return(&domain.RPUserMetadata{
ClientID: "client-1",
UserID: "user-1",
Metadata: domain.JSONMap{
"internalRank": "S",
"internalRank_permissions": map[string]any{
"readPermission": "admin_only",
"writePermission": "admin_only",
},
},
}, nil).Once()
repo.On("Upsert", mock.Anything, mock.MatchedBy(func(row *domain.RPUserMetadata) bool {
return row.ClientID == "client-1" &&
row.UserID == "user-1" &&
row.Metadata["approvalLevel"] == "B" &&
row.Metadata["internalRank"] == "S"
})).Return(nil).Once()
kratos := new(MockKratosAdmin)
kratos.On("GetIdentity", mock.Anything, "user-1").Return(&service.KratosIdentity{
ID: "user-1",
State: "active",
Traits: map[string]any{
"email": "user@example.com",
},
}, nil).Once()
var capturedTraits map[string]any
kratos.On("UpdateIdentity", mock.Anything, "user-1", mock.Anything, "active").Run(func(args mock.Arguments) {
capturedTraits = args.Get(2).(map[string]any)
}).Return(&service.KratosIdentity{ID: "user-1", State: "active", Traits: map[string]any{}}, nil).Once()
h := &DevHandler{
Hydra: &service.HydraAdminService{
AdminURL: "http://hydra.test",
HTTPClient: &http.Client{Transport: transport},
},
KratosAdmin: kratos,
IdentityWriter: service.NewIdentityWriteService(kratos, nil),
RPUserMetadataRepo: repo,
}
app := fiber.New()
app.Use(func(c *fiber.Ctx) error {
c.Locals("user_profile", &domain.UserProfileResponse{ID: "user-1", Role: domain.RoleUser})
return c.Next()
})
app.Put("/api/v1/dev/clients/:id/users/me/metadata", h.SelfUpdateRPUserMetadata)
body, _ := json.Marshal(map[string]any{
"metadata": map[string]any{"approvalLevel": "B"},
})
req := httptest.NewRequest(http.MethodPut, "/api/v1/dev/clients/client-1/users/me/metadata", bytes.NewReader(body))
req.Header.Set("Content-Type", "application/json")
resp, _ := app.Test(req, -1)
require.Equal(t, http.StatusOK, resp.StatusCode)
rpClaims := capturedTraits["rp_custom_claims"].(map[string]any)
clientClaims := rpClaims["client-1"].(domain.JSONMap)
require.Equal(t, "B", clientClaims["approvalLevel"])
require.Equal(t, "S", clientClaims["internalRank"])
repo.AssertExpectations(t)
kratos.AssertExpectations(t)
})
}
func TestDevHandler_RPUserMetadataRejectsUndefinedClaimKey(t *testing.T) {
transport := roundTripFunc(func(r *http.Request) (*http.Response, error) {
if r.URL.Path == "/clients/client-1" {

View File

@@ -4,6 +4,11 @@
"enabled": true,
"indentStyle": "space"
},
"css": {
"parser": {
"tailwindDirectives": true
}
},
"linter": {
"enabled": true,
"rules": {
@@ -25,6 +30,7 @@
"**",
"!**/dist/**",
"!**/.vite/**",
"!**/.pnpm-store/**",
"!**/node_modules/**",
"!**/coverage/**",
"!**/tsconfig*.json",

View File

@@ -1,5 +1,5 @@
import { act } from "react-dom/test-utils";
import { createRoot, type Root } from "react-dom/client";
import { act } from "react-dom/test-utils";
import { afterEach, describe, expect, it, vi } from "vitest";
import type { CommonAuditLog } from "../../audit";
import { AuditLogTable } from "./AuditLogTable";
@@ -128,8 +128,12 @@ describe("AuditLogTable", () => {
expect(loadMoreButton).toBeTruthy();
await act(async () => {
actorCopyButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
targetCopyButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
actorCopyButton?.dispatchEvent(
new MouseEvent("click", { bubbles: true }),
);
targetCopyButton?.dispatchEvent(
new MouseEvent("click", { bubbles: true }),
);
expandButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
});

View File

@@ -1,8 +1,8 @@
import { ChevronDown, ChevronUp, Copy } from "lucide-react";
import * as React from "react";
import {
getCommonBadgeClasses,
type CommonBadgeVariant,
getCommonBadgeClasses,
} from "../../../ui/badge";
import { getCommonButtonClasses } from "../../../ui/button";
import {
@@ -90,7 +90,12 @@ export function AuditLogTable({
<div className={commonTableWrapperClass}>
<Table className={commonTableClass}>
<TableHeader className={commonTableHeaderClass}>
<TableRow className={cx(commonTableRowClass, commonStickyTableHeaderClass)}>
<TableRow
className={cx(
commonTableRowClass,
commonStickyTableHeaderClass,
)}
>
<TableHead className={cx(commonTableHeadClass, "w-[190px]")}>
{t("ui.common.audit.table.time", "Time")}
</TableHead>
@@ -122,7 +127,12 @@ export function AuditLogTable({
return (
<React.Fragment key={rowKey}>
<TableRow className={cx(commonTableRowClass, "bg-card/40")}>
<TableCell className={cx(commonTableCellClass, "text-xs text-muted-foreground")}>
<TableCell
className={cx(
commonTableCellClass,
"text-xs text-muted-foreground",
)}
>
<div className="space-y-1">
<div>{date}</div>
<div>{time}</div>
@@ -154,12 +164,22 @@ export function AuditLogTable({
) : null}
</div>
</TableCell>
<TableCell className={cx(commonTableCellClass, "text-xs text-muted-foreground")}>
<TableCell
className={cx(
commonTableCellClass,
"text-xs text-muted-foreground",
)}
>
<div className="font-semibold text-foreground">
{actionLabel}
</div>
</TableCell>
<TableCell className={cx(commonTableCellClass, "text-xs text-muted-foreground")}>
<TableCell
className={cx(
commonTableCellClass,
"text-xs text-muted-foreground",
)}
>
<div className="flex items-center gap-2">
<span className="break-all">{targetLabel}</span>
{targetLabel !== "-" ? (
@@ -192,7 +212,9 @@ export function AuditLogTable({
{log.status}
</span>
</TableCell>
<TableCell className={cx(commonTableCellClass, "text-right")}>
<TableCell
className={cx(commonTableCellClass, "text-right")}
>
<button
type="button"
className={getCommonButtonClasses({
@@ -215,18 +237,28 @@ export function AuditLogTable({
</TableCell>
</TableRow>
{expanded && (
<TableRow className={cx(commonTableRowClass, "bg-card/20")}>
<TableCell colSpan={6} className={cx(commonTableCellClass, "text-xs")}>
<TableRow
className={cx(commonTableRowClass, "bg-card/20")}
>
<TableCell
colSpan={6}
className={cx(commonTableCellClass, "text-xs")}
>
<div className="grid gap-4 text-muted-foreground md:grid-cols-3">
<div className="space-y-1">
<div className="uppercase tracking-[0.16em]">
{t("ui.common.audit.details.request", "Request")}
{t(
"ui.common.audit.details.request",
"Request",
)}
</div>
<div className="break-all">
{t(
"ui.common.audit.details.request_id",
"Request ID · {{value}}",
{ value: formatAuditValue(details.request_id) },
{
value: formatAuditValue(details.request_id),
},
)}
</div>
<div className="break-all">
@@ -237,9 +269,13 @@ export function AuditLogTable({
)}
</div>
<div>
{t("ui.common.audit.details.ip", "IP · {{value}}", {
value: formatAuditValue(log.ip_address),
})}
{t(
"ui.common.audit.details.ip",
"IP · {{value}}",
{
value: formatAuditValue(log.ip_address),
},
)}
</div>
<div className="break-all">
{t(
@@ -283,7 +319,9 @@ export function AuditLogTable({
{t(
"ui.common.audit.details.tenant",
"Tenant · {{value}}",
{ value: formatAuditValue(details.tenant_id) },
{
value: formatAuditValue(details.tenant_id),
},
)}
</div>
<div>
@@ -384,26 +422,74 @@ export function AuditLogTable({
}
// Internal table components for cleaner implementation
function Table({ className, children, style }: { className?: string, children: React.ReactNode, style?: React.CSSProperties }) {
return <table className={className} style={style}>{children}</table>;
function Table({
className,
children,
style,
}: {
className?: string;
children: React.ReactNode;
style?: React.CSSProperties;
}) {
return (
<table className={className} style={style}>
{children}
</table>
);
}
function TableHeader({ className, children }: { className?: string, children: React.ReactNode }) {
function TableHeader({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) {
return <thead className={className}>{children}</thead>;
}
function TableBody({ className, children }: { className?: string, children: React.ReactNode }) {
function TableBody({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) {
return <tbody className={className}>{children}</tbody>;
}
function TableRow({ className, children }: { className?: string, children: React.ReactNode }) {
function TableRow({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) {
return <tr className={className}>{children}</tr>;
}
function TableHead({ className, children }: { className?: string, children?: React.ReactNode }) {
function TableHead({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) {
return <th className={className}>{children}</th>;
}
function TableCell({ className, children, colSpan }: { className?: string, children: React.ReactNode, colSpan?: number }) {
return <td className={className} colSpan={colSpan}>{children}</td>;
function TableCell({
className,
children,
colSpan,
}: {
className?: string;
children: React.ReactNode;
colSpan?: number;
}) {
return (
<td className={className} colSpan={colSpan}>
{children}
</td>
);
}

View File

@@ -8,8 +8,8 @@ import {
getOrgNodeHeaderFill,
getSemanticZoomMode,
layoutForest,
resolveOrgChartFamilyRoot,
type OrgNode,
resolveOrgChartFamilyRoot,
} from "./OrgChartPage";
function orgNode(id: string, children: OrgNode[] = [], level = 0): OrgNode {

View File

@@ -178,15 +178,6 @@ function collectClientFailures(page: Page): string[] {
return failures;
}
async function expectPageToRemainBlank(page: Page): Promise<void> {
await expect
.poll(() => {
const url = page.url();
return url === '' || url === 'about:blank';
}, { timeout: 5_000 })
.toBe(true);
}
async function makeWindowCloseNavigateToRoot(page: Page): Promise<void> {
await page.addInitScript(() => {
window.close = () => {
@@ -276,7 +267,7 @@ test.describe("UserFront WASM auth routing", () => {
expect(approvedRef).toBe("e2e-approve-ref");
});
test('verifyOnly 승인 완료 화면의 상단 액션은 signin으로 복귀시킨다', async ({
test("verifyOnly 승인 완료 화면의 상단 액션은 signin으로 복귀시킨다", async ({
page,
}) => {
let userMeCalls = 0;
@@ -317,10 +308,9 @@ test.describe("UserFront WASM auth routing", () => {
expect(userMeCalls).toBe(0);
expect(
clientFailures.filter(
(failure) => !failure.includes('401 (Unauthorized)'),
(failure) => !failure.includes("401 (Unauthorized)"),
),
).toEqual([]);
});
test("verifyOnly 승인 완료 버튼은 SMS 링크에서 로그인 창으로 이동하고 user/me 조회를 만들지 않는다", async ({
@@ -359,7 +349,7 @@ test.describe("UserFront WASM auth routing", () => {
).toEqual([]);
});
test('verifyOnly 원격 승인 완료는 로그인 창 이동 CTA와 안내 문구를 표시한다', async ({
test("verifyOnly 원격 승인 완료는 로그인 창 이동 CTA와 안내 문구를 표시한다", async ({
page,
}) => {
let verifyCalls = 0;
@@ -417,10 +407,10 @@ test.describe("UserFront WASM auth routing", () => {
"/?loginId=e2e%40example.com&code=654321&pendingRef=pending-root&utm=drop",
);
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
await expect.poll(() => page.url(), { timeout: 10_000 }).toContain(
'/ko/verify-complete',
);
expect(verifyRequests[0].path).toContain('/api/v1/auth/login/code/verify');
await expect
.poll(() => page.url(), { timeout: 10_000 })
.toContain("/ko/verify-complete");
expect(verifyRequests[0].path).toContain("/api/v1/auth/login/code/verify");
expect(verifyRequests[0].body).toMatchObject({
loginId: "e2e@example.com",
code: "654321",
@@ -431,6 +421,7 @@ test.describe("UserFront WASM auth routing", () => {
expect(page.url()).not.toContain("code=");
expect(page.url()).not.toContain("pendingRef=");
expect(page.url()).not.toContain("utm=");
expect(userMeCalls).toBe(0);
expect(clientFailures).toEqual([]);
});
@@ -456,14 +447,15 @@ test.describe("UserFront WASM auth routing", () => {
await page.goto("/ko/signin?loginId=e2e%40example.com&code=999999");
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
await expect.poll(() => page.url(), { timeout: 10_000 }).toContain(
'/ko/verify-complete',
);
await expect
.poll(() => page.url(), { timeout: 10_000 })
.toContain("/ko/verify-complete");
expect(verifyRequests[0].body).toMatchObject({
loginId: "e2e@example.com",
code: "999999",
verifyOnly: true,
});
expect(userMeCalls).toBe(0);
expect(page.url()).not.toContain("loginId=");
expect(page.url()).not.toContain("code=");
expect(clientFailures).toEqual([]);
@@ -552,7 +544,7 @@ test.describe("UserFront WASM auth routing", () => {
await page.goto("/ko/verify/e2e-email-token");
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
expect(verifyRequests[0].path).toContain('/api/v1/auth/magic-link/verify');
expect(verifyRequests[0].path).toContain("/api/v1/auth/magic-link/verify");
expect(verifyRequests[0].body).toMatchObject({
token: "e2e-email-token",
verifyOnly: true,
@@ -592,7 +584,7 @@ test.describe("UserFront WASM auth routing", () => {
);
await expect.poll(() => verifyRequests.length, { timeout: 10_000 }).toBe(1);
expect(verifyRequests[0].path).toContain('/api/v1/auth/login/code/verify');
expect(verifyRequests[0].path).toContain("/api/v1/auth/login/code/verify");
expect(verifyRequests[0].body).toMatchObject({
loginId: "e2e@example.com",
code: "654321",

View File

@@ -283,5 +283,6 @@ test.describe("UserFront login performance budget", () => {
new URL(url).pathname.endsWith("/flutter_bootstrap.js"),
);
expect(rootIndex).toBeGreaterThanOrEqual(0);
expect(bootstrapIndex).toBe(-1);
});
});

View File

@@ -2,8 +2,8 @@ import {
expect,
type Page,
type Route,
test,
type TestInfo,
test,
} from "@playwright/test";
async function seedTokenLogin(page: Page): Promise<void> {

View File

@@ -1,41 +1,31 @@
import { expect, test, type Locator, type Page, type Route } from '@playwright/test';
import { inflateSync } from 'node:zlib';
import { expect, type Page, type Route, test } from "@playwright/test";
type ThemeCase = {
name: 'light' | 'dark';
name: "light" | "dark";
};
const themeCases: ThemeCase[] = [
{ name: 'light' },
{ name: 'dark' },
];
type Rgb = {
r: number;
g: number;
b: number;
};
const themeCases: ThemeCase[] = [{ name: "light" }, { name: "dark" }];
async function mockSignupApis(page: Page): Promise<void> {
await page.route('**/api/v1/**', async (route: Route) => {
await page.route("**/api/v1/**", async (route: Route) => {
const request = route.request();
const requestUrl = new URL(request.url());
const path = requestUrl.pathname;
const method = request.method().toUpperCase();
if (path.endsWith('/api/v1/user/me')) {
if (path.endsWith("/api/v1/user/me")) {
await route.fulfill({
status: 401,
contentType: 'application/json',
body: JSON.stringify({ error: 'unauthorized' }),
contentType: "application/json",
body: JSON.stringify({ error: "unauthorized" }),
});
return;
}
if (path.endsWith('/api/v1/auth/password/policy')) {
if (path.endsWith("/api/v1/auth/password/policy")) {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({
minLength: 12,
minCharacterTypes: 3,
@@ -48,59 +38,59 @@ async function mockSignupApis(page: Page): Promise<void> {
return;
}
if (path.endsWith('/api/v1/auth/signup/check-email') && method === 'POST') {
if (path.endsWith("/api/v1/auth/signup/check-email") && method === "POST") {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({ available: true }),
});
return;
}
if (
(path.endsWith('/api/v1/auth/signup/send-email-code') ||
path.endsWith('/api/v1/auth/signup/send-sms-code')) &&
method === 'POST'
(path.endsWith("/api/v1/auth/signup/send-email-code") ||
path.endsWith("/api/v1/auth/signup/send-sms-code")) &&
method === "POST"
) {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({ ok: true }),
});
return;
}
if (path.endsWith('/api/v1/auth/signup/verify-code') && method === 'POST') {
if (path.endsWith("/api/v1/auth/signup/verify-code") && method === "POST") {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({ success: true, isAffiliate: false }),
});
return;
}
if (path.endsWith('/api/v1/auth/signup') && method === 'POST') {
if (path.endsWith("/api/v1/auth/signup") && method === "POST") {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({ ok: true }),
});
return;
}
if (path.endsWith('/api/v1/auth/tenant-info')) {
if (path.endsWith("/api/v1/auth/tenant-info")) {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({}),
});
return;
}
if (path.endsWith('/api/v1/client-log')) {
if (path.endsWith("/api/v1/client-log")) {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({ ok: true }),
});
return;
@@ -108,7 +98,7 @@ async function mockSignupApis(page: Page): Promise<void> {
await route.fulfill({
status: 200,
contentType: 'application/json',
contentType: "application/json",
body: JSON.stringify({}),
});
});
@@ -117,8 +107,8 @@ async function mockSignupApis(page: Page): Promise<void> {
async function enableFlutterAccessibility(page: Page): Promise<void> {
await page.waitForTimeout(300);
const button = page.getByRole('button', { name: 'Enable accessibility' });
const placeholder = page.locator('flt-semantics-placeholder').first();
const button = page.getByRole("button", { name: "Enable accessibility" });
const placeholder = page.locator("flt-semantics-placeholder").first();
await button.click({ force: true, timeout: 1_000 }).catch(async () => {
await placeholder.click({ force: true, timeout: 1_000 }).catch(async () => {
@@ -130,318 +120,36 @@ async function enableFlutterAccessibility(page: Page): Promise<void> {
await page.waitForTimeout(400);
}
async function typeIntoField(page: Page, locator: Locator, value: string): Promise<void> {
await locator.scrollIntoViewIfNeeded();
await page.waitForTimeout(100);
await locator.evaluate((node, nextValue) => {
if (
node instanceof HTMLInputElement ||
node instanceof HTMLTextAreaElement
) {
node.focus();
node.value = '';
node.dispatchEvent(new Event('input', { bubbles: true }));
node.value = nextValue;
node.dispatchEvent(new Event('input', { bubbles: true }));
node.dispatchEvent(new Event('change', { bubbles: true }));
}
}, value).catch(() => {});
const box = await locator.boundingBox();
if (!box) {
throw new Error('Field locator is not visible for typing.');
}
await page.locator('flt-glass-pane').click({
position: {
x: box.x + box.width / 2,
y: box.y + box.height / 2,
},
force: true,
});
await page.waitForTimeout(100);
await page.keyboard.press('Control+A');
await page.keyboard.press('Backspace');
await page.keyboard.type(value);
await page.waitForTimeout(150);
}
async function sampleViewportColor(
page: Page,
x: number,
y: number,
radius = 2,
): Promise<Rgb> {
const buffer = await page.screenshot();
const image = decodePng(buffer);
const clampedX = Math.max(0, Math.min(image.width - 1, Math.round(x)));
const clampedY = Math.max(0, Math.min(image.height - 1, Math.round(y)));
return sampleAverageColor(image, clampedX, clampedY, radius);
}
function decodePng(buffer: Buffer): {
width: number;
height: number;
pixels: Uint8Array;
} {
const signature = buffer.subarray(0, 8).toString('hex');
if (signature !== '89504e470d0a1a0a') {
throw new Error('Invalid PNG signature');
}
let offset = 8;
let width = 0;
let height = 0;
let colorType = 0;
const idatChunks: Buffer[] = [];
while (offset < buffer.length) {
const length = buffer.readUInt32BE(offset);
const type = buffer.subarray(offset + 4, offset + 8).toString('ascii');
const data = buffer.subarray(offset + 8, offset + 8 + length);
offset += 12 + length;
if (type === 'IHDR') {
width = data.readUInt32BE(0);
height = data.readUInt32BE(4);
colorType = data[9];
} else if (type === 'IDAT') {
idatChunks.push(data);
} else if (type === 'IEND') {
break;
}
}
if (!width || !height || ![2, 6].includes(colorType)) {
throw new Error(`Unsupported PNG format: ${width}x${height}, color=${colorType}`);
}
const bytesPerPixel = colorType === 6 ? 4 : 3;
const stride = width * bytesPerPixel;
const inflated = inflateSync(Buffer.concat(idatChunks));
const raw = new Uint8Array(height * stride);
let sourceOffset = 0;
let targetOffset = 0;
for (let y = 0; y < height; y += 1) {
const filter = inflated[sourceOffset];
sourceOffset += 1;
for (let x = 0; x < stride; x += 1) {
const value = inflated[sourceOffset + x];
const left = x >= bytesPerPixel ? raw[targetOffset + x - bytesPerPixel] : 0;
const up = y > 0 ? raw[targetOffset + x - stride] : 0;
const upLeft =
y > 0 && x >= bytesPerPixel
? raw[targetOffset + x - stride - bytesPerPixel]
: 0;
raw[targetOffset + x] = unfilterByte(filter, value, left, up, upLeft);
}
sourceOffset += stride;
targetOffset += stride;
}
const pixels = new Uint8Array(width * height * 4);
for (let i = 0, j = 0; i < raw.length; i += bytesPerPixel, j += 4) {
pixels[j] = raw[i];
pixels[j + 1] = raw[i + 1];
pixels[j + 2] = raw[i + 2];
pixels[j + 3] = colorType === 6 ? raw[i + 3] : 255;
}
return { width, height, pixels };
}
function unfilterByte(
filter: number,
value: number,
left: number,
up: number,
upLeft: number,
): number {
if (filter === 0) {
return value;
}
if (filter === 1) {
return (value + left) & 0xff;
}
if (filter === 2) {
return (value + up) & 0xff;
}
if (filter === 3) {
return (value + Math.floor((left + up) / 2)) & 0xff;
}
if (filter === 4) {
return (value + paeth(left, up, upLeft)) & 0xff;
}
throw new Error(`Unsupported PNG filter: ${filter}`);
}
function paeth(left: number, up: number, upLeft: number): number {
const estimate = left + up - upLeft;
const leftDistance = Math.abs(estimate - left);
const upDistance = Math.abs(estimate - up);
const upLeftDistance = Math.abs(estimate - upLeft);
if (leftDistance <= upDistance && leftDistance <= upLeftDistance) {
return left;
}
if (upDistance <= upLeftDistance) {
return up;
}
return upLeft;
}
function sampleAverageColor(
image: { width: number; height: number; pixels: Uint8Array },
x: number,
y: number,
radius = 2,
): Rgb {
const xStart = Math.max(0, Math.min(image.width - 1, x - radius));
const xEnd = Math.max(0, Math.min(image.width - 1, x + radius));
const yStart = Math.max(0, Math.min(image.height - 1, y - radius));
const yEnd = Math.max(0, Math.min(image.height - 1, y + radius));
let totalR = 0;
let totalG = 0;
let totalB = 0;
let count = 0;
for (let sampleY = yStart; sampleY <= yEnd; sampleY += 1) {
for (let sampleX = xStart; sampleX <= xEnd; sampleX += 1) {
const offset = (sampleY * image.width + sampleX) * 4;
const alpha = image.pixels[offset + 3];
if (alpha < 16) {
continue;
}
totalR += image.pixels[offset];
totalG += image.pixels[offset + 1];
totalB += image.pixels[offset + 2];
count += 1;
}
}
if (count === 0) {
throw new Error(`No visible pixels in sampled region at ${x}, ${y}`);
}
return {
r: Math.round(totalR / count),
g: Math.round(totalG / count),
b: Math.round(totalB / count),
};
}
function brightness(rgb: Rgb): number {
return (rgb.r + rgb.g + rgb.b) / 3;
}
async function sampleLocatorColor(page: Page, locator: Locator, radius = 2): Promise<Rgb> {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Target locator is not visible for color sampling.');
}
return sampleViewportColor(page, box.x + box.width / 2, box.y + box.height / 2, radius);
}
async function sampleCheckboxColor(page: Page, locator: Locator): Promise<Rgb> {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Checkbox locator is not visible for color sampling.');
}
const x = box.x + Math.min(18, Math.max(12, box.width * 0.08));
const y = box.y + box.height / 2;
return sampleViewportColor(page, x, y, 0);
}
async function sampleButtonColor(page: Page, locator: Locator): Promise<Rgb> {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Button locator is not visible for color sampling.');
}
const x = box.x + box.width * 0.2;
const y = box.y + box.height / 2;
return sampleViewportColor(page, x, y, 1);
}
async function sampleButtonBackground(page: Page, locator: Locator): Promise<Rgb> {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Button locator is not visible for background sampling.');
}
const x = box.x + box.width / 2;
const y = Math.max(0, box.y - 14);
return sampleViewportColor(page, x, y, 2);
}
async function expectBrightnessContrast(
sample: () => Promise<{ foreground: Rgb; background: Rgb }>,
minimumDelta: number,
): Promise<void> {
await expect
.poll(async () => {
const { foreground, background } = await sample();
return Math.abs(brightness(foreground) - brightness(background));
}, { timeout: 10_000 })
.toBeGreaterThanOrEqual(minimumDelta);
}
async function expectButtonContrast(page: Page, locator: Locator): Promise<void> {
await expectBrightnessContrast(async () => {
return {
foreground: await sampleButtonColor(page, locator),
background: await sampleButtonBackground(page, locator),
};
}, 45);
}
async function sampleCheckboxBackground(page: Page, locator: Locator): Promise<Rgb> {
const box = await locator.boundingBox();
if (!box) {
throw new Error('Checkbox locator is not visible for background sampling.');
}
const x = box.x + Math.min(42, Math.max(30, box.width * 0.18));
const y = box.y + box.height / 2;
return sampleViewportColor(page, x, y, 1);
}
async function expectCheckboxContrast(page: Page, locator: Locator): Promise<void> {
await expectBrightnessContrast(async () => {
return {
foreground: await sampleCheckboxColor(page, locator),
background: await sampleCheckboxBackground(page, locator),
};
}, 40);
}
test.describe('UserFront signup theme visibility', () => {
test.describe("UserFront signup theme visibility", () => {
for (const theme of themeCases) {
test(`signup keeps ${theme.name} theme colors visible across steps`, async ({
page,
}) => {
await mockSignupApis(page);
if (theme.name === 'dark') {
await page.goto('/ko/signin', { waitUntil: 'domcontentloaded' });
if (theme.name === "dark") {
await page.goto("/ko/signin", { waitUntil: "domcontentloaded" });
await page.waitForTimeout(1200);
await enableFlutterAccessibility(page);
const themeToggle = page.getByRole('button', {
const themeToggle = page.getByRole("button", {
name: /Light|Dark|테마 전환|Theme toggle/i,
});
await themeToggle.click({ force: true });
await page.waitForTimeout(500);
}
await page.goto('/ko/signup', { waitUntil: 'domcontentloaded' });
await page.goto("/ko/signup", { waitUntil: "domcontentloaded" });
await page.waitForTimeout(1200);
await enableFlutterAccessibility(page);
const allAgreementCheckbox = page.getByRole('checkbox', {
const allAgreementCheckbox = page.getByRole("checkbox", {
name: /모두 동의합니다|Agree to all/i,
});
await expect(allAgreementCheckbox).toBeVisible();
await allAgreementCheckbox.click({ force: true });
await expect(allAgreementCheckbox).toBeChecked();
const nextButton = page.getByRole('button', { name: /다음 단계|Next/i });
const nextButton = page.getByRole("button", { name: /다음 단계|Next/i });
await expect(nextButton).toBeVisible();
await expect(nextButton).toBeEnabled();
await nextButton.click({ force: true });
@@ -450,14 +158,14 @@ test.describe('UserFront signup theme visibility', () => {
page.getByText(/본인 확인을 위해|Verify your email and phone number/i),
).toBeVisible();
const emailInput = page.getByRole('textbox', {
const emailInput = page.getByRole("textbox", {
name: /이메일 주소|Email address/i,
});
const phoneInput = page.getByRole('textbox', {
const phoneInput = page.getByRole("textbox", {
name: /휴대폰 번호|Phone number/i,
});
const requestButtons = page
.getByRole('button')
.getByRole("button")
.filter({ hasText: /인증요청|재발송|Send code|Resend/i });
await expect(emailInput).toBeVisible();