@小程序自動化

微信小程序自動化

---

微信小程序實現了本身自動化，使用自動化，可以幫助更好的處理咱們的產品，更好的保證質量。咱們從頭開始學起，從api開始，會包含jest測試。

自動化與測試

自動化通常都是相輔相成的，移動化固然只能信賴測試部分，測試可以成功，咱們自動化纔有意義。

• 單元測試

單元測試的意義，保證咱們的每個單元保證本身是正常運轉的。咱們進行單元測試就對每個零件進行測試。後面能夠更好的實現自動化。一般會有測試塊，也被稱爲測試套件（describe）, 固然還有最小的測試單元（it or test）, 在 jest 總 it 和 test 是同樣的，只不過的別名而已，在測試 Matca 的 chai 斷言庫裏面，it 稱爲最小的測試用例單元。一個測試用例就是一個函數，一個測試套件也是一個函數。文件名通常改成 .test.js （表示測試）和 .spec.js （表示規格）文件。

小程序的cli的路徑

Mac：/Applications/wechatwebdevtools.app/Contents/MacOS/cli
Win：C:/Program Files (x86)/Tencent/微信web開發者工具/cli.bat
複製代碼

使用 Node.js 進行測試，miniprogram-automator 是小程序的自動化的 sdk, 通常配合 jest 進行測試。

• miniprogram-automator 可以完成小程序模擬操做
• jest 完成一些斷言相關的工做。

自動化鏈接咱們小程序

依賴模塊： miniprogram-automator

<view class="test" bind:tap="testTap">hahah</view>
<youngui-button bind:getuserinfo="handleUserInfo"></youngui-button>
複製代碼

const automator = require('miniprogram-automator')

automator.launch({
  cliPath: 'path/to/cli', // 工具 cli 位置，若是你沒有更改過默認安裝位置，能夠忽略此項
  projectPath: 'path/to/project', // 項目文件地址
}).then(async miniProgram => {
  const page = await miniProgram.reLaunch('/page/home/index')
  await page.waitFor(500)
  const element = await page.$('.kind-list-item-hd')
  console.log(await element.attribute('.test'))
  await element.tap()

  await miniProgram.close()
}).catch((error) => {
    console.error(error)
})
複製代碼

登陸咱們的小程序： launch 方法

• 登陸以後，進入home主頁，
• 模擬等待500ms
• 獲取 .test 的元素屬性,相似於 jQuery 的選擇器
• 點擊元素
• 關閉元素
• 注意promsie須要使用catch來捕獲作錯誤

測試的模擬

1. 找到元素，模擬點擊事件

測試： Jest 中的複用法則

1. 在全部測試項目中複用
2. 在 describe 中複用

• beforeAll
• afterAll
• beforeEach
• beforeAfter

beforeAll(() => console.log('1 - beforeAll'));
afterAll(() => console.log('1 - afterAll'));
beforeEach(() => console.log('1 - beforeEach'));
afterEach(() => console.log('1 - afterEach'));
test('', () => console.log('1 - test'));
describe('Scoped / Nested block', () => {
  beforeAll(() => console.log('2 - beforeAll'));
  afterAll(() => console.log('2 - afterAll'));
  beforeEach(() => console.log('2 - beforeEach'));
  afterEach(() => console.log('2 - afterEach'));
  test('', () => console.log('2 - test'));
});

// 1 - beforeAll

// 1 - beforeEach
// 1 - test
// 1 - afterEach

// 2 - beforeAll

// 1 - beforeEach //特別注意，1 - beforeEach 會在test it 裏面都會調用，且優先於裏面的 beforeEach

// 2 - beforeEach
// 2 - test
// 2 - afterEach

// 1 - afterEach //特別注意，1 - afterEach 會在test it 裏面都會調用，且優先於裏面的 afterEach

// 2 - afterAll

// 1 - afterAll
複製代碼

beforeAll, afterAll 都只會指定都是隻執行一次的函數

總結： 這其實就是做用域的問題，這些鉤子函數在不一樣的做用域的中執行狀況不同！

測試類型

1. 測試 wxml 的屬性、text 是否是符合咱們的預期
2. 測試 wxml 渲染的結構的數量和內容是否是符合咱們的預期
3. 測試 wxml 的class 屬性是否是符合咱們的預期
4. 測試 頁面跳轉先後的的行爲是否是不是符合咱們的預期

jest 中幾個經常使用重要的 api

• test(name, fn, timout) 他的別名就是 it 函數使用方式是同樣的
• describe 是將測試分紅一個個的塊，咱們要在塊裏面的運行一些東西。

Sort	api	名字	參數	做用
1	test	測試函數	name, fn, timeout	測試函數
2	it	測試函數	name, fn, timeout	test的別名
2	describe	分做用域函數	name, fn	將測試分紅不一樣的做用域
2	beforeAll	全局前置鉤子函數	name, timeout	前置鉤子
2	beforeEach	前置鉤子函數	name, timeout	前置鉤子
2	afterAll	全局後置鉤子函數	name, timeout	前置鉤子
2	afterEach	後置鉤子函數	name, timeout	前置鉤子

jest 測試文件後綴名

.test.js 和 .spec.js 有什麼區別

jest 在 vscode 裏面能夠添加插件，添加了watch 以後每次更改 jest 的測試文件自動從新運行 jest 文件的內容，jest 的檢查到依賴的文件變化的時候，依然是在運行的階段，這樣的好是咱們能很好提升咱們的代碼質量，咱們不該在控制檯中不斷地調試 console 和 debugger，咱們應該學會寫測試用例，這纔是進階了一小步。沒有工做，在家裏提升本身，沒喲經濟來源，其餘的工做不想作，人生啊-_-,

問題

咱們接觸的都是在頁面寫死的內容，咱們在頁面中的請求到了數據以後，如何測試，頁面的內容？？ 咱們應該怎麼寫？？

思路：先發請求，而後測試請求數據

咱們如何測翻頁功能？？

在 miniProgram對象上，提供了 miniProgram.pageScrollTo 的行爲

小程序自動化的提供的api 整理

分爲四大類： AutoMator、 MiniProgram、 Page、 Element

---

Sort	AutoMater	MiniProgram	Page	Element
1	connect	pageStack	path	tagName
2	launch	navigateTo	query	$
3	-	redirectTo	$	$$
4	-	reLaunch	$$	size
5	-	switchTab	waitFor	offset
6	-	systemInfo	data	text
7	-	callWxMethod	setData	attribute
8	-	mockWxMethod	size	wxml
9	-	restoreWxMethod	scrollTop	outerWxml
10	-	evaluate	callMethod	value
11	-	pageScrollTo		style
12	-	exposeFunction		tap
13	-	remote		longpress
14	-	disconnect		touchstart
15	-	close		touchmove
16	-	on-console		touchend
17	-	on-execption		callMethod
18	-	-	-	data
19	-	-	-	setData
20	-	-	-	trigger