【Angular6】Jasmine + Karma で単体テストを書いてみた | DevelopersIO
どうも、福岡のmeです。 今回はAngular6で実装したSPAの単体テストをJasmine + Karma を使って書いてみたのでまとめました。 今回やること Jasmineというテストフレームワークを用いて記述したテストケースを Karmaというタスクランナーでコードが書き換わるたびに実行するようにします。 サンプルプロジェクトの作成 Angular CLIから新規プロジェクトを作成します。 ng new 今回使用したAngular環境は以下の通りです。 ng -v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___
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 においてあるので、見ながら確認しても
tmuxを使って同一コンソール内で複数のdocker runを行ったメモ。webpack , karma, gulp + express + socket.io , mongodb. - Qiita
#prefix C-aに変更する set -g prefix C-a # C-bのキーバインドを解除する unbind C-b # キーストロークのディレイを減らす set -sg escape-time 1 # ウィンドウのインデックスを1から始める set -g base-index 1 # ペインのインデックスを1から始める setw -g pane-base-index 1 # 設定ファイルをリロードする bind r source-file ~/.tmux.conf \; display "Reloaded!" # C-a*2でtmux内のプログラムにC-aを送る bind C-a send-prefix # | でペインを縦に分割する bind | split-window -h # - でペインを横に分割する bind - split-window -v # Vimのキーバイ
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
Karma + Coveralls で行う webpack プロジェクトのテスト - SmartNews Engineering Blog
はじめに みなさまはじめまして、SmartNews の井口（いのくち; @kainoque）と申します。主にサーバサイドおよび各種管理コンソールの開発を行っています。弊社における開発案件はネイティブアプリおよびそのバックエンドである各種 API サーバに関するものが大半です。一方で、社内・社外向けの各種管理画面については、Web フロントエンドに関する開発も行っています。今回は、フロントエンド開発の話題として、掲題のとおり、webpackプロジェクトのテストにまつわるあれこれをお話します。 TL;DR SmartNewsでは Web フロントエンド開発においても品質向上に取り組んでいます Karma を用い webpackプロジェクトをテストしています コードのカバレッジもばっちり取得しています Coverallsを使ってカバレッジを共有、管理しています 背景 筆者は、SmartNews
React+ReduxのコンポーネントをKarma+Jasmineでユニットテストする - Qiita
function increment() { return { type : COUNTER_INCREMENT }; } export class Counter extends React.Component { static propTypes = { dispatch: React.PropTypes.func.isRequired, counter: React.PropTypes.number, } constructor() { super(); } render() { return ( <div className='container text-center'> <h1>Sample Counter</h1> <h2>{this.props.counter}</h2> <button onClick={this.props.dispatch(increment)}> I
フロントエンドのテストを Karma + Docker を使って実行する | スマホ神 – JavaScript 受託開発 –
テストの実行環境はDockerで作ると、環境をアレコレする必要がなくて便利です。 フロントエンドのテスト環境も簡単に建てられて、簡単に捨てられると便利なはずです。 というわけで Docker を使って Karma の環境を構築してみます。 必要なもの docker docker-compose npm Dockerfile まずは Dockerfile を用意します。コンテナ内で必要なのは xvfb chrome firefox node npm karma あたりです。 FROM ubuntu:14.04 RUN apt-get install -y wget && \ wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \ echo "deb http://dl.go
How to implement testing + code coverage on React with Karma, Babel, and Webpack
I’m writing this article because of the difficulties I faced when I was tasked with setting up testing on my companies React powered UI. If you’re looking for a step by step process to getting your testing running using Karma, and Karma’s coverage plugin, with Babel and Webpack all working nicely together and returning production code coverage metrics (rather than transpiled code), then read on. O
Karma for JavaScript test runner
今まではなんとなく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のコ
gitでPushする度にKarma-CoverageのCoverageの値をJenkinsで計測し、その増減をIdobataに投稿する - Qiita
reporters: ['spec', 'coverage', 'junit'], coverageReporter: { dir: 'coverage/', reporters: [ { type: 'html' }, { type: 'cobertura', file: 'clover.xml' } ] }, Jenkinsの設定 ruby をInstallしておく このタスクを実行するノードに ruby をInstallしておいてください。後述のスクリプト内で使用しています。 普通にテストを実行できるようにしておく これはプロジェクト依存になるので割愛します。Jenkinsでテストが実行できるように設定しましょう。 npm や grunt 系は比較的簡単に設定できるのでそれほど悩まないでしょう。 PluginのInstall cobertura形式のカバレッジを読み込めるように以下の
kintoneのJSユニットテスト最新事情 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チームの天野 (@ama_ch) です。 最近はJavaScriptのテストツールが著しく進歩し、日々新しいツールが登場しています。kintoneの開発もこれらのツールによって支えられています。 kintone開発チームでは、昨年末頃からテスト環境の改善に取り組み、モダンなツールセットに乗り換えました。今回は、現在のkintoneのJSユニットテスト環境について紹介します。 kintoneとJSユニットテスト 数年前からユニットテストと自動化の仕組みはあったのですが、ごく一部のユーティリティ関数に書かれているのみで、普段の開発には活用されていませんでした。 ここ1,2年ほどで テストスケルトンを生成するジェネレータスクリプトを作る テストの書き方をまとめたドキュメントを用意する MTGで「ユニットテストを書かなくていいのは小学生まで」などと煽る コードレビュー
TypeScript + KarmaをWebStormでデバッグする - Qiita
準備 上記レポジトリーをクローンしてWebStorm 8で読み込みます。 npm install と grunt setup も忘れずに。 新しめのKarmaのプラグインが入っていればIntelliJでもいける気がしますが試してないので分かりません。 またWebStormのディレクトリ管理でnode_modulesを無視設定することをおすすめします（起動時のIndex作成とコード補完の遅さが悲惨なことになるので）。 WebStormのKarmaデバッグはChrome/Firefoxのみ有効で、PhantomJSでは実行出来ないらしいです。Firefoxの方では試していませんが、Chromeでデバッグを実行するにはJetBrains IDE Supportが必要です。実行するプロファイルに事前にインストールしておきましょう。 WebStormのRun Config設定 右上のRun/Debu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
karmaを使ったSPA向けE2Eテスト技法
Tips on Setting up Karma Testing with Webpack