From 8a02a978e8dc16d6671ff09c8b2c57a3bd30c7f2 Mon Sep 17 00:00:00 2001 From: daniel-dx Date: Thu, 14 Mar 2019 22:52:53 +0800 Subject: [PATCH] test(ncform-theme-elementui): complete checkbox test cases --- .../integration/examples/checkbox.spec.js | 195 ++++++++++++++++++ .../integration/examples/radio.spec.js | 9 +- .../src/components/control-comps/checkbox.vue | 8 +- 3 files changed, 206 insertions(+), 6 deletions(-) create mode 100644 packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/checkbox.spec.js diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/checkbox.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/checkbox.spec.js new file mode 100644 index 0000000..cb3e701 --- /dev/null +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/checkbox.spec.js @@ -0,0 +1,195 @@ +/// + +import common from './common'; + +context('Checkbox', () => { + before(() => { + cy.visit('http://localhost:3004/examples/components/playground/index.html'); + }); + + it('Basic', () => { + let formSchema = { + type: 'object', + properties: { + // has init value + name0: { + type: 'boolean', + value: true, + ui: { + widget: 'checkbox' + } + }, + name1: { + type: 'boolean', + ui: { + disabled: true, + widget: 'checkbox' + } + }, + name2: { + type: 'boolean', + ui: { + readonly: true, + widget: 'checkbox' + } + } + } + }; + common.fillInSchema(formSchema); + common.startRun(); + + cy.get('.previewArea').within(() => { + cy.get('label') + .contains('name0') + .parent() + .within(() => { + cy.get('label.is-checked').should('contain', 'Yes'); + }); + + cy.get('label') + .contains('name1') + .parent() + .within(() => { + cy.get('.el-radio-group').should('not.be.enabled'); + }); + + cy.get('label') + .contains('name2') + .parent() + .within(() => { + cy.get('.el-radio-group').should('not.be.enabled'); + }); + }); + }); + + it('Simple Props', () => { + cy.server(); + cy.route(() => { + return { + method: 'GET', + url: '/users', + response: { + data: [ + { + value: '1', + label: 'daniel' + }, + { + value: '2', + label: 'sarah' + } + ] + } + }; + }).as('users'); + + let formSchema = { + type: 'object', + properties: { + name1: { + type: 'array', + ui: { + widget: 'checkbox', + widgetConfig: { + arrangement: 'v', + itemValueField: 'id', + itemLabelField: 'name', + enumSource: [ + { id: '1', name: 'daniel' }, + { id: '2', name: 'sarah' } + ] + } + } + }, + name2: { + type: 'array', + ui: { + widget: 'checkbox', + widgetConfig: { + type: 'button', + itemValueField: 'id', + itemLabelField: 'name', + enumSource: [ + { id: '1', name: 'daniel' }, + { id: '2', name: 'sarah' } + ] + } + } + }, + name3: { + type: 'array', + ui: { + widget: 'checkbox', + widgetConfig: { + selectAll: true, + enumSourceRemote: { + remoteUrl: '/users', + resField: 'data' + } + } + } + } + } + }; + cy.window() + .its('editor') + .invoke('setValue', JSON.stringify(formSchema, null, 2)); + common.startRun(); + + cy.get('.previewArea').within(() => { + // Declare action elements + cy.get('label') + .contains('name1') + .parent() + .within(() => { + cy.get('.el-checkbox').then($dom => { + expect($dom.eq(0).offset().left).to.be.equal( + $dom.eq(1).offset().left + ); + expect($dom.eq(0).offset().top).to.be.lessThan( + $dom.eq(1).offset().top + ); + }); + }); + + cy.get('label') + .contains('name2') + .parent() + .within(() => { + cy.get('.el-checkbox-button:contains("daniel")').click(); + cy.get('.el-checkbox-button.is-checked').its('length').should('equal', 1); + cy.get('.el-checkbox-button:contains("sarah")').click(); + cy.get('.el-checkbox-button.is-checked').its('length').should('equal', 2); + }); + + cy.get('label') + .contains('name3') + .parent() + .within(() => { + cy.wait('@users').then(() => { + cy.get('.el-checkbox:contains("All")').as('ckAll'); + cy.get('.el-checkbox:contains("daniel")').as('ckDaniel'); + cy.get('.el-checkbox:contains("sarah")').as('ckSarah'); + + cy.get('.el-checkbox__input.is-checked').should('not.exist'); + + cy.get('@ckDaniel').click(); + cy.get('.el-checkbox__input.is-indeterminate').its('length').should('equal', 1); + cy.get('.el-checkbox__input.is-checked').its('length').should('equal', 1); + + cy.get('@ckDaniel').click(); + cy.get('.el-checkbox__input.is-indeterminate').should('not.exist'); + cy.get('.el-checkbox__input.is-checked').should('not.exist'); + + cy.get('.check-all').click(); + cy.get('.el-checkbox__input.is-checked').its('length').should('equal', 3); + + cy.get('.check-all').click(); + cy.get('.el-checkbox__input.is-checked').should('not.exist'); + }) + }); + + // common.submitForm(); + }); + }); +}); diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js index db5132d..467bef6 100644 --- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js +++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js @@ -175,8 +175,13 @@ context('Radio', () => { .contains('name1') .parent() .within(() => { - cy.get('.el-radio__label').contains('daniel'); - cy.get('.el-radio__label').contains('sarah'); + cy.get('.el-radio:contains("daniel")').click(); + cy.get('.el-radio.is-checked').its('length').should('equal', 1) + cy.get('.el-radio.is-checked').contains('daniel') + + cy.get('.el-radio:contains("sarah")').click(); + cy.get('.el-radio.is-checked').its('length').should('equal', 1) + cy.get('.el-radio.is-checked').contains('sarah') }); cy.get('label') diff --git a/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue b/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue index f67b507..9c5a427 100755 --- a/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue +++ b/packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue @@ -7,7 +7,7 @@ v-if="mergeConfig.selectAll && !readonly" :class="'check-all'" :disabled="disabled" - :indeterminate="mergeConfig.isIndeterminate" + :indeterminate="isIndeterminate" v-model="mergeConfig.checkAll" @change="handleCheckAllChange" >{{$t('all')}} @@ -123,9 +123,9 @@ data() { return { + isIndeterminate: false, // 组件特有的配置属性 defaultConfig: { - isIndeterminate: true, selectAll: false, // 是否显示全选 checkAll: false, arrangement: 'h', // 排列 可选值 [v | h] @@ -178,13 +178,13 @@ arrResAll.push(obj[itemValueField]); }); vm.modelVal = val ? arrResAll : []; - vm.mergeConfig.isIndeterminate = false; + vm.isIndeterminate = false; }, handleCheckedOptChange(value) { const vm = this; let checkedCount = value.length; vm.mergeConfig.checkAll = checkedCount === vm.mergeConfig.enumSource.length; - vm.mergeConfig.isIndeterminate = checkedCount > 0 && checkedCount < vm.mergeConfig.enumSource.lengths; + vm.isIndeterminate = checkedCount > 0 && checkedCount < vm.mergeConfig.enumSource.length; }, getRemoteSource() { try {