BackEnd

Laravelのブラウザテスト「Dusk」で非同期で重たい処理のテストを実装してみよう

投稿日:2020年10月26日 更新日:

はじめに

前回の続きで、今回はLaravel Duskを使用して、非同期なテストを実装したいと思います。以前調査した際に、重い処理がある場合には、待機する必要があることが分かったので、Laravel Duskで非同期で重い処理を待機する方法を紹介します。

JavaScriptの式で待機する

Ajax通信を行った後の画面を検証したり、操作したりしたい場合は、JavaScriptの式を実行し、結果がtrueになるまで待機することができます。

テスト対象となるコード

index.blade.php

Ajax通信では次のJSONがレスポンスされます。

Duskのテストコード

今回は、ページが読み込まれて、書籍の一覧表示をテストします。

waitUntil()メソッドで、JavaScriptの式を渡し、その結果がtrueになると、後続が実行されます。
waitUntil('books.length > 0', 10)というように、第二引数を設定すると、10秒でタイムアウトするようになります。

では、この式がどのような仕組みで評価されているか理解するために、 waitUntil()メソッドのコードを読んでいきたいと思います。

まず、コードの整形が行われ、式に returnがない場合は、先頭に着けます。セミコロンも同様に付けます。
その後、 waitUsing()メソッドを使って、100msごとに、WebDriverにJavaScriptを実行させます。
waitUsing()メソッドは、クロージャの中で trueが返却されるか、タイムアウトすると終了します。
ちなみに、タイムアウトまでの秒数が指定されていない場合は、 waitUsing()メソッドのデフォルト値である5秒でタイムアウトします。

DOM要素の表示を待つ

DOMの表示を待ち、その結果を検証することもできます。

テスト対象となるコード

先ほどのbladeファイルを変更します。

本を借りたり、返却したりすることができるようになりました。この借りる・返却するボタンのテストを実装したいと思います。

Duskテストコードの実装

まず、借りる/返却するボタンが表示されるのを待つため、一覧表示のテストと同じように待機します。
ボタン動作の検証ですが、今回は、ボタンの文言が借りた後は「返却する」、返却した後は「借りる」に変わっていることを検証するため、 waitForTextを使用して待機させています。
waitForText('返却する', 10)とすると、10秒でタイムアウトになります。
この他にも、 waitFor('.return')のように、CSSセレクタを使用して待機させることも可能です。

waitForTextのコードも見てみましょう。

先ほどと同じように waitUsing()メソッドを使って、100msおきに Str::conatins()関数により評価され、テキストが存在してtrueが返却されるか、タイムアウトでfalseが返却されます。

さいごに

いかがでしたか。Laravel Duskで、シンプルな非同期処理の待機を実装することができます。ぜひ試してみてください。

おすすめ書籍

PHPフレームワークLaravel入門 第2版PHPフレームワーク Laravel実践開発PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応よくわかるPHPの教科書 【PHP7対応版】

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Go言語

Go言語で使えるORMライブラリ

1 はじめに2 ORMライブラリ2.1 GORM2.2 SQLBoiler3 GORMを使ってみる3.1 導入3.2 migration3.3 insert3.4 select3.5 update3. ...

WebアプリケーションにLINEログインを組み込む

1 はじめに2 LINEログインとは2.1 LINEログインでできること2.2 LINEログインのフロー3 LINEログインの設定3.1 プロバイダーを新規作成する3.2 チャネルを作成する3.3 リ ...

laravel logo

Laravelで認証APIを作る

1 はじめに1.1 条件1.2 JWTとは2 準備2.1 認証機能を有効化2.2 jwt-authのインストール2.3 コンフィグファイルの作成2.4 secretの作成3 Userモデルを修正4 g ...

RubyのHanamiチュートリアルをやってみた

1 はじめに2 紹介2.1 Hanamiとは?2.2 Hanamiを選ぶ理由2.2.1 軽量2.2.2 アーキテクチャとして2.2.3 スレッドセーフ3 チュートリアルのための準備4 実践4.1 はじ ...

laravel logo

Laravel Cashier サブスクリプションに使用するテーブルを理解する

1 はじめに2 Laravel Cashierのテーブル2.1 usersテーブル2.2 subscriptionsテーブル2.3 supscription_itemsテーブル3 課金情報の更新方法4 ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年10月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play