/
section.browser-test.jsx
148 lines (122 loc) · 3.56 KB
/
section.browser-test.jsx
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import React from 'react';
import { mount } from 'enzyme';
import chai from 'chai';
import assign from 'lodash.assign';
import TestUtils from 'react-addons-test-utils';
import IconSettings from '../../icon-settings';
import AppLauncherTile from '../../app-launcher/tile';
import AppLauncherSection from '../../app-launcher/section';
const expect = chai.expect;
const should = chai.should();
const { Simulate } = TestUtils;
describe('SLDS APP LAUNCHER SECTION *******************************************', () => {
const handles = {
section: null,
};
const defaultSectionProps = {
title: 'All Items',
};
const defaultChildren = [
<AppLauncherTile key="asdf" title="Marketing Cloud" />,
<AppLauncherTile key="qwer" title="Support Cloud" />,
];
const createSection = (props, children) =>
React.createElement(
AppLauncherSection,
assign({}, defaultSectionProps, props),
children
);
function mountSection (props, children = defaultChildren) {
handles.section = mount(
<IconSettings iconPath="/assets/icons">
{createSection(props, children)}
</IconSettings>
);
}
describe('App Launcher Section (toggleable)', () => {
let onToggleClick;
beforeEach(() => {
onToggleClick = sinon.spy();
mountSection({
collapseSectionAssistiveText: 'Collapse Section',
onToggleClick,
title: 'ALL THE ITEMS!',
toggleable: true,
});
});
it('modal section exists', () => {
should.exist(handles.section);
});
it('modal section has "slds-is-open" class when open', () => {
expect(handles.section.find('.slds-section').node.className).to.include(
'slds-is-open'
);
});
it('section has a title', () => {
should.exist(handles.section.find('.slds-section__title'));
});
it('ul has proper classes', () => {
should.exist(
handles.section.find('ul.slds-grid.slds-grid--pull-padded.slds-wrap')
);
});
it('li exists', () => {
expect(handles.section.find('li').length).to.equal(2);
});
it('renders li with proper classes', () => {
expect(handles.section.find('li').at(0).node.className).to.include(
'slds-col--padded slds-grow-none slds-size--1-of-1 slds-medium-size--1-of-3'
);
});
it('renders custom section title', () => {
expect(handles.section.find('h3').text()).to.equal('ALL THE ITEMS!');
});
it('renders custom toggle assistve text', () => {
expect(handles.section.find('.slds-assistive-text').text()).to.equal(
'Collapse Section'
);
});
it('toggling section fires callback', () => {
Simulate.click(handles.section.find('.slds-button').node);
expect(onToggleClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
});
});
describe('App Launcher Section (not toggleable)', () => {
beforeEach(() => {
mountSection();
});
it('does not render toggle if toggleable is false', () => {
should.not.exist(
handles.section.find(
'.slds-button .slds-button--icon .slds-m-right--small'
)
);
});
});
describe('App Launcher Section (closed)', () => {
beforeEach(() => {
mountSection({
toggleable: true,
isOpen: false,
});
});
it('modal section has "slds-is-close" class when closed', () => {
should.exist(handles.section.find('.slds-is-close'));
});
});
describe('App Launcher Section (small)', () => {
beforeEach(() => {
mountSection(
{},
<AppLauncherTile size="small" title="Marketing Clout" />
);
});
it('renders li with proper classes for small tiles', () => {
should.exist(
handles.section.find(
'.slds-col--padded .slds-grow-none .slds-size--xx-small'
)
);
});
});
});