バックエンドユーザがインタフェースを提供していない場合、フロントエンドユーザはどのようにテストしますか--mock

3319 ワード

1、回顧


2、ライン上のmock


http://rap2.taobao.org/
https://www.easy-mock.com/

3、オンラインインタフェース文書Swagger


https://swagger.io/

4、reactドキュメント


Reactはユーザーインタフェースを構築するためのJavaScriptライブラリです

4.1要素、構成部品

const element = 
Hello, world!
;
//   HTML。  JSX，  JavaScript
  • JSXはReact"要素"を生成することができます.
  • reactの注目点分離:Reactは、タグと論理を異なるファイルに分離するという人為的な分離方式を採用していないが、両者を「コンポーネント」と呼ばれるばらばらな結合ユニットに共通に格納することによって、注目点分離を実現する.
  • ReactはJSXの使用を強制することなく、関数
    • を使用することもできます.
    // jsx
const App = (
  
    
    hello jsx
  
    
)

//  
const App = React.createElement('div', {className: 'test'}, 'hello jsx')

//  ： 
const element = {
  type: 'div',
  props: {
    className: 'test',
    children: 'hello jsx'
  }
};
  • React DOMは、すべての入力をレンダリングする前にデフォルトでエスケープされます.それはあなたのアプリケーションに、自分で明確に書かれていないコンテンツが永遠に注入されないことを保証します.すべてのコンテンツは、レンダリング前に文字列に変換されます.これにより、XSS(cross-site-scripting)攻撃を効果的に防止できます.

    • 4.2要素レンダリング

  • 元素はReactアプリケーションを構成する最小レンガ
    • である.
  • コンポーネントは、要素からなる
    • である.
  • Reactは更新が必要な部分だけを更新する--react内部にはdiffアルゴリズムが含まれており、採用されている仮想DOM
    • コンポーネント(クラスコンポーネント、関数コンポーネント)、要素は変数であり、その値はHTMLコードです.

    4.3コンポーネントとprops

  • コンポーネント名は大文字で始まる必要があります.コンポーネントはネストして使用できます.コンポーネントは、分割が小さいほど良いのではなく、合理的であればあるほど良い
    • である.
  • Propsの読み取り専用
  • すべてのReactコンポーネントは、純粋な関数のようにpropsを変更しないように保護する必要があります.
  • コンポーネント内部使用可能状態、コンポーネント間使用props

    • 4.4状態

  • クラスコンポーネントを用いる初期化データ(状態)を設定することができ、関数式コンポーネントは状態
    • を設定することができない.
  • Stateはpropsと似ていますが、stateはプライベートであり、現在のコンポーネントに完全に制御されています.

    • 4.5ライフサイクル

  • 初期化フェーズ
  • ランタイムフェーズ
  • 廃棄フェーズ
  • 異常処理

    • 4.6イベント処理


    React要素のイベント処理はDOM要素とよく似ていますが、文法的な違いがあります.
    Reactイベントのネーミングは、純粋な小文字ではなく、キャメルCase(camelCase)を使用します.onClick onChange
    JSX構文を使用する場合は、文字列ではなくイベント処理関数として関数を入力する必要があります.
    Reactのもう一つの違いは、falseに戻ることでデフォルトの動作を阻止できないことです.

    4.7条件レンダリング

  • jsxはifではなく、jsxは、、、または、三目
    • と
  • if JSX
  • レンダリングをブロック
    • render () {
  if (!flag) {
    return false; // return null;
  }
}

    4.8リスト&key

  • jsxはforではなくmap
  • for中jsx
  • リストには必ずkeyが追加され、keyは変化の標識であり、
    • は多重化されていない.
  • 誰がkey
    • を加えたかを巡る
  • keyは兄弟ノード間で唯一
    • でなければならないだけです.
    render () {
  return (
    {
      this.state.isLoading ?  : this.state.prolist.map(item => ())
    }
  )
}

    4.9フォーム

  • 制御コンポーネント
    • Reactのstateを「一意のデータソース」にします.レンダーフォームのReactコンポーネントは、ユーザー入力中にフォームで発生する操作を制御します.値を制御するフォーム入力要素を「制御コンポーネント」と呼びます.
    イベントオブジェクトeventで値を取得し、setStateを呼び出して値を変更します.valueはフォームの値で、フォームの値は自分のコンポーネントの状態です.
    handler (event) {
  this.setState({
    username: event.currentTarget.value
  })
}

render () {
  return (
    
    
      
    
    
  )
}

    アクセスフィールドの検証、追跡、およびフォームの発行を処理する完全なソリューション:https://jaredpalmer.com/formik
  • 非制御コンポーネント
    • JUnit Cookbook-Junitメニュー
    divモードウィンドウの実装