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 ui.status test cases

Browse Source
This commit is contained in:
daniel-dx
2019-03-10 15:00:49 +08:00
parent 840fdfbe18
commit dceebd8b01
2 changed files with 211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ncform-e2e/ncform/cypress/integration/examples/ui.status.spec.js
+60
View File
@@ -0,0 +1,60 @@
/// <reference types="Cypress" />
const md5 = require('blueimp-md5');
context('ui.status', () => {
before(() => {
cy.visit('http://localhost:3000/examples/components/vue-ncform/_ui.status.html')
})
it('Disabled: boolean / dx', () => {
let id = md5('Disabled: boolean / dx');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('label').contains('enable').next().find('input').should('be.enabled');
cy.get('label').contains('name1').next().find('input').should('not.be.enabled');
cy.get('label').contains('name2').next().find('input').should('not.be.enabled');
cy.get('label').contains('enable').next().find('input').type('daniel');
cy.get('label').contains('name2').next().find('input').should('be.enabled');
cy.get('label').contains('enable').next().find('input').clear();
cy.get('label').contains('name2').next().find('input').should('not.be.enabled');
})
})
it('Readonly: boolean / dx', () => {
let id = md5('Readonly: boolean / dx');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('label').contains('readonly').next().find('input').as('readonly');
cy.get('label').contains('name1').next().find('input').as('name1');
cy.get('label').contains('name2').next().find('input').as('name2');
cy.get('@readonly').then($dom => expect($dom.attr('readonly')).to.be.empty);
cy.get('@name1').then($dom => expect($dom.attr('readonly')).to.equal('readonly'));
cy.get('@name2').then($dom => expect($dom.attr('readonly')).to.equal('readonly'));
cy.get('@readonly').type('daniel');
cy.get('@name2').then($dom => expect($dom.attr('readonly')).to.be.empty);
cy.get('@readonly').clear();
cy.get('@name2').then($dom => expect($dom.attr('readonly')).to.equal('readonly'));
})
})
it('Hidden: boolean / dx', () => {
let id = md5('Hidden: boolean / dx');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('label').contains('hidden').next().find('input').should('be.visible');
cy.get('label').contains('name1').next().find('input').should('not.be.visible');
cy.get('label').contains('name2').next().find('input').should('not.be.visible');
cy.get('label').contains('hidden').next().find('input').type('daniel');
cy.get('label').contains('name2').next().find('input').should('be.visible');
cy.get('label').contains('hidden').next().find('input').clear();
cy.get('label').contains('name2').next().find('input').should('not.be.visible');
})
})
})
packages/ncform/examples/components/vue-ncform/_ui.status.html
+151
View File
@@ -0,0 +1,151 @@
<!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('Disabled: boolean / dx'),
title: 'Disabled: boolean / dx',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
enable: {
type: 'string',
ui: {
columns: 4,
disabled: false
}
},
name1: {
type: 'string',
ui: {
columns: 4,
disabled: true
}
},
name2: {
type: 'string',
ui: {
columns: 4,
disabled: 'dx: !{{$root.enable}}'
}
}
}
}
},
{
id: md5('Readonly: boolean / dx'),
title: 'Readonly: boolean / dx',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
readonly: {
type: 'string',
ui: {
columns: 4,
readonly: false
}
},
name1: {
type: 'string',
ui: {
columns: 4,
readonly: true
}
},
name2: {
type: 'string',
ui: {
columns: 4,
readonly: 'dx: !{{$root.readonly}}'
}
}
}
}
},
{
id: md5('Hidden: boolean / dx'),
title: 'Hidden: boolean / dx',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
hidden: {
type: 'string',
ui: {
columns: 4,
hidden: false
}
},
name1: {
type: 'string',
ui: {
columns: 4,
hidden: true
}
},
name2: {
type: 'string',
ui: {
columns: 4,
hidden: 'dx: !{{$root.hidden}}'
}
}
}
}
}
]
}
});
</script>
</body>
</html>