web模塊遷移到小程序的示例分析

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

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

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

1. 如何快速的將已有的web用例遷移到小程序

2. 針對(duì)新模塊，如何快速編寫兩端用例。

可直接移步最終方案

測(cè)試模塊類型

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

1. 與環(huán)境無關(guān)的邏輯層模塊

2. 與環(huán)境關(guān)聯(lián)的邏輯層模塊

3. 與環(huán)境關(guān)聯(lián)的UI組件模塊

類型1的模塊由于不受環(huán)境限制，可與web共用單元測(cè)試，無需額外的測(cè)試用例開發(fā)。

類型3的模塊，由于小程序與web端差異較大，比較難實(shí)現(xiàn)復(fù)用（目前我們的web UI層主要基于React，小程序使用原生開發(fā)，同時(shí)配合kbone進(jìn)行部分頁面的同構(gòu)開發(fā)）。

我們這里主要針對(duì)類型2的模塊進(jìn)行測(cè)試用例的遷移。

小程序端測(cè)試工具選擇

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

1. 組件單元測(cè)試 提供了一個(gè)測(cè)試工具集以支持自定義組件在 nodejs 單線程中運(yùn)行。

2. 小程序自動(dòng)化 為開發(fā)者提供了一套通過外部腳本操控小程序的方案。

通過官方工具結(jié)合Jest, Mocha等測(cè)試框架，我們可以實(shí)現(xiàn)在小程序環(huán)境下的測(cè)試。

我們選擇了小程序自動(dòng)化。類似于在Puppeteer運(yùn)行web端的測(cè)試，我們可以通過小程序自動(dòng)化，操控開發(fā)者工具，以實(shí)現(xiàn)小程序環(huán)境下的測(cè)試。兩者的相似之處給我們實(shí)現(xiàn)測(cè)試用例的跨端遷移甚至復(fù)用提供了可能性。

如何遷移測(cè)試用例

以遷移一個(gè)上報(bào)模塊的測(cè)試用例為例，如下是我們已有的一個(gè)web上報(bào)模塊測(cè)試用例。

web測(cè)試用例

該用例覆蓋的路徑為：調(diào)用imlog.default.error()方法 -> 瀏覽器將發(fā)起請(qǐng)求 -> 對(duì)請(qǐng)求參數(shù)進(jìn)行校驗(yàn)。

test('.error()調(diào)用正常', async done => {  const opts = {    project: 'imlogtest',
  };  // 檢查上報(bào)請(qǐng)求的參數(shù)
  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); // 請(qǐng)求的url符合預(yù)期
      expect(method).toBe('POST'); // 請(qǐng)求的method符合預(yù)期
      expect(headers['content-type']).toBe('text/plain'); // 請(qǐng)求的contentType符合預(yù)期
      expect(data.url).toBe(TEST_PAGE_URL); // 請(qǐng)求體的url字段符合預(yù)期

      done();
    } catch(error) {
      done(error);
    }
  };  // 監(jiān)聽上報(bào)請(qǐng)求并校驗(yàn)參數(shù)
  page.once('request', expector);  // 在瀏覽器中執(zhí)行上報(bào)
  page.evaluate(    (o) => {      const reportor = window.imlog.default;
      reportor.config(o);
      reportor.error('test'); // 進(jìn)行上報(bào)
    },
    opts
  );
});復(fù)制代碼

以上主要用到了Puppeteer的Page API。

• page.evaluate 控制頁面執(zhí)行一段邏輯（執(zhí)行imlog.default.error()）

• page.once('request', expector)  監(jiān)聽頁面的請(qǐng)求并獲取參數(shù)（檢測(cè)是否發(fā)起請(qǐng)求并校驗(yàn)請(qǐng)求參數(shù)）

小程序用例的設(shè)想

小程序自動(dòng)化給我們提供了一些類似于puppeteer的API：

• miniProgram.evaluate 控制小程序往 AppService 注入代碼片段并返回執(zhí)行結(jié)果

如果小程序能夠像Puppeteer，使用監(jiān)聽事件的形式攔截到wx API的調(diào)用參數(shù)，測(cè)試用例編寫將會(huì)方便許多。我們想象的小程序用例將會(huì)是如下形式：

test('.error()調(diào)用正常', async done => {  const opts = {    project: 'imlogtest',
  };  // 檢查上報(bào)請(qǐng)求的參數(shù)
  const expector = req => {    try {      // diff：按照特定格式解析出小程序請(qǐng)求參數(shù)
      const {url, method, headers, body, data} = parseWxReqParams(req); 

      expect(url).toBe(DEFAULT_URL); // 請(qǐng)求的url符合預(yù)期
      expect(method).toBe('POST'); // 請(qǐng)求的method符合預(yù)期
      expect(headers['content-type']).toBe('text/plain'); // 請(qǐng)求的contentType符合預(yù)期
      expect(data.url).toBe(TEST_PAGE_URL); // 請(qǐng)求體的url字段符合預(yù)期

      done();
    } catch(error) {
      done(error);
    }
  };  // 監(jiān)聽上報(bào)請(qǐng)求并校驗(yàn)參數(shù)
  // todo: miniProgram對(duì)象支持once/on等事件方法
  miniProgram.once('request', expector);  // 在小程序中執(zhí)行上報(bào)
  miniProgram.evaluate(    (o) => {      // diff: 請(qǐng)求方法掛在小程序app對(duì)象上
      const reportor = getApp().imlog.default;
      reportor.config(o);
      reportor.error('test'); // 進(jìn)行上報(bào)
    },
    opts
  );
});復(fù)制代碼

只要我們尋找一種方式，通過事件的形式，以miniProgram.on('api', fn)的方式監(jiān)聽到調(diào)用API時(shí)傳遞的參數(shù)。

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

1. web中page對(duì)象的操作轉(zhuǎn)移到小程序miniProgram對(duì)象完成

2. web中掛載在window下的方法，小程序中掛載在app下

3. web和小程序解析請(qǐng)求參數(shù)的方式不同

wx API攔截方法

首先觀察miniProgram對(duì)象，通過miniprogram-automator暴露出來的MiniProgram.d.ts，可以發(fā)現(xiàn)MiniProgram類本身就繼承自EventEmitter。

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

接下來就需要尋找方法，在api調(diào)用時(shí)觸發(fā)miniProgram對(duì)象的emit方法。

有兩個(gè)自動(dòng)化API可以幫助我們實(shí)現(xiàn)這點(diǎn)。

• miniProgram.mockWxMethod 允許我們覆蓋 wx 對(duì)象上指定方法的調(diào)用結(jié)果。

• miniProgram.exposeFunction 在 AppService 全局暴露方法，供小程序側(cè)調(diào)用測(cè)試腳本中的方法。

以上是“web模塊遷移到小程序的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！