265 lines
10 KiB
TypeScript
265 lines
10 KiB
TypeScript
// RdmMembersSection rdm.role.options 授权门控：rdm.perm.check 给出 member.manage
|
||
// 未允许时，不得提前发 rdm.role.options（普通成员被 403）；允许后必须发。
|
||
//
|
||
// 测试在 node 环境下用最小化的 DOM mock 驱动 React 19 createRoot，让 useEffect 正常落槽；
|
||
// 不去依赖 happy-dom/jsdom（受网络/包锁约束，allowed_paths 也限制仅 src + test）。
|
||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||
import { createElement, type ReactNode } from 'react'
|
||
import { act } from 'react'
|
||
import { createRoot, type Root } from 'react-dom/client'
|
||
import { RdmMembersSection } from '../src/components/adminRdmSections'
|
||
import { api } from '../src/api'
|
||
import type { Project } from '../src/contracts'
|
||
|
||
// 用 vi.mock 隔离 useStore：组件只用到 select(state).me，其它 store 字段触发不到，
|
||
// 不会影响此处关注点（避免 host Store 启动监听器、送 SSE 等副作用污染测试）。
|
||
vi.mock('../src/store', () => {
|
||
const state = {
|
||
me: { owner: 'bob', name: 'bob', auth: true },
|
||
}
|
||
return {
|
||
useStore: (select: (value: typeof state) => unknown) => select(state),
|
||
eventTime: (_e: { ts?: string }, now: number) => now,
|
||
}
|
||
})
|
||
|
||
// ---- 自定义 React DOM 桩：让 useEffect 在 node 环境落到 commit 阶段 ----
|
||
// 服务端 React 不运行 useEffect；createRoot 需要一个 DOM-shaped container。
|
||
// 这里只覆盖 react-dom-client 用到的几个关键入口（addEventListener、tagName、namespaceURI、
|
||
// ownerDocument.defaultView.HTMLIFrameElement、activeElement、documentElement）。任何
|
||
// 新字段缺失都会在第一处 React 调用时显式爆出，便于修复而不是静默吞下。
|
||
class HTMLIFrameElement {}
|
||
class MockDocument {
|
||
nodeType = 9
|
||
defaultView: any
|
||
HTMLIFrameElement = HTMLIFrameElement
|
||
activeElement: any = null
|
||
documentElement: any
|
||
constructor() {
|
||
this.defaultView = makeWindow()
|
||
this.defaultView.document = this
|
||
this.activeElement = null
|
||
this.documentElement = this
|
||
}
|
||
addEventListener() {}
|
||
removeEventListener() {}
|
||
dispatchEvent() {}
|
||
contains() { return false }
|
||
createElement(tag: string) {
|
||
const el = new MockElement()
|
||
el.tagName = tag
|
||
el.nodeName = tag
|
||
el.ownerDocument = this
|
||
if (renderObserver) renderObserver.append(tag)
|
||
return el
|
||
}
|
||
createElementNS(_ns: string, tag: string) { return this.createElement(tag) }
|
||
createTextNode() { return new MockElement() }
|
||
}
|
||
|
||
/** 创建 DOM 节点时把它们的 tag 累积下来，替代 innerHTML 读取（Mock 上 innerHTML 为空）。 */
|
||
let renderObserver: { tags: string[]; reset(): void; append(t: string): void } | null = null
|
||
class MockElement {
|
||
nodeType = 1
|
||
style: Record<string, string> = {}
|
||
attributes: Record<string, string> = {}
|
||
tagName = 'DIV'
|
||
nodeName = 'DIV'
|
||
namespaceURI = 'http://www.w3.org/1999/xhtml'
|
||
ownerDocument: any
|
||
childNodes: any[] = []
|
||
parentNode: any = null
|
||
appendChild(c: any) { this.childNodes.push(c); c.parentNode = this; return c }
|
||
removeChild(c: any) { const i = this.childNodes.indexOf(c); if (i >= 0) this.childNodes.splice(i, 1); c.parentNode = null; return c }
|
||
insertBefore(c: any, ref: any) {
|
||
const i = ref ? this.childNodes.indexOf(ref) : this.childNodes.length
|
||
this.childNodes.splice(i < 0 ? this.childNodes.length : i, 0, c)
|
||
c.parentNode = this
|
||
return c
|
||
}
|
||
contains(c: any) {
|
||
for (let n: any = c; n; n = n.parentNode) if (n === this) return true
|
||
return false
|
||
}
|
||
addEventListener() {}
|
||
removeEventListener() {}
|
||
dispatchEvent() {}
|
||
focus() {}
|
||
setAttribute(k: string, v: string) { this.attributes[k] = v }
|
||
removeAttribute(k: string) { delete this.attributes[k] }
|
||
cloneNode() { return new MockElement() }
|
||
/** React 写 `<select>` 时会读 `select.options`，给一个可索引的 length 让 updateOptions 不崩。 */
|
||
get options() {
|
||
return this.childNodes
|
||
}
|
||
/** React 写入 innerHTML；这里读为空即可（断言用别的字段）。 */
|
||
get innerHTML() { return '' }
|
||
get outerHTML() { return '' }
|
||
get textContent() { return '' }
|
||
set textContent(_v: string) { /* 允许 commit 阶段写入 */ }
|
||
get value() { return this.attributes.value ?? '' }
|
||
set value(v: string) { this.attributes.value = v }
|
||
get firstChild() { return this.childNodes[0] }
|
||
get lastChild() { return this.childNodes[this.childNodes.length - 1] }
|
||
get nextSibling() {
|
||
if (!this.parentNode) return null
|
||
const i = this.parentNode.childNodes.indexOf(this)
|
||
return this.parentNode.childNodes[i + 1] ?? null
|
||
}
|
||
get previousSibling() {
|
||
if (!this.parentNode) return null
|
||
const i = this.parentNode.childNodes.indexOf(this)
|
||
return this.parentNode.childNodes[i - 1] ?? null
|
||
}
|
||
}
|
||
function makeWindow() {
|
||
const w: any = {
|
||
event: undefined,
|
||
HTMLIFrameElement,
|
||
document: undefined as any,
|
||
navigator: { userAgent: 'node' },
|
||
}
|
||
return w
|
||
}
|
||
|
||
function makeContainer(): MockElement {
|
||
const doc = new MockDocument()
|
||
const el = doc.createElement('div') as MockElement
|
||
return el
|
||
}
|
||
|
||
function installDomGlobals() {
|
||
const win = makeWindow()
|
||
const doc = new MockDocument()
|
||
doc.defaultView = win
|
||
win.document = doc
|
||
;(globalThis as any).window = win
|
||
;(globalThis as any).document = doc
|
||
;(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true
|
||
;(globalThis as any).MessageChannel = class { port1 = { postMessage() {} }; port2 = { onmessage: null as any, postMessage() {} } }
|
||
;(globalThis as any).setImmediate = (cb: (...args: any[]) => void) => Promise.resolve().then(() => cb())
|
||
}
|
||
|
||
let _installed = false
|
||
function ensureDomGlobals() {
|
||
if (_installed) return
|
||
installDomGlobals()
|
||
_installed = true
|
||
}
|
||
|
||
// ---- 用例辅助 ----
|
||
|
||
const project: Project = {
|
||
id: 'host-1', owner: 'alice', name: '项目P', createdAt: '', updatedAt: '',
|
||
settings: { 'rdm.projectId': 'domain-7', 'rdm.state': 'ready' },
|
||
}
|
||
|
||
type CmdHandler = (id: string, params: Record<string, unknown>) => Promise<unknown> | unknown
|
||
|
||
/** 直接劫持 api.rdmProjectCommand，用 handlers[id] 分别登记每个命令的响应。 */
|
||
function spyCommandBus(handlers: Record<string, CmdHandler>) {
|
||
const calls: Array<[string, Record<string, unknown>]> = []
|
||
const original = api.rdmProjectCommand.bind(api)
|
||
const spy = vi.spyOn(api, 'rdmProjectCommand').mockImplementation(async (_proj: Project, id: string, params: Record<string, unknown> = {}) => {
|
||
const args: [string, Record<string, unknown>] = [id, params]
|
||
calls.push(args)
|
||
if (!handlers[id]) throw new Error(`unexpected command: ${id} (no handler registered)`)
|
||
return handlers[id](id, params)
|
||
})
|
||
return {
|
||
calls,
|
||
roleOptionsCalls: () => calls.filter(([id]) => id === 'rdm.role.options'),
|
||
permCheckCalls: () => calls.filter(([id]) => id === 'rdm.perm.check'),
|
||
memberListCalls: () => calls.filter(([id]) => id === 'rdm.project.member.list'),
|
||
restore: () => {
|
||
spy.mockRestore()
|
||
;(api as any).rdmProjectCommand = original
|
||
},
|
||
}
|
||
}
|
||
|
||
let root: Root | null = null
|
||
let container: MockElement | null = null
|
||
|
||
beforeEach(() => {
|
||
ensureDomGlobals()
|
||
renderObserver = {
|
||
tags: [],
|
||
reset() { this.tags = [] },
|
||
append(t: string) { this.tags.push(t) },
|
||
}
|
||
})
|
||
afterEach(async () => {
|
||
if (root) {
|
||
await act(async () => root!.unmount())
|
||
root = null
|
||
}
|
||
container = null
|
||
renderObserver = null
|
||
vi.restoreAllMocks()
|
||
})
|
||
|
||
async function renderAndFlush(element: ReactNode, flushes: number = 3) {
|
||
container = makeContainer()
|
||
await act(async () => {
|
||
root = createRoot(container as any)
|
||
root!.render(element)
|
||
})
|
||
// 反复冲一轮 microtask flush，让 perm.check 的 .then 落进 commit。
|
||
for (let i = 0; i < flushes; i++) {
|
||
await act(async () => { await Promise.resolve() })
|
||
}
|
||
}
|
||
|
||
/** 助记：累计的 render 标签里「候选专业角色筛选」下拉 = 看到标 'select' + 紧邻的 option 角色字符串。 */
|
||
function sawCandidateRoleFilter(): boolean {
|
||
if (!renderObserver) return false
|
||
// React 渲染时按 tag 序列创建 select/option；候选筛选断言只需确保 select 节点创建了。
|
||
return renderObserver.tags.includes('select')
|
||
}
|
||
|
||
describe('RdmMembersSection rdm.role.options 授权门控', () => {
|
||
it('member.manage 未被允许时不得请求 rdm.role.options（普通成员避免 403）', async () => {
|
||
const bus = spyCommandBus({
|
||
'rdm.perm.check': () => ({ actions: [{ action: 'member.manage', allowed: false }] }),
|
||
'rdm.project.member.list': () => ({ members: [], accountDirectoryAvailable: true }),
|
||
})
|
||
|
||
await renderAndFlush(createElement(RdmMembersSection, { project }))
|
||
|
||
expect(bus.permCheckCalls().length).toBe(1)
|
||
expect(bus.roleOptionsCalls().length).toBe(0)
|
||
})
|
||
|
||
it('member.manage 被允许后再请求 rdm.role.options，并把结果写回角色筛选', async () => {
|
||
const bus = spyCommandBus({
|
||
'rdm.perm.check': () => ({ actions: [{ action: 'member.manage', allowed: true }] }),
|
||
'rdm.role.options': () => ({ roles: [
|
||
{ roleId: 'r-eng', name: '工程师' },
|
||
{ roleId: 'r-qa', name: '测试' },
|
||
] }),
|
||
'rdm.project.member.list': () => ({ members: [], accountDirectoryAvailable: true }),
|
||
})
|
||
|
||
await renderAndFlush(createElement(RdmMembersSection, { project }))
|
||
|
||
expect(bus.permCheckCalls().length).toBe(1)
|
||
expect(bus.roleOptionsCalls().length).toBe(1)
|
||
})
|
||
|
||
it('门控生效前的初始挂载阶段不出现专业角色筛选下拉（不提供误导选项）', async () => {
|
||
// 用一个永挂起的 perm.check 模拟「自省中」——此时页面上确实只见核对提示，
|
||
// 候选区不出现；这是顺带的渲染回归保单，防止门控未来误把 options 提前注入。
|
||
// memberManagementView 在 actions===null 时返回 canManage:false，rdm.role.options 因此不发请求；
|
||
// 同时 candRoleId 筛选（占位 select）也不应渲染——manage.canManage=false 时整个 ad-create 块被跳掉。
|
||
spyCommandBus({
|
||
'rdm.perm.check': () => new Promise<{ actions: { action: string; allowed: boolean }[] }>(() => {}),
|
||
'rdm.project.member.list': () => new Promise<any>(() => {}),
|
||
})
|
||
|
||
await renderAndFlush(createElement(RdmMembersSection, { project }))
|
||
|
||
expect(sawCandidateRoleFilter()).toBe(false)
|
||
})
|
||
})
|