spyOnした関数の戻り値を、実行された順番で変更する方法。（Jasmine） - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ProtractorとAngularJSではじめてのE2Eテスト - Qiita
この記事は前回からの続きとなります。 AngularJSのE2Eテストといえば、Protractorですね。公式ページにもあるfor AngularJSの記述がなんとも心強いです。 ProtractorはAngularJSのために開発されているだけあり、テスト実行時に何も考えずとも__AngularJSと同期してくれる__という最強に素晴らしい機能を備えています。 何を同期してくれるのか AngularJSはモデルの変更を検知するためにScope Life Cycleという機構を備えています。この機構によりモデルの変更は即座に検知され、同時にビューを最新の状態に保ちます。Protractorはこのライフサイクル中に実行される$digestループの完了を検知（同期）してくれるので、ビューの再レンダリングが完了する前にテスト処理が実行されてしまうといった事態を確実に回避してくれます。 また、$
TypeScript + RxJS で WebSocket の自動再接続をする - Qiita
はじめに TypeScript + RxJS で WebSocket 接続をして切断時に自動で再接続をする方法を記載する RxJS 6 の場合 retry を使って WebsocketSubject のエラーをハンドリングするだけでできるらしい。 https://stackoverflow.com/questions/44060315/reconnecting-a-websocket-in-angular-and-rxjs RxJS 5.5 の場合 Subject を拡張して自動再接続する WebSocket 接続を提供する Subject を作成する 参考サイト: https://gearheart.io/blog/auto-websocket-reconnection-with-rxjs-with-example/ import { Subject } from 'rxjs/Subje
gulpでProtractor(Selenium+Jasmine)を動かす - Qiita
ProtractorはAngularJSのためのE2E(End To End)テストのフレームワークです。 AngularJSのための、といっても中身はSelenium(ブラウザの自動操作ツール)とJasmine(javascript用のテストフレームワーク)なので、普通にWebシステムのE2Eテストとして使うことができます。 今回は、Protractorのインストールからgulpで実行するまでについてまとめます。 インストール npm(node.js)とgulpは入っている前提で。 Protractorはnpmからインストールし、webdriver-managerのupdateを実行します。 npm install protractor node node_modules/protractor/bin/webdriver-manager update Protractor単体で動かす S
ProtractorのテストコードをTypeScriptで書く - Qiita
前の記事でProtractorの導入を行いました。 しかし、JavaScriptでそのまま書いていたので、できればTypeScriptで書きたい。 さらにその上で、webpackを使って複数のテストコードをbundle化し、一つのjsファイルにします。 準備 今回使うパッケージを一通り入れておきます。 前回入れたprotractor関連は書いてないので、そちらは前の記事を参考にしてください。 typescript webpack ts-loader gulp gulp-typescript gulp-webpack glob npm install typescript webpack ts-loader gulp gulp-typescript gulp-webpack glob TypeScriptでコードを書く 今回もProtractorのデモサイトを使ったテストコードを書きます。
フロントエンドのテストに真面目に向き合う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最新版=>フロントエンドのテストについて考える 背景 フロントエンドのテストは、テストランナー、フレームワーク、Node.js、ブラウザ、Selenium、WebDriverなど、登場人物が多い。また、UIと密接に絡むのも特徴である。 これまで社内では、テスト種別によって、それぞれ解決したい事柄が明示的に示されていなかった。それぞれのテスト種別にどんな意味があり、何を目的とするかを明確にすることで、機能に対して、どのようなテストを実装すればよいのか共通認識を持っておくために、この記事を作成した。 フロントエンドのテスト4象限 今回この記
Ionic + Typescript + Protractor でe2eテストをする - Qiita
過去記事 TypeScriptでモバイルアプリケーションを作ってみる: Ionic準備 Typescriptでモバイルアプリケーションを作ってみる2: Class化、webpack編 Typescriptでモバイルアプリを作ってみる その3 ユニットテスト Karma Protractorでe2eテストする 前回はkarmaでユニットテストを行う方法を紹介しました。ですので今回はprotractorでe2eテストをする方法を紹介します。 モバイルアプリ作成用フレームワークIonicはAngularベースなので、e2eテストはProtractor http://www.protractortest.org/#/を使うのがベストです。ProtractorはそもそもAngularjs用に開発されているので非常に相性が良いためです。一応Protractorを使えば普通のユニットテストも可能ですが、
Karma駆動開発のススメ - Qiita
Karma駆動開発？ ng-japanでQuramyさんの発表にあったやつ Karma? JavaScriptのテストランナー ブラウザを起動してその上でJavaScriptのテストを実行する ブラウザが起動するので見た目も確認できる Developer Consoleでブレークポイント等の機能が使える angular-cliはユニットテスト環境としてKarmaを自動でセットアップする Karma駆動開発？ KarmaでUIロジックのテストもしつつ、見た目もそこで試行錯誤すると楽 アプリ上で再現するのが面倒な状況もテストを書けば再現が楽 そういうエッジケースのテストにもなって一石二鳥 特定のテストケースだけ走らせることができるので繰り返しが早くできる あくまでテスト環境なので、あまり複雑なことはしないほうが良さそう デモ おわり
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
protractorのノウハウあれこれ - Qiita
Protractorを利用していていろいろノウハウが溜まってきたので、残しておきます。 Angular.jsではないフレームワーク(knockout.jsを使ってます)を使って画面を構築しているアプリで、いい感じにテストできるように改善しています。 Angular.jsではないフレームワークで利用するために Angular.jsとの同期を切る まずはAngular.jsとの同期をオフにしておきます。 ProtractorはAngular.js用のE2Eフレームワークなので、Angular.jsの初期化が終わるまで待つ処理がデフォルトで入っています。 Angular.jsを利用していない場合にはオフにしておかないとエラーになります。 また、URLをgetする前に実行しておかないと意味ないので、注意しましょう。 エレメントを取得するとき、エレメントの存在チェックをする knockout.jsな
Vue.jsのテストでコンポーネントをいい感じにwrapする方法 - Qiita
Vue-test-utilsのshallowMountとmountの違いについて この記事では Vue-test-utils の shallowMount と mount の違いについてをメインに記事にしていきます。また shallowMount + stubs についても書いていきたいと思います。 Component.methods とコンポーネントから直接 methods を呼び出す方法もあるのでよかったら見ていってください。 mount shallowMount shallowMount + stubs TodoContainer.methods このあたりでを書いていきたいと思います。 個人的には「Vue-test-utils」には、Vue.jsのコンポーネントとかをいい感じにwrapしてくれて、jestとかのテストランナーに乗せれるようにしてくれるいい感じのヤツという認識がありま
angular-cli(Protractor)でMicrosoft Edgeのe2eテストをする - Qiita
初心者向け あんまり分かっていないけど、とにかくEdgeでもe2eテストしたい方向けです。 テスト環境 @angular/cli@1.0.0-rc.0 1. 事前準備 今回はEdgeでテストしたいので下記からEdgeのWebDriverをダウンロードし、 ダウンロードしたパスを覚えておく。後で使います。 https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ ※右下 Downloads の Release 14393 をクリックするとダウンロード出来る。 2. protractorの設定 以下の“ここ追加！”の部分を追加、“ここコメントアウト！”はコメントアウトしていく。 // Protractor configuration file, see link for more information // h
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
Alexa スキルを Serverless + Typescriptで開発する - Qiita
はじめに 自分もAlexaスキルを作ってみようとちょっといじってみた。 Alexaスキルのバックエンドには AWS Lambda を Node.js ランタイムで利用するのが手っ取り早い。 どうせなら、この機会に Typescript も使ってみようと思って Typescript と VSCode にも入門した。 また、Lambdaのデプロイ等の操作には今の所、 AWS SAM よりも 手間が少ないと感じる Serverless Framework を利用している。 Serverless Framework にはGithubなどで公開されている既存のアプリケーションを元にアプリケーションの雛形を作る機能(serverless install)があるので、ベースの部分をテンプレートとして公開してみた。 HeRoMo/serverless-aws-alexa-ts READMEの日本語版がわり
小さく始めるVue.jsユニットテスト環境 - Qiita
はじめに Vue.jsにおけるユニットテストの情報源としてはじめに参照すべきなのは公式ドキュメントです。 単体テスト - Vue.js ここでは、セットアップ方法についてはテストツールのドキュメントに委譲しています。 詳しいセットアップについては、各テストツールのドキュメントを確認して下さい。 モダンなJavaScript開発の常として、複数のツールを組み合わせた環境のセットアップが必要になります。 ゼロから作るアプリケーションなら、vue-cliでvue init webpackすれば、テスト周りのセットアップもやってくるので問題ありません。しかし、既存の（テストのない）JavaScriptアプリケーションにVue.jsを導入しようとしている場合、このアプローチは取れません。 本記事では、Vue.jsのユニットテスト環境をゼロから構築する方法を解説します。 なお、本記事のコードは下記Gi
JS のソースコードに TS を取り入れたおはなし - Qiita
既存プロジェクトの JavaScript アプリケーションのソースコードに TypeScript を含め始めました。 その際やったことや参考にした記事などをメモします。 前提 環境 OS: macOS エディタ: VSCode TypeScript: 2.9.2 プロジェクトはこれまで ES2015+ で開発をしてる。 Webpack@3.x (laravel-mix) + Babel 既存のコードベースを TypeScript に置き換えることはしない。 たいへんなので・・・ TypeScript を触るのは初めて。 TypeScript の Linter については今回は考慮しない。 達成したこと TS での開発ができるようになった。 TS in JS ができた。 JS のコード内で import SomeTsFile from './some-ts-file' みたいな事ができた。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Protoractor][E2Eテスト] ブラウザを使用したテストを行う - Qiita![[Protoractor][E2Eテスト] ブラウザを使用したテストを行う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f10a553fcf03d5f836e6b3a319776e4768a67666/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTk0NzUlMkZwcm9maWxlLWltYWdlcyUyRjE3Mzg0NzI2MTI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZDYwNWJiMWY5OGE0NTEyODRmMjlhOWQ0ZWRjMjM0ZjE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D427d8c13291b6c4be1bd49cf10a50948%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUHJvdG9yYWN0b3IlNUQlNUJFMkUlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglNUQlMjAlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTclRTMlODElOUYlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTMlODIlOTIlRTglQTElOEMlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1lYzQyYTFkMmVjZDU2MTY2NTJjNTkxNDAwY2FiY2RjOA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NGZjM2NlOTllNTNiODNlZjhjZDI2NGZmMjhlZDAwMTI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D487737c16988ada9e2c71cb630dc2c6e)
Angular2を使ったサイトのテストで protractorを使うときの備忘録 - Qiita
Protractor 関連のパッケージ - Qiita
