フロントエンドの リソース管理の話 TechFeed Summit#1 #techfeed #techfeedsummit
![karmaを使ったSPA向けE2Eテスト技法](https://cdn-ak-scissors.b.st-hatena.com/image/square/de42283a7b435bc687e0c90e46836583a9eeb480/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Ffefa1e3da28c4e14a26b52306fb438e2%2Fslide_0.jpg%3F7609929)
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
Karmaを使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。 ステップを通して少しづつ理解できるように執筆しました。 また、最後に重要だろうと思われる補足内容を記載しました。 Karmaの導入に一役買えれば幸いです。 テスト全体の流れについては以前書いた記事フロントエンドにテストを導入を参照してください。 Karmaとは ブラウザ上で 単体テストを実行するためのテストランナーです。 テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。 特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。 前提 Nodejs,npm,chromeが導入済みであること 流れ Karmaは4つの大きな機能(プラグイン)が存在します。 Step 3 〜 Step 6
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定JavaScriptTDDkarmacoveragebabel こちらの記事も合わせて参考にしてください。 - karma + babel + istanbul でフロントエンドのカバレッジを出す設定 2016年版 フロントエンドで es2015 かつ browserify でバンドルしつつ書きたいという需要はそこそこ高まっているんじゃないかと思いますが、そのセッティングで開発した場合に、テストカバレッジってどうやって出したらいいの?という情報があまり出回っていない気がしたので、自分なりにミニマルだと思う設定の例をまとめてみました。 なお、この記事では、テストランナーには、karma、バンドラには browserify を使う前提で書いています
JavaScriptの単体テスト環境構築のまとめ。 テストランナーとして「Karma」、テストフレームワーク・アサーションライブラリとして「Jasmine」を使う。 前提条件 下記が使用できること。 node npm 検証環境 MacOS X 10.9.2 package.json生成
自作しているWeb Audio APIのライブラリ XSound.jsでKarma + Jasmineによるユニットテストを始めたので, その備忘録として記載しておきます. Karma + Jasmineによるユニットテストの環境構築は前日の記事を参考にしてください. 1. Karma設定ファイルの生成 まず. テスト対象となるディレクトリで以下のコマンドを実行します. $ karma init コマンドを実行すると, 初期化ウィザードが出力されるので, 順に入力していきます. 1 – 1. テスティングフレームワークの選択 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine 1 – 2.
こんにちは丸山@h13i32maruです。 ES6でアプリコード、テストコードを書いてテストをするための環境を作ったので、そのメモです。 目標 ES6で書いたアプリコードとテストコードをnpm run testでテストする 最終的な環境 最終的にはこんな環境になった。リポジトリ ECMAScript6 Google Chrome Travis CI npm traceur-compiler mocha espower-cli karma karma-cli karma-mocha karma-chrome-launcher bower power-assert 今回はgrunt/gulpのようなビルドシステムは入れていない。npm runをタスク実行のフロントとすることでタスク自体はお手軽にshで書いた。shだとwindowsが厳しいけど、まあとりあえず自分の環境用だしいいかなと。 以降で
こんにちは、間藤です。 巷ではGoogle製MVC(MVW)フレームワークのAngularJSが流行っているようですが、残念ながらこれまでのところ業務で利用したことはありません。どんなものかくらいは押さえておこうと数か月前に公式サイトのチュートリアルをさらってみましたが、これがなんともよく出来ていて一人で関心していました。AngularJSチームは、テストにも非常に力を入れていて、ProtractorやKarmaといったテストツール(両方ともNode.jsのパッケージです)を開発しています。Protractorは、seleniumを利用してブラウザの自動テストをJasmineで書くことができます。(Mochaなど、別のテストフレームワークも利用できますが、デフォルトはJasmineだそうです。) で、今回はKarmaです。 KarmaとJasmineの関係性を整理しながら話をすすめられたら
This document discusses JavaScript test-driven development using Jasmine 2.0 and Karma. It introduces test-driven development principles and benefits, then covers the Karma test runner, PhantomJS browser, and features of the Jasmine testing framework including describe blocks, expectations, matchers, spies, and custom matchers. It also provides an example of mapping earthquakes and testing color-c
今まではなんとなくtestemを使っていたのですが、Karmaを検討する必要があったので試してみました。 サンプルの設定などは↓で見ることが出来ます。 https://github.com/koba04/backbone-boilerplate testem to karma これまでは業務でもtestemを使っていて、テストの数が少ないうち(1000以下)は問題なかったのですが、 段々テストが増えてくるとCPU100%になってテストが走るブラウザが固まることが増えてきて辛い感じになってきました。 そんなときに下記の記事を見て同じような現象だなと思いKarmaを試してみることにしました。 http://developer.cybozu.co.jp/tech/?p=7089 Installation インストールはnpm install karmaするだけです。 globalでkarmaのコ
最近のテスト環境 最近、ブログ書かないうちに、また、 自分のjs周りのテストやビルド環境が変わってきた。 具体的には、karmaとかgulpとかに変わった。 今日は、 その環境にしてどうだったか?とか、 設定ファイル(gulpfile)とか書いてみる。 去年と今年と 去年、勉強会等でyeomanとかgruntの話をしていて、このblogでもどこかに書いてた。 テストはmocha chaiが良いのかなーと思ってた。これもblog書いた。 所が、世の中どんどん変わっていく。 最近の環境 今はこんな感じ。 build tool gulp test jasmine2 sinon karma gulp vs Grunt gulpどうなんだろう?と思いながら色々試していくうちに、かなりしっくりきた。 stream baseで書き易いので、カスタマイズし易い。 gruntは、設定ファイルが何画面にも渡っ
Tools, patterns & Architecture By Enrique Amodeo / @eamodeorubio Enrique Amodeo (who is this guy?) Programming since 1984 Currently Software Engineer at SoundCloud Has loved JS since 2005 Test infected Enthusiast of the Agile/Lean way Follow me at @eamodeorubio This talk To cucumber or not to cucumber No need to test the UI? I want my UI tested Testing xBrowser issues Maintainable tests Conclusion
巷でAngularJSが盛り上がっているのを横目に、最近は黙々とKarmaを触っていました。Karmaはかなりよくできていて素晴らしいと思うんですが、具体的な使い方はあまり見ないので紹介したいと思います。 Karmaについて http://karma-runner.github.io/ Karmaはいわゆるリモートテストランナーです。リモートテストランナーというと、色んなブラウザでテストを走らせることが目的のように思えますが、そうではありません。Karmaは ワークフローの問題を解決すること に主眼が置かれています。なので、コマンドラインでテストを実行するほかに ファイルの変更監視 CIサーバとの連携 デバッグのサポート プラグインによる機能拡張 といった機能を持っています。実際に使ってみると、単にテストを実行してくれるだけでなく、ワークフローが劇的に変わることを実感できると思います。 K
$ karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to use Require.js ? This will add Require.js adapter into files. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to
Testaclarの後継?ことKarmaを使ってみたのでメモ。 ※ 現在のカバレッジ取得は karma で テストしながらカバレッジを取る - tetsunosukeのnotebook を参考にしてください。 Karma(元Testacular)を使って簡単にテストを実行しよう をほぼ参考にしました。 node.js をインストールしているマシンで c:\> npm install適切なフォルダで c:\work> karma initするといろいろ聞かれる。 テストフレームワークはJasmineを使うことにする。 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く