From 2c00b6fdee383f3de2907b10e3e0848ae485aa88 Mon Sep 17 00:00:00 2001 From: oyv1cent <641027967@qq.com> Date: Wed, 13 Mar 2019 15:56:52 +0800 Subject: [PATCH 1/3] Add Affix component unit test --- test/unit/specs/affix.spec.js | 123 ++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 test/unit/specs/affix.spec.js diff --git a/test/unit/specs/affix.spec.js b/test/unit/specs/affix.spec.js new file mode 100644 index 00000000..11a4922a --- /dev/null +++ b/test/unit/specs/affix.spec.js @@ -0,0 +1,123 @@ +import { createVue, destroyVM } from '../util'; + +describe('Affix.vue', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('should create a Affix component without slot', done => { + vm = createVue(''); + expect(vm.$el.children[0].tagName).to.equal('DIV'); + expect(vm.$el.children[0].className).to.equal(''); + done(); + }); + + it('should create a Affix component with slot', done => { + vm = createVue(` + + Fixed at the top + + `); + expect(vm.$el.children[0].children[0].tagName).to.equal('SPAN'); + expect(vm.$el.children[0].children[0].className).to.equal('demo-affix'); + done(); + }); + + it('set offset-top props', done => { + vm = createVue(` +
+ + Fixed at the top + +
+
+ `, true); + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[0].children[0].style.top).to.equal(''); + expect(vm.$el.children[0].children[1].style.display).to.equal('none'); + window.scrollTo(0, 10000); + setTimeout(()=>{ + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true; + expect(vm.$el.children[0].children[0].style.top).to.equal('20px'); + expect(vm.$el.children[0].children[1].style.display).to.equal(''); + done(); + }, 100); + }); + + it('set offset-bottom props', done => { + vm = createVue(` +
+
+ + Fixed at the top + +
+
+ `, true); + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + // Affix component haven't run handleScroll function when component mounted in real dom. + // use scrollTo() to trigger scroll event. + window.scrollTo(0, 100); + setTimeout(()=>{ + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true; + expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px'); + window.scrollTo(0, 10000); + setTimeout(()=>{ + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + done(); + }, 100); + }, 100); + }); + + it('both props are set, only offset-bottom is valid', done => { + vm = createVue(` +
+
+ + Fixed at the top + +
+
+ `, true); + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + // Affix component haven't run handleScroll function when component mounted in real dom. + // use scrollTo() to trigger scroll event. + window.scrollTo(0, 100); + setTimeout(()=>{ + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true; + expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px'); + window.scrollTo(0, 10000); + setTimeout(()=>{ + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + done(); + }, 100); + }, 100); + }); + + it('both props not set, should fixed and top equal 0', done => { + vm = createVue(` +
+ + Fixed at the top + +
+
+ `, true); + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false; + expect(vm.$el.children[0].children[0].style.top).to.equal(''); + expect(vm.$el.children[0].children[1].style.display).to.equal('none'); + window.scrollTo(0, 10000); + setTimeout(()=>{ + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true; + expect(vm.$el.children[0].children[0].style.top).to.equal('0px'); + expect(vm.$el.children[0].children[1].style.display).to.equal(''); + done(); + }, 100); + }); + +}); \ No newline at end of file From 1bf44ee08c1d72f50df8c30f83527b1f519fcd06 Mon Sep 17 00:00:00 2001 From: oyv1cent <641027967@qq.com> Date: Wed, 13 Mar 2019 16:04:24 +0800 Subject: [PATCH 2/3] better description --- test/unit/specs/affix.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/unit/specs/affix.spec.js b/test/unit/specs/affix.spec.js index 11a4922a..20fb0bb0 100644 --- a/test/unit/specs/affix.spec.js +++ b/test/unit/specs/affix.spec.js @@ -13,7 +13,7 @@ describe('Affix.vue', () => { done(); }); - it('should create a Affix component with slot', done => { + it('should create a Affix component contain slot', done => { vm = createVue(` Fixed at the top @@ -24,7 +24,7 @@ describe('Affix.vue', () => { done(); }); - it('set offset-top props', done => { + it('only set offset-top props', done => { vm = createVue(`
@@ -45,7 +45,7 @@ describe('Affix.vue', () => { }, 100); }); - it('set offset-bottom props', done => { + it('only set offset-bottom props', done => { vm = createVue(`
@@ -99,7 +99,7 @@ describe('Affix.vue', () => { }, 100); }); - it('both props not set, should fixed and top equal 0', done => { + it('both props are not set, should fixed top and top equal 0px', done => { vm = createVue(`
From e1f6c928195791584f45001f6b494e1be859eaac Mon Sep 17 00:00:00 2001 From: oyv1cent <641027967@qq.com> Date: Wed, 13 Mar 2019 16:26:22 +0800 Subject: [PATCH 3/3] optimization --- test/unit/specs/affix.spec.js | 70 +++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 28 deletions(-) diff --git a/test/unit/specs/affix.spec.js b/test/unit/specs/affix.spec.js index 20fb0bb0..55344ae1 100644 --- a/test/unit/specs/affix.spec.js +++ b/test/unit/specs/affix.spec.js @@ -8,8 +8,10 @@ describe('Affix.vue', () => { it('should create a Affix component without slot', done => { vm = createVue(''); - expect(vm.$el.children[0].tagName).to.equal('DIV'); - expect(vm.$el.children[0].className).to.equal(''); + const affix = vm.$el.children[0]; + + expect(affix.tagName).to.equal('DIV'); + expect(affix.className).to.equal(''); done(); }); @@ -19,8 +21,10 @@ describe('Affix.vue', () => { Fixed at the top `); - expect(vm.$el.children[0].children[0].tagName).to.equal('SPAN'); - expect(vm.$el.children[0].children[0].className).to.equal('demo-affix'); + const slot = vm.$el.children[0].children[0]; + + expect(slot.tagName).to.equal('SPAN'); + expect(slot.className).to.equal('demo-affix'); done(); }); @@ -33,14 +37,17 @@ describe('Affix.vue', () => {
`, true); - expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[0].children[0].style.top).to.equal(''); - expect(vm.$el.children[0].children[1].style.display).to.equal('none'); + const affix = vm.$el.children[0].children[0]; + const fakeBlock = vm.$el.children[0].children[1]; + + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.top).to.equal(''); + expect(fakeBlock.style.display).to.equal('none'); window.scrollTo(0, 10000); setTimeout(()=>{ - expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true; - expect(vm.$el.children[0].children[0].style.top).to.equal('20px'); - expect(vm.$el.children[0].children[1].style.display).to.equal(''); + expect(affix.classList.contains('ivu-affix')).to.true; + expect(affix.style.top).to.equal('20px'); + expect(fakeBlock.style.display).to.equal(''); done(); }, 100); }); @@ -55,18 +62,20 @@ describe('Affix.vue', () => {
`, true); - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + const affix = vm.$el.children[1].children[0]; + + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.bottom).to.equal(''); // Affix component haven't run handleScroll function when component mounted in real dom. // use scrollTo() to trigger scroll event. window.scrollTo(0, 100); setTimeout(()=>{ - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true; - expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px'); + expect(affix.classList.contains('ivu-affix')).to.true; + expect(affix.style.bottom).to.equal('20px'); window.scrollTo(0, 10000); setTimeout(()=>{ - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.bottom).to.equal(''); done(); }, 100); }, 100); @@ -82,18 +91,20 @@ describe('Affix.vue', () => {
`, true); - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + const affix = vm.$el.children[1].children[0]; + + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.bottom).to.equal(''); // Affix component haven't run handleScroll function when component mounted in real dom. // use scrollTo() to trigger scroll event. window.scrollTo(0, 100); setTimeout(()=>{ - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true; - expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px'); + expect(affix.classList.contains('ivu-affix')).to.true; + expect(affix.style.bottom).to.equal('20px'); window.scrollTo(0, 10000); setTimeout(()=>{ - expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[1].children[0].style.bottom).to.equal(''); + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.bottom).to.equal(''); done(); }, 100); }, 100); @@ -108,14 +119,17 @@ describe('Affix.vue', () => {
`, true); - expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false; - expect(vm.$el.children[0].children[0].style.top).to.equal(''); - expect(vm.$el.children[0].children[1].style.display).to.equal('none'); + const affix = vm.$el.children[0].children[0]; + const fakeBlock = vm.$el.children[0].children[1]; + + expect(affix.classList.contains('ivu-affix')).to.false; + expect(affix.style.top).to.equal(''); + expect(fakeBlock.style.display).to.equal('none'); window.scrollTo(0, 10000); setTimeout(()=>{ - expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true; - expect(vm.$el.children[0].children[0].style.top).to.equal('0px'); - expect(vm.$el.children[0].children[1].style.display).to.equal(''); + expect(affix.classList.contains('ivu-affix')).to.true; + expect(affix.style.top).to.equal('0px'); + expect(fakeBlock.style.display).to.equal(''); done(); }, 100); });