Blame view

test/unit/specs/affix.spec.js 4.5 KB
2c00b6fd   oyv1cent   Add Affix compone...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  import { createVue, destroyVM } from '../util';
  
  describe('Affix.vue', () => {
    let vm;
    afterEach(() => {
      destroyVM(vm);
    });
  
    it('should create a Affix component without slot', done => {
      vm = createVue('<Affix></Affix>');
      expect(vm.$el.children[0].tagName).to.equal('DIV');
      expect(vm.$el.children[0].className).to.equal('');
      done();
    });
  
1bf44ee0   oyv1cent   better description
16
    it('should create a Affix component contain slot', done => {
2c00b6fd   oyv1cent   Add Affix compone...
17
18
19
20
21
22
23
24
25
26
      vm = createVue(`
          <Affix>
              <span class="demo-affix">Fixed at the top</span>
          </Affix>
      `);
      expect(vm.$el.children[0].children[0].tagName).to.equal('SPAN');
      expect(vm.$el.children[0].children[0].className).to.equal('demo-affix');
      done();
    });
  
1bf44ee0   oyv1cent   better description
27
    it('only set offset-top props', done => {
2c00b6fd   oyv1cent   Add Affix compone...
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      vm = createVue(`
      <div>
          <Affix :offset-top="20">
              <span class="demo-affix">Fixed at the top</span>
          </Affix>
          <div style="width: 100%; height: 2000px"></div>
      </div>
      `, 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);
    });
  
1bf44ee0   oyv1cent   better description
48
    it('only set offset-bottom props', done => {
2c00b6fd   oyv1cent   Add Affix compone...
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
      vm = createVue(`
      <div>
          <div style="width: 100%; height: 2000px"></div>
          <Affix :offset-bottom="20">
              <span class="demo-affix">Fixed at the top</span>
          </Affix>
          <div style="width: 100%; height: 2000px"></div>
      </div>
      `, 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(`
      <div>
          <div style="width: 100%; height: 2000px"></div>
          <Affix :offset-bottom="20" :offset-top="20">
              <span class="demo-affix">Fixed at the top</span>
          </Affix>
          <div style="width: 100%; height: 2000px"></div>
      </div>
      `, 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);
    });
  
1bf44ee0   oyv1cent   better description
102
    it('both props are not set, should fixed top and top equal 0px', done => {
2c00b6fd   oyv1cent   Add Affix compone...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
      vm = createVue(`
      <div>
          <Affix>
              <span class="demo-affix">Fixed at the top</span>
          </Affix>
          <div style="width: 100%; height: 2000px"></div>
      </div>
      `, 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);
    });
  
  });