vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-19 18:23:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

test(ncform): complete extend widgets test cases

Browse Source
This commit is contained in:
daniel-dx
2019-03-11 23:28:58 +08:00
parent d2e7ac34af
commit 0afd6ccfbd
4 changed files with 215 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ncform-e2e/ncform/cypress/integration/examples/extend.spec.js
+38
View File
@@ -0,0 +1,38 @@
/// <reference types="Cypress" />
const md5 = require('blueimp-md5');
context('Extend', () => {
before(() => {
cy.visit('http://localhost:3000/examples/components/vue-ncform/_extend.html')
})
it('Control: extend', () => {
let id = md5('Control: extend');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('.__ncform-control').contains('hello world: ncform ncform').should('exist');
cy.get('.__ncform-control').contains('Hi daniel: ncform ncform').should('exist');
})
})
it('Rule: extend', () => {
let id = md5('Rule: extend');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('label').contains('helloWorld').next().find('input').as('worldInput');
cy.get('label').contains('helloDaniel').next().find('input').as('danielInput');
cy.get('@worldInput').type('daniel');
cy.get('@worldInput').next('.invalid-feedback').should('be.visible');
cy.get('@worldInput').clear().type('world');
cy.get('@worldInput').next('.invalid-feedback').should('not.be.visible');
cy.get('@danielInput').type('world');
cy.get('@danielInput').next('.invalid-feedback').should('be.visible');
cy.get('@danielInput').clear().type('daniel');
cy.get('@danielInput').next('.invalid-feedback').should('not.be.visible');
})
})
})
packages/ncform/examples/components/vue-ncform/_extend.html
+177
View File
@@ -0,0 +1,177 @@
<!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">
let extComponents = {
helloWorld: {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
i18nData: {
en: {
hi: 'hello world: <%= msg %>'
},
zh_cn: {
hi: '你好 世界: <%= msg %>'
}
},
props: {
value: {
type: [String]
}
}
},
helloDaniel: {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
i18nData: {
en: {
hi: 'Hi daniel: <%= msg %>'
},
zh_cn: {
hi: '你好 丹尼尔: <%= msg %>'
}
},
props: {
value: {
type: [String]
}
}
}
};
class HelloWorld extends ncformCommon.ValidationRule {
constructor(props) {
super(props);
this.name = 'myCustom';
this.defaultErrMsg = 'yeah, show my custom rule message';
}
validateLogic(val, ruleVal) {
this.errMsg = "must fill in 'world'";
return val === 'world';
}
}
class HelloDaniel extends ncformCommon.ValidationRule {
constructor(props) {
super(props);
this.name = 'myCustom';
this.defaultErrMsg = 'yeah, show my custom rule message';
}
validateLogic(val, ruleVal) {
this.errMsg = "must fill in 'daniel'";
return val === 'daniel';
}
}
Vue.use(vueNcform, {
lang: 'en',
extComponents: { helloWorld: extComponents.helloWorld },
extRules: [{ helloWorld: HelloWorld }]
});
new Vue({
el: '#demo',
created() {
this.$ncformAddWidget({
name: 'helloDaniel',
widget: extComponents.helloDaniel
});
this.$ncformAddRule({ name: 'helloDaniel', rule: HelloDaniel });
},
data: {
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
formSchemas: [
{
id: md5('Control: extend'),
title: 'Control: extend',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
helloWorld: {
type: 'string',
value: 'ncform',
ui: {
widget: 'hello-world'
}
},
helloDaniel: {
type: 'string',
value: 'ncform',
ui: {
widget: 'hello-daniel'
}
}
}
}
},
{
id: md5('Rule: extend'),
title: 'Rule: extend',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
helloWorld: {
type: 'string',
rules: {
helloWorld: true
}
},
helloDaniel: {
type: 'string',
rules: {
helloDaniel: true
}
}
}
}
}
]
}
});
</script>
</body>
</html>
packages/ncform/examples/components/vue-ncform/ext-components-use.html
-92
View File
@@ -1,92 +0,0 @@
<!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" style="padding: 8px">
<ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
<button class="btn btn-primary" @click="submit()">提交</button>
</div>
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.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">
// 这里只作示例，实际的扩展请使用ncform-common中的mixins
let extComponents = {
'sayHi': {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
i18nData: {
en: {
hi: 'Hi <%= msg %>'
},
zh_cn: {
hi: '你好 <%= msg %>'
}
},
props: {
value: {
type: [String]
},
},
}
}
// You can add your custom widget while registering ncform
// Vue.use(vueNcform, { extComponents });
Vue.use(vueNcform, { lang: 'en' });
// Bootstrap the app
new Vue({
el: '#demo',
created() {
// You can add your custom widget after registering ncform as follow:
this.$ncformAddWidget({name: 'sayHi', widget: extComponents.sayHi});
},
data: {
formSchema: {
type: 'object',
properties: {
username: {
type: 'string',
ui: {
label: 'Username',
}
},
msg: {
type: 'string',
ui: {
label: 'message',
widget: 'sayHi'
}
}
},
value: {
"username": "daniel",
"msg": 'daniel'
}
},
},
methods: {
submit() {
console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
}
}
});
</script>
</body>
</html>
packages/ncform/examples/components/vue-ncform/ext-rule-use.html
-103
View File
@@ -1,103 +0,0 @@
<!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" style="padding: 8px">
<ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
<button class="btn btn-primary" @click="submit()">提交</button>
</div>
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.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">
// 扩展的规则只需继续ValidationRule，实现validateLogic逻辑即可
class MyCustomRule extends ncformCommon.ValidationRule {
constructor(props) {
super(props);
this.name = 'myCustom';
this.defaultErrMsg = 'yeah, show my custom rule message';
}
validateLogic(val, ruleVal) {
// this.errMsg = "dynamic error"
// return new Promise((rs, rj)=>{
// const rd = parseInt(Math.random()*20+1)*100;
// console.log('request', rd);
// setTimeout(()=>{
// rs(val === 'daniel');
// console.log('==>',rd)
// },rd);
// });
this.errMsg = "must fill in 'daniel'"
return val === 'daniel';
}
}
// You can add your custom rule while registering ncform
// Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
Vue.use(vueNcform, { lang: 'en' });
// Bootstrap the app
new Vue({
el: '#demo',
created() {
// You can add your custom rule after registering ncform as follow:
this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
},
data: {
formSchema: {
type: 'object',
properties: {
username: {
type: 'string',
ui: {
label: 'Username',
},
rules: {
myCustom: {
value: true,
options: {
delay: 300,
delayMsg: "异步验证中.."
}
}
}
},
age: {
type: 'integer',
}
},
value: {
"username": "daniel",
"age": 18
}
},
},
methods: {
submit() {
console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
}
}
});
</script>
</body>
</html>