vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-20 02:33:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

test(ncform): complete nesting test cases

Browse Source
This commit is contained in:
daniel-dx
2019-03-11 00:23:08 +08:00
parent 2421c38693
commit 7d0bdc8017
2 changed files with 311 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ncform-e2e/ncform/cypress/integration/examples/nesting.spec.js
+78
View File
@@ -0,0 +1,78 @@
/// <reference types="Cypress" />
const md5 = require('blueimp-md5');
context('Nesting', () => {
before(() => {
cy.visit('http://localhost:3000/examples/components/vue-ncform/_nesting.html')
})
it('Object nested object', () => {
let id = md5('Object nested object');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('legend').contains('user').as('user').should('exist');
cy.get('@user').next().find('legend').contains('name').as('name').should('exist');
cy.get('@name').next().find('label:contains("name")').its('length').should('equal', 2);
})
})
it('Object nested array and table', () => {
let id = md5('Object nested array and table');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('legend').contains('company').as('company').should('exist');
cy.get('@company').next().find('legend').contains('users1').as('users1').should('exist');
cy.get('@users1').next().find('label:contains("users1 1")').its('length').should('equal', 1);
cy.get('@users1').next().find('input').its('length').should('equal', 1);
cy.get('@company').next().find('legend').contains('users2').as('users2').should('exist');
cy.get('@users2').next().find('th:contains("users2")').should('exist');
cy.get('@users2').next().find('input').its('length').should('equal', 1);
})
})
it('Arrays and table items are objects', () => {
let id = md5('Arrays and table items are objects');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('legend').contains('companies1').as('companies1').should('exist');
cy.get('@companies1').next().find('label:contains("companies1 1")').as('companies1Item').should('exist');
cy.get('@companies1Item').next().next().find('label:contains("name")').its('length').should('equal', 1);
cy.get('@companies1Item').next().next().find('input').its('length').should('equal', 1);
cy.get('legend').contains('companies2').as('companies2').should('exist');
cy.get('@companies2').next().find('th:contains("name")').should('exist');
cy.get('@companies2').next().find('input').its('length').should('equal', 1);
})
})
it.only('Arrays and table items are array and table', () => {
let id = md5('Arrays and table items are array and table');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('legend').contains('companies1').as('companies1').should('exist');
cy.get('@companies1').next().find('label:contains("companies1 1")').as('companies1Item').its('length').should('equal', 1);
cy.get('@companies1Item').next().next().find('legend').contains('User').as('users').should('exist');
cy.get('@users').next().find('label').contains('User 1').should('exist');
cy.get('@users').next().find('input').its('length').should('equal', 1);
cy.get('legend').contains('companies2').as('companies2').should('exist');
cy.get('@companies2').next().find('label:contains("companies2 1")').as('companies2Item').its('length').should('equal', 1);
cy.get('@companies2Item').next().next().find('legend').contains('User').as('users').should('exist');
cy.get('@users').next().find('th').contains('User').should('exist');
cy.get('@users').next().find('input').its('length').should('equal', 1);
cy.get('legend').contains('companies3').as('companies3').should('exist');
cy.get('@companies3').next().find('th').contains('companies3').should('exist');
cy.get('@companies3').next().find('td').find('legend').contains('User').as('users').should('exist');
cy.get('@users').next().find('label:contains("User 1")').should('exist');
cy.get('@users').next().find('input').its('length').should('equal', 1);
cy.get('legend').contains('companies4').as('companies4').should('exist');
cy.get('@companies4').next().find('th').contains('companies4').should('exist');
cy.get('@companies4').next().find('td').find('legend').contains('User').as('users').should('exist');
cy.get('@users').next().find('th').contains('User').should('exist');
cy.get('@users').next().find('input').its('length').should('equal', 1);
})
})
})
packages/ncform/examples/components/vue-ncform/_nesting.html
+233
View File
@@ -0,0 +1,233 @@
<!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('Object nested object'),
title: 'Object nested object',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
name: {
type: 'object',
properties: {
firstname: {
type: 'string',
ui: {
columns: 6
}
},
lastname: {
type: 'string',
ui: {
columns: 6
}
}
}
}
}
}
}
}
},
{
id: md5('Object nested array and table'),
title: 'Object nested array and table',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
company: {
type: 'object',
properties: {
users1: {
type: 'array',
items: {
type: 'string'
}
},
users2: {
type: 'array',
items: {
type: 'string'
},
ui: {
widget: 'array-table'
}
}
}
}
}
}
},
{
id: md5('Arrays and table items are objects'),
title: 'Arrays and table items are objects',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
companies1: {
type: 'array',
items: {
type: 'object',
properties: {
name: {
type: 'string'
}
}
}
},
companies2: {
type: 'array',
items: {
type: 'object',
properties: {
name: {
type: 'string'
}
}
},
ui: {
widget: 'array-table'
}
}
}
}
},
{
id: md5('Arrays and table items are array and table'),
title: 'Arrays and table items are array and table',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
companies1: {
type: 'array',
items: {
type: 'array',
items: {
type: 'string',
ui: {
label: 'User'
}
},
ui: {
legend: 'User'
}
}
},
companies2: {
type: 'array',
items: {
type: 'array',
items: {
type: 'string',
ui: {
label: 'User'
}
},
ui: {
legend: 'User',
widget: 'array-table'
}
}
},
companies3: {
type: 'array',
items: {
type: 'array',
items: {
type: 'string',
ui: {
label: 'User'
}
},
ui: {
legend: 'User'
}
},
ui: {
widget: 'array-table'
}
},
companies4: {
type: 'array',
items: {
type: 'array',
items: {
type: 'string',
ui: {
label: 'User'
}
},
ui: {
legend: 'User',
widget: 'array-table'
}
},
ui: {
widget: 'array-table'
}
}
}
}
}
]
}
});
</script>
</body>
</html>