All files / progress/__tests__ Progress-test.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
 
 
1x
1x
1x
1x
 
1x
1x
1x
1x
 
1x
1x
1x
 
 
 
1x
1x
1x
1x
1x
 
 
 
1x
1x
1x
1x
 
1x
 
 
1x
1x
1x
 
 
 
 
 
1x
1x
1x
1x
1x
 
 
1x
 
1x
1x
 
 
 
 
 
1x
1x
1x
1x
 
 
1x
1x
1x
1x
1x
 
 
 
 
/* global describe, it */
 
import assert from 'assert'
import React from 'react'
import {mount} from 'enzyme'
import {Linear, Circular} from '../'
 
describe('Progress', () => {
  describe('Linear', () => {
    it('should work', (done) => {
      const wrapper = mount(<Linear />)
      // use setTimeout to make component is rendered
      window.setTimeout(() => {
        assert.equal(wrapper.find('.Progress-linear').length, 1)
        done()
      }, 100)
    })
 
    it('should render a progress bar with given percentage', (done) => {
      const wrapper = mount(<Linear percentage={50} />)
      window.setTimeout(() => {
        assert.equal(wrapper.find('.Progress-linear-inner').node.style.width, '50%')
        done()
      }, 100)
    })
 
    it('should remove itself from the DOM when done', (done) => {
      const wrapper = mount(<Linear />)
      window.setTimeout(() => {
        assert.equal(wrapper.find('.Progress-linear').length, 1)
        // let it be done
        wrapper.setProps({
          percentage: 100
        })
        window.setTimeout(() => {
          assert.equal(wrapper.find('.Progress-linear').length, 0)
          done()
        }, 1500)
      }, 100)
    }, 10000)
 
    // make sure else path is taken for test coverage
    it('should not remove itself from the DOM when below 100 percent', (done) => {
      const wrapper = mount(<Linear />)
      window.setTimeout(() => {
        assert.equal(wrapper.find('.Progress-linear').length, 1)
        wrapper.setProps({
          percentage: 99
        })
        window.setTimeout(() => {
          // different to test above
          assert.equal(wrapper.find('.Progress-linear').length, 1)
          done()
        }, 1500)
      }, 100)
    })
  })
 
  describe('Circular', () => {
    it('should work', () => {
      const wrapper = mount(<Circular />)
      assert.equal(wrapper.find('.Progress-circular').length, 1)
    })
 
    it('should render circular progress with given percentage', () => {
      const wrapper = mount(<Circular percentage={50} />)
      const inner = wrapper.find('.Progress-circular-path')
      assert.equal(parseFloat(inner.node.style.strokeDasharray), 2 * Math.PI * 30)
      assert.equal(inner.node.style.strokeDashoffset, Math.PI * 30)
    })
  })
})