refactor: 代码优化 & 补全 e2e 测试 (#161)

* refactor: 移除 package-option.js

* refactor: 将 enableWhen 从 mixin 改造成纯函数

* refactor: 移除 mixin-hidden

* refactor: 调整层级

* fix: typo

* refactor: 优化 transform-content 函数

* refactor: 优化初始化 options & value 的函数

* refactor: 明确 updateForm 的合并逻辑

* refactor: getFormValue

* refactor: 移除掉无用操作 updateOptions

* fix: 补回 inputFormat 功能

* test: 补充 e2e 测试

* fix: outputFormat 返回值是 Object 时应该覆盖到上一层

* chore: 移除不必要的 clonedeep

Author: donaldshen

.prettierrc .prettierrc.yml.prettierrc renamed to .prettierrc.yml

@@ -1,3 +1,4 @@
 semi: false
 singleQuote: true
 bracketSpacing: false
+trailingComma: all

cypress/integration/basic.spec.js

@@ -1,30 +1,25 @@
 /// <reference types="Cypress" />
 
-describe('测试 github page 文档', function() {
+describe('测试 basic 示例', function() {
   beforeEach(() => {
     cy.visit('/')
-    cy.get('li')
-      .contains('basic')
-      .click()
+    cy.$goto('basic')
   })
-  it('basic 示例', function() {
+  it('基础用例', function() {
     cy.contains('basic')
     cy.contains('submit').click()
     cy.contains('miss name')
-    const getInput = (label, el = 'input') =>
-      cy.contains('.el-form-item', label).find(el)
-
-    getInput('name').type('name')
-    getInput('area').click()
+    cy.$getFormItemInput('name').type('name')
+    cy.$getFormItemInput('area').click()
     cy.contains('area1').click()
-    getInput('date').click()
+    cy.$getFormItemInput('date').click()
     cy.contains('此刻').click()
     cy.contains('typeA').click()
     cy.contains('resourceA').click()
-    getInput('desc', 'textarea').type('desc')
+    cy.$getFormItemInput('desc', 'textarea').type('desc')
     cy.contains('submit').click()
     cy.contains('submit!')
     cy.contains('reset').click()
-    getInput('name').should('be.empty')
+    cy.$getFormItemInput('name').should('be.empty')
   })
 })

cypress/integration/component.spec.js

@@ -0,0 +1,16 @@
+/// <reference types="Cypress" />
+
+describe('测试 component 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('component')
+  })
+  it('基础用例', function() {
+    cy.contains('component')
+    cy.get('.el-form-renderer input')
+      .type('1')
+      .should('have.value', 'v1') // 不能用 contains，这里取属性
+      .blur()
+      .should('have.value', 'v1.0.0')
+  })
+})

cypress/integration/disabled.spec.js

@@ -0,0 +1,14 @@
+/// <reference types="Cypress" />
+
+describe('测试 disabled 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('disabled')
+  })
+  it('禁用全部', function() {
+    cy.contains('disabled')
+    cy.$getFormItemInput('name').should('be.enabled')
+    cy.contains('禁用全部').click()
+    cy.$getFormItemInput('name').should('be.disabled')
+  })
+})

cypress/integration/get-form-value.spec.js

@@ -0,0 +1,13 @@
+/// <reference types="Cypress" />
+
+describe('测试 get-form-value 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('get-form-value')
+  })
+  it('基础用例', function() {
+    cy.get('pre').contains('{}')
+    cy.contains('print').click()
+    cy.get('pre').contains('"name": "alvin"')
+  })
+})

cypress/integration/hidden.spec.js

@@ -0,0 +1,14 @@
+/// <reference types="Cypress" />
+
+describe('测试 hidden 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('hidden')
+  })
+  it('切换 hidden', function() {
+    cy.contains('idol').should('not.be.visible') // 不是 not.exist 哦
+    cy.$getFormItemInput('hobby').click()
+    cy.contains('basketball').click()
+    cy.contains('idol').should('be.visible') // invisible 也是 contains
+  })
+})

cypress/integration/on.spec.js

@@ -0,0 +1,22 @@
+/// <reference types="Cypress" />
+
+describe('测试 on 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('on')
+  })
+  it('测试所有事件', function() {
+    cy.$getFormItemInput('fullName').focus()
+    cy.$getFormItemInput('display').should(
+      'have.value',
+      'focus: [object FocusEvent]',
+    )
+    cy.$getFormItemInput('fullName').type(1)
+    cy.$getFormItemInput('display').should('have.value', 'input: 1')
+    cy.$getFormItemInput('fullName').blur()
+    cy.$getFormItemInput('display').should(
+      'have.value',
+      'blur: [object FocusEvent]',
+    )
+  })
+})

cypress/integration/remote.spec.js

@@ -0,0 +1,18 @@
+/// <reference types="Cypress" />
+
+describe('测试 remote 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('remote')
+  })
+  it('测试所有 remote 配置', function() {
+    cy.$getFormItemInput('select').click()
+    cy.contains('area1').click()
+    cy.contains('resourceA')
+    cy.contains('typeA')
+    cy.$getFormItemInput('cascader').click()
+    cy.contains('hello').click()
+    cy.contains('world').click()
+    cy.$getFormItemInput('cascader').should('have.value', 'hello / world')
+  })
+})

cypress/integration/set-options.spec.js

@@ -0,0 +1,21 @@
+/// <reference types="Cypress" />
+
+describe('测试 set-options 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('set-options')
+  })
+  it('基础用例', function() {
+    cy.$getFormItemInput('select').click()
+    cy.contains('shanghai').should('be.visible')
+    cy.contains('beijing').should('be.visible')
+    cy.contains('guangzhou').should('not.exist')
+    cy.contains('hangzhou').should('not.exist')
+    cy.contains('button', 'set').click()
+    cy.$getFormItemInput('select').click()
+    cy.contains('shanghai').should('not.exist')
+    cy.contains('beijing').should('not.exist')
+    cy.contains('guangzhou').should('be.visible')
+    cy.contains('hangzhou').should('be.visible')
+  })
+})

cypress/integration/slot.spec.js

@@ -0,0 +1,20 @@
+/// <reference types="Cypress" />
+
+describe('测试 slot 示例', function() {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.$goto('slot')
+  })
+  it('基础用例', function() {
+    cy.get('.el-form-item')
+      .first()
+      .should('contain', 'name')
+      .next()
+      .should('match', 'button')
+      .should('contain', 'a button insert before age')
+      .next()
+      .should('contain', 'age')
+      .next()
+      .should('contain', 'default slot is at the bottom')
+  })
+})