フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
Jestなどを使わずにスナップショットテストを書く
次のようなテストコードを書きます。(これはMochaを使っていますが大体どんなテストフレームワークでも同じことが出来ます。) 次のスナップショットでは、transformというJSONを入力に受け取り、JSONを出力する関数をテストしています。 snapshot-test.js: const fs = require("fs"); const path = require("path"); const assert = require("assert"); const fixturesDir = path.join(__dirname, "snapshots"); // transform function const transform = require("../transform"); describe("Snapshot testing", () => { fs.readdirSy
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
いきなり結論を書くと、idやclassはスタイルのためのものなので、テストでそれを使うのはやめましょう。そして、カスタムデータ属性を使いましょう。(idやclassはスタイルのためだけではないという意見はごもっともです！しかし、主にとしてスタイルに使われるということでご了承頂いて以下の駄文に付き合って頂けると幸いです🙇) 先に断っておくと主にreactについての話で、JSXを前提とします。(手法はReactに限りませんが理由は後述) 2020/03/23 追記 この記事は1年以上前に書かれた記事なのでテストフレームワークとしてenzymeを使っていますが、現時点ではTesting Libraryの使用をオススメします。data-testid に対応するクエリを備えています。 React Testing Library · Testing Library はじめに ご存知の通り、ロジックと
アジャイルテスティング -バグ埋め込みを年間1件にまで減らした戦略- #NagoyaTesting
Nagoya.Testing in Tokyo ソフトウェアテストを強いられている人達の話 で発表したスライドです。ただ7割くらいは口頭での説明なので、参加した人の思い出し用です。
受け入れテストの自動化 ～ OpenCVの「眼」で捉え、Pythonの「脳」が思考し、Appiumの「指」で動かす - Speaker Deck
2017/02/03 JaSST’17 Tokyo
テスト自動化研究会 - テスト自動化の8原則
1. 手動テストはなくならない 2. 手動でおこなって効果のないテストを自動化しても無駄である 3. 自動テストは書いたことしかテストしない 4. テスト自動化の効用はコスト削減だけではない 5. 自動テストシステムの開発は継続的におこなうものである 6. 自動化検討はプロジェクト初期から 7. 自動テストで新種のバグが見つかることは稀である 8. テスト結果分析という新たなタスクが生まれる これらの原則は、どのようなドメイン、プロセス、ツールの現場におけるテスト自動化であっても共通して言える、テスト自動化に取り組む前に留意しておくべきことがら＝原則を、テスト自動化研究会のメンバーによる議論のうえ、絞り込んだものです。これからテスト自動化に取り組まれる方、現在取り組まれている方、これから見直しをされたい方にご参考いただければ幸いです。 解説 1. 手動テストはなくならない ユーザビリティテ
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
ブラウザテストツール総まとめ・2016年夏版 - Qiita
WebサイトやWebアプリケーションの文脈(フロント寄り)で、E2E関連ツールを整理してみます。いろいろありすぎるようでいて、「結局Seleniumかよっ」ていう話ですが...。ただ、クロスブラウザテストが不要であればNightmareは簡便な選択肢としてオススメです。個人的な見解はまとめ参照。 (当初『E2Eは「End to end」の略ですよ。まとめ』と題したのですが、「E2E」という用語がそれほど浸透していない?ようなので、改題しました) 以下、目次を兼ねて並べてみました。E2Eの文脈でないものも一部含みますが、全体像を把握するために入れてあります。変なところあれば、コメントでご指摘くださいませ。 E2Eテストツール | 使っているもの | 開発言語 | GitHub★ :-- | :--: | :--: | --: | --: Nightwatch | WebDriver | Ja
GitHub - pact-foundation/pact-js: JS version of Pact. Pact is a contract testing framework for HTTP APIs and non-HTTP asynchronous messaging systems.
Pact is the de-facto API contract testing tool. Replace expensive and brittle end-to-end integration tests with fast, reliable and easy to debug unit tests. ⚡ Lightning fast 🎈 Effortless full-stack integration testing - from the front-end to the back-end 🔌 Supports HTTP/REST and event-driven systems 🛠️ Configurable mock server 😌 Powerful matching rules prevents brittle tests 🤝 Integrates with
テストの数を減らそう！プリキュアで学ぶPICT - Qiita
ソフトウェアのテストはたいへんだなあ ソフトウェアのテスト、きちんとしてますか？最近は、スマートフォンやタブレットの普及に伴って、ユーザが使うデバイスの種類が多様化しています。 使われるOSやブラウザ、画面サイズの種類が増える中、プリキュア1の多様化も著しいですね。「プリキュアで学ぶワンライナーWebスクレイピング」で検証した通り、昨年までは43人、今年は「魔法つかいプリキュア」が加わることで、プリキュアの数は総勢45人になりました2。プリキュアはキャラクターによって専用デバイスを持ったり3、感情が昂ぶると常識を覆す事象を起こしたりするので、ITサービスを提供するエンジニアの方々は、ユーザ満足度向上のため、当然プリキュアがユーザになった場合も考慮した動作テストをされていると思います。 とはいえ、プラットフォームとプリキュアの組み合わせの数は、既にかなりの数です。全てのパターンを試すととても
Mocking API Requests in Node tests - Jack Franklin
August 19, 2013Mocking API Requests in Node testsRecently I sat down with my Pulldown Project, aiming to rewrite the tests. The problem with them was that they were network dependent. Each test would hit the real API and download the real file. This was not good for a number of reasons: I couldn't run the tests without an internet connectionthe tests were slowthe tests were unreliable, they would
マイクロサービス時代を乗り越えるために、Rack::VCRでらくらくアプリケーション間テスト - クックパッド開発者ブログ
新規アプリケーションの構成 Rack::VCR リクエストの記録 リクエストのモック リクエストの再生 おまけ: Androidアプリのテスト 弊社での利用例 未来 こんにちは、会員事業部の小室 (id:hogelog) です。気づけば弊社に入社してから２年と2ヶ月が経っていました。 今回はその2年2ヶ月で初めて会社プロダクトを rails new したRailsアプリケーションと、そのアプリケーションで利用したRack::VCR (https://github.com/miyagawa/rack-vcr) について簡単に解説します。 新規アプリケーションの構成 今回私が新規に作成したRailsアプリケーションは仮にここではomoikane（仮）と呼ぶことにします。omoikaneはリクエストがあると社内の汎用APIサーバにアクセスし、APIサーバから取得した情報を元にレスポンスを返すアプ
実践 Pact:マイクロサービス時代のテストツール - クックパッド開発者ブログ
技術部の taiki45 です。 以前「サービス分割時の複雑性に対処する: テスト戦略の話」という記事で、サービス間のインテグレーションテストにおける問題について紹介しました。現在のクックパッドではこの問題の解決のために Pact というツールを導入して運用しています。この記事では、その運用の知見を紹介できればと思います。 Pact Pact は Consumer-Driven Contract testing (CDC testing) を実現するためのツールです。"Consumer"、"Provider" という見慣れない単語が出てきますが、この記事ではだいたい「Consumer = Web API クライアント」、「Provider = Web API サーバー」と対応ができます。この記事では具体的な Pact の利用例を通じて CDC testing がどういうものなのかについても
End to End (e2e) Testing React Apps With Selenium WebDriver And Node.js is Easier Than You Think
End to End (e2e) Testing React Apps With Selenium WebDriver And Node.js is Easier Than You Think End to end (e2e) testing is the process of executing a tests scenario against a real browser to test the entire stack of a multi-tier application. The best tool for the job is Selenium, which can pilot any web browser using a standardized API, and is actively maintained. But writing e2e tests that work
2015年が終わるのでフロントエンド開発に使ってるツールまわりをざっと書き出してみた - ミルク色の記録
題名の通り、ざっと書き出し。 このあたりのことを相談された時に、手元のリポジトリを漁って「こんな感じでやってます」とやってたけど、 とりあえずこのURL渡して参考にしてもらうみたいなことができれば... ご注意 Xubuntu 14.04でやってるのでWindowsやOSXは未確認。 こじんまりした規模の開発で使っている構成なので、規模によっては向いていないかも。 サーバとはJSONとかのAPIでお話するだけの、SPAなフロントエンド用（ルーティングはハッシュチェンジ系向け）。 おしながき 共通用 nodeの管理 JavaScriptのLint プロジェクト用 プロジェクトディレクトリの下準備 タスクランナー HTMLと開発用Webサーバ CSSや画像ファイルなどのスタイルまわり JavaScriptまわり（モジュールバンドラ） プロダクション用のビルド テスト環境 APIサーバとつなぎな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Server Components and Performance | Intermediate React, v6 from Frontend Masters
https://www.jasst.jp/symposium/jasst14tohoku/pdf/S6.pdf
How to detect API modifications when mocking e2e tests?
GitHub - topheman/react-es6-redux: A simple app to try React, ES6 and redux, using topheman-apis-proxy as data api backend
https://www.codementor.io/reactjs/tutorial/redux-unit-test-mocha-mocking