新增web端editor测试例

pages/component/editor/editor.test.js

+// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
+jest.setTimeout(60000);
+describe('editor.uvue', () => {
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  let page, editor, options = [];
+  beforeAll(async () => {
+    page = await program.reLaunch("/pages/component/editor/editor");
+    await page.waitFor('view');
+    editor = await page.$('#editor');
+    await page.waitFor(3000);
+    await page.setData({autoTest:true})
+  });
+
+  it('editor-wrapper', async () => {
+    expect(await editor.attribute("placeholder")).toBe("开始输入...")
+    expect(await editor.attribute("read-only")).toBe("false")
+  });
+
+  it('editor-toolbar', async () => {
+    const iconfontsEl = await page.$$('.iconfont');
+    for (var i = 0; i < iconfontsEl.length - 7; i++) {
+      await iconfontsEl[i].tap()
+      // await page.waitFor(500)
+      const getFormats = await page.data('formats')
+      const name = await iconfontsEl[i].attribute('data-name')
+      options.push({
+        insert:'文本内容' + name,
+        attributes: getFormats
+      })
+      await page.callMethod('setContents', options)
+      await page.setData({
+        formats: {}
+      })
+      await iconfontsEl[i].tap()
+    }
+  });
+
+  it('editor-screenshot', async () => {
+    expect(await program.screenshot()).toSaveImageSnapshot();
+    await page.waitFor(500);
+  })
+
+  it('clear', async () => {
+    await page.callMethod('clear')
+    await page.waitFor(500)
+    expect(await editor.attribute("placeholder")).toBe("开始输入...")
+  })
+
+  it('undo-redo', async () => {
+    await page.callMethod('insertDate')
+    await page.callMethod('insertDivider')
+    await page.waitFor(500)
+    await page.callMethod('undo')
+    await page.waitFor(500)
+    expect(await page.data('undoTest')).toBe(true)
+    await page.callMethod('redo')
+    await page.waitFor(500)
+    expect(await page.data('redoTest')).toBe(true)
+  })
+
+  it('insertImage', async () => {
+    await page.callMethod('insertImage','https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png')
+    await page.waitFor(500)
+    expect(await program.screenshot()).toSaveImageSnapshot();
+  })
+
+  it('removeFormat', async () => {
+      const bgcolorEl = await page.$('.icon-fontbgcolor');
+      await bgcolorEl.tap()
+      await page.waitFor(500)
+      const getFormats = await page.data('formats')
+      await page.callMethod('setContents', [
+                {
+                  insert: '设置字体样式bgcolor',
+                  attributes: getFormats
+                }
+              ])
+      await page.waitFor(500)
+      await page.callMethod('removeFormat')
+      await page.waitFor(500)
+      expect(await page.data('removeFormatTest')).toBe(true)
+      expect(await page.data('formats')).toEqual({})
+  })
+
+});

pages/component/editor/editor.uvue

@@ -30,7 +30,7 @@
 						data-name="marginTop" data-value="20px"></view>
 					<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
 						data-name="marginBottom" data-value="20px"></view>
-					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
+
 					<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
 						data-name="fontFamily" data-value="Pacifico"></view>
 					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
@@ -39,27 +39,35 @@
 						data-name="color" data-value="#0000ff"></view>
 					<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
 						class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
-					<view class="iconfont icon-date" @tap="insertDate"></view>
+
 					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
 					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
 						data-name="list" data-value="ordered"></view>
 					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
 						data-name="list" data-value="bullet"></view>
-					<view class="iconfont icon-undo" @tap="undo"></view>
-					<view class="iconfont icon-redo" @tap="redo"></view>
+
+
 					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
 					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
-					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
-					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
+
+
 					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
 						data-name="header" :data-value="1"></view>
 					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
 						data-name="script" data-value="sub"></view>
 					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
 						data-name="script" data-value="super"></view>
-					<view class="iconfont icon-shanchu" @tap="clear"></view>
+
 					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
 						data-name="direction" data-value="rtl"></view>
+
+          <view class="iconfont icon-date" @tap="insertDate"></view>
+          <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
+          <view class="iconfont icon-charutupian" @tap="chooseInsertImage"></view>
+          <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
+          <view class="iconfont icon-undo" @tap="undo"></view>
+          <view class="iconfont icon-redo" @tap="redo"></view>
+          <view class="iconfont icon-shanchu" @tap="clearShowModal"></view>
 				</view>
 
 				<view class="editor-wrapper">
