quality.html
18.2 KB
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>质量保证体系 | 买买买文档平台</title>
<meta name="description" content="买买买文档平台">
<link rel="preload" href="/assets/css/0.styles.ec3b592e.css" as="style"><link rel="preload" href="/assets/js/app.28eac0fc.js" as="script"><link rel="preload" href="/assets/js/2.673282d9.js" as="script"><link rel="preload" href="/assets/js/16.bf66f01a.js" as="script"><link rel="preload" href="/assets/js/3.7d476fe4.js" as="script"><link rel="prefetch" href="/assets/js/10.43d0e367.js"><link rel="prefetch" href="/assets/js/11.5a98e992.js"><link rel="prefetch" href="/assets/js/12.daf71de1.js"><link rel="prefetch" href="/assets/js/13.6df0e8ec.js"><link rel="prefetch" href="/assets/js/14.f489d9a7.js"><link rel="prefetch" href="/assets/js/15.ba3bb577.js"><link rel="prefetch" href="/assets/js/17.54384a80.js"><link rel="prefetch" href="/assets/js/18.4bd29acf.js"><link rel="prefetch" href="/assets/js/19.7c4c32d9.js"><link rel="prefetch" href="/assets/js/20.6379c462.js"><link rel="prefetch" href="/assets/js/21.8b1776f4.js"><link rel="prefetch" href="/assets/js/4.68306dfc.js"><link rel="prefetch" href="/assets/js/5.a2888059.js"><link rel="prefetch" href="/assets/js/6.2dabe488.js"><link rel="prefetch" href="/assets/js/7.d9ab7fce.js"><link rel="prefetch" href="/assets/js/8.c750db9f.js"><link rel="prefetch" href="/assets/js/9.e30ae98f.js">
<link rel="stylesheet" href="/assets/css/0.styles.ec3b592e.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="买买买文档平台" class="logo"> <span class="site-name can-hide">买买买文档平台</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">查询导览</a></div><div class="nav-item"><a href="/product/" class="nav-link">项目清单</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">IOS端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">安卓端</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">服务端</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">测试端</a></li></ul></div></div><div class="nav-item"><a href="/" class="nav-link">项目管控</a></div><div class="nav-item"><a href="/" class="nav-link">行政管理</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></div><div class="nav-item"><a href="/guide/" class="nav-link">文档写作平台入门介绍</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">查询导览</a></div><div class="nav-item"><a href="/product/" class="nav-link">项目清单</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">团队文档</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/team/frontend/" class="nav-link router-link-active">前端</a></li><li class="dropdown-item"><!----> <a href="/team/ios/" class="nav-link">IOS端</a></li><li class="dropdown-item"><!----> <a href="/team/android/" class="nav-link">安卓端</a></li><li class="dropdown-item"><!----> <a href="/team/backend/" class="nav-link">服务端</a></li><li class="dropdown-item"><!----> <a href="/team/quality/" class="nav-link">测试端</a></li></ul></div></div><div class="nav-item"><a href="/" class="nav-link">项目管控</a></div><div class="nav-item"><a href="/" class="nav-link">行政管理</a></div><div class="nav-item"><a href="/util/" class="nav-link">协作工具</a></div><div class="nav-item"><a href="/guide/" class="nav-link">文档写作平台入门介绍</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/team/frontend/" class="sidebar-link">前端 Frontend</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/#能力输出" class="sidebar-link">能力输出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目构建说明" class="sidebar-link">项目构建说明</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目环境要求" class="sidebar-link">项目环境要求</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#项目技术组成" class="sidebar-link">项目技术组成</a></li><li class="sidebar-sub-header"><a href="/team/frontend/#代码版本控制位置" class="sidebar-link">代码版本控制位置</a></li></ul></li><li><a href="/team/frontend/plugins.html" class="sidebar-link">功能插件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#拼图验证码插件" class="sidebar-link">拼图验证码插件</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#短信验证" class="sidebar-link">短信验证</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#侧边栏抽屉" class="sidebar-link">侧边栏抽屉</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#数据表格" class="sidebar-link">数据表格</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#数据下载-导出" class="sidebar-link">数据下载/导出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/plugins.html#选择器" class="sidebar-link">选择器</a></li></ul></li><li><a href="/team/frontend/components.html" class="sidebar-link">业务组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/components.html#数据导入导出" class="sidebar-link">数据导入导出</a></li><li class="sidebar-sub-header"><a href="/team/frontend/components.html#操作权限应用" class="sidebar-link">操作权限应用</a></li><li class="sidebar-sub-header"><a href="/team/frontend/components.html#选择器" class="sidebar-link">选择器</a></li></ul></li><li><a href="/team/frontend/http.html" class="sidebar-link">数据交互格式标准</a></li><li><a href="/team/frontend/framework.html" class="sidebar-link">系统框架</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#目录结构描述" class="sidebar-link">目录结构描述</a></li><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#自定义指令集-directive" class="sidebar-link">自定义指令集 directive</a></li><li class="sidebar-sub-header"><a href="/team/frontend/framework.html#表单校验规则" class="sidebar-link">表单校验规则</a></li></ul></li><li><a href="/team/frontend/web-open-platform.html" class="sidebar-link">网页能力开放平台</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/web-open-platform.html#app-内嵌网页" class="sidebar-link">App 内嵌网页</a></li><li class="sidebar-sub-header"><a href="/team/frontend/web-open-platform.html#独立功能页" class="sidebar-link">独立功能页</a></li></ul></li><li><a href="/team/frontend/quality.html" class="active sidebar-link">质量保证体系</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#团队应用现状" class="sidebar-link">团队应用现状</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#语法检查" class="sidebar-link">语法检查</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#单元测试" class="sidebar-link">单元测试</a></li><li class="sidebar-sub-header"><a href="/team/frontend/quality.html#端对端测试（end-to-end）" class="sidebar-link">端对端测试（End-to-end）</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="质量保证体系"><a href="#质量保证体系" aria-hidden="true" class="header-anchor">#</a> 质量保证体系</h1> <p>通过各类型自动化工具及测试用例对代码质量进行检测</p> <h2 id="团队应用现状"><a href="#团队应用现状" aria-hidden="true" class="header-anchor">#</a> 团队应用现状</h2> <ul class="contains-task-list"><li class="task-list-item"><input checked="checked" disabled="disabled" type="checkbox" class="task-list-item-checkbox"> 语法检查工具</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" class="task-list-item-checkbox"> 单元测试</li> <li class="task-list-item"><input disabled="disabled" type="checkbox" class="task-list-item-checkbox"> 端对端测试</li></ul> <p>目前所有自动化检查的方式仅为手动运行检测，后续将视情况切换为强制执行方式，检测不通过则不允许编译与发行</p> <h2 id="语法检查"><a href="#语法检查" aria-hidden="true" class="header-anchor">#</a> 语法检查</h2> <p>语法检查工具用于检查代码的语法是否正确、风格是否符合要求</p> <p>JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。</p> <h3 id="使用工具"><a href="#使用工具" aria-hidden="true" class="header-anchor">#</a> 使用工具</h3> <ul><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <p>目前使用规则为宽松模式，后续将逐步增加规则要求级别</p> <h3 id="运行方式"><a href="#运行方式" aria-hidden="true" class="header-anchor">#</a> 运行方式</h3> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run lint
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="检查结果要求"><a href="#检查结果要求" aria-hidden="true" class="header-anchor">#</a> 检查结果要求</h3> <p>ESlint 命令行输出</p> <blockquote><span class="badge tip" style="vertical-align:middle;" data-v-c13ee5b0>DONE</span> No lint errors found!
</blockquote> <p>代表了语法检查通过</p> <h2 id="单元测试"><a href="#单元测试" aria-hidden="true" class="header-anchor">#</a> 单元测试</h2> <p>单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作，可以理解为 <strong>白盒测试</strong> 的行为。</p> <h3 id="为什么要写单元测试？"><a href="#为什么要写单元测试？" aria-hidden="true" class="header-anchor">#</a> 为什么要写单元测试？</h3> <p>Web应用程序越来越复杂，这意味着有更多的可能出错。测试是帮助我们提高代码质量、降低错误的最好方法和工具之一</p> <ul><li>测试可以确保得到预期结果</li> <li>加快开发速度</li> <li>方便维护</li> <li>提供用法的文档</li></ul> <p>通过测试提供软件的质量，在开始的时候，可能会降低开发速度。但是从长期看，尤其是那种代码需要长期维护、不断开发的情况，测试会大大加快开发速度，减轻维护难度</p> <h3 id="使用功能库"><a href="#使用功能库" aria-hidden="true" class="header-anchor">#</a> 使用功能库</h3> <table><thead><tr><th>功能库</th> <th>作用</th></tr></thead> <tbody><tr><td><a href="https://mochajs.org/" target="_blank" rel="noopener noreferrer">Mocha<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td>单元测试引擎</td></tr> <tr><td><a href="https://www.chaijs.com/" target="_blank" rel="noopener noreferrer">Chai<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td>断言库</td></tr> <tr><td><a href="https://github.com/jsdom/jsdom" target="_blank" rel="noopener noreferrer">JsDom<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td>虚拟浏览器容器</td></tr> <tr><td><a href="https://vue-test-utils.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">@vue/test-utils<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td>vue 官方提供单元测试工具集</td></tr></tbody></table> <h3 id="运行方式-2"><a href="#运行方式-2" aria-hidden="true" class="header-anchor">#</a> 运行方式</h3> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run test:unit
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="适用范围"><a href="#适用范围" aria-hidden="true" class="header-anchor">#</a> 适用范围</h3> <p>很多时候，一些简单的功能场景，例如表单增、删、改、查等并没有编写单元测试的必要，况且编写单元测试需要不少时间成本，建议编写单元测试的场景如下</p> <ul><li>系统底层 API</li> <li>功能封装类</li> <li>功能组件</li> <li>关联计算</li> <li>业务集成联动</li></ul> <p>对于功能封装函数，更是应该增加多种测试用例进行功能覆盖，对于边界测试更是其中重中之重</p> <h2 id="端对端测试（end-to-end）"><a href="#端对端测试（end-to-end）" aria-hidden="true" class="header-anchor">#</a> 端对端测试（End-to-end）</h2> <p>端对端测试，简单地可以理解为站在用户角度的测试。站在用户的角度，他不需要知道软件的内部实现是怎么样的，只是使用即可；那么端对端测试模拟的就是用户的行为，只负责打开软件/浏览器，按序执行测试用例，并检查测试结果是否符合预期，它是 <strong>黑盒测试</strong> 的行为。</p> <h3 id="使用功能库-2"><a href="#使用功能库-2" aria-hidden="true" class="header-anchor">#</a> 使用功能库</h3> <ul><li><a href="https://www.cypress.io/" target="_blank" rel="noopener noreferrer">cypress<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="运行方式-3"><a href="#运行方式-3" aria-hidden="true" class="header-anchor">#</a> 运行方式</h3> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run test:e2e
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/team/frontend/web-open-platform.html" class="prev">
网页能力开放平台
</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.28eac0fc.js" defer></script><script src="/assets/js/2.673282d9.js" defer></script><script src="/assets/js/16.bf66f01a.js" defer></script><script src="/assets/js/3.7d476fe4.js" defer></script>
</body>
</html>