mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
test(ncform): complete required test cases
This commit is contained in:
daniel.xiao
@@ -0,0 +1,124 @@
|
||||
/// <reference types="Cypress" />
|
||||
|
||||
const md5 = require('blueimp-md5');
|
||||
|
||||
context('required', () => {
|
||||
|
||||
before(() => {
|
||||
cy.visit('http://localhost:3000/examples/components/vue-ncform/_required.html')
|
||||
})
|
||||
|
||||
it('Specify true value', () => {
|
||||
let id = md5('Specify true value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
// object
|
||||
cy.get('legend').contains('user').next().as('user');
|
||||
cy.get('@user').find('label:contains("name")').contains('*').should('be.visible');
|
||||
cy.get('@user').find('input').type('daniel').clear()
|
||||
cy.get('@user').find('.invalid-feedback').should('be.visible');
|
||||
|
||||
// array
|
||||
cy.get('legend').contains('users1').next().as('users1');
|
||||
cy.get('@users1').find('label:contains("firstname")').contains('*').should('be.visible');
|
||||
cy.get('@users1').find('input').type('daniel').clear()
|
||||
cy.get('@users1').find('.invalid-feedback').should('be.visible');
|
||||
|
||||
// array-table
|
||||
cy.get('legend').contains('users2').next().as('users2');
|
||||
cy.get('@users2').find('th:contains("users2")').contains('*').should('be.visible');
|
||||
cy.get('@users2').find('input').type('daniel').clear()
|
||||
cy.get('@users2').find('.invalid-feedback').should('be.visible');
|
||||
})
|
||||
})
|
||||
|
||||
it('Object: Specify dx value', () => {
|
||||
let id = md5('Object: Specify dx value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('label').contains('age').parent().as('age');
|
||||
cy.get('label').contains('firstname').parent().as('firstname');
|
||||
cy.get('label').contains('lastname').parent().as('lastname');
|
||||
|
||||
cy.get('@firstname').find('label').should('not.contain', '*');
|
||||
cy.get('@lastname').find('label').should('not.contain', '*');
|
||||
|
||||
cy.get('@age').find('input').type(19);
|
||||
cy.get('@firstname').find('label').should('contain', '*');
|
||||
cy.get('@lastname').find('label').should('contain', '*');
|
||||
|
||||
cy.get('@age').find('input').clear().type(10);
|
||||
cy.get('@firstname').find('label').should('not.contain', '*');
|
||||
cy.get('@lastname').find('label').should('not.contain', '*');
|
||||
})
|
||||
})
|
||||
|
||||
it('Array: Specify dx value', () => {
|
||||
let id = md5('Array: Specify dx value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('label').contains('age').parent().as('age');
|
||||
cy.get('legend').contains('users').parent().as('users');
|
||||
cy.get('legend').contains('users1').parent().as('users1');
|
||||
|
||||
// users
|
||||
cy.get('@users').find('button').contains('增加').click();
|
||||
cy.get('@users').find('label:contains("name")').should('not.contain', '*');
|
||||
|
||||
cy.get('@age').find('input').type(19);
|
||||
cy.get('@users').find('label:contains("name")').should('contain', '*');
|
||||
|
||||
cy.get('@age').find('input').clear().type(10);
|
||||
cy.get('@users').find('label:contains("name")').should('not.contain', '*');
|
||||
|
||||
// users1
|
||||
cy.get('@users1').find('button').contains('增加').click();
|
||||
cy.get('@users1').find('label:contains("users1")').each($item => {
|
||||
cy.wrap($item).parent().find('label').contains('age').next().find('input').as('ageInput');
|
||||
cy.wrap($item).parent().find('label').contains('name').as('nameLabel');
|
||||
|
||||
cy.get('@ageInput').type(19)
|
||||
cy.get('@nameLabel').should('contain', '*');
|
||||
cy.get('@ageInput').clear().type(11)
|
||||
cy.get('@nameLabel').should('not.contain', '*');
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it.only('Table: Specify dx value', () => {
|
||||
let id = md5('Table: Specify dx value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('label').contains('age').parent().as('age');
|
||||
cy.get('legend').contains('users').parent().as('users');
|
||||
cy.get('legend').contains('users1').parent().as('users1');
|
||||
|
||||
// users
|
||||
cy.get('@users').find('button').contains('增加').click();
|
||||
cy.get('@users').find('th:contains("name")').should('not.contain', '*');
|
||||
|
||||
cy.get('@age').find('input').type(19);
|
||||
cy.get('@users').find('th:contains("name")').should('contain', '*');
|
||||
|
||||
cy.get('@age').find('input').clear().type(10);
|
||||
cy.get('@users').find('th:contains("name")').should('not.contain', '*');
|
||||
|
||||
// users1
|
||||
cy.get('@users1').find('button').contains('增加').click();
|
||||
cy.get('@users1').find('tbody tr').each($item => {
|
||||
cy.wrap($item).find('input').eq(0).as('ageInput');
|
||||
cy.wrap($item).find('input').eq(1).as('nameInput');
|
||||
|
||||
cy.get('@nameInput').type('daniel').clear();
|
||||
cy.get('@nameInput').next('.invalid-feedback').should('not.be.visible');
|
||||
|
||||
cy.get('@ageInput').type(19)
|
||||
cy.get('@nameInput').next('.invalid-feedback').should('be.visible');
|
||||
cy.get('@nameInput').type('daniel').clear();
|
||||
cy.get('@nameInput').next('.invalid-feedback').should('be.visible');
|
||||
|
||||
cy.get('@ageInput').clear().type(11)
|
||||
cy.get('@nameInput').next('.invalid-feedback').should('not.be.visible');
|
||||
cy.get('@nameInput').type('daniel').clear();
|
||||
cy.get('@nameInput').next('.invalid-feedback').should('not.be.visible');
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
Generated
+489
-489
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>vue-ncform Example</title>
|
||||
|
||||
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="demo" class="container">
|
||||
<template v-for="item in formSchemas">
|
||||
<div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
|
||||
<h4>[CASE] {{ item.title }}</h4>
|
||||
<ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName"></ncform>
|
||||
<hr />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"></script>
|
||||
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vueNcform.js"></script>
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform);
|
||||
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
|
||||
formSchemas: [
|
||||
{
|
||||
id: md5('Specify true value'),
|
||||
title: 'Specify true value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
rules: {
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
users1: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
rules: {
|
||||
required: {
|
||||
value: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
users2: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'string',
|
||||
rules: {
|
||||
required: {
|
||||
value: true
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widget: 'array-table'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Object: Specify dx value'),
|
||||
title: 'Object: Specify dx value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
columns: 4
|
||||
}
|
||||
},
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: {
|
||||
value: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Array: Specify dx value'),
|
||||
title: 'Array: Specify dx value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number'
|
||||
},
|
||||
users: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: {
|
||||
value: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
users1: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
columns: 4
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: {
|
||||
value: 'dx: {{$root.users1[i].age}} > 18'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Table: Specify dx value'),
|
||||
title: 'Table: Specify dx value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number'
|
||||
},
|
||||
users: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: {
|
||||
value: 'dx: {{$root.age}} > 18'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widget: 'array-table'
|
||||
}
|
||||
},
|
||||
users1: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
columns: 4,
|
||||
linkFields: [
|
||||
{
|
||||
fieldPath: 'users1[i].name',
|
||||
rules: [ 'required' ]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 4
|
||||
},
|
||||
rules: {
|
||||
required: {
|
||||
value: 'dx: {{$root.users1[i].age}} > 18'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widget: 'array-table'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user