puppeteer + express + mocha で快適 TDD している話 - ジンジャー研究室
TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい
ヘッドレスブラウザPhantomJSを試す - CLOVER🍀
少し前にMochaをブラウザ上で動かしてみたのですが、この時はFirefoxを使っていました。 とはいえ、ブラウザを起動して確認するだけでなく、ヘッドレスブラウザというものも試してみたくて、PhantomJSを使ってみることにしました。 PhantomJS - Scriptable Headless Browser WebKitを使っているそうです。 とりあえず、使ってみる インストール まずは、ダウンロードページからPhantomJSを取得します。 Download PhantomJS 今回のPhantomJSのバージョンは、2.1.1です。アーカイブを展開したら、パスを通しておきます。 $ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 $ tar -jx
Karma, Mocha, Chaiを使ってTypeScriptでのテスト環境を構築する - $shibayu36->blog;
最近はTypeScriptを使ってフロントエンドの開発をしている。 JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog; gulp + browserify + tsifyを利用してTypeScriptコンパイル環境を作る - $shibayu36->blog; typingsを使ってnpmモジュールをTypeScriptで利用する - $shibayu36->blog; 以上の記事に引き続き、次はTypeScriptでユニットテストをするためのシンプルな環境を構築してみた。 今回のサンプルコードは https://github.com/shibayu36/typescript-project-sample/tree/967c9d74fd3d844127a4352f19a0cc31b7a0690d においてあるので、見ながら確認しても
Reactjs のテストを karma + karma-fixture + mocha + power-assert で書いてみる - Qiita
// Karma configuration // Generated on Mon Dec 21 2015 12:22:32 GMT+0900 (JST) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['mocha', 'browserify'], // list of files / patterns to load in the browser f
mocha-phantomjsでクライアントサイドJSのテスト自動化 - DMM.comラボエンジニアブログ
こんにちはDMM.comラボCTO室の加嵜です。 記念すべきDMMエンジニアブログの第1回目ということで、今回は、mochaというJavaScriptのテスティングフレームワークと、mocha-phantomjsを使って、クライアントサイドのJavaScriptテストの自動化を紹介します。 mochaでテスト駆動開発 まず、mochaを使ってクライアントサイトJavaScriptの簡単なテスト駆動開発を実践してみます。 今回使用するのは、mocha本体と、mochaでアサーションを記述するためのchaiというライブラリです。 mocha http://mochajs.org/ chai http://chaijs.com/ 事前準備 事前準備として、htmlで読み込むmocha.js, mocha.css, chai.jsファイルを入手します。npm, bower等を使って自動でダウンロー
『コードのバグはコードで見つけよう！』
こんにちは。 アメーバピグでNode.jsを使って開発をしている中村と申します。 平日はエンジニア、土日は主夫として働いています。 さて、早速ですが、この記事ではESLintを使って、JavaScriptのソースコードのバグを発見する手順をご紹介したいと思います。 ESLintとは ESLintはNicholas C. Zakas氏が中心となって開発しているJavaScriptのLintツールです。 JavaScriptのLintツールといえば、最近ではJSHintが定番だと思います。 ESLintはJSHint同等の機能を持つ他、解析ルールが完全にプラガブルになっており、独自ルールを自由に追加できるという特徴があります。 例えば、JSHintでいうところの、strict（strict modeで実行されるかをチェック）というオプションは下記のURLのように個別のルールとして実装されていま
Test::Mocha::PhantomJSを書いた - kazuhoのメモ置き場
Test::Mocha::PhantomJSというPerlモジュールをリリースしました。 一言でいうと、Perlで書いたサーバサイドロジックを、PhantomJS上で動くMochaのテストコードで検証するためのモジュールです。 具体的な手順としては、 t/ 以下に次のようなテストコードを書いて Mochaのテストが含まれるHTMLを返すようにする の２点さえやってしまえば、あとはmake testするだけで、PhantomJSのヘッドレスウェブブラウザ上でテストが動いて集計されます。 use Test::Mocha::PhantomJS; test_mocha_phantomjs( server => sub { my $port = shift; # サーバを localhost:$port で起動 ... } ); はい。End-to-end テストを書く際に便利ですね。 実際のテスト
Setting up Mocha & JSCoverage
Mar 13, 2012 Since publishing my article on Javascript Testing with Mocha and follow-up on using JSCoverage, I’ve had some people asking questions about how to get it all set up. I’m going to go through a brief guide on how to take a project with tests in Mocha, and get coverage running on it. Here’s a motivational sample of the output we’ll be getting to: Step 1: Installing JSCoverage and Mocha I
require.js 環境で mocha + expect + testem を使った JavaScript テスト - naoyaのはてなダイアリー
先日書いた自分用アプリケーションのひな形 http://d.hatena.ne.jp/naoya/20130503/1367581629 http://d.hatena.ne.jp/naoya/20130504/1367640512 これに、JavaScript のテスト環境も追加したい。 結論からいくと、フレームワークには mocha + expect、ランナーは testem を使うことにした。ついでにテストダブルライブラリとして Sinon.js も有効にした。 ちなみに今回の文脈は End to End のテストではなくてユニットテスト周りのおはなしです。 mocha + expect JavaScript のこの辺のテスト周りは今もいろいろなツールの整備が進んでいて、今回採用した以外にも Jasmin や QUnit そのほか色んな物がある。昨今の状況に関しては 先日の HTML
testem + mocha on Travis-CI - ブラウザでのテストを自動化する - 四角革命前夜
Travis-CIでブラウザのテストできないのかなー、できないよなーと思いつつ、いろいろ探してみたら出来るような事を知り、今ホット（なのかな？）なtestemを使う事でmochaでのテストも実行できるらしい！という事を知ったので試してみました。 準備 package.jsonの記述を変更します。 package.json "scripts": { "pretest": "./node_modules/.bin/bower install", "test": "./node_modules/.bin/mocha && ./node_modules/.bin/testem ci" }, "devDependencies": { "bower": "~0.8", "chai": "~1.5", "mocha": "~1.8", "testem": "~0.2" } testemが必要なのでtes
mochaとphantomJSとtravis-ciでフロントエンドJavaScriptのテスト - Webtech Walker
東京Node学園祭2012 アドベントカレンダーの9日目です。Node.jsとほとんど関係ないうえに内容がけっこう薄い感じなった気がするんですけど気にせずいこうと思います。 フロントエンドのJavaScriptをテストするとき最近はいつもmochaを使ってるんですが、やはりJenkinsとかtravis-ciを使って自動テストもしたいと思って試してみました。 hokaccha/mocha-phantom-travis-test ここではよくあるjQueryで画像のロールオーバーをするというプラグインを作ってそのライブラリに対してテストを書いています。ソースコードはこんな感じです。 $.fn.rollover = function() { return this.each(function() { var $img = $(this); var src = $img.attr('src');
非同期と next() - Block Rockin’ Codes
intro この記事は、 東京Node学園祭2012 アドベントカレンダー : ATND の 3 日目の記事です。 (日付変更線は、はてな時間を採用しております。。 ごめんなさい m(__)m) 非同期と next() next() とは、 Express や Connect 、 Mocha 、 そして一部のフロー制御ライブラリで使われている、 関数のことをさしています。 今回は、これがどういう機能で、どういうふうに実装されているのかをスクリーンキャストで紹介します。 vimeo next() at async flow control from Jxck on Vimeo. まとめ 今回書いたコードはこちらです。 https://gist.github.com/3906371 実装方法は色々あるかと思いますが、だいたいこんな感じで実装できて、使うことができる、 わかってしまえばそんなに難
『JavaScriptのテスト手法』
みなさんはじめまして。 2011年11月に中途で入社し、現在はAmeba事業本部でスマートフォン版Ameba（通称デカグラフ）の開発をしている川口（facebook）と申します。 JavaScriptにおけるテストフレームワーク JavaScriptにおけるテストフレームワークとしては、有名なもので現在以下のものがあります。 ●JsUnit Javaのテストフレームワークとして有名な「JUnit」を参考に作られたテストフレームワークです。 ●QUnit もともとjQueryをテストするために開発されたフレームワークですが、現在ではjQueryへの依存が無くなっているためjQuery以外のライブラリを使ったプロジェクトでも使用できます。 ●Jasmine
mocha と Jenkins で Node.js の CI 環境を構築する - hakobera's blog
最近、mocha をつかってテストを書くのが楽しくなってきました。でも、テストの数が増えてくるとローカルでの実行だけでなく、CI 環境が欲しくなりますよね。github にあげられるようなプロジェクトだったら、Travis CI も良いですが、実際に仕事で使うとなると、既存の Jenkins と組み合わせてやる必要ができてきたので、実際にやってみました。 基本的な手順は以下の通りです。 mocha でテスト結果を TAP 形式でファイルに出力する 出力したファイルを Jenkins の TAP Plugin に読み込ませる 簡単ですね。 実際にやってみた というわけで、以下のような最小構成で試してみます。 myapp |- lib | |- calc.js | |- test | |- calc.test.js | |- package.jsonここには書いていませんが、実際は git で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RequireJSとか - JavaScript Advent Calendar 2014
javascript におけるユニットテストについて (2013/01)