diff --git a/pages/component/editor/editor.test.js b/pages/component/editor/editor.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..6648ba7b908ce654cf3843f762b41d41d70b41fe
--- /dev/null
+++ b/pages/component/editor/editor.test.js
@@ -0,0 +1,90 @@
+// 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({})
+ })
+
+});
diff --git a/pages/component/editor/editor.uvue b/pages/component/editor/editor.uvue
index 8f7392bce9b7805031a7a39bb1959586b9b23101..88edd341480d0e1dc8851aebd0e1c47bb7ac2b5a 100644
--- a/pages/component/editor/editor.uvue
+++ b/pages/component/editor/editor.uvue
@@ -30,7 +30,7 @@
data-name="marginTop" data-value="20px">
-
+
-
+
-
-
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
@@ -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 {