?????Щ???????????????????ò?????????????????Щ????????????????????????°???
??????????????????????? down ?????????????????廹??????????? macha + chai ?????????
???????????????儷???????????????????????д?? mocha ???????????????дд???? demo??
???????????μ??????????????????????????????????????????????????????? mocha ???????????漰?????????????????????????????????? iframe ?????????棬????? contentWindow ??????? iframe ????????????Щ??????????????Щ????????????ж??????仯????з?????
???????????????? server???????????????????????????????????????????????????????????????????????????????
???????????????????????????????????? tap ????????????????????? Element ???????????????????? tap ??????????? touchend ???????????e??? tap ????????????????? touchstart ??????????????????ж???
??????????????????????????????????????????????????
?????? mocha ??? ava
???????????????????? jsdom ????????????
?????????????? mocha + jsdom ??????????????η????mocha ??????????????????????????????
?????????????????????????????????????? jquery ???????????????????????????????????????飬mocha ?????????????????????????????? mocha ?????????????Σ????????????? done ???????????????????????
???????????????? github ????????Щ??????п????? ava ????????????????????????? tj ???????????????????????????????????
?????????????????????????????????濪???????????Ρ?
????????? demo
???????????? demo ????? github ???????? https://github.com/AngusFu/jsdom-ava-demo ?????????????????????????????????
????????? demo????????????????? js???????????? html ?????
???????????
??????????????????????????????????? div?????????? addEventListener ???? click ???????????????????任??????????????????????????????????????? jsdom ????????? css ??????????????????????css ????????仯?????????????????????????????????????????
??????Щ???????????????з??????????????????????????????????????飬jsdom + ava ?????????????????????ò??С??????????????????????????????
??????????????? babel 6 ??????飬?к????
????jsdom ?????????????????????
??????????? jsdom ?? jQueryify ?????????????? jQuery ?????????????????????
????ava ?????????????????
?????????????
???????? html ???￡?
????<style>
????div {width: 500px; height: 500px; background-color: red;}
????</style>
????<div id="div"></div>
????<script>
????document.getElementById("div").onclick = function (){
????this.style.backgroundColor = 'green';
????};
????</script>
?????????????
????????????????????
?????????? jsdom??????????
????$ npm install --save jsdom
?????????? ava?????????????飺
????$ npm install -g ava
????$ npm install --save ava
???????????????? npm test ????????????????
????$ ava --init
????????е??????? ava ????????? package.json ?е? scripts ????У??????????? npm test ???????????????????????????????????????????? ava xx.js ???????
??????д????
?????????????????????????????????
????import fs from 'fs';
????import { jsdom } from 'jsdom';
????import test from 'ava';
????ava ???????????? babel 6 ??????????б?????????????????????generator??async & await ???????????eɡ??????????????????????????????????????????????????????????????????????
???????? fs ???????????? html ?????
???????? jsdom ???÷???????????ο? https://github.com/tmpvar/jsdom ???????????????????????????????? require('jsdom').jsdom ???????????????????????????????????? window ???????￡?
????var window = jsdom(fs.readFileSync('./test.html')).defaultView;
?????????????????? jsdom.jQueryify ???????????? jQuery?????????????????????????????????????????? Promise????????????????? async & await ????
????function jsdomTest(){
????return new Promise(function (resolve?? reject){
????jsdom.jQueryify(window?? "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"?? function (){
????resolve(window.jQuery);
????});
????});
????}
????ava ?????????д??????????????????
????test('???????'?? async t => {
????var $ = await jsdomTest();
????var $div = $('#div');
????var colorBeforeClick?? colorAfterClick;
????console.log(colorBeforeClick = $div.css('background-color'));
????$div.trigger('click');
????console.log(colorAfterClick = $div.css('background-color'));
????t.not(colorBeforeClick?? colorAfterClick?? 'bgColor changed');
????});