mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
test(ncform): complete ui.label and ui.legend test cases
This commit is contained in:
daniel-dx
@@ -0,0 +1,86 @@
|
||||
/// <reference types="Cypress" />
|
||||
|
||||
const md5 = require('blueimp-md5');
|
||||
|
||||
context('ui.label and ui.legend', () => {
|
||||
|
||||
before(() => {
|
||||
cy.visit('http://localhost:3000/examples/components/vue-ncform/_ui.label.html')
|
||||
})
|
||||
|
||||
it('Only provide label value', () => {
|
||||
let id = md5('Only provide label value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
['user1', 'user2'].forEach(itemName => {
|
||||
cy.get('legend').contains(itemName).parent().within(() => {
|
||||
cy.get('label').contains('Your Name').should('exist');
|
||||
cy.get('label').contains('Your Name').next().find('input').type('daniel');
|
||||
cy.get('label').contains("daniel's age").should('exist');
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('ShowLabel is false', () => {
|
||||
let id = md5('ShowLabel is false');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
['user1', 'user2'].forEach(itemName => {
|
||||
cy.get('legend').contains(itemName).parent().within(() => {
|
||||
cy.get('label').contains('Lastname').should('not.be.visible');
|
||||
})
|
||||
})
|
||||
|
||||
cy.get('legend').contains('user1').parent().within(() => {
|
||||
cy.get('input').then(($inputs) => {
|
||||
cy.log('Align the top of the two controls')
|
||||
cy.wrap($inputs.eq(0).offset().top).should('equal', $inputs.eq(1).offset().top)
|
||||
})
|
||||
})
|
||||
|
||||
cy.get('legend').contains('user2').parent().within(() => {
|
||||
cy.get('input').then(($inputs) => {
|
||||
cy.log('Align the left of the two controls')
|
||||
cy.wrap($inputs.eq(0).offset().left).should('equal', $inputs.eq(1).offset().left)
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
it('NoLabelSpace is true', () => {
|
||||
let id = md5('NoLabelSpace is true');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('label').contains('Lastname').should('not.be.visible');
|
||||
})
|
||||
})
|
||||
|
||||
it('Object: show label', () => {
|
||||
let id = md5('Object: show label');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
|
||||
cy.get('label').contains('user1').parent().within(() => {
|
||||
cy.get('label').contains('user1').should('be.visible');
|
||||
cy.get('label').then(($inputs) => {
|
||||
cy.wrap($inputs.eq(0).offset().top).should('be.lessThan', $inputs.eq(1).offset().top)
|
||||
})
|
||||
})
|
||||
|
||||
cy.get('label').contains('user2').parent().within(() => {
|
||||
cy.get('label').contains('user2').should('be.visible');
|
||||
cy.get('label').then(($inputs) => {
|
||||
cy.wrap($inputs.eq(0).offset().left).should('be.lessThan', $inputs.eq(1).offset().left)
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
it('Object & array: only provide legend value', () => {
|
||||
let id = md5('Object & array: only provide legend value');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('legend').contains('One User').should('be.visible');
|
||||
cy.get('legend').contains('Users').should('be.visible');
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
@@ -0,0 +1,262 @@
|
||||
<!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('Only provide label value'),
|
||||
title: 'Only provide label value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user1: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Your Name',
|
||||
columns: 6
|
||||
}
|
||||
},
|
||||
age: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'dx: {{$root.user1.name}} + "\'s age"',
|
||||
columns: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
user2: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Your Name',
|
||||
columns: 6
|
||||
}
|
||||
},
|
||||
age: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'dx: {{$root.user2.name}} + "\'s age"',
|
||||
columns: 6
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('ShowLabel is false'),
|
||||
title: 'ShowLabel is false',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user1: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Name',
|
||||
columns: 6
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Lastname',
|
||||
showLabel: false,
|
||||
columns: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
user2: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Name',
|
||||
columns: 7
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Lastname',
|
||||
showLabel: false,
|
||||
columns: 7
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('NoLabelSpace is true'),
|
||||
title: 'NoLabelSpace is true',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Name',
|
||||
columns: 6
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: 'Lastname',
|
||||
showLabel: true,
|
||||
noLabelSpace: true,
|
||||
columns: 6
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Object: show label'),
|
||||
title: 'Object: show label',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user1: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
showLegend: false
|
||||
}
|
||||
},
|
||||
user2: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
showLegend: false,
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Object & array: only provide legend value'),
|
||||
title: 'Object & array: only provide legend value',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
legend: 'One User'
|
||||
}
|
||||
},
|
||||
users: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'string'
|
||||
},
|
||||
ui: {
|
||||
legend: 'Users'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user