用AI赚第一桶💰低成本搭建一套AI赚钱工具,源码可二开。 广告
## ESLint ### 实验目的 1. 学会使用 ESLint 进行代码检查。 ### 操作步骤 (1)进入`demos/eslint-demo`目录,安装 ESLint。 ~~~ $ cd demos/eslint-demo $ npm install eslint --save-dev ~~~ (2)通常,我们会使用别人已经写好的代码检查规则,这里使用的是 Airbnb 公司的规则。所以,还要安装 ESLint 这个规则模块。 ~~~ $ npm install eslint-plugin-import eslint-config-airbnb-base --save-dev ~~~ 上面代码中,`eslint-plugin-import`是运行这个规则集必须的,所以也要一起安装。 (3)ESLint 的配置文件是`.eslintrc.json`,放置在项目的根目录下面。新建这个文件,在里面指定使用 Airbnb 的规则。 ~~~ { "extends": "airbnb-base" } ~~~ (4)打开项目的`package.json`,在`scripts`字段里面添加三个脚本。 ~~~ { // ... "scripts" : { "test": "echo \"Error: no test specified\" && exit 1", "lint": "eslint **/*.js", "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html", "lint-fix": "eslint --fix **/*.js" }, // ... } ~~~ 除了原有的`test`脚本,上面代码新定义了三个脚本,它们的作用如下。 * `lint`:检查所有`js`文件的代码 * `lint-html`:将检查结果写入一个网页文件`./reports/lint-results.html` * `lint-fix`:自动修正某些不规范的代码 (5)运行静态检查命令。 ~~~ $ npm run lint 1:5 error Unexpected var, use let or const instead no-var 2:5 warning Unexpected console statement no-console ✖ 2 problems (1 error, 1 warning) ~~~ 正常情况下,该命令会从`index.js`脚本里面,检查出来两个错误:一个是不应该使用`var`命令,另一个是不应该在生产环境使用`console.log`方法。 (6)修正错误。 ~~~ $ npm run lint-fix ~~~ 运行上面的命令以后,再查看`index.js`,可以看到`var x = 1;`被自动改成了`const x = 1;`。这样就消除了一个错误,但是还留下一个错误。 (7)修改规则。 由于我们想要允许使用`console.log`方法,因此可以修改`.eslintrc.json`,改变`no-console`规则。请将`.eslintrc.json`改成下面的样子。 ~~~ { "extends": "airbnb-base", "rules": { "no-console": "off" } } ~~~ 再运行`npm run lint`,就不会报错了。 ~~~ $ npm run lint ~~~ ## Mocha ### 实验目的 1. 学会使用 Mocha 进行单元测试。 ### 操作步骤 (1) 进入`demos/mocha-demo`目录,安装 Mocha 和 Chai。 ~~~ $ cd demos/mocha-demo $ npm install -D mocha $ npm install -D chai ~~~ (2)打开`add.js`文件,查看源码,我们要测试的就是这个脚本。 ~~~ function add(x, y) { return x + y; } module.exports = add; ~~~ (3)编写一个测试脚本`add.test.js`。 ~~~ var add = require('./add.js'); var expect = require('chai').expect; describe('加法函数的测试', function() { it('1 加 1 应该等于 2', function() { expect(add(1, 1)).to.be.equal(2); }); }); ~~~ 测试脚本与所要测试的源码脚本同名,但是后缀名为`.test.js`(表示测试)或者`.spec.js`(表示规格)。比如,`add.js`的测试脚本名字就是`add.test.js`。 测试脚本里面应该包括一个或多个`describe`块,每个`describe`块应该包括一个或多个`it`块。 `describe`块称为"测试套件"(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称("加法函数的测试"),第二个参数是一个实际执行的函数。 `it`块称为"测试用例"(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称("1 加 1 应该等于 2"),第二个参数是一个实际执行的函数。 上面的测试脚本里面,有一句断言。 ~~~ expect(add(1, 1)).to.be.equal(2); ~~~ 所谓"断言",就是判断源码的实际执行结果与预期结果是否一致,如果不一致就抛出一个错误。上面这句断言的意思是,调用`add(1, 1)`,结果应该等于`2`。 所有的测试用例(`it`块)都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现,Mocha本身不带断言库,所以必须先引入断言库。 ~~~ var expect = require('chai').expect; ~~~ 断言库有很多种,Mocha并不限制使用哪一种。上面代码引入的断言库是`chai`,并且指定使用它的`expect`断言风格。 (4)打开`package.json`文件,改写`scripts`字段的`test`脚本。 ~~~ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, // 改成 "scripts": { "test": "mocha *.test.js" }, ~~~ (5)命令行下,执行下面的命令,运行测试用例。 ~~~ $ npm test ~~~ 正常情况下,命令行会有提示,表示测试用例已经通过了。 ### 练习 1. 请在`add.test.js`里面添加一个测试用例,测试`3`加上`-3`,`add`函数应该返回`0`。 ## Nightmare ### 实验目的 1. 学会使用 Nightmare 完成功能测试。 ### 操作步骤 (1)进入`./demos/nightmare-demo`目录,安装依赖。 ~~~ $ cd demos/nightmare-demo # Linux & Mac $ env ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm install # Windows $ set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ $ npm install ~~~ 注意,Nightmare 会先安装 Electron,而 Electron 的安装需要下载境外的包,有时会连不上,导致安装失败。所以,这里先设置了环境变量,指定使用国内的 Electron 源,然后才执行安装命令。 (2)查看一下浏览器自动化脚本`taobao.test.js`。 ~~~ var Nightmare = require('nightmare'); var nightmare = Nightmare({ show: true }); ~~~ 上面代码表示新建一个 Nightmare 实例,并且运行功能中,自动打开浏览器窗口。 ~~~ nightmare .goto('https://www.taobao.com/') .type('#q', '电视机') .click('form[action*="/search"] [type=submit]') .wait('#spulist-grid') .evaluate(function () { return document.querySelector('#spulist-grid .grid-item .info-cont') .textContent.trim(); }) .end() ~~~ 上面代码表示,打开淘宝首页,在搜索框键入`电视机`,点击”搜索“按钮,等待`#spulist-grid`元素出现,在页面内注入(`evaluate`)代码,将执行结果返回。 ~~~ .then(function (result) { console.log(result); }) .catch(function (error) { console.error('Search failed:', error); }); ~~~ Nightmare 会返回一个 Promise 对象,`then`方法指定操作成功的回调函数,`catch`方法指定操作失败的回调函数。 (3)命令行下运行这个示例脚本。 ~~~ $ node taobao.test.js ~~~ 正常情况下,运行结束后,命令行会显示淘宝”电视机“搜索结果的第一项。 (4)浏览器打开`index.html`文件,这是 React 练习时做过的一个例子,点击`Hello World`,标题会变成`Hello Clicked`。我们就要编写测试脚本,测试这个功能。 (5)打开测试脚本`test.js`。 ~~~ var Nightmare = require('nightmare'); var expect = require('chai').expect; var fork = require('child_process').fork; describe('test index.html', function() { var child; before(function (done) { child = fork('./server.js'); child.on('message', function (msg) { if (msg === 'listening') { done(); } }); }); after(function () { child.kill(); }); ~~~ 上面代码中,`before`和`after`是 Mocha 提供的两个钩子方法,分别在所有测试开始前和结束后运行。这里,我们在`before`方法里面,新建一个子进程,用来启动 HTTP 服务器;测试结束后,再杀掉这个子进程。 注意,`before`方法的参数是一个函数,它接受`done`作为参数。`done`是 Mocha 提供的一个函数,用来表示异步操作完成。如果不调用`done`,Mocha 就会认为异步操作没有结束,一直停在这一步,不往下执行,从而导致超时错误。 子进程脚本`server.js`的代码非常简单,只有四行。 ~~~ var httpServer = require('http-server'); var server = httpServer.createServer(); server.listen(8080); process.send('listening'); ~~~ 上面代码中,我们在`8080`端口启动 HTTP 服务器,然后向父进程发消息,表示启动完成。 (6)真正的自动化测试脚本如下。 ~~~ it('点击后标题改变', function(done) { var nightmare = Nightmare({ show: true }); nightmare .goto('http://127.0.0.1:8080/index.html') .click('h1') .wait(1000) .evaluate(function () { return document.querySelector('h1').textContent; }) .end() .then(function(text) { expect(text).to.equal('Hello Clicked'); done(); }) }); ~~~ 上面代码中,首先打开网页,点击`h1`元素,然后等待 1 秒钟,注入脚本获取`h1`元素的文本内容。接着,在`then`方法里面,做一个断言,判断获取的文本是否正确。 (7)运行这个测试脚本。 ~~~ $ npm test ~~~ 如果一切正常,命令行下会显示测试通过。 ### 练习 1. 请写一个测试用例,验证`<h1>`的字体颜色是红色。(提示:可以使用`Window.getComputedStyle()`方法,获取元素的最终样式。) ## Travis CI ### 实验目的 1. 了解持续集成的做法,学会使用 Travis CI。 ### 操作步骤 (1)注册 [Github](https://github.com/) 的账户。如果你已经注册过,跳过这一步。 (2)访问这个代码库[`github.com/ruanyf/travis-ci-demo`](https://github.com/ruanyf/travis-ci-demo),点击右上角的`Fork`按钮,将它克隆到你自己的空间里面。 (3)将你`fork`的代码库,克隆到本地。注意,要将下面网址之中的`[your_username]`改成你的 Github 用户名。 ~~~ // Linux & Mac $ git clone git@github.com:[your_username]/travis-ci-demo.git // Windows $ git clone https://github.com:[your_username]/travis-ci-demo ~~~ (4)使用你的 Github 账户,登录 [Travis CI](https://travis-ci.org/auth) 的首页。然后,访问 [Profile](https://travis-ci.org/profile) 页面,选定`travis-ci-demo`代码库运行自动构建。 (5)回到命令行,进入你本地的`travis-ci-demo`目录,切换到`demo01`分支。 ~~~ $ cd travis-ci-demo $ git checkout demo01 ~~~ 项目根目录下面有一个`.travis.yml`文件,这是 Travis CI 的配置文件。如果没有这个文件,就不会触发 Travis CI 的自动构建。打开看一下。 ~~~ language: node_js node_js: - "node" ~~~ 上面代码指定,使用 Node 完成构建,版本是最新的稳定版。 指定 Node 的版本号也是可以的。 ~~~ language: node_js node_js: - "4.1" ~~~ 上面代码指定使用 Node 4.1 版。 (6)Travis CI 默认依次执行以下九个脚本。 * `before_install` * `install` * `before_script` * `script` * `after_success` 或者 `after_failure` * `after_script` * `before_deploy`(可选) * `deploy`(可选) * `after_deploy`(可选) 用户需要用到哪个脚本,就需要提供该脚本的内容。 对于 Node 项目,以下两个脚本有默认值,可以不用自己设定。 ~~~ "install": "npm install", "script": "npm test" ~~~ (7)打开当前分支的`package.json`,可以发现它的`test`脚本是一个`lint`命令。 ~~~ "scripts": { "test": "jshint hello.js" }, ~~~ (8)在项目根目录下,新建一个新文件`NewUser.txt`,内容是你的用户名。提交这个文件,就会触发 Travis CI 的自动构建。 ~~~ $ git add -A $ git commit -m 'Testing Travis CI' $ git push ~~~ (9)等到 Travis CI 完成自动构建,到页面上[检查](https://travis-ci.org/repositories)构建结果。 (10)切换到`demo02`分支,打开`package.json`,可以看到`test`脚本,现在需要完成两步操作了。 ~~~ "scripts": { "lint": "jshint hello.js hello.test.js", "test": "npm run lint && mocha hello.test.js" }, ~~~ (11)重复上面第 8 步和第 9 步。 ### 练习 1. 修改`hello.js`,让其输出`Hello Node`。并修改测试用例`hello.test.js`,使之能够通过 Travis CI 的自动构建。