power-assertでJavaScriptのテストをする ブラウザ編
power-assertという単純なアサーションでも、テストが失敗した時に分かりやすい情報を出せるテストライブラリ/ツールについての記事です。 前回、power-assertの使い方 Node.js編 | Web scratchではpower-assertの動作やNode.jsプロジェクトでの簡単な導入方法について解説しました。 前回のpower-assert + gulpで紹介したプロジェクトをそのまま使っていくので、見ていない場合はそちらから見ていたほうがいいかと思います。 今回は、ブラウザでのpower-assertの動かし方とデバッグについて書いていきたいと思います。 今回扱う実行環境 Node.js ＜＝ 前回 ブラウザ Browserify 前回やったこと まずは前回紹介したgulp + power-assertのプロジェクトを元にやっていきます。 azu/power-asse
【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
ESLint のカスタムルールを作ろう! (その1) - Qiita
はじめに ESLint の魅力の1つに、自分のプロダクトに合わせた独自ルールを作成することができるという点があります。 これから数回に分けて独自ルールの作り方・使い方を解析していきます。 この記事では、簡単なルールを作りながら、ESLint のルールの基本的な仕組みを解説します。 ここでは ESLint の基本的な使い方は扱いません。 ESLint の基本についてはESLint 最初の一歩等を御覧ください。 no-literal-call この記事では、最初の目標としてリテラルを関数呼び出ししている場合に警告するルールを作っていきます。 その過程で必要な知識を解説していくつもりです。 今回題材にするソースコードはこちら。 これは有効な JavaScript コードですが、実行すると必ず TypeError になります。 文字列を関数呼び出ししているので、当然ですね。 しかし ESLint
TypeScriptでpower-assertを使う時の注意点 - Qiita
TypeScriptでpower-assertを使ってテスト時に詳細情報を出そうとしたら, テスト実行そのものは問題ないのだが詳細情報が出なくて解決するまで小一時間かかってしまいました. せっかくなので注意点として共有しておきます. 2016/02/17 追記 DefinitelyTypedのpower-assert.d.ts側で対応されたため、本記事で書いていた注意点について気にする必要がなくなりました！ 最新のDefinitelyTypedのpower-assert.d.tsを使って、
Vue.jsのユニットテスト環境作成方法と見るべきドキュメント | DevelopersIO
はじめに おはようございます、加藤です。Vue.jsのユニットテスト環境作成の方法をまとめました。もし、このブログが公開から時間が経っているなら情報が古い可能性が高いです、ご注意ください。 なぜわざわざこんな事を言うかというと、私がこのブログを書いた理由は簡単に環境作成できるにも関わらず古い情報にぶつかって無駄に時間を溶かしたからです。。。 tl;dr Vue.jsのユニットテストの導入方法 マウンティングオプションは mount と shallowMount どちらを使うべきか 見るべきドキュメント 環境作成までがメインでユニットテストの作成方法についてはどのドキュメントを何の為に読んだかをまとめています。 ブログを書く経緯 最近Vue.jsの基礎を勉強したので自主4連休中に、Techpitで販売されているVue.js/Vuexを使ってTrello風アプリを作成しよう！を買ってサンプルア
1分でわかるJavaScriptライブラリSinon.jsのstubの基本的な使い方
Sinon.jsとは Sinon.jsとはJavaScriptでテストダブル(テストの代役)を実現するライブラリ。使用するにはnode.jsとSinon.jsが必要。 まずSinon.jsを下記のコマンドでインストールする。 $ npm i sinon インストールが完了したらs.jsのような適当なJavaScriptを作成してrequire記述してで読み込む。 const sinon = require('sinon'); 実行は $ node s.js Sinon.jsのstubについて Sinon.jsのstubは事前にプログラムされた動作をする機能。 例えば以下のようにstub.returns(7)と記述すればstub()を実行したときに7を返す。 const stub = require('sinon').stub(); stub.returns(7); console.log(
ヘッドレスブラウザ Chrome + Chromy で操作した内容を録画する
Chromeのブラウザ内（もしくはデスクトップ）操作をJavaScriptで録画するに続いて、今度はヘッドレスブラウザ (Chrome) で操作した内容をビデオ録画する方法を紹介します。今回は Chromy というライブラリを利用します。 機能的には Chrome DevTool に用意されている startScreencast を利用します。Chrome ヘッドレスブラウザのライブラリといえば puppeteer という感じがあるのですが、 Chromy は startScreencast のラッパーを用意してくれているので、サクッと使えるのが良いところです。 サンプルコード 指定のページを開いて startScreencast をした後、なんらかの操作をします。その後、 stopScreencast で処理を終了すると startScreencast コールバックで受け取ったキャプチャ
BackstopJSではじめるビジュアルリグレッションテスト - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、BackstopJSを使ったビジュアルリグレッションテストについて書きたいと思います。 ビジュアルリグレッションテストとは視覚的な回帰テストのことで、具体的にはスクリーンショットを撮影して差分抽出して行うテストです。 近年のWebフロントエンド開発では、SassやWebpackのような開発環境が整うに従ってスタイルシートをモジュール化することが増えています。 それはスタイルの汎用性を高めることに大きく貢献していますが、一方で、あるパーツのスタイル修正が想定外の場所で悪影響を及ぼしてしまう可能性をもつようになりました。 この問題に対処するために、Enduring CSSのような新しいタイプの設計手法も考えられてはいますが、既存のサービスに導入するにはかなり敷居が高いでしょう。 そこで注目したいのが、ビジュアルリ
JavaScriptのテストダブル、定番Sinon.jsと新星testdouble.jsどっちを選ぶ？
JavaScriptのテストダブル、定番Sinon.jsと新星testdouble.jsどっちを選ぶ？ テストダブルは、難しいテストを簡単に実行できる代替コードです。 これまではSinon.jsがJavaScriptのテストダブルを作成するには不可欠なツールでしたが、最近、testdouble.jsという新しいライブラリーが話題になっています。Sinon.jsと同様の機能を備えていますが、いくつか違いがあります。 この記事では、Sinon.jsとtestdouble.jsのできることを紹介し、長所と短所を比較します。Sinon.jsがデファクトスタンダードのままになるか、それとも挑戦者がその座を勝ち取るのでしょうか？ 注意：テストダブルをよく知らない人は、まず私が書いたSinon.jsチュートリアルを読むことをおすすめします。この記事で紹介する用語の理解を深めるのに役立ちます。 この記事で
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
sinonの使い方、使う場面（SpyとStub） - Qiita
"dependencies": { "chai": "^3.5.0", "mocha": "^3.0.2", "sinon": "^1.17.5" } テスト対象のコード 以下のような、getAndshow() に対するテストを考える。 なお、テストフレームワーク（mocha等）を適用する場合は、このように「外部との相互作用」を受け持つ部分を差し替え可能な設計にしておく必要があるので注意。strategyパターンを適用すればOK。（必須とは思わないが、そうしておかないと、テストが面倒なことが多い） /* [sample_sinon.js] encoding="UTF-8" */ /** * @description パラメータに応じて情報を収集し出力する。 * @param{object} data1 パラメータ１ * @param{object} data2 パラメータ２ * @para
javascriptのテストのはなし：Sinon.JS(その1) | DevelopersIO
QUnitについてある程度分かった所で、今回はSinon.JSというライブラリを紹介します。 Sinon.JSをテストフレームワークと合わせて使う事で様々なテストができる様になります。特定のテストフレームワークには依存していないのでQUnit以外でも使えます。Sinon.JSのサイトに行けばいくつかのテストフレームワークのアダプタがあります。 Sinon.JSにはいくつかの機能があるので順に紹介します。今回はSpyとStubとMockの3つについてです。テストフレームワークにはQUnitを使っています。 準備 本題に入る前に、準備です。Sinon.JSのライブラリをhttp://sinonjs.org/からダウンロードして適当な位置に配置して、テストで使うhtmlにロードしておきます。 Spy Spyは、メソッドが呼ばれた時の引数や戻り値、エラーなどを監視する事ができます。 これはSino
JavaScriptでスパイ、スタブ、モックなどのテストダブルを行う
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義から、テスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなどテスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第4回目の本稿は、JavaScriptでのテストダブルの方法を、Sinon.jsというJavaScriptテストダブルモジュールを使って説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 テストダブルとは テストコードを実行する際に、次のような課題に直面したことはないでしょうか。 Ajaxへのサーバへの問い合わせのような外部リソースも含めた処理のテストを行う必要があるが、テストデ
JavaScriptで(そしてどんな言語でも同じで)世界一簡単なテストフレームワークを作って使おう - Qiita
はじめに どんな言語でもテストコードは簡単につくれます。 [JavaScript テストコード]で検索すると、テストフレームワークの使い方がでてきて 「いままでテスト書くの嫌だったけど、この際、まなんでみた。」 「簡単で良かった。」 みたいな、xUnitの使い方。みたいなことが書かれていて、少し"ん？"と感じます。 なぜかというと、テストってのは、テストフレームワークを使わなきゃできませーん。という勘違いしている人が非常に多いように感じるからです。テストを書いている人の、10人中8人は、その勘違いしています。(体感) aUnitでも、bUnitでも、cUnitでも、dUnitでも、eUnitでも、fUnitでも、 JUnitでも、NUnitでも、xUnitでも、QUnitでも、ともかくなんのテストフレームワークでもいいですけど、そんなものはどれでもいいんです。 どれもやっていることの本質は
『An Overview of JavaScript Testing in 2020』へのコメント
JavaScriptのテストツールについてのまとめ記事。 Unit Tests/Integration Tests/Functional Testsといったテスト分類やテストツールの種類ごとにテストツールを紹介してる JavaScript testing library
もうブラウザーテストに手間取らない！Laravel Duskで自動化しよう
複雑なシンプルページアプリケーション（SPA）こそテストが大事ですが、手作業でやるには大変。そこで、Laravelのテストライブラリー「Dusk」を使ってみましょう。 JavaScriptアプリケーション、特にシングルページアプリケーションにおいてエンドツーエンドテストは常に課題です。Laravelは最近、その課題の打開案となる新しいテストライブラリー、Duskの5.4バージョンをリリースしました。 今回のDuskのリリースで、Laravelはユーザーにブラウザーテスト用の共通APIを提供するようになりました。デフォルトでChromeDriverが付属し、ほかのブラウザーのサポートが必要な場合はSeleniumを使用できます。ニーズに応えるために、今後もこの共通テストAPIをサポートされる予定です。 この記事では、新しいLaravel 5.4アプリケーションを紹介します。 インストール c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ自動化ツール カオスマップ風 - STAC2018 LT
明日からはじめるテストのあるフロントエンド開発 ~ テスティングトロフィー ~
GitHub - goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
