This repository has been archived by the owner on Aug 21, 2023. It is now read-only.
/
Card.test.js
112 lines (83 loc) · 2.78 KB
/
Card.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
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
102
103
104
105
106
107
108
109
110
111
112
import React from 'react'
import { mount, shallow } from 'enzyme'
import Card from '..'
describe('ClassName', () => {
test('Has default className', () => {
const wrapper = shallow(<Card />)
expect(wrapper.prop('className')).toBe('c-card')
})
test('Accepts custom className', () => {
const wrapper = shallow(<Card className='not-metro-man' />)
expect(wrapper.prop('className')).toContain('not-metro-man')
})
})
describe('Content', () => {
test('Renders child content', () => {
const wrapper = shallow(<Card>Megamind</Card>)
expect(wrapper.text()).toBe('Megamind')
})
test('Render child components', () => {
const wrapper = mount(
<Card className='mega'>
<Card className='mind'>
Megamind
</Card>
</Card>
)
const innerCard = wrapper.childAt(0)
expect(innerCard.exists()).toBeTruthy()
expect(innerCard.prop('className')).toContain('mind')
expect(innerCard.text()).toBe('Megamind')
})
})
describe('Link', () => {
const link = 'https://www.helpscout.net'
test('Renders an `a` selector if href is specified', () => {
const wrapper = shallow(<Card href={link} />)
expect(wrapper.node.type).toBe('a')
expect(wrapper.prop('href')).toBe(link)
})
test('Adds link styles if href is specified', () => {
const wrapper = shallow(<Card href={link} />)
expect(wrapper.prop('className')).toContain('is-clickable')
expect(wrapper.prop('className')).toContain('is-hoverable')
})
})
describe('Click', () => {
test('Can trigger onClick callback', () => {
let value = false
const onClick = () => { value = true }
const wrapper = shallow(<Card onClick={onClick} />)
wrapper.simulate('click')
expect(value).toBeTruthy()
})
test('Adds clickable styles if onClick is specified', () => {
const noop = () => {}
const wrapper = shallow(<Card onClick={noop} />)
expect(wrapper.prop('className')).toContain('is-clickable')
})
})
describe('Selector', () => {
test('Renders a div selector by default', () => {
const wrapper = shallow(<Card />)
expect(wrapper.node.type).toBe('div')
})
test('Renders a custom selector, if specified', () => {
const wrapper = shallow(<Card selector='span' />)
expect(wrapper.node.type).toBe('span')
})
})
describe('Styles', () => {
test('Renders borderless styles, if specified', () => {
const wrapper = shallow(<Card borderless />)
expect(wrapper.hasClass('is-borderless')).toBeTruthy()
})
test('Renders flex styles, if specified', () => {
const wrapper = shallow(<Card flex />)
expect(wrapper.hasClass('is-flex')).toBeTruthy()
})
test('Renders seamless styles, if specified', () => {
const wrapper = shallow(<Card seamless />)
expect(wrapper.hasClass('is-seamless')).toBeTruthy()
})
})