chenhaodong / mew-iview

Commit 2c00b6fdee383f3de2907b10e3e0848ae485aa88

Authored by oyv1cent
1 parent a3d60e12

Add Affix component unit test

Showing 1 changed file with 123 additions and 0 deletions   Show diff stats
Inline Side-by-side
test/unit/specs/affix.spec.js 0 → 100644
  Show/Hide comments   View file @2c00b6f
  1 +import { createVue, destroyVM } from '../util';
  2 +
  3 +describe('Affix.vue', () => {
  4 + let vm;
  5 + afterEach(() => {
  6 + destroyVM(vm);
  7 + });
  8 +
  9 + it('should create a Affix component without slot', done => {
  10 + vm = createVue('<Affix></Affix>');
  11 + expect(vm.$el.children[0].tagName).to.equal('DIV');
  12 + expect(vm.$el.children[0].className).to.equal('');
  13 + done();
  14 + });
  15 +
  16 + it('should create a Affix component with slot', done => {
  17 + vm = createVue(`
  18 + <Affix>
  19 + <span class="demo-affix">Fixed at the top</span>
  20 + </Affix>
  21 + `);
  22 + expect(vm.$el.children[0].children[0].tagName).to.equal('SPAN');
  23 + expect(vm.$el.children[0].children[0].className).to.equal('demo-affix');
  24 + done();
  25 + });
  26 +
  27 + it('set offset-top props', done => {
  28 + vm = createVue(`
  29 + <div>
  30 + <Affix :offset-top="20">
  31 + <span class="demo-affix">Fixed at the top</span>
  32 + </Affix>
  33 + <div style="width: 100%; height: 2000px"></div>
  34 + </div>
  35 + `, true);
  36 + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false;
  37 + expect(vm.$el.children[0].children[0].style.top).to.equal('');
  38 + expect(vm.$el.children[0].children[1].style.display).to.equal('none');
  39 + window.scrollTo(0, 10000);
  40 + setTimeout(()=>{
  41 + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true;
  42 + expect(vm.$el.children[0].children[0].style.top).to.equal('20px');
  43 + expect(vm.$el.children[0].children[1].style.display).to.equal('');
  44 + done();
  45 + }, 100);
  46 + });
  47 +
  48 + it('set offset-bottom props', done => {
  49 + vm = createVue(`
  50 + <div>
  51 + <div style="width: 100%; height: 2000px"></div>
  52 + <Affix :offset-bottom="20">
  53 + <span class="demo-affix">Fixed at the top</span>
  54 + </Affix>
  55 + <div style="width: 100%; height: 2000px"></div>
  56 + </div>
  57 + `, true);
  58 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false;
  59 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('');
  60 + // Affix component haven't run handleScroll function when component mounted in real dom.
  61 + // use scrollTo() to trigger scroll event.
  62 + window.scrollTo(0, 100);
  63 + setTimeout(()=>{
  64 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true;
  65 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px');
  66 + window.scrollTo(0, 10000);
  67 + setTimeout(()=>{
  68 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false;
  69 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('');
  70 + done();
  71 + }, 100);
  72 + }, 100);
  73 + });
  74 +
  75 + it('both props are set, only offset-bottom is valid', done => {
  76 + vm = createVue(`
  77 + <div>
  78 + <div style="width: 100%; height: 2000px"></div>
  79 + <Affix :offset-bottom="20" :offset-top="20">
  80 + <span class="demo-affix">Fixed at the top</span>
  81 + </Affix>
  82 + <div style="width: 100%; height: 2000px"></div>
  83 + </div>
  84 + `, true);
  85 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false;
  86 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('');
  87 + // Affix component haven't run handleScroll function when component mounted in real dom.
  88 + // use scrollTo() to trigger scroll event.
  89 + window.scrollTo(0, 100);
  90 + setTimeout(()=>{
  91 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.true;
  92 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('20px');
  93 + window.scrollTo(0, 10000);
  94 + setTimeout(()=>{
  95 + expect(vm.$el.children[1].children[0].classList.contains('ivu-affix')).to.false;
  96 + expect(vm.$el.children[1].children[0].style.bottom).to.equal('');
  97 + done();
  98 + }, 100);
  99 + }, 100);
  100 + });
  101 +
  102 + it('both props not set, should fixed and top equal 0', done => {
  103 + vm = createVue(`
  104 + <div>
  105 + <Affix>
  106 + <span class="demo-affix">Fixed at the top</span>
  107 + </Affix>
  108 + <div style="width: 100%; height: 2000px"></div>
  109 + </div>
  110 + `, true);
  111 + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.false;
  112 + expect(vm.$el.children[0].children[0].style.top).to.equal('');
  113 + expect(vm.$el.children[0].children[1].style.display).to.equal('none');
  114 + window.scrollTo(0, 10000);
  115 + setTimeout(()=>{
  116 + expect(vm.$el.children[0].children[0].classList.contains('ivu-affix')).to.true;
  117 + expect(vm.$el.children[0].children[0].style.top).to.equal('0px');
  118 + expect(vm.$el.children[0].children[1].style.display).to.equal('');
  119 + done();
  120 + }, 100);
  121 + });
  122 +
  123 +});
0 124 \ No newline at end of file
... ...