mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 10:14:23 -04:00
test: complete ui.help test cases
This commit is contained in:
daniel-dx
@@ -0,0 +1,33 @@
|
||||
/// <reference types="Cypress" />
|
||||
|
||||
const md5 = require('blueimp-md5');
|
||||
|
||||
context('ui.help', () => {
|
||||
|
||||
before(() => {
|
||||
cy.visit('http://localhost:3000/examples/components/vue-ncform/_ui.help.html')
|
||||
})
|
||||
|
||||
it('Show help', () => {
|
||||
let id = md5('Show help');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('legend').contains('user1').parent().find('label').as('label1');
|
||||
cy.get('@label1').find('.fa-question-circle').should('be.visible');
|
||||
cy.get('@label1').find('.fa-question-circle').parent('a').should('have.prop', 'title', 'Some help tips');
|
||||
|
||||
cy.get('legend').contains('user2').parent().find('label').as('label2');
|
||||
cy.get('@label2').find('a').should('have.prop', 'title', 'Some help tips');
|
||||
cy.get('@label2').find('a').should('have.text', '?');
|
||||
})
|
||||
})
|
||||
|
||||
it('Array-table: Show help', () => {
|
||||
let id = md5('Array-table: Show help');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('th').contains('users').as('header');
|
||||
cy.get('@header').find('.fa-question-circle').should('be.visible');
|
||||
cy.get('@header').find('.fa-question-circle').parent('a').should('have.prop', 'title', 'Some help tips');
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
@@ -0,0 +1,135 @@
|
||||
<!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"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
|
||||
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
</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('Show help'),
|
||||
title: 'Show help',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user1: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
help: {
|
||||
show: true,
|
||||
iconCls: 'fas fa-question-circle',
|
||||
content: 'Some help tips'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
user2: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
help: {
|
||||
show: true,
|
||||
text: '?',
|
||||
content: 'Some help tips'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: md5('Array-table: Show help'),
|
||||
title: 'Array-table: Show help',
|
||||
formName: 'form_' + Math.random(),
|
||||
formSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
users: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
help: {
|
||||
show: true,
|
||||
iconCls: 'fas fa-question-circle',
|
||||
content: 'Some help tips'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widget: 'array-table'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
{{renderSchema.ui.label}}<!-- 标签信息 -->
|
||||
|
||||
<a v-if="renderSchema.ui.help.show === true" href="#"><span :class="renderSchema.ui.help.iconCls">{{renderSchema.ui.help.text}}</span></a>
|
||||
<a v-if="renderSchema.ui.help.show === true" :title="renderSchema.ui.help.content" href="#"><span :class="renderSchema.ui.help.iconCls">{{renderSchema.ui.help.text}}</span></a>
|
||||
|
||||
<!-- 说明信息 -->
|
||||
<small v-if="renderSchema.ui.description" class="form-text text-muted" v-html="_analyzeVal(renderSchema.ui.description)">
|
||||
|
||||
@@ -16,9 +16,8 @@
|
||||
|
||||
{{_analyzeVal(fieldSchema.ui.label)}}
|
||||
|
||||
<!-- TODO daniel: 提示信息组件未加 -->
|
||||
<!-- 提示信息 -->
|
||||
<a v-if="fieldSchema.ui.help.show === true" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
|
||||
<a v-if="fieldSchema.ui.help.show === true" :title="fieldSchema.ui.help.content" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
|
||||
</label>
|
||||
|
||||
<slot :name="field"></slot>
|
||||
@@ -43,9 +42,9 @@
|
||||
<!-- 必填标识 -->
|
||||
<i v-if="_analyzeVal(fieldSchema.rules.required) === true || (typeof fieldSchema.rules.required === 'object' && _analyzeVal(fieldSchema.rules.required.value) === true)" class="text-danger">*</i>
|
||||
{{_analyzeVal(fieldSchema.ui.label)}}
|
||||
<!-- TODO daniel: 提示信息组件未加 -->
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<a v-if="fieldSchema.ui.help.show === true" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
|
||||
<a v-if="fieldSchema.ui.help.show === true" :title="fieldSchema.ui.help.content" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
|
||||
:
|
||||
</label>
|
||||
<div :style="{'margin-left': !legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace ? mergeConfig.labelWidth + ';' : '0px;'}" :class="{'col-md-9': !legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace, 'col-md-12': !(!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace)}">
|
||||
|
||||
Reference in New Issue
Block a user