Skip to content

Commit f76db32

Browse files
committed
Add mocha web runner.
1 parent 9472afc commit f76db32

File tree

3 files changed

+12740
-0
lines changed

3 files changed

+12740
-0
lines changed

test/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mocha</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="mocha.css" />
8+
</head>
9+
<body>
10+
<div id="mocha"></div>
11+
<script src="mocha.js"></script>
12+
<script>mocha.setup('bdd');</script>
13+
<script src="suite.js"></script>
14+
<script>
15+
mocha.run();
16+
</script>
17+
</body>
18+
</html>

test/mocha.css

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
@charset "utf-8";
2+
3+
body {
4+
margin:0;
5+
}
6+
7+
#mocha {
8+
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
9+
margin: 60px 50px;
10+
}
11+
12+
#mocha ul,
13+
#mocha li {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
#mocha ul {
19+
list-style: none;
20+
}
21+
22+
#mocha h1,
23+
#mocha h2 {
24+
margin: 0;
25+
}
26+
27+
#mocha h1 {
28+
margin-top: 15px;
29+
font-size: 1em;
30+
font-weight: 200;
31+
}
32+
33+
#mocha h1 a {
34+
text-decoration: none;
35+
color: inherit;
36+
}
37+
38+
#mocha h1 a:hover {
39+
text-decoration: underline;
40+
}
41+
42+
#mocha .suite .suite h1 {
43+
margin-top: 0;
44+
font-size: .8em;
45+
}
46+
47+
#mocha .hidden {
48+
display: none;
49+
}
50+
51+
#mocha h2 {
52+
font-size: 12px;
53+
font-weight: normal;
54+
cursor: pointer;
55+
}
56+
57+
#mocha .suite {
58+
margin-left: 15px;
59+
}
60+
61+
#mocha .test {
62+
margin-left: 15px;
63+
overflow: hidden;
64+
}
65+
66+
#mocha .test.pending:hover h2::after {
67+
content: '(pending)';
68+
font-family: arial, sans-serif;
69+
}
70+
71+
#mocha .test.pass.medium .duration {
72+
background: #c09853;
73+
}
74+
75+
#mocha .test.pass.slow .duration {
76+
background: #b94a48;
77+
}
78+
79+
#mocha .test.pass::before {
80+
content: '✓';
81+
font-size: 12px;
82+
display: block;
83+
float: left;
84+
margin-right: 5px;
85+
color: #00d6b2;
86+
}
87+
88+
#mocha .test.pass .duration {
89+
font-size: 9px;
90+
margin-left: 5px;
91+
padding: 2px 5px;
92+
color: #fff;
93+
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
94+
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
95+
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
96+
-webkit-border-radius: 5px;
97+
-moz-border-radius: 5px;
98+
-ms-border-radius: 5px;
99+
-o-border-radius: 5px;
100+
border-radius: 5px;
101+
}
102+
103+
#mocha .test.pass.fast .duration {
104+
display: none;
105+
}
106+
107+
#mocha .test.pending {
108+
color: #0b97c4;
109+
}
110+
111+
#mocha .test.pending::before {
112+
content: '◦';
113+
color: #0b97c4;
114+
}
115+
116+
#mocha .test.fail {
117+
color: #c00;
118+
}
119+
120+
#mocha .test.fail pre {
121+
color: black;
122+
}
123+
124+
#mocha .test.fail::before {
125+
content: '✖';
126+
font-size: 12px;
127+
display: block;
128+
float: left;
129+
margin-right: 5px;
130+
color: #c00;
131+
}
132+
133+
#mocha .test pre.error {
134+
color: #c00;
135+
max-height: 300px;
136+
overflow: auto;
137+
}
138+
139+
#mocha .test .html-error {
140+
overflow: auto;
141+
color: black;
142+
line-height: 1.5;
143+
display: block;
144+
float: left;
145+
clear: left;
146+
font: 12px/1.5 monaco, monospace;
147+
margin: 5px;
148+
padding: 15px;
149+
border: 1px solid #eee;
150+
max-width: 85%; /*(1)*/
151+
max-width: calc(100% - 42px); /*(2)*/
152+
max-height: 300px;
153+
word-wrap: break-word;
154+
border-bottom-color: #ddd;
155+
-webkit-border-radius: 3px;
156+
-webkit-box-shadow: 0 1px 3px #eee;
157+
-moz-border-radius: 3px;
158+
-moz-box-shadow: 0 1px 3px #eee;
159+
border-radius: 3px;
160+
}
161+
162+
#mocha .test .html-error pre.error {
163+
border: none;
164+
-webkit-border-radius: none;
165+
-webkit-box-shadow: none;
166+
-moz-border-radius: none;
167+
-moz-box-shadow: none;
168+
padding: 0;
169+
margin: 0;
170+
margin-top: 18px;
171+
max-height: none;
172+
}
173+
174+
/**
175+
* (1): approximate for browsers not supporting calc
176+
* (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)
177+
* ^^ seriously
178+
*/
179+
#mocha .test pre {
180+
display: block;
181+
float: left;
182+
clear: left;
183+
font: 12px/1.5 monaco, monospace;
184+
margin: 5px;
185+
padding: 15px;
186+
border: 1px solid #eee;
187+
max-width: 85%; /*(1)*/
188+
max-width: calc(100% - 42px); /*(2)*/
189+
word-wrap: break-word;
190+
border-bottom-color: #ddd;
191+
-webkit-border-radius: 3px;
192+
-webkit-box-shadow: 0 1px 3px #eee;
193+
-moz-border-radius: 3px;
194+
-moz-box-shadow: 0 1px 3px #eee;
195+
border-radius: 3px;
196+
}
197+
198+
#mocha .test h2 {
199+
position: relative;
200+
}
201+
202+
#mocha .test a.replay {
203+
position: absolute;
204+
top: 3px;
205+
right: 0;
206+
text-decoration: none;
207+
vertical-align: middle;
208+
display: block;
209+
width: 15px;
210+
height: 15px;
211+
line-height: 15px;
212+
text-align: center;
213+
background: #eee;
214+
font-size: 15px;
215+
-moz-border-radius: 15px;
216+
border-radius: 15px;
217+
-webkit-transition: opacity 200ms;
218+
-moz-transition: opacity 200ms;
219+
transition: opacity 200ms;
220+
opacity: 0.3;
221+
color: #888;
222+
}
223+
224+
#mocha .test:hover a.replay {
225+
opacity: 1;
226+
}
227+
228+
#mocha-report.pass .test.fail {
229+
display: none;
230+
}
231+
232+
#mocha-report.fail .test.pass {
233+
display: none;
234+
}
235+
236+
#mocha-report.pending .test.pass,
237+
#mocha-report.pending .test.fail {
238+
display: none;
239+
}
240+
#mocha-report.pending .test.pass.pending {
241+
display: block;
242+
}
243+
244+
#mocha-error {
245+
color: #c00;
246+
font-size: 1.5em;
247+
font-weight: 100;
248+
letter-spacing: 1px;
249+
}
250+
251+
#mocha-stats {
252+
position: fixed;
253+
top: 15px;
254+
right: 10px;
255+
font-size: 12px;
256+
margin: 0;
257+
color: #888;
258+
z-index: 1;
259+
}
260+
261+
#mocha-stats .progress {
262+
float: right;
263+
padding-top: 0;
264+
}
265+
266+
#mocha-stats em {
267+
color: black;
268+
}
269+
270+
#mocha-stats a {
271+
text-decoration: none;
272+
color: inherit;
273+
}
274+
275+
#mocha-stats a:hover {
276+
border-bottom: 1px solid #eee;
277+
}
278+
279+
#mocha-stats li {
280+
display: inline-block;
281+
margin: 0 5px;
282+
list-style: none;
283+
padding-top: 11px;
284+
}
285+
286+
#mocha-stats canvas {
287+
width: 40px;
288+
height: 40px;
289+
}
290+
291+
#mocha code .comment { color: #ddd; }
292+
#mocha code .init { color: #2f6fad; }
293+
#mocha code .string { color: #5890ad; }
294+
#mocha code .keyword { color: #8a6343; }
295+
#mocha code .number { color: #2f6fad; }
296+
297+
@media screen and (max-device-width: 480px) {
298+
#mocha {
299+
margin: 60px 0px;
300+
}
301+
302+
#mocha #stats {
303+
position: absolute;
304+
}
305+
}

0 commit comments

Comments
 (0)