chore: test

shfshanyue · Feb 26, 2024 · 6b1d3a5 · 6b1d3a5
1 parent 0c3105e
commit 6b1d3a5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/test/fe-test.md b/test/fe-test.md
@@ -14,28 +14,34 @@
 
 仅仅对于前端来说，工作流一般包括以下几部分：
 
-+ 产品对接。产品交与 PRD（产品需求文档），通过 PRD 了解自己开发的基本需求。
-+ 设计对接。设计交与设计稿。通过设计稿进行一比一像素级还原。
-+ 开发(前端主工作流)。主要是编码开发部分。
-+ 后端对接。后端交与 API，与后端进行数据联调，为页面注入真实数据。
-+ 测试对接。
-+ 上线。
++ **产品对接**。产品交与 PRD（产品需求文档），通过 PRD 了解自己开发的基本需求。
++ **设计对接**。设计交与设计稿。通过设计稿进行一比一像素级还原。
++ **开发(前端主工作流)**。主要是编码开发部分。
++ **后端对接**。后端交与 API，与后端进行数据联调，为页面注入真实数据。
++ **测试对接**。
++ **上线**。
+
+![](https://static.shanyue.tech/images/23-02-07/workflow.385a72.webp)
 
 ## 前端开发
 
 在前端开发的所有工作流中，占用时间最多也是最为重要的环节是开发环节，也就是敲代码环节，开发前设计与各种人员对接也是为开发做准备。
 
-针对前端开发，也可以根据工作内容大致分为几个层次。了解前端开发工作的各个层次，对自身定义以及作为前端人的个人职业规划拥有重要意义。
+针对前端开发，也可以根据工作内容大致分为几个层次或职责。了解前端开发工作的各个层次，**对自身定义以及作为前端人的个人职业规划拥有重要意义**。
+
++ **前端运维化基建**：为前端服务的 npm 私有仓库搭建，以及同样也为后端服务的 Gitlab 私有仓库，Docker 镜像仓库搭建，CI Pipeline 工具搭建等。这将决定你能否很舒服地去迭代，测试以及上线前端项目。如果这一步不完善，你很可能经常在公司加班，甚至熬夜。前端基础设施建设，但并不一定由前端开发者搭建完成。
++ **前端基建**：组件库，脚手架，打点系统，异常系统（打点系统和异常系统也可以看做特殊的业务开发），以及一系列 npm 私有仓库。基本是技术占比比较大，因此深受诸多程序员的青睐。
++ **前端引擎**：自研渲染引擎与 Javascript 引擎，一般用于跨端。比如基于 electron 的桌面引擎开发，基于 RN 的移动端引擎开发，以及一些公司自研浏览器的开发，比如许多手机自带的各各家厂商的浏览器。一般需要了解 C++ 层，占比很少。
++ **业务开发**：上对产品及设计，下接后端与运维。占所有前端工作的比例大概 90%。
 
-+ 前端运维化基建：为前端服务的 npm 私有仓库搭建，以及同样也为后端服务的 Gitlab 私有仓库，Docker 镜像仓库搭建，CI Pipeline 工具搭建等。这将决定你能否很舒服地去迭代，测试以及上线前端项目。如果这一步不完善，你很可能经常在公司加班，甚至熬夜。前端基础设施建设，但并不一定由前端开发者搭建完成。
-+ 前端基建：组件库，脚手架，打点系统，异常系统（打点系统和异常系统也可以看做特殊的业务开发），以及一系列 npm 私有仓库。基本是技术占比比较大，因此深受诸多程序员的青睐。
-+ 前端引擎：自研渲染引擎与 Javascript 引擎，一般用于跨端。比如基于 electron 的桌面引擎开发，基于 RN 的移动端引擎开发，以及一些公司自研浏览器的开发，比如许多手机自带的各各家厂商的浏览器。一般需要了解 C++ 层，占比很少。
-+ 业务开发：上对产品及设计，下接后端与运维。占所有前端工作的比例大概 90%。
+![](https://static.shanyue.tech/images/23-02-07/fe-duty.481d16.webp)
 
 相对于广义的业务开发而言，在开发中，除了真正的业务逻辑功能实现的开发，还包含针对保障项目质量所做的测试开发。而这种开发测试模式，又可以分为两类：
 
-+ BDD：Behavior Driven Development，行为驱动开发，先开发再测试。
-+ TDD：Test-Driven Development，测试驱动开发，先测试再开发。
++ `BDD`：Behavior Driven Development，行为驱动开发，先开发再测试。
++ `TDD`：Test Driven Development，测试驱动开发，先测试再开发。
+
+![](https://static.shanyue.tech/images/23-02-07/develop-mode.aea787.webp)
 
 ## 前端开发工作流中的测试环节
 
@@ -55,6 +61,8 @@
 
 在前端开发的工作流中，可简单分为以下几个阶段的测试。以下逐一分析。
 
+![](https://static.shanyue.tech/images/23-02-07/fe-test.d18814.webp)
+
 + 单元测试
 + Component 测试
 + 端对端测试
@@ -71,7 +79,7 @@
 
 断言是**判断一个结果为真或假的逻辑**，目的为了表示程序的实际计算结果与预期结果是否一致。在测试中，断言是最为重要的概念。
 
-我们以一个简单的示例了解下是什么是断言，在 JavaScript 语言中，我们可以使用专业的断言库 [chai](https://github.com/chaijs/chai)。
+我们以一个简单的示例了解下是什么是断言，在 JavaScript 语言中，我们可以使用专业的断言库 [`chai`](https://github.com/chaijs/chai)。
 
 ![](https://static.shanyue.tech/images/23-02-02/clipboard-8573.f8492c.webp)
 
@@ -87,11 +95,11 @@ expect(sum(-10, 12)).to.equal(1)
 
 而我们的测试，是基于每一个断言而完成的，我们将测试同一功能的断言集合起来，使用测试框架维护所有断言进行测试。
 
-而单元测试应用于项目基于断言用来测试某单一模块的最小可测单元。见维基百科解释。
+而**单元测试是用来测试某单一模块的最小可测单元**。见维基百科解释。
 
 > 在计算机编程中，单元测试（Unit Testing）又称为模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。
 
-我们可以使用 mocha 等测试框架用以维护项目的所有单元测试。以下是一个来自于 mocha 官方的测试套件，用来测试 `Array.prototype.indexOf()` 函数。
+我们可以使用 [mocha](https://mochajs.org/) 等测试框架用以维护项目的所有单元测试。以下是一个来自于 mocha 官方的测试套件，用来测试 `Array.prototype.indexOf()` 函数。
 
 ![](https://static.shanyue.tech/images/23-02-02/clipboard-5789.b21b3d.webp)
 
@@ -108,7 +116,7 @@ describe('Array', function () {
 });
 ```
 
-执行测试脚本，我们可以得到关于该项目的所有单元测试的测试结果。
+执行测试脚本，我们可以得到关于该项目的所有单元测试的测试结果，并给出一份测试用例的统计报告。
 
 ``` bash
 $ ./node_modules/mocha/bin/mocha
@@ -121,11 +129,13 @@ $ ./node_modules/mocha/bin/mocha
   1 passing (9ms)
 ```
 
+![](https://static.shanyue.tech/images/23-02-07/clipboard-9029.bde904.webp)
+
 ## 端对端测试 (end to end)
 
 在通过对前端的组件进行测试后，我们仍然无法保证整个页面没有问题。此时，可以通过点点点来保证页面之间的跳转没有问题。
 
-但是人工点点点效率太低，此时可以通过自动化的点点点来使测试简单化，称为 UI 自动化测试，也称为端对端测试，而它的**工作原理就是模拟人工进行点点点**。
+但是人工点点点效率太低，此时可以通过自动化的点点点来使测试简单化，称为 **UI 自动化测试**，也称为端对端测试，而它的**工作原理就是模拟人工进行点点点**。
 
 针对一个商场项目而言，它会模拟用户进行登录、查找、购买、下单整个流程。
 
@@ -169,7 +179,7 @@ API 测试，推荐最近较为流行的 API 工具：[Apifox](https://www.apifo
 
 ![](https://static.shanyue.tech/images/23-02-02/clipboard-3051.59cf3d.webp)
 
-当你在 Apifox 设计好 API 及其数据类型时，你的 API 文档与测试就自动完成了，几乎零配置，当然，你也可以添加更为精细的测试。它可以自动测试你的 API 每个字段的数据类型，API 的状态码等等。
+**当你在 Apifox 设计好 API 及其数据类型时，你的 API 文档与测试也已自动完成，几乎零配置**，当然，你也可以添加更为精细的测试。它可以自动测试你的 API 每个字段的数据类型，API 的状态码等等。
 
 ![](https://static.shanyue.tech/images/23-02-02/clipboard-6737.51980a.webp)
 

diff --git a/test/mock.md b/test/mock.md
@@ -1,4 +1,4 @@
-# 一个前端所期待的 Mock 功能都是什么样的？
+# 云端Mock：前端开发项目调试利器
 
 大家好呀，我是一名苦逼的前端开发工程师，为啥苦逼呢，这不，项目下周就要上线了，但是后端还没给我接口，没有接口我就无法调试，工作停滞不前，我也只能坐着干着急。