ChromeとFireFoxのHeadless機能を使ってブラウザーテスト駆動開発[gulp+karma+jasmine&GitHub+TravisCI] - Qiita
var gulp = require("gulp"); var browser = require("browser-sync").create(); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var Server = require("karma").Server; /** * server setting */ gulp.task("server", function () { browser.init({ server: { baseDir: "./", index: "index.html" } }); }); /** * browser reload */ gulp.task("reload", function () { browser.reload(); }); /**
![ChromeとFireFoxのHeadless機能を使ってブラウザーテスト駆動開発[gulp+karma+jasmine&GitHub+TravisCI] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dbf11a3e417458f22f9afb7b1ea9fc7367654933/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Q2hyb21lJUUzJTgxJUE4RmlyZUZveCVFMyU4MSVBRUhlYWRsZXNzJUU2JUE5JTlGJUU4JTgzJUJEJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgzJUJDJUUzJTgzJTg2JUUzJTgyJUI5JUUzJTgzJTg4JUU5JUE3JTg2JUU1JThCJTk1JUU5JTk2JThCJUU3JTk5JUJBJTVCZ3VscCUyQmthcm1hJTJCamFzbWluZSUyNkdpdEh1YiUyQlRyYXZpc0NJJTVEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05YzYzYzZkMjlkNWZhNjBmZjEyNTdhNmU5NDczNjUwOQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaWVuYWdhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NTQyZDRiNjVlZjllYzUzNzkyYmRmNTE4NTc4Y2NkYQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3f4d716cd11fe652352338bf3c1089a8)
フロントエンドのテストに真面目に向き合う - Qiita
最新版=>フロントエンドのテストについて考える 背景 フロントエンドのテストは、テストランナー、フレームワーク、Node.js、ブラウザ、Selenium、WebDriverなど、登場人物が多い。また、UIと密接に絡むのも特徴である。 これまで社内では、テスト種別によって、それぞれ解決したい事柄が明示的に示されていなかった。それぞれのテスト種別にどんな意味があり、何を目的とするかを明確にすることで、機能に対して、どのようなテストを実装すればよいのか共通認識を持っておくために、この記事を作成した。 フロントエンドのテスト4象限 今回この記事で紹介するテストは、Unit Testing、UI Testing、E2E Testing、Integration Testingの4つがあるが、それぞれ、上のグラフのような関係になっている。これらを考えることで、バランスの取れたテスト環境を確立したい。ポ
Karma駆動開発のススメ - Qiita
Karma駆動開発？ ng-japanでQuramyさんの発表にあったやつ Karma? JavaScriptのテストランナー ブラウザを起動してその上でJavaScriptのテストを実行する ブラウザが起動するので見た目も確認できる Developer Consoleでブレークポイント等の機能が使える angular-cliはユニットテスト環境としてKarmaを自動でセットアップする Karma駆動開発？ KarmaでUIロジックのテストもしつつ、見た目もそこで試行錯誤すると楽 アプリ上で再現するのが面倒な状況もテストを書けば再現が楽 そういうエッジケースのテストにもなって一石二鳥 特定のテストケースだけ走らせることができるので繰り返しが早くできる あくまでテスト環境なので、あまり複雑なことはしないほうが良さそう デモ おわり Register as a new user and use
webpackとかKarmaとかの設定ファイルをTypeScriptでかく - Qiita
構成 こんな感じの環境を作っています。 TypeScript webpack Jasmine Karma あと karma-coverage とかものせてます。 設定ファイルもTSで書きたい 設定ファイルだけJavaScriptで書くのもなんとなく癪なので、TypeScriptで型チェックしていきます。 webpack.config.ts 公式で、ちゃんとできるよ！っていうガイドを用意してくれています。 Qiitaの記事を書いてる方もいました。 ということで割愛します。実際に行った作業は以下の３つです。 ts-nodeのインストール ＠types/webpackのインストール webpack.config.tsの作成 karma.conf.ts こちらも公式で触れられています。 https://karma-runner.github.io/1.0/config/configuration-
AngularJSで各種UIのユニットテストを書く - Qiita
はじめに ※Angular 1xです。 通常のロジックのテストは問題なく書けるとして、UIのユニットテストを書くのは難しい。 とはいえ、後回しにしがちだが、AngularJSのモジュールのテストも書きたい。 ControllerやComponent, Service などのテストの書き方を記述していきます。 その他、以下のように若干わかりづらいテストの書き方も記述しています。 $httpのレスポンスをMockするテストの書き方も記述しています。 $timeoutを使っているメソッドのテスト $qを使っているメソッドのテスト 前提 Karma と Jasmine を使ったテストが実行できる環境であること。 今回は以下の GitHub に用意したプロジェクトで行います。 https://github.com/chibi929/angularjs-test-sample 実行環境 GitHub
CentOS7 karma ChromeHeadless jasmine - Qiita
$ node_modules/karma/bin/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
小さく始めるVue.jsユニットテスト環境 - Qiita
はじめに Vue.jsにおけるユニットテストの情報源としてはじめに参照すべきなのは公式ドキュメントです。 単体テスト - Vue.js ここでは、セットアップ方法についてはテストツールのドキュメントに委譲しています。 詳しいセットアップについては、各テストツールのドキュメントを確認して下さい。 モダンなJavaScript開発の常として、複数のツールを組み合わせた環境のセットアップが必要になります。 ゼロから作るアプリケーションなら、vue-cliでvue init webpackすれば、テスト周りのセットアップもやってくるので問題ありません。しかし、既存の（テストのない）JavaScriptアプリケーションにVue.jsを導入しようとしている場合、このアプローチは取れません。 本記事では、Vue.jsのユニットテスト環境をゼロから構築する方法を解説します。 なお、本記事のコードは下記Gi
【Karma】ローカル上のPhantomJSでもテストが通るか試す - Qiita
ローカルのChromeではOKだが、CI上のPhantomJSではテストが通らないということがある。ローカルでも念のためPhantomJSを使用してテストを実行してみようという話。 ChromeではOKだったが、PhantomJSでは通らなかったテストケース AngularMaterialを使って生成したテーブル上の一覧をクリックした際に、イベントリスナーが反応するかのテスト。ローカルのChromeでは問題なくテストが通ったが、CI上のPhantomJSでは以下のようにエラーとなった。forEachがダメそう。 FAILED TESTS: ListComponent ✖ 看板一覧がクリックされたら、handleClickが呼び出されること PhantomJS 2.1.1 (Mac OS X 0.0.0) PhantomJS 2.1.1 (Mac OS X 0.0.0) TypeError:
create-ts-lib: TypeScript WebPack Starter CLI - Qiita
🏠 Home Page - ⚡ Github Page - 📦 NPM Package A yet another Typescript Webpack Starter Built upon Webpack 3 Typescript 2 Webpack Dashboard Karma, Jasmine Quick Overview npm install -g create-ts-lib create-ts-lib my-typescript-lib cd my-typescript-lib/ npm start Then open http://localhost:3000/ to see your bootstrapped module. When you’re ready to deploy to production, create a minified bundle with
gulp + karmaでテスト駆動開発 - Qiita
var gulp = require("gulp"); var browser = require("browser-sync").create(); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var Server = require("karma").Server; /** * server setting */ gulp.task("server", function () { browser.init({ server: { baseDir: "./", index: "index.html" } }); }); /** * browser reload */ gulp.task("reload", function () { browser.reload(); }); /**
Vue.jsでユニットテストを導入しながら小規模アプリを製作した - Qiita
最近までテストを書いたことがなく、過去に何度か挑戦しようとしたのですが、 いざ調べてみるとJasmine/Mocha/Karmaなど、いろんな単語が出てきて面倒くさくなり、 結局なにもしない、ということを繰り返してきました。 CheckIOなど、オンラインでプログラムの課題を解くサイトを利用していて、 複雑な問題だとブラウザ上でコーディングすることや、テストの実行結果を待つのがつらくなり、 ローカルでテストを走らせながら、慣れているエディタで書いた方が効率がよさそうなので、 あらためてテストについて調べて、年末あたりからMochaを使い始めました。 しばらくして、設定方法や使い方についてひと通り分かってきたので、 テストを書きながら何か作ってみようと思い、題材を探していました。 その頃、業務中にたくさんのキャメルケースの語句をスネークケースに変換する機会があり、 ひとつひとつ考えながら変換
coffeescript + webpack をjasmine + mocha + karmaでテストしてJenkinsに管理 - Qiita
coffeescript + webpack をjasmine + mocha + karmaでテストしてJenkinsに管理CoffeeScriptjasminemochakarmawebpack 背景 coffeescript - JavaScriptのコードを生成するためのコンパクトなスクリプト言語 webpack - module bundler jasmine - js test framework mocha - js test framework karma - js test runner phantomjs - browser 全体像 coffeescriptで各Moduleを作成。 webpackでModuleを使いentryファイルからCompileして一つのJSファイルを作成。 karma(runner)でjasmine(test)とmocha(reporters)
Angular6でルートパラメータに依存したComponentをテストする - Qiita
> ng -v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 6.1.3 Node: 10.8.0 OS: win32 x64 Angular: 6.1.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser .
BrowserStack と Karma でクロスブラウザテスト環境を作る - Qiita
describe("Hello Test", () => { it("test", () => { throw new Error("Error"); }); }); 期待すること IE11: SyntaxError Firefox: Error BrowserStackに登録 https://www.browserstack.com/ から SignUp https://www.browserstack.com/accounts/settings から AccessKey を取得 たぶん色々やるためには有料登録も必要な気がする。 環境構築 module.exports = function(config) { config.set({ browserStack: { username: "<your-username>", accessKey: "<your-token>" }, //
step by stepで始めるKarma - Qiita
Karmaを使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。 ステップを通して少しづつ理解できるように執筆しました。 また、最後に重要だろうと思われる補足内容を記載しました。 Karmaの導入に一役買えれば幸いです。 テスト全体の流れについては以前書いた記事フロントエンドにテストを導入を参照してください。 Karmaとは ブラウザ上で 単体テストを実行するためのテストランナーです。 テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。 特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。 前提 Nodejs,npm,chromeが導入済みであること 流れ Karmaは4つの大きな機能（プラグイン）が存在します。 Step 3 〜 Step 6
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定 - Qiita
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定JavaScriptTDDkarmacoveragebabel こちらの記事も合わせて参考にしてください。 - karma + babel + istanbul でフロントエンドのカバレッジを出す設定 2016年版 フロントエンドで es2015 かつ browserify でバンドルしつつ書きたいという需要はそこそこ高まっているんじゃないかと思いますが、そのセッティングで開発した場合に、テストカバレッジってどうやって出したらいいの？という情報があまり出回っていない気がしたので、自分なりにミニマルだと思う設定の例をまとめてみました。 なお、この記事では、テストランナーには、karma、バンドラには browserify を使う前提で書いています
tmuxを使って同一コンソール内で複数のdocker runを行ったメモ。webpack , karma, gulp + express + socket.io , mongodb. - Qiita
tmuxを使って同一コンソール内で複数のdocker runを行ったメモ。webpack , karma, gulp + express + socket.io , mongodb.MongoDBExpresstmuxDockerwebpack [前回][link-18]の続き。複数ウィンドウを開くのが面倒なため１つのコンソールを分割する。 (2016/2/4 追記）webpackの設定で、ファイルを更新した時はうまくいくが、新規作成したときに認識しなかったのでgulpを使用する構成に変更。 tmuxでウィンドウを分割 tmuxの設定はコピペ。 [達人に学ぶ.tmux.confの基本設定][link-4] #prefix C-aに変更する set -g prefix C-a # C-bのキーバインドを解除する unbind C-b # キーストロークのディレイを減らす set -sg es
ES6+Reactをkarma+mocha+chaiでテストした時の設定まとめ - Qiita
START: ListView ✔ propsが正しく設定できる Finished in 0.017 secs / 0.008 secs SUMMARY: ✔ 1 test completed --------------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | --------------|----------|----------|----------|----------|----------------| parts/ | 90.48 | 58.06 | 100 | 100 | | ListView.js | 90.48 | 58.06 | 100 | 100 | | -
【npm + Karma + Jasmine】JavaScriptの単体テスト環境を構築する - Qiita
JavaScriptの単体テスト環境構築のまとめ。 テストランナーとして「Karma」、テストフレームワーク・アサーションライブラリとして「Jasmine」を使う。 前提条件 下記が使用できること。 node npm 検証環境 MacOS X 10.9.2 package.json生成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js+webpack+Karmaの設定メモ - Qiita