feat:add cypress E2E

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"
+  ]
+}