Skip to content

Commit 7942b26

Browse files
manosimmanosim
committed
New Settings Modal
1 parent f9df5f6 commit 7942b26

File tree

5 files changed

+264
-229
lines changed

5 files changed

+264
-229
lines changed

‎src/js/__mocks__/electron.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ module.exports = {
4343
remote: {
4444
BrowserWindow: () => browserWindow,
4545
dialog: dialog,
46+
app: {
47+
getVersion: () => '0.0.1'
48+
}
4649
},
4750
ipcRenderer: {
4851
send: jest.fn(),

‎src/js/__tests__/components/__snapshots__/settings-modal.js.snap

Lines changed: 149 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -4,128 +4,160 @@ exports[`components/settings-modal.js should render itself & its children (close
44

55
exports[`components/settings-modal.js should render itself & its children (open modal) 1`] = `
66
<div>
7-
<h3
8-
className="modal-title"
9-
>
10-
Settings
11-
<span
12-
className="octicon octicon-x btn-close pull-right"
13-
onClick={[Function]}
14-
/>
15-
</h3>
16-
<div
17-
className="row setting"
18-
>
19-
<div>
20-
<strong>
21-
Show only participating
22-
</strong>
23-
<input
24-
checked={false}
25-
onChange={[Function]}
26-
type="checkbox"
27-
/>
28-
</div>
29-
</div>
30-
<div
31-
className="row setting"
32-
>
33-
<div>
34-
<strong>
35-
Play sound
36-
</strong>
37-
<input
38-
checked={true}
39-
onChange={[Function]}
40-
type="checkbox"
41-
/>
42-
</div>
43-
</div>
44-
<div
45-
className="row setting"
46-
>
47-
<div>
48-
<strong>
49-
Show notifications
50-
</strong>
51-
<input
52-
checked={true}
53-
onChange={[Function]}
54-
type="checkbox"
55-
/>
56-
</div>
57-
</div>
58-
<div
59-
className="row setting"
60-
>
61-
<div>
62-
<strong>
63-
On Click, Mark as Read
64-
</strong>
65-
<input
66-
checked={false}
67-
onChange={[Function]}
68-
type="checkbox"
69-
/>
70-
</div>
71-
</div>
727
<div
73-
className="row setting"
8+
className="modal-content"
749
>
75-
<div>
76-
<strong>
77-
Open at startup
78-
</strong>
79-
<input
80-
checked={false}
81-
onChange={[Function]}
82-
type="checkbox"
83-
/>
10+
<div
11+
className="modal-header"
12+
>
13+
<h5
14+
className="modal-title"
15+
>
16+
Settings
17+
</h5>
18+
<button
19+
aria-label="Close"
20+
className="close"
21+
onClick={[Function]}
22+
>
23+
<span
24+
aria-hidden="true"
25+
>
26+
×
27+
</span>
28+
</button>
8429
</div>
85-
</div>
86-
<div>
87-
<div>
88-
<strong>
89-
Both Icons
90-
</strong>
91-
<input
92-
checked={undefined}
93-
onChange={[Function]}
94-
type="radio"
95-
value="both"
96-
/>
30+
<div
31+
className="modal-body"
32+
>
33+
<div
34+
className="row setting"
35+
>
36+
<div>
37+
<strong>
38+
Show only participating
39+
</strong>
40+
<input
41+
checked={false}
42+
onChange={[Function]}
43+
type="checkbox"
44+
/>
45+
</div>
46+
</div>
47+
<div
48+
className="row setting"
49+
>
50+
<div>
51+
<strong>
52+
Play sound
53+
</strong>
54+
<input
55+
checked={true}
56+
onChange={[Function]}
57+
type="checkbox"
58+
/>
59+
</div>
60+
</div>
61+
<div
62+
className="row setting"
63+
>
64+
<div>
65+
<strong>
66+
Show notifications
67+
</strong>
68+
<input
69+
checked={true}
70+
onChange={[Function]}
71+
type="checkbox"
72+
/>
73+
</div>
74+
</div>
75+
<div
76+
className="row setting"
77+
>
78+
<div>
79+
<strong>
80+
On Click, Mark as Read
81+
</strong>
82+
<input
83+
checked={false}
84+
onChange={[Function]}
85+
type="checkbox"
86+
/>
87+
</div>
88+
</div>
89+
<div
90+
className="row setting"
91+
>
92+
<div>
93+
<strong>
94+
Open at startup
95+
</strong>
96+
<input
97+
checked={false}
98+
onChange={[Function]}
99+
type="checkbox"
100+
/>
101+
</div>
102+
</div>
103+
<div>
104+
<div>
105+
<strong>
106+
Both Icons
107+
</strong>
108+
<input
109+
checked={undefined}
110+
onChange={[Function]}
111+
type="radio"
112+
value="both"
113+
/>
114+
</div>
115+
<div>
116+
<strong>
117+
Tray Icon
118+
</strong>
119+
<input
120+
checked={undefined}
121+
onChange={[Function]}
122+
type="radio"
123+
value="tray"
124+
/>
125+
</div>
126+
<div>
127+
<strong>
128+
Dock Icon
129+
</strong>
130+
<input
131+
checked={undefined}
132+
onChange={[Function]}
133+
type="radio"
134+
value="dock"
135+
/>
136+
</div>
137+
</div>
138+
<hr />
139+
Version:
140+
0.0.1
97141
</div>
98-
<div>
99-
<strong>
100-
Tray Icon
101-
</strong>
102-
<input
103-
checked={undefined}
104-
onChange={[Function]}
105-
type="radio"
106-
value="tray"
107-
/>
108-
</div>
109-
<div>
110-
<strong>
111-
Dock Icon
112-
</strong>
113-
<input
114-
checked={undefined}
115-
onChange={[Function]}
116-
type="radio"
117-
value="dock"
118-
/>
142+
<div
143+
className="modal-footer"
144+
>
145+
<button
146+
className="btn btn-outline-danger"
147+
onClick={[Function]}
148+
>
149+
<span
150+
className="octicon octicon-sign-out"
151+
/>
152+
Logout
153+
</button>
154+
<button
155+
className="btn btn-secondary"
156+
onClick={[Function]}
157+
>
158+
Close
159+
</button>
119160
</div>
120161
</div>
121-
<button
122-
className="btn btn-block btn-outline-danger btn-logout"
123-
onClick={[Function]}
124-
>
125-
<span
126-
className="octicon octicon-sign-out"
127-
/>
128-
Logout
129-
</button>
130162
</div>
131163
`;

‎src/js/__tests__/components/settings-modal.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,14 @@ describe('components/settings-modal.js', () => {
132132
it('should close the modal pressing the icon', () => {
133133
const wrapper = shallow(<SettingsModal {...props} />);
134134
expect(wrapper).toBeDefined();
135-
wrapper.find('.btn-close').simulate('click');
135+
wrapper.find('.close').simulate('click');
136+
expect(props.toggleSettingsModal).toHaveBeenCalledTimes(1);
137+
});
138+
139+
it('should close the modal pressing the close button', () => {
140+
const wrapper = shallow(<SettingsModal {...props} />);
141+
expect(wrapper).toBeDefined();
142+
wrapper.find('.btn-secondary').simulate('click');
136143
expect(props.toggleSettingsModal).toHaveBeenCalledTimes(1);
137144
});
138145

0 commit comments

Comments
 (0)