@@ -86,7 +94,12 @@
 			return {
 				readOnly: false,
 				formats: {},
-        editorCtx:{} as Context
+        editorCtx:{} as Context,
+        // 自动化测试
+        autoTest:false,
+        undoTest:false,
+        redoTest:false,
+        removeFormatTest:false
 			}
 		},
 		onLoad() {
@@ -110,6 +123,20 @@
 					this.editorCtx = res.context
 				}).exec()
 			},
+      // 自动化测试专用
+      setContents(options) {
+      	this.editorCtx.setContents({
+          delta: {
+            ops:options
+          },
+          success: (res) => {
+          	console.log('setContents-success', res)
+          },
+          fail: (err) => {
+          	console.log(err)
+          }
+      	})
+      },
       getCon() {
       	this.editorCtx.getContents({
       		success: (res) => {
@@ -121,16 +148,27 @@
       	})
       },
 			undo() {
-				this.editorCtx.undo()
+				this.editorCtx.undo({
+      		success: (res) => {
+            this.undoTest = true
+      		},
+      		fail: (err) => {
+            this.undoTest = false
+      		}
+      	})
 			},
 			redo() {
-				this.editorCtx.redo()
+				this.editorCtx.redo({
+      		success: (res) => {
+            this.redoTest = true
+      		},
+      		fail: (err) => {
+            this.redoTest = false
+      		}
+      	})
 			},
 			format(e) {
-				let {
-					name,
-					value
-				} = e.target.dataset
+				let {name,value} = e.target.dataset
 				if (!name) return
 				// console.log('format', name, value)
 				this.editorCtx.format(name, value)
@@ -146,23 +184,34 @@
 					}
 				})
 			},
-			clear() {
-				uni.showModal({
-					title: '清空编辑器',
-					content: '确定清空编辑器全部内容？',
-					success: res => {
-						if (res.confirm) {
-							this.editorCtx.clear({
-								success: function(res) {
-									console.log("clear success")
-								}
-							})
-						}
-					}
-				})
+      clear() {
+        this.editorCtx.clear({
+          success: function(res) {
+            console.log("clear success")
+          }
+        })
+      },
+			clearShowModal() {
+        uni.showModal({
+        	title: '清空编辑器',
+        	content: '确定清空编辑器全部内容？',
+        	success: res => {
+        		if (res.confirm) {
+        			this.clear()
+        		}
+        	}
+        })
 			},
 			removeFormat() {
-				this.editorCtx.removeFormat()
+				this.editorCtx.removeFormat({
+      		success: (res) => {
+      			console.log('removeFormat-success', res)
+            this.removeFormatTest = true
+      		},
+      		fail: (err) => {
+            this.removeFormatTest = false
+      		}
+      	})
 			},
 			insertDate() {
 				const date = new Date()
@@ -171,19 +220,22 @@
 					text: formatDate
 				})
 			},
-			insertImage() {
-				uni.chooseImage({
-					count: 1,
-					success: (res) => {
-						this.editorCtx.insertImage({
-							src: res.tempFilePaths[0],
-							alt: '图像',
-							success: function() {
-								console.log('insert image success')
-							}
-						})
-					}
-				})
+      insertImage(image){
+        this.editorCtx.insertImage({
+          src:image,
+          alt: '图像',
+          success: function() {
+            console.log('insert image success')
+          }
+        })
+      },
+			chooseInsertImage() {
+        uni.chooseImage({
+        	count: 1,
+        	success: (res) => {
+        		this.insertImage(res.tempFilePaths[0])
+        	}
+        })
 			}
 		}
 	}
@@ -201,17 +253,18 @@
 	}
 
 	.editor-wrapper {
-		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 80px - 46px);
+		height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px - 46px);
 		background: #fff;
 	}
 
 	.iconfont {
 		display: inline-block;
-		padding: 8px 8px;
 		width: 30px;
 		height: 30px;
 		cursor: pointer;
 		font-size: 20px;
+    margin: 0px 6px;
+    align-content: center;
 	}
 
 	.toolbar {
@@ -220,7 +273,8 @@
 		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
     flex-direction: row;
     flex-wrap: wrap;
-    height: 110px;
+    height: 140px;
+    padding-left: 10px;
 	}
 
 	.ql-container {