@cbd-wujie-components/ab-test

安装

``shell
npm install --save @cbd-wujie-components/ab-test
`

`shell
yarn install --save @cbd-wujie-components/ab-test
`

`shell
pnpm install @cbd-wujie-components/ab-test
`

$3

`typescript jsx
import React from 'react'
import { ABTest, type ABTestConfig } from 'cbd-wujie-components'
const App = () => {
const configAdd = {
env: 'DEV',
type: 'add',
maId: 'maId',
startTime: '2023-04-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentIds',
maName: 'maName2',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig

return (

)
}
export default App
`
#### 组件 props

`typescript
export interface ABTestProps {
config: ABTestConfig
hooks?: {
beforeLoad?: () => void
beforeMount?: () => void
afterMount?: () => void
beforeUnmount?: () => void
afterUnmount?: () => void
}
}
`

| 名称 | 说明 | 必填说明 |
|----------|---------------------|------|
| config | ab-test 的配置参数 | 必填 |
| hooks | wujie子应用载入的 hooks| 可选 |


`typescript
export interface ABTestConfig {
authId: string | number
env: 'DEV' | 'PROD'
type: 'add' | 'edit'

startTime: string // e.g. 2023-04-27T07:32:39.000+00:00
endTime: string // e.g. 2023-07-27T07:32:39.000+00:00
ComponentId: string | number
maId: string | number
maName: string

expId: string | number
close: (res: ABTestRes) => void
}

`


| 名称 | 说明 | 必填说明 |
|-------------|-------------------------------|------|
| env | 环境配置，决定请求 ab-test 的地址是开发还是生产 | 必填 |
| type | 操作类型，分别对应使用场景为创建实验、编辑实验 | 必填 |
| startTime | 活动开始时间 | 必填 |
| endTime | 活动结束时间 | 必填 |
| ComponentId | 当前组件ID | 必填 |
| maId | 画布id | 必填 |
| maName | 画布名称 | 必填 |
| expId | 实验id， 实验编辑时必填!! | 可选 |
| close | ab-test 关闭时的回调方法，根据场景出参 | 必填 |

#### props config 中的 close 方法返回值
`typescript
export interface ABTestRes {
status: 'complete' | 'interrupt'
type: 'add' | 'edit'
data: {
// 版本信息数据
versions: Array<{
// 版本名称
name: string
// 版本分流权重
weight: number
// 版本描述
desc: string
// 版本id
id: string
// 分流白名单
whitelist: string
}>
// 实验信息数据
experiment: {
// 实验名称
name: string
// 实验分流权重
weight: number
// 实验描述
desc: string
// 实验 key
key: string
}
// 版本信息数据
maId: string | number
} | null
}
`


| 名称 | 说明 |
|---------|-----------------------------|
| status | 表示流程是否被中断 |
| type | 操作类型 |
| data | 点选人群后返回的数据，包含画布id和分流实验、版本数据 |

* 在新建时点击保存按钮按钮 ABTestRes 的返回值
* >实验创建和编辑的保存皆为伪保存，需要在画布调用Api abTestSave 来保存
`typescript jsx
const res = {
status: "complete",
data: {
maId: "maId",
versions: [
{
name: "对照版本",
weight: 1,
desc: "",
id: "9185023865946"
},
{
name: "实验版本",
weight: 99,
desc: "",
id: "2655946237622"
}
],
experiment: {
name: "maName2-maId-ComponentId4",
weight: 10,
desc: "maName2-maId-ComponentId4自动生成的实验",
key: "14251453774656"
}
},
type: add
}
`

* 在創建时，點擊取消或關閉按鈕
`typescript jsx
const res = {
status: 'interrupt',
data: null,
type: 'add'
}
`

* 在编辑时点击保存按钮按钮 ABTestRes 的返回值
* >实验创建和编辑的保存皆为伪保存，需要在画布调用Api abTestSave 来保存
`typescript jsx
const res = {
status: "complete",
data: {
maId: "maId",
versions: [
{
name: "对照版本",
weight: 1,
desc: "",
id: "9185023865946"
},
{
name: "实验版本",
weight: 99,
desc: "",
id: "2655946237622"
}
],
experiment: {
name: "maName2-maId-ComponentId4",
weight: 10,
desc: "maName2-maId-ComponentId4自动生成的实验",
key: "14251453774656"
}
},
type: add
}
`

* 在编辑时，點擊取消或關閉按鈕
`typescript jsx
const res = {
status: 'interrupt',
data: null,
type: 'add'
}
`

* 在编辑或新增时，如果传入的参数生成实验名称等信息不符合表单校验规则（见Tips 1.），
`typescript jsx
const res = {
status: 'interrupt',
data: null,
type: 'add' | 'edit'
}
`

$3

#### abTestSave
在画布保存时调用, 对编辑或创建的实验进行保存

`typescript
declare function abTestSave(
maId: string | number,
ComponentId: string | number,
type: "add" | "edit"): Promise
`

| 名称 | 说明 | 类型 | 必填 |
|--------------|--------|------------------------|------|
| maId | 画布id | string or number | 必填 |
| ComponentId | 组件id | string or number | 必填 |
| type | 操作类型 | "add" or "edit" | 必填 |

`typescript

export interface AbTestSaveRes {
status: 'complete' | 'interrupt'
type: 'add' | 'edit'
data: {
// 实验配置
experiment: {
name: string;
weight: number;
desc: string;
key: string;
id: number;
};
// 版本信息
versions: Array<{
name: string;
weight: number;
desc: string;
whitelist: string[];
id: number;
}>
// 画布 id
maId: string | number
} | null
}
`
#### abTestPublish

在画布保存时调用, 对实验进行发布
`typescript
declare function abTestPublish(expId: string | number): Promise;
`

| 名称 | 说明 | 类型 | 必填 |
|--------------|------|------------------------|------|
| expId | 实验id | string or number | 必填 |

$3

#### 创建实验
`typescript jsx
const configAdd = {
authId: '1828168xxxx',
env: 'DEV',
type: 'add',
maId: 'maId',
startTime: '2023-04-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentId5',
maName: 'maName2',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig
`
#### 编辑实验

``typescript jsx
const configEdit = {
authId: '1828168xxxx',
env: 'DEV',
type: 'edit',
maId: 'maId',
startTime: '2023-03-27T07:32:39.000+00:00',
endTime: '2023-07-27T07:32:39.000+00:00',
ComponentId: 'ComponentId4',
expId: '17',
maName: 'maName4444',
close: (res: ABTestRes) => {
console.log(res)
},
} as ABTestConfig
``

#### 创建实验保存
`typescript jsx
import { abTestSave } from '@cbd-wujie-components/ab-test'
const handleSave = async() => {
const res = await abTestSave('maId', 'ComponentId5', 'add')
console.log(res)
}
`
#### 编辑实验保存
`typescript jsx
import { abTestSave } from '@cbd-wujie-components/ab-test'
const handleSave = async() => {
const res = await abTestSave('maId', 'ComponentId5', 'edit')
console.log(res)
}
`
#### 实验发布
`typescript jsx
import { abTestPublish } from '@cbd-wujie-components/ab-test'
const handlePublish = async() => {
const res = await abTestPublish(17)
console.log(res)
}
`

$3

> * 1.ab-test 根据产品文档，实验名称的生成规则为 画布名称+画布id+组件id,而由于数据库限制字符为50,估需要确保传入参数长度符合规则。
> * 2.ab-test 由于和人群圈选使用不同的登录，目前没有鉴权，需要进一步讨论
> * 3.暴露的方法 abTestPublish 和 abTestSave 实际上是在子应用中挂载到 window中调用的，因此调用前必须打开过组件页面
> * 4.由于 ab-test 接口请求频次限制，不可以同时打开两个 ab-test
> * 5.ab-test 组件基于 是基于 wujie` 的微前端封装，如果无法访问，这与网站访问安全策略有关，需要找誉博一同解决