# @cbd-wujie-components/ab-test

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

Latest version **1.0.5-beta.1** (published 2025-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cbd-wujie-components/ab-test
pnpm add @cbd-wujie-components/ab-test
yarn add @cbd-wujie-components/ab-test
bun add @cbd-wujie-components/ab-test
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5-beta.1 |
| Published | 2025-03-18 |
| First published | 2023-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 146.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | baiwusanyu-c |
| Maintainers | baiwusanyu |
| Keywords | typescript, javascript, utils, vue, vue3, vite, react, web component |

## Links

- npm: https://www.npmjs.com/package/@cbd-wujie-components/ab-test
- Homepage: https://github.com/baiwusanyu-c
- npm.io page: https://npm.io/package/@cbd-wujie-components/ab-test

## Dependencies (8)

- [react](https://npm.io/package/react.md) 17.0.2
- [wujie](https://npm.io/package/wujie.md) ^1.0.18
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [wujie-react](https://npm.io/package/wujie-react.md) ^1.0.17
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.0
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.0
- [baiwusanyu-utils](https://npm.io/package/baiwusanyu-utils.md) ^1.0.15
- [@cbd-wujie-components/utils](https://npm.io/package/@cbd-wujie-components/utils.md) ^1.0.5-beta.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5-beta.1 (latest) — 2025-03-18
- 1.0.5-beta.2 (1.0.5.beta.2) — 2026-03-09
- 1.0.5-beta.0 — 2024-01-29
- 1.0.4 — 2023-11-16
- 1.0.4-beta.3 — 2023-11-15
- 1.0.4-beta.2 — 2023-11-14
- 1.0.4-beta.1 — 2023-11-10
- 1.0.4-beta.0 — 2023-11-09
- 1.0.3 — 2023-10-20
- 1.0.2 — 2023-10-20
- 1.0.2-beta.10 — 2023-10-10
- 1.0.2-beta.9 — 2023-10-08
- 1.0.2-beta.8 — 2023-10-07
- 1.0.2-beta.7 — 2023-09-26
- 1.0.2-beta.6 — 2023-09-25
- … 19 more at https://npm.io/package/@cbd-wujie-components/ab-test/versions

## README

# @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
```

### 使用
```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 (
    <div>
      <ABTest config={configAdd} />
    </div>
  )
}
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'
}
```

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

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

| 名称           | 说明     | 类型                 | 必填  |
|--------------|--------|------------------------|------|
| 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<any>;
```

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

### 参数示例
#### 创建实验
```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)
}
```

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

---
_Source: https://npm.io/package/@cbd-wujie-components/ab-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._