小規模プログラムの自動テストのための wx API インターセプト

WeChat ミニ プログラム開発チュートリアル列ミニ プログラムの自動テストのための Wx API インターセプト。

小さなプログラムがますます広く使用されるようになるにつれて、フロントエンド開発作業も純粋な Web 開発から変化してきました。 Web アプレットのクロスエンド開発に拡張します。研究開発の効率を向上させるために、 より多くの Web モジュールを移行、更新し、小規模なプログラムと互換性を持たせて、端末間での再利用を実現する必要があります。これらのモジュールも、ビジネスに続いて反復とバージョン更新が行われる予定ですが、現時点では、各エンド モジュールの信頼性を確保するために適切な テスト を行う必要があります。

多くの既存の Web モジュールをミニ プログラムに移行したため、Web 側のテストは比較的完了しました。したがって、考慮する必要があるのは次のとおりです。

1. 既存の Web ユースケースを小規模なプログラムに迅速に移行する方法

2. 新しいモジュールの場合、両端のユースケースをすばやく作成する方法。

(Web 側では主に Puppeteer と Jest の組み合わせを使用します。)

最終ソリューションに直接移動できます

テスト モジュールtype

現在のモジュールは主に以下の 3 種類です。

環境非依存型論理層モジュール
1. 環境関連論理層モジュール
2. 環境に関連付けられた UI コンポーネント モジュール

タイプ 1 モジュールは環境による制限を受けず、追加のテスト ケース開発を必要とせずに単体テストを Web と共有できます。

タイプ 3 モジュールは、ミニ プログラムと Web の間に大きな違いがあるため、再利用するのが困難です (現在、Web UI レイヤーは主に React に基づいており、ミニ プログラムはネイティブに開発され、開発には kbone が使用されています)一部のページ。同型展開)。

ここでは主に

タイプ 2 のモジュールのテスト ケースを移行します。

ミニ プログラム テスト ツールの選択

ミニ プログラム公式は現在、ミニ プログラム テストをサポートする 2 つのツールを提供しています。

コンポーネント単体テストは、テスト ツールを提供します。 nodejs シングルスレッドで実行されるカスタムコンポーネントをサポートします。
1. ミニ プログラム オートメーションは、外部スクリプトを通じてミニ プログラムを制御するための一連のソリューションを開発者に提供します。

公式ツールと Jest や Mocha などのテスト フレームワークを組み合わせることで、小規模なプログラム環境でテストを実装できます。

私たちは

ミニ プログラム オートメーション を選択しました。 Puppeteer で Web 側のテストを実行するのと同様に、ミニ プログラムを自動化し、開発者ツールを制御してミニ プログラム環境でテストを実装できます。 2 つの類似点により、クロスエンドの移行やテスト ケースの再利用の可能性が得られます。

テスト ケースの移行方法

レポート モジュールのテスト ケースの移行を例に挙げます。以下は、すでに存在する Web レポート モジュールのテスト ケースです。

Web テスト ケース

このユース ケースでカバーされるパスは次のとおりです:

imlog.default.error() メソッドを呼び出す -> ブラウザがリクエストを開始します -> 正解リクエストパラメータ を確認してください。

test('.error()调用正常', async done => {  const opts = {    project: 'imlogtest',
  };  // 检查上报请求的参数
  const expector = req => {    try {      const url = req.url();      const method = req.method();      const headers = req.headers();      const body = req.postData();      const data = JSON.parse(body);

      expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
      expect(method).toBe('POST'); // 请求的method符合预期
      expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
      expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期

      done();
    } catch(error) {
      done(error);
    }
  };  // 监听上报请求并校验参数
  page.once('request', expector);  // 在浏览器中执行上报
  page.evaluate(    (o) => {      const reportor = window.imlog.default;
      reportor.config(o);
      reportor.error('test'); // 进行上报
    },
    opts
  );
});复制代码

上記は主に Puppeteer の Page API を使用しています。

page.evaluate は、ロジックの一部を実行するページを制御します (imlog.default.error() を実行します)
• page.once('request', Expector) ページをリッスンしますリクエストとパラメーターの取得 (リクエストが開始されたかどうかを検出し、リクエスト パラメーターを確認します)

ミニ プログラムの使用例の想像

ミニ プログラムの自動化では、puppeteer に似たいくつかの API が提供されます。

miniProgram.evaluate は、コード スニペットを AppService に挿入するミニ プログラムを制御し、実行結果を返します

ミニ プログラムが Puppeteer のようにできる場合は、呼び出しをインターセプトできます。リスニングイベント、テストケースの形式での wx API のパラメータの記述がはるかに簡単になります。私たちが想像するミニ プログラムの使用例は、次の形式になります。

test('.error()调用正常', async done => {  const opts = {    project: 'imlogtest',
  };  // 检查上报请求的参数
  const expector = req => {    try {      // diff：按照特定格式解析出小程序请求参数
      const {url, method, headers, body, data} = parseWxReqParams(req); 

      expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
      expect(method).toBe('POST'); // 请求的method符合预期
      expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
      expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期

      done();
    } catch(error) {
      done(error);
    }
  };  // 监听上报请求并校验参数
  // todo: miniProgram对象支持once/on等事件方法
  miniProgram.once('request', expector);  // 在小程序中执行上报
  miniProgram.evaluate(    (o) => {      // diff: 请求方法挂在小程序app对象上
      const reportor = getApp().imlog.default;
      reportor.config(o);
      reportor.error('test'); // 进行上报
    },
    opts
  );
});复制代码

miniProgram.on('api', fn) の形式で呼び出しを監視する方法が見つかった限り。 events API 中に渡されるパラメータ。

この形式では、Web とミニ プログラムの使用例の唯一の違いは次のとおりです。

Web 内のページ オブジェクトの操作はミニ プログラムに転送されます。完成させるミニプログラム オブジェクト
Web のウィンドウの下にマウントする方法と、アプレットのアプリの下にマウントする方法
2. Web とアプレットのリクエスト パラメーターの解析方法は異なります

wx API インターセプト メソッド

まず、miniProgram オブジェクトを観察します。miniprogram-aumater によって公開される MiniProgram.d.ts を通じて、MiniProgram クラス自体が EventEmitter から継承していることがわかります。

import { EventEmitter } from 'events';export default class MiniProgram extends EventEmitter {  // ...}复制代码

次に、API が呼び出されたときに miniProgram オブジェクトの Emit メソッドをトリガーする方法を見つける必要があります。

これを実現するのに役立つ自動化 API が 2 つあります。

• miniProgram.mockWxMethod を使用すると、wx オブジェクトで指定されたメソッドを呼び出した結果をオーバーライドできます。

• miniProgram.exposeFunction は、ミニ プログラムがテスト スクリプト内のメソッドを呼び出すために、AppService でメソッドをグローバルに公開します。

この瞬間、大胆なアイデアが頭に浮かびました。

以上が小規模プログラムの自動テストのための wx API インターセプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。