From 2ce94efc127069a147ffd460eb50a50dcdb20e85 Mon Sep 17 00:00:00 2001 From: "daniel.xiao" Date: Tue, 12 Mar 2019 11:05:36 +0800 Subject: [PATCH 1/2] test: dev basic spec --- .../ncform-theme-elementui/cypress.json | 3 +- .../integration/examples/__template.spec.js | 31 ++++++++ .../cypress/integration/examples/common.js | 19 +++++ .../integration/examples/input.spec.js | 35 ++++++++++ .../integration/examples/querying.spec.js | 70 ------------------- .../src/components/playground/playground.js | 2 +- 6 files changed, 88 insertions(+), 72 deletions(-) create mode 100644 packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/__template.spec.js create mode 100644 packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/common.js create mode 100644 packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js delete mode 100644 packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/querying.spec.js diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress.json b/packages/ncform-e2e/ncform-theme-elementui/cypress.json index c515954..f90bc8e 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress.json +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress.json @@ -1,3 +1,4 @@ { - "projectId": "5y86ie" + "projectId": "5y86ie", + "ignoreTestFiles": ["__template.spec.js", "common.js"] } diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/__template.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/__template.spec.js new file mode 100644 index 0000000..61cdf85 --- /dev/null +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/__template.spec.js @@ -0,0 +1,31 @@ +/// + +context('', () => { + + before(() => { + cy.visit('http://localhost:3004/examples/components/playground/index.html') + }) + + it('', () => { + let formSchema = { + type: 'object', + properties: { + name: { + type: 'string', + } + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('.previewArea').within(() => { + // Declare action elements + + // common.submitForm(); + }) + + }); + +}) diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/common.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/common.js new file mode 100644 index 0000000..c7fb2bf --- /dev/null +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/common.js @@ -0,0 +1,19 @@ +export function fillInSchema(formSchema) { + return cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); +} + +export function startRun() { + return cy.get('button').contains('Run').click(); +} + +export function submitForm() { + return cy.get('button').contains('Get Data').click() +} + +export default { + startRun, + submitForm, + fillInSchema +} diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js new file mode 100644 index 0000000..3db6748 --- /dev/null +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js @@ -0,0 +1,35 @@ +/// + +import common from './common'; + +context('input', () => { + before(() => { + cy.visit('http://localhost:3004/examples/components/playground/index.html'); + }); + + it('', () => { + let formSchema = { + type: 'object', + properties: { + name: { + type: 'string', + } + } + }; + common.fillInSchema(formSchema); + common.startRun(); + // common.submitForm(); + + cy.get('.previewArea').within(() => { + + // Declare action elements + cy.get('label').contains('name').as('nameLabel'); + cy.get('@nameLabel').next().find('input').as('nameInput'); + + cy.get('@nameInput').type('daniel').should('have.value', 'daniel'); + + + }) + + }); +}); diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/querying.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/querying.spec.js deleted file mode 100644 index 3ed352f..0000000 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/querying.spec.js +++ /dev/null @@ -1,70 +0,0 @@ -/// - -context('Querying', () => { - beforeEach(() => { - cy.visit('https://example.cypress.io/commands/querying') - }) - - // The most commonly used query is 'cy.get()', you can - // think of this like the '$' in jQuery - - it('cy.get() - query DOM elements', () => { - // https://on.cypress.io/get - - cy.get('#query-btn').should('contain', 'Button') - - cy.get('.query-btn').should('contain', 'Button') - - cy.get('#querying .well>button:first').should('contain', 'Button') - // ↲ - // Use CSS selectors just like jQuery - - cy.get('[data-test-id="test-example"]').should('have.class', 'example') - }) - - it('cy.contains() - query DOM elements with matching content', () => { - // https://on.cypress.io/contains - cy.get('.query-list') - .contains('bananas') - .should('have.class', 'third') - - // we can pass a regexp to `.contains()` - cy.get('.query-list') - .contains(/^b\w+/) - .should('have.class', 'third') - - cy.get('.query-list') - .contains('apples') - .should('have.class', 'first') - - // passing a selector to contains will - // yield the selector containing the text - cy.get('#querying') - .contains('ul', 'oranges') - .should('have.class', 'query-list') - - cy.get('.query-button') - .contains('Save Form') - .should('have.class', 'btn') - }) - - it('.within() - query DOM elements within a specific element', () => { - // https://on.cypress.io/within - cy.get('.query-form').within(() => { - cy.get('input:first').should('have.attr', 'placeholder', 'Email') - cy.get('input:last').should('have.attr', 'placeholder', 'Password') - }) - }) - - it('cy.root() - query the root DOM element', () => { - // https://on.cypress.io/root - - // By default, root is the document - cy.root().should('match', 'html') - - cy.get('.query-ul').within(() => { - // In this within, the root is now the ul DOM element - cy.root().should('have.class', 'query-ul') - }) - }) -}) diff --git a/packages/ncform-show/src/components/playground/playground.js b/packages/ncform-show/src/components/playground/playground.js index 07a8526..07507be 100755 --- a/packages/ncform-show/src/components/playground/playground.js +++ b/packages/ncform-show/src/components/playground/playground.js @@ -1013,7 +1013,7 @@ export default { methods: { createEditor() { - this.$options.editor = window.ace.edit(this.$refs.editor); + window.editor = this.$options.editor = window.ace.edit(this.$refs.editor); this.$options.editor.$blockScrolling = Infinity; }, templateChange(v) { From dd8cadee8af51277af7e82719db60249df0d6279 Mon Sep 17 00:00:00 2001 From: "daniel.xiao" Date: Tue, 12 Mar 2019 18:46:35 +0800 Subject: [PATCH 2/2] test: update test cases --- .../integration/examples/input.spec.js | 185 +++++++++++++++++- 1 file changed, 179 insertions(+), 6 deletions(-) diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js index 3db6748..ba9d34e 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js @@ -7,12 +7,38 @@ context('input', () => { cy.visit('http://localhost:3004/examples/components/playground/index.html'); }); - it('', () => { + it('Basic', () => { let formSchema = { type: 'object', properties: { - name: { + // has init value + name0: { type: 'string', + value: 'daniel' + }, + name1: { + type: 'string', + ui: { + disabled: true + } + }, + name2: { + type: 'string', + ui: { + readonly: true + } + }, + name3: { + type: 'string', + ui: { + hidden: true + } + }, + name4: { + type: 'string', + ui: { + placeholder: 'your name' + } } } }; @@ -22,14 +48,161 @@ context('input', () => { cy.get('.previewArea').within(() => { - // Declare action elements - cy.get('label').contains('name').as('nameLabel'); - cy.get('@nameLabel').next().find('input').as('nameInput'); + cy.get('label').contains('name0').as('nameLabel0'); + cy.get('@nameLabel0').next().find('input').as('nameInput0'); + cy.get('@nameInput0').should('have.value', 'daniel'); - cy.get('@nameInput').type('daniel').should('have.value', 'daniel'); + cy.get('label').contains('name1').as('nameLabel1'); + cy.get('@nameLabel1').next().find('input').as('nameInput1'); + cy.get('@nameInput1').should('be.disabled'); + cy.get('label').contains('name2').as('nameLabel2'); + cy.get('@nameLabel2').next().find('input').as('nameInput2'); + cy.get('@nameInput2').should('have.prop', 'readonly'); + + cy.get('label').contains('name3').as('nameLabel3'); + cy.get('@nameLabel3').next().find('input').as('nameInput3'); + cy.get('@nameInput3').should('not.be.visible'); + + cy.get('label').contains('name4').as('nameLabel4'); + cy.get('@nameLabel4').next().find('input').as('nameInput4'); + cy.get('@nameInput4').should('have.prop', 'placeholder', 'your name'); }) }); + + it('Simple Props', () => { + + let formSchema = { + type: 'object', + properties: { + // has init value + name1: { + type: 'string', + ui: { + widgetConfig: { + prefixIcon: 'el-icon-search', + trim: false + } + } + }, + name2: { + type: 'string', + ui: { + widgetConfig: { + suffixIcon: 'el-icon-date', + clearable: true + } + } + }, + name3: { + type: 'string', + ui: { + widgetConfig: { + prefixIcon: 'el-icon-search', + suffixIcon: 'el-icon-date', + } + } + } + } + }; + common.fillInSchema(formSchema); + common.startRun(); + // common.submitForm(); + + cy.get('.previewArea').within(() => { + + cy.get('label').contains('name1').as('nameLabel1'); + cy.get('@nameLabel1').next().find('input').as('nameInput1'); + cy.get('@nameInput1').type(' daniel ').should('have.value', ' daniel '); + cy.get('@nameInput1').parent().find('.el-icon-search').should('exist'); + cy.get('@nameInput1').parent().find('.el-input__clear').should('not.be.visible'); + + cy.get('label').contains('name2').as('nameLabel2'); + cy.get('@nameLabel2').next().find('input').as('nameInput2'); + cy.get('@nameInput2').parent().find('.el-input__clear').should('not.be.visible'); + cy.get('@nameInput2').type(' daniel ').should('have.value', 'daniel'); + cy.get('@nameInput2').parent().find('.el-input__clear').should('be.visible'); + cy.get('@nameInput2').parent().find('.el-input__clear').click(); + cy.get('@nameInput2').should('have.value', ''); + cy.get('@nameInput2').parent().find('.el-input__clear').should('not.be.visible'); + cy.get('@nameInput2').parent().find('.el-icon-date').should('exist'); + + cy.get('label').contains('name3').parent().as('item'); + cy.get('@item').find('.el-icon-search').should('exist'); + cy.get('@item').find('.el-icon-date').should('exist'); + }) + + }); + + it.only('type', () => { + + cy.server() + cy.route('POST', '/upload', { data: 'http://www.w3school.com.cn/i/eg_tulip.jpg' }) + + let formSchema = { + type: 'object', + properties: { + name2: { + type: 'string', + ui: { + widgetConfig: { + type: 'number' + } + } + }, + name3: { + type: 'string', + ui: { + widgetConfig: { + type: 'password' + } + } + }, + name4: { + type: 'string', + ui: { + widgetConfig: { + type: 'file', + upload: { + uploadUrl: '/upload', + resField: 'data', + data: { + name: 'daniel' + }, + fileField: 'photo', + accept: '.png', + constraint: { + width: 0, + height: 0, + sizeFixed: true, + maxSize: 0, + minSize: 0 + }, + uploadText: 'Upload Now', + } + } + } + } + } + }; + common.fillInSchema(formSchema); + common.startRun(); + + cy.get('.previewArea').within(() => { + + cy.get('label').contains('name2').as('nameLabel2'); + cy.get('@nameLabel2').next().find('input').as('nameInput2'); + cy.get('@nameInput2').type('daniel').should('have.value', ''); + cy.get('@nameInput2').type('123').should('have.value', '123'); + + cy.get('label').contains('name3').as('nameLabel3'); + cy.get('@nameLabel3').next().find('input').as('nameInput3'); + cy.get('@nameInput3').type('daniel123').should('have.value', 'daniel123').and('have.prop', 'type', 'password'); + + }) + + }); + });