如何测试组件与后端交互

[xuexb]

前提条件

需要先熟悉使用以下功能、命令：

0. 本地安装并可正常运行 MIP-CLI
1. mip server - 本地当前执行目录内运行 HTTP Server
2. mip addelement 组件名称 - 添加组件
3. mip add 文件名 依赖组件列表 - 添加 HTML 文件
4. 可完成组件的开发，并理解组件的生命周期

本地调试

使用组件 README.md 调试组件

一个组件必须包含一个 README.md 文件，该文件是组件的文档、简单调试，可点击 README.md 规范 查看更多信息。

注意：README.md 调试只是简单的调试组件的功能。

# 打开合适的目录，也可以是克隆的官方组件库
cd mydir

# 在目录内创建 MIP 组件，如果已经存在则可以忽略
mip addelement mip-demo

# 启动 server
mip server

启动成功后，打开浏览器并访问 http://127.0.0.1:8000/ 地址，可以看到目录中所有 MIP 组件，点击进入即可预览解析 README.md 文件的代码片段调试。组件和文档修改页面自动刷新生效。

在项目中使用本地组件调试

由于 README.md 调试的场景有限，很多场景是需要把组件放到真实的项目中去，以达到结合项目的数据和结构来真实的调试运行组件。

# 创建一个项目目录
mkdir mip-project

# 进入项目目录
cd mip-project

# 初始化 MIP
mip init

# 创建一个存放组件的目录
mkdir mip-ext

# 创建一个存放 HTML 文件的目录，如果是本地项目可以忽略该目录，直接在项目中编辑
mkdir html

进入 mip-ext/ 目录创建所需组件，也可以是复制已存在的组件，也可是克隆官方组件，总之，需要本地调试哪些组件，就可以存放到 mip-ext/中，如：

cd mip-ext

# 在目录内创建 MIP 组件，如果已经存在则可以忽略
mip addelement mip-demo

进入 html 目录创建 HTML 页面，如果是项目调试则忽略，如：

cd html

# 创建依赖 mip-demo 组件的 HTML 页面
mip add index.html mip-demo

修改 mip.config 配置文件（是由 mip init 自动生成）中的 extensionsDir 字段的值为：./mip-ext 。

在 mip-project/ （同 mip.config 文件同级目录）执行 mip server 打开 WEB Server ，启动浏览器打开对应链接，找到对应 HTML 文件即可，修改组件的代码可以自动浏览器刷新生效。

目前结构如：

.
└── mip-project
    ├── html
    │   └── index.html
    ├── mip-ext
    │   └── mip-demo
    │       ├── README.md
    │       ├── mip-demo.js
    │       ├── mip-demo.less
    │       └── package.json
    └── mip.config

本地项目中引用本地组件

因为纯静态 HTML 页面调试有些场景不能覆盖，比如和后端强依赖的复杂交互组件，那么可以在执行 mip server 时得到 WEB Server 的链接，如：

$ mip server
INFO livereload server start at: http://172.24.136.214:35730
INFO mip server start at: http://192.168.1.100:8000

那么对应的 http://192.168.1.100:8000/local-extension-loader/组件名.js 就是本地的组件链接，可以在本地项目中直接引用来进行调试，如：

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
<script src="http://192.168.1.100:8000/local-extension-loader/mip-demo.js"></script>

**注意：**由于本地调试依赖 mip server 服务，当服务被关闭后，本地的调试链接不可用。

提测

本方法需要：

1. 使用 mip-extension-optimizer 本地编译组件

由于项目上线前需要由测试人员统一测试项目，而本地调试的服务可能和测试环境有依赖问题（如本地电脑关闭后测试环境脚本不可用），这里提供由本地编译产出压缩代码，交由测试人员统一部署到 WEB Server 中，在项目中直接引用该代码。

# 进入本地组件目录
cd mip-project/mip-ext

# 方法1：
# 执行本地编译，把 mip-demo mip-demo2 编译到 dist 目录
mip-extension-optimise ./ -o dist mip-demo mip-demo2

# 方法2：
# 执行本地编译，把所有组件编译到 dist 目录
mip-extension-optimise ./ -o dist

编译后的目录结构如：

.
└── mip-project
    ├── html
    │   └── index.html
    ├── mip-ext
    │   ├── dist
    │   │   ├── mip-demo
    │   │   │   └── 1.0.0
    │   │   │       ├── mip-demo.css
    │   │   │       └── mip-demo.js
    │   │   └── mip-demo2
    │   │       └── 1.0.0
    │   │           ├── mip-demo2.css
    │   │           └── mip-demo2.js
    │   ├── mip-demo
    │   │   ├── README.md
    │   │   ├── mip-demo.js
    │   │   ├── mip-demo.less
    │   │   └── package.json
    │   └── mip-demo2
    │       ├── README.md
    │       ├── mip-demo2.js
    │       ├── mip-demo2.less
    │       └── package.json
    └── mip.config

把产出的 dist 文件夹部署到一个稳定的 WEB Server 并获取到可访问的地址（通常由测试人员操作），如：http://myserver.test/dist/mip-demo/1.0.0/mip-demo.js 统一替换项目测试环境的文件引用为以上形式。当测试通过后，组件由 MIP 组件审核平台 操作上线，并替换为线上地址即可。

**建议：**本地使用测试方式调试通过后再提测，因为本地有任何修改，需要再编译、再部署。

---

以上如果遇到任何问题，欢迎评论讨论，我们也在想这块如何做成自动化处理。

[xuexb]

MIP-CLI 的升级计划（mipengine/mip-cli#34）也在做这块的优化，需要再考虑下如何更合理的编译、提测。

[windtalkers]

这里测试人员，为啥要用开发者编译代码，我们理论上，需要提供测试方法，让测试人员按照方法，自己编译部署代码，测试

[xuexb]

@windtalkers 当时主要考虑的是开发人员已经对这个比较熟悉了，由开发人员编译出 dist 比较方便。

此 issue 主要面相的开发者吧，因为还包含了本地的开发、项目联调等功能，至于你说的由开发人员自测通过后，只提供一个组件压缩包，由测试人员编译、部署确实需要考虑，比如提供一些可视化编译，甚至只上传一个组件压缩包就可以编译、自动生成组件引用链接等，这块我在想下。

[tayqassqan]

目前MIP官方组件以及站长自己的组件开发与测试都不够友好，具体表现在：

1. 组件研发工程师与测试人员的对接流程不明确
2. MIP自身的Pipeline能力不够，需要改进

我们需要产出一套产品化的测试方法和工具提供给开发者。