feat:add cypress E2E

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "atrule",
+    "Chainable",
     "colspan",
     "compositionend",
     "compositionstart",

cypress.json

@@ -0,0 +1,5 @@
+{
+  "video": false,
+  "viewportWidth": 1080,
+  "viewportHeight": 720
+}

cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "name": "canvas-editor"
+}

cypress/global.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+declare namespace Editor {
+  import('../src/editor/index')
+  import Editor from '../src/editor/index'
+}
+
+declare namespace Cypress {
+
+  interface Chainable {
+
+    getEditor(): Chainable<Editor>
+
+  }
+}

cypress/integration/editor.spec.ts

@@ -0,0 +1,53 @@
+import Editor from '../../src/editor'
+
+describe('基础功能', () => {
+
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+
+    cy.get('@canvas').type(`{ctrl}a{backspace}`)
+  })
+
+  const text = 'canvas-editor'
+
+  it('编辑保存', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.listener.saved = function (payload) {
+        expect(payload.data[0].value).to.eq(text)
+      }
+    })
+
+    cy.get('@canvas').type(text)
+
+    cy.get('@canvas').type(`{ctrl}s`)
+  })
+
+  it('模式切换', () => {
+
+    cy.get('.cursor').should('have.css', 'display', 'block')
+
+    cy.get('.editor-mode').click().click()
+
+    cy.get('.editor-mode').contains('只读')
+
+    cy.get('@canvas').click()
+
+    cy.get('.cursor').should('have.css', 'display', 'none')
+
+  })
+
+  it('页面缩放', () => {
+
+    cy.get('.page-scale-add').click()
+
+    cy.get('.page-scale-percentage').contains('110%')
+
+    cy.get('.page-scale-minus').click().click()
+
+    cy.get('.page-scale-percentage').contains('90%')
+
+  })
+
+})

cypress/integration/menus/undoRedo.spec.ts

@@ -0,0 +1,45 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-撤销&重做', () => {
+
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+
+    cy.get('@canvas').type(`{ctrl}a{backspace}`)
+  })
+
+  const text = 'canvas-editor'
+
+  it('撤销', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.listener.saved = function (payload) {
+        expect(payload.data[0].value).to.eq(text)
+      }
+    })
+
+    cy.get('@canvas').type(`${text}1`)
+
+    cy.get('.menu-item__undo').click()
+
+    cy.get('@canvas').type(`{ctrl}s`)
+  })
+
+  it('重做', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.listener.saved = function (payload) {
+        expect(payload.data[0].value).to.eq(`${text}1`)
+      }
+    })
+
+    cy.get('@canvas').type(`${text}1`)
+
+    cy.get('.menu-item__undo').click()
+
+    cy.get('.menu-item__redo').click()
+
+    cy.get('@canvas').type(`{ctrl}s`)
+  })
+
+})

cypress/plugins/index.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  // codeCoverageTask(on, config)
+  return config
+}

cypress/support/commands.ts

@@ -0,0 +1,3 @@
+Cypress.Commands.add('getEditor', () => {
+  return cy.window().its('editor')
+})

cypress/support/index.ts

@@ -0,0 +1 @@
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015", "dom", "esnext"],
+    "types": ["cypress"],
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+  },
+  "include": [
+    "./**/*.ts"
+  ]
+}

package.json

@@ -4,11 +4,14 @@
     "dev": "vite",
     "lib": "tsc && vite build --mode lib",
     "build": "tsc && vite build --mode app",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "devDependencies": {
     "@types/node": "^16.11.12",
     "@types/prismjs": "^1.26.0",
+    "cypress": "^9.5.1",
     "typescript": "^4.3.2",
     "vite": "^2.4.2"
   },

src/main.ts

@@ -11,6 +11,8 @@ window.onload = function () {
   const container = document.querySelector<HTMLDivElement>('.editor')!
   const instance = new Editor(container, <IElement[]>data, options)
   console.log('实例: ', instance)
+  // cypress使用
+  Reflect.set(window, 'editor', instance)
 
   // 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
   const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!