スタイル付きコンポーネントによる自動テスト

3257 ワード
tutorial frontend webdev testing テキストリンク
スタイルのコンポーネントは素晴らしいことができますが、いくつかの欠点もあります.これらの欠点の1つは、自動化されたテストは、スタイルのコンポーネントのコンパイルプロセスのために困難です.
TLDR
  • クラス名属性
    • を追加する
  • addとid属性
  • カスタムデータ属性を追加する

    問題
    スタイルのコンポーネントがレンダリングされると、それらはコンパイルされる方法のために名前をエンコードします.これは、“ibnfbx”の原因となるようなクラス名を持つコンポーネントを見つけることを意味します.

    解決策
    この問題に対する3つの簡単な解決策があります.
  • クラス名属性
    • を追加する
  • ID属性
    • を追加する
  • カスタムデータ属性を追加する

    クラス名属性の追加
    最初のオプションは、クラス名属性をコンポーネントに追加することです.ClassName属性を追加すると、アプリケーションのコンパイル時にクラス名が変更されません.したがって、コンポーネントは次のようになります.
    <TestComponent className="testComponentClass" />
    これは、テストのターゲットとQAオートメーションテスターの多くを使用するために使用されるもののためにものを追加する人気のある方法です.同じクラス名を持つ複数のコンポーネントを持つことができるので、同時に複数のコンポーネントをすべてつかむことができる場合は、これはまた、大きなオプションです.しかしながら、別のdevが簡単にクラス名をあなたのものと同じような別のコンポーネントに追加することができます.その問題を解決する一つの方法は、IDSを使うことです.

    属性の追加
    番目のオプションは、コンポーネントにid属性を追加することです.これは、アプリケーションがコンパイルされたときも変更されません.あなたのコンポーネントは次のようになります.
    <TestComponent id="testComponentId"/>
    これはQAオートメーションテスターの多くをターゲットにするテストのためのもう一つの一般的な方法です.これは、他のコンポーネントをターゲットにする必要がないことを確認したい場合には、このオプションを使用します.あなたのコンポーネントが返されているデータに基づいている場合、プログラムを追加するのも簡単です.たとえば、データベースからデータの行を持つテーブルがあれば、データベースからのデータのIDに基づいて、各行に簡単にIDを与えることができます.クラス名を使ってこれを行うことができます.この構造体はid属性に対してより多くの構造を与えます.これは、しかし、複数のものをターゲティングするためによく貸さない.複数の場合をターゲットにする場合、1つの名前を指定するのではなく、異なるIDの配列を作成する必要があります.あなたがIDをプログラム化しているならば、彼らが同様に心に留めておく何かであるように、彼らが同じたびでないので、これはテストを難しくすることもできます.それはあなたがテストしているものに依存しています

    カスタムデータ属性の追加
    最後の簡単なオプションはカスタムデータ属性を追加することです.これは、あなたが欲しいものは何でも、かなり名前がつけられることができます、しかし、私は通常「データテスト」と行きます.コンポーネントは次のようになります.
    <TestComponent data-test="testComponent"/>
    これは人々が通常彼らを必要としないので、これはより人気がない使用です、彼らが彼らが編集するとき、彼らがスタイルに必要であるクラス名は通常変わるというわけではありません.しかし、それは考慮に固い選択です.それはクラス名のように多くのように動作します.同じプロと短所としても、それは懸念の分離を追加するプロを追加しています.このオプションを使用するテスト以外に何も必要はありません.また、テスターをターゲットに何をターゲットにすることはなく、特定のクラスをターゲットにしようとするよりもターゲットを知ることが容易になります.
    あなたは自分とあなたのチームのために最適な独自の決定を行うことができますので、彼らはそれぞれの長所と短所を持っている.私は個人的にカスタムデータ属性が好きであるので、名前がテストのために、そして、何も他の何にも使われないことを明らかにして、テストを書く人が何を目標にするかについてわかっているのを簡単にします.
    私は、これはあなたのオプションを量ることができます願っています!ハッピーコーディング!
    • Kernelパラメータの変更
    Status bar