chenhaodong / mew-iview

Commit fecb7cbee282bd77e83252ec9ed31756db6e846c

Authored by Aresn
Committed by GitHub
2 parents 0b86461f e1f6c928

Merge pull request #5412 from oyv1cent/learn-iview 

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