laravel tag assertions

Laravelタグアサーション

Laravel には数多くの素晴らしい機能が付属していますが、私のお気に入りの 1 つは、アプリケーションのテストが簡単になることです。

Laravel Tag Assertions は、HTML タグに便利なアサーションを追加することで、Laravel が提供する驚くべき HTTP テスト機能をさらに強力にすることを目的としています。

動機

応答に特定の要素 (つまり、特定の props を備えた Vue コンポーネント) が含まれていることをアサートしたいことがよくありますが、改行やその他の空白は考慮したくありませんでした。 $response->assertSee(...)のようなメソッドの使用は、この特定の使用例には理想的ではありません。 Laravel Dusk は遅く、場合によっては壊れやすいため、望ましい選択肢ではありませんでした。

インストール

 composer require --dev mikerogne/laravel-tag-assertions

インストールすると、TestResponse インスタンスは新しいアサーションにアクセスできるようになります。使用法と例については以下を参照してください。

使用法

TestResponse::assertSeeTag(string $selector, array $attributes)

$selector は、一致させるタグの名前です。必要に応じて具体的に取得できます。 $attributes は、タグに必要な属性の配列です。

単純	より具体的な
ボタン	ボタン.btn.btn-デフォルト
ある	a[役割=タブ]

TestResponse::assertSeeTag(string $selector, $callback)

コールバックを指定すると、3 つのパラメータがコールバックに渡されます。

1. $tag : これはタグ自体の名前です。つまり、 buttonまたはa
2. $attributes : これはタグの属性の配列です。つまり、 ["class" => "btn btn-default"]です。
3. $content : コンテンツ (innerHtml) を表す文字列です。空白が含まれます。

TestResponse::assertSeeTagContent(string $selector, string $content)

場合によっては、特定のコンテンツを含むタグがページ上にあることだけを気にすることがあります。この一般的な使用例は、テキストエリア フィールドです。

 $response->assertSeeTagContent('textarea[name=about]', $user->about);

例

フォームの検証

 < body >
    < h1 > Contrived Example  h1 >
    
    < form >
        < p >
            < label > First Name  label >
            < input type =" text " name =" first_name " value =" {{ old('first_name') }} " >
         p >
        < p >
            < label > Last Name  label >
            < input type =" text " name =" last_name " value =" {{ old('last_name') }} " >
         p >
        < p >
            < label > Email  label >
            < input type =" text " name =" email " value =" {{ old('email') }} " >
         p >
        < p >
            < button type =" submit " > Register  button >
         p >
     form >
 body > 

 

namespace Tests  Feature ;

class ExampleTest extends TestCase
{
    / * * @ test * /
    public function uses_old_input_when_validation_fails ()
    {
        $ data = [
            ' first_name ' => ' John ' ,
            ' last_name ' => ' Doe ' ,
            ' email ' => '' , // oops !
        ];
        
        $ response = $ this -> post ( ' /register ' , $ data );
        
        $ response -> assertSeeTag ( ' input[name=first_name] ' , [
            ' value ' => $ data [ ' first_name ' ],
        ]);
        
        $ response -> assertSeeTag ( ' input[name=last_name] ' , [
            ' value ' => $ data [ ' last_name ' ],
        ]);
    }
}

Vueコンポーネント

 < body >
    < h1 > Another Contrived Example  h1 >
    
    < blog-posts
        :posts =" {{ $posts->toJson() }} "
    >  blog-posts >
 body > 

 

namespace Tests  Feature ;

class VueTest extends TestCase
{
    / * * @ test * /
    public function lists_blog_posts ()
    {
        $ posts = factory ( App Post::class, 5 )-> create ();
        
        $ response = $ this -> get ( ' / ' , $ data );
        
        $ response -> assertSeeTagContent ( ' h1 ' , ' Another Contrived Example ' );
        
        $ response -> assertSeeTag ( ' blog-posts ' , [
            ' :posts ' => e ( $ posts -> toJson ()),
        ]);
    }
}

コールバックの例

 < body >
    < h1 > Callback Example  h1 >

    
    < h2 class =" section-title " data-foobar =" bazburk " >
        Product Review
     h2 >
    < p class =" summary " > Lorem ipsum dolor sit amet, consectetur adipiscing elit.  p >
    
 body > 

 

namespace Tests  Feature ;

class CallbackTest extends TestCase
{
    / * * @ test * /
    public function shows_product_review ()
    {
        $ response = $ this -> get ( ' / ' , $ data );
        
        $ response -> assertSeeTag ( ' h2 ' , function ( $ tag , $ attributes , $ content ) {
            // $ tag - > "h2"
            // $ attributes - > [ 'class' = > 'section-title' , 'data-foobar' = > 'bazburk' ]
            // $ content - > Product Review ( but including the whitespace !)
            
            return  Illuminate  Support Str:: contains ( $ content , ' Product Review ' );
        });
        
        $ response -> assertSeeTagContent ( ' p.summary ' , ' Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' );
    }
}

ライセンス

このコードは、MIT ライセンスに基づいてライセンスされたオープンソース ソフトウェアです。