zoukankan      html  css  js  c++  java
  • express-4 质量保证(1)

    QA###

    在Web开发中,质量可以分解为四个维度:

    • 到达率:
      到达率是指产品的市场普及程度,即查看网站或使用服务的人数。到达率和盈利能力是正相关关系:访问网站的人越多,购买产品或服务的人就越多。从开发的角度来看,搜索引擎优化(SEO)对到达率的影响最大,所以我们会在QA方案里包含SEO。

    • 功能
      人们一旦访问了你的网站或使用了你的服务,能否把用户留下很大程度上取决于网站功能的质量:一个能像广告宣传那样工作的网站更有可能吸引回头客。与其他几个维度不同,功能测试一般都可以自动执行。

    • 可用性
      功能关心的是功能的正确性,而可用性评估的是人机交互(HCI)。根本问题是:“这个功能是以对目标受众有用的方式交付的吗?”这个问题经常被换成“它易用吗?”,尽管追求易用性经常跟灵活性或能力是相对的:程序员眼中的“容易”可能跟不懂技术的用户眼中的“容易”不一样。换句话说,评估可用性时你必须考虑目标受众。因为可用性评估的根本输入是用户,所以可用性评估一般无法自动完成。然而,你的QA方案中应该包含用户测试。

    • 审美
      审美是四个维度中最主观的,因此也是跟开发最不相关的一个维度。尽管跟网站审美相关的开发问题没有几个,但QA方案中还是应该包括网站审美的常规评审。把网站展示给有代表性的样本受众,看他们是否觉得已经过时,或者是不是没能激起你所期望的响应。记住,审美具有时间敏感性(审美标准会随着时间而发生变化),并且因人而异(受到某一受众喜爱的东西可能完全激不起其他受众的兴趣)。

    逻辑与展示###

    从广义上来讲,网站上有两个“领域”:逻辑(业务逻辑)和表示。

    可以认为网站的逻辑存在于纯粹的认知领域; 逻辑域中的事情应该尽可能简单清晰,而表示域复杂还是简单则视需要而定。表示域还是可用性和审美问题要关注的课题,而业务域则不是

    测试的类型###

    单元测试和集成测试(一般认为“系统测试”属于集成测试)

    • 单元测试的粒度非常细,是对单个组件进行测试以确保其功能正确
    • 集成测试是对多个组件甚至整个系统之间的交互进行测试

    一般而言,单元测试在测试逻辑时更实用,也更恰当。集成测试则在两个领域中都有用。

    QA技术概览###

    • 页面测试
      用来测试页面的表示和前端功能。这同时涉及单元测试和集成测试。我们会用Mocha进行页面测试。

    • 跨页测试
      对从一个页面转到另一个页面的功能的测试。比如电子商务网站上的结账功能,通常要跨越多个页面。因为这种测试会涉及多个组件,所以一般被当作集成测试。这个测试用的是Zombie.js。

    • 逻辑测试
      逻辑测试会对逻辑域进行单元和集成测试。它只会测试JavaScript,跟所有表示功能分开。

    • 去毛
      去毛不是要找错误,而是要找潜在的错误。去毛的一般概念是找出可能有错误的区域,或者可能在将来导致错误发生的问题代码。我们会用JSHint做去毛。

    • 链接检查
      对简单的项目做链接检查看起来可能没有必要,但简单项目也会发展成复杂项目,破损的链接也将会出现。越早把链接检查放到QA过程里越好。链接检查属于单元测试(链接有效或者无效)。我们会用LinkChecker做链接检查。

    页面测试###

    对于页面测试,建议把测试真正嵌入到页面中。这样做的优点是在做一个页面时,在浏览器中一加载页面就可以马上发现所有错误。

    • 将Mocha测试框架,这个包添加到项目中: npm install --save-dev mocha

    注意,这里用的是--save-dev而不是--save,这是告诉npm要把这个包放在开发依赖项中,不要放在运行时依赖项里。这样当部署网站的现场实例时,可以减少项目的依赖项。

    • 因为Mocha要在浏览器中运行,所以我们要把Mocha资源放在public目录下,以便让客户端访问到。我们会把这些资源放在子目录public/vendor中:
    mkdir public/vendor
    cp node_modules/mocha/mocha.js public/vendor
    cp node_modules/mocha/mocha.css public/vendor
    
    • 测试通常需要一个assert(或expect)函数。Node框架中有这个函数,但浏览器中没有,所以我们要用Chai断言库:
    npm install --save-dev chai
    cp node_modules/chai/chai.js public/vendor
    
    • 我们不希望测试一直运行。默认情况下测试应该是禁用的,但应该非常容易启用。为了满足这两个目标,我们准备用一个URL参数来打开测试; 访问http://localhost:3000?test=1将会加载包含测试的首页。

    准备用一些中间件来检测查询字符串中的test=1。它必须出现在我们定义的所有路由之前:

    app.use(function(req, res, next) {
      res.locals.showTests = app.get('env') !== 'production' && req.query.test === '1';
      next();
    });
    
    // 路由放在这里
    

    如果test=1出现在任何页面的查询字符串中(并且不是运行在生产服务器上),属性res.locals.showTests就会被设为true。res.locals对象是要传给视图的上下文的一部分

    • 修改views/layouts/main.handlebars,有条件地引入测试框架
      修改部分:这里引入了jquery
    <head>
        <title>Meadowlark Travel</title>
        {{#if showTests}}
            <link rel="stylesheet" href="/vendor/mocha.css"> 
        {{/if}}
        <script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
    </head>
    

    结束标签之前:

     {{#if showTests}}
          <div id="mocha"></div>
          <script src="/vendor/mocha.js"></script> 
          <script src="/vendor/chai.js"></script> 
          <script>
              mocha.ui('tdd');
              var assert = chai.assert; 
          </script>
          <script src="/qa/tests-global.js"></script>
          {{#if pageTestScript}}
            <script src="{{pageTestScript}}"></script>
          {{/if}}
          <script>mocha.run();</script> 
        {{/if}}
    

    上面还引入了/qa/global-tests.js脚本,这是每个页面上都要运行的测试; 我们会有选择地链接每个页面特有的测试,这样就可以针对不同的页面做不同的测试。我们先从全局测试开始,然后再增加针对各个页面的测试。我们先从单一的、简单的测试开始,确保页面具有有效的标题。

    • 创建文件tests-global.js:
    suite('Global Tests', function(){
        test('page has a valid title', function(){
            assert(document.title && document.title.match(/S/) &&
                          document.title.toUpperCase() !== 'TODO');
        });
    });
    

    Mocha支持多种“界面”来控制测试的风格。默认界面是行为驱动开发(BDD),它让你以行为的方式思考。在BDD中,你描述组件和它们的行为,然后用测试去验证这些行为。然而,我发现这些测试经常不适合这一模型,然后BDD语言看起来就显得很奇怪。测试驱动开发(TDD)更具可行性,你描述的是测试集和其中的测试。你可以使用两种界面进行自己的测试,但会造成配置上的困难。因此我在本书中坚持使用TDD。如果你喜欢BDD,或者BDD和TDD混合的风格,当然也可以。

    • 运行网站,然后访问http://localhost:3000/?test=1;

    接下来添加针对页面的测试。比如想确保关于页面上总是有一个指向联系我们页面的链接。

    • 创建一个public/qa/tests-about.js文件:
    suite('"About" Page Tests', function(){
      test('page should contain link to contact page', function(){
            assert($('a[href="/contact"]').length);
      }); 
    });
    
    • 还要做最后一件事:在路由中指明视图应该使用哪个页面测试文件。在meadowlark.js中修改关于页面的路由:
    app.get('/about', function(req, res) { 
        res.render('about', {
            fortune: fortune.getFortune(),
            pageTestScript: '/qa/tests-about.js' 
        });
    });
    
  • 相关阅读:
    python安装requests
    Python多线程基本操作
    Python连接mysql基本操作
    Python中文问题
    Python 3.6.5 导入pymysql模块出错:No module named 'pymysql'
    python安装pyMysql
    HTML, CSS. JS的各种奇葩bug
    css移动元素的几种方法
    三张图看懂 clientheight、offsetheight、scrollheight
    伪类和伪元素的区别
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4279954.html
Copyright © 2011-2022 走看看