web模塊遷移到小程序的示例分析-創新互聯

小編給大家分享一下web模塊遷移到小程序的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網站建設哪家好，找創新互聯公司！專注于網頁設計、網站建設、微信開發、微信小程序、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了瑞昌免費建站歡迎大家使用！

隨著小程序越來越被廣泛使用，我們前端的開發工作也從單純的web開發，擴大到web+小程序的跨端開發。為了提高研發效率，越來越多的web模塊需要遷移、更新，兼容小程序以實現跨端復用。而這些模塊也會跟隨業務進行迭代和版本更新，這時候，我們就需要有良好的測試來保障各端模塊的可靠性。

由于我們將許多已有的web模塊遷移到小程序，web端的測試相對已經比較完備了。因此我們需要考慮的是：

如何快速的將已有的web用例遷移到小程序
針對新模塊，如何快速編寫兩端用例。

可直接移步最終方案

測試模塊類型

我們目前的模塊主要是以下三種類型：

與環境無關的邏輯層模塊
與環境關聯的邏輯層模塊
與環境關聯的UI組件模塊

類型1的模塊由于不受環境限制，可與web共用單元測試，無需額外的測試用例開發。

類型3的模塊，由于小程序與web端差異較大，比較難實現復用（目前我們的web UI層主要基于React，小程序使用原生開發，同時配合kbone進行部分頁面的同構開發）。

我們這里主要針對類型2的模塊進行測試用例的遷移。

小程序端測試工具選擇

小程序官方目前提供了兩種工具來支持小程序測試：

組件單元測試提供了一個測試工具集以支持自定義組件在 nodejs 單線程中運行。
小程序自動化為開發者提供了一套通過外部腳本操控小程序的方案。

通過官方工具結合Jest, Mocha等測試框架，我們可以實現在小程序環境下的測試。

我們選擇了小程序自動化。類似于在Puppeteer運行web端的測試，我們可以通過小程序自動化，操控開發者工具，以實現小程序環境下的測試。兩者的相似之處給我們實現測試用例的跨端遷移甚至復用提供了可能性。

如何遷移測試用例

以遷移一個上報模塊的測試用例為例，如下是我們已有的一個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)的方式監聽到調用API時傳遞的參數。

在這種形式下，web和小程序用例的差異僅在于：

web中page對象的操作轉移到小程序miniProgram對象完成
web中掛載在window下的方法，小程序中掛載在app下
web和小程序解析請求參數的方式不同

wx API攔截方法

首先觀察miniProgram對象，通過miniprogram-automator暴露出來的MiniProgram.d.ts，可以發現MiniProgram類本身就繼承自EventEmitter。

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

接下來就需要尋找方法，在api調用時觸發miniProgram對象的emit方法。

有兩個自動化API可以幫助我們實現這點。

miniProgram.mockWxMethod 允許我們覆蓋 wx 對象上指定方法的調用結果。
miniProgram.exposeFunction 在 AppService 全局暴露方法，供小程序側調用測試腳本中的方法。

以上是“web模塊遷移到小程序的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

分享名稱：web模塊遷移到小程序的示例分析-創新互聯
當前路徑：http://m.newbst.com/article14/dehgge.html

成都網站建設公司_創新互聯，為您提供域名注冊、全網營銷推廣、面包屑導航、小程序開發、網站設計、靜態網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容