-
Notifications
You must be signed in to change notification settings - Fork 0
/
tests.html
165 lines (120 loc) · 6.64 KB
/
tests.html
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="fragment" content="!"/>
<title>Tests</title>
<link rel="stylesheet" href="assets-demo/richwidgets-demo.min.css">
<script src="assets-demo/richwidgets-demo.min.js"></script>
<link rel="stylesheet" href="assets-demo/highlightjs/styles/github.css">
<script src="assets-demo/modernizr/modernizr.js"></script>
<script src="assets-demo/highlightjs/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="assets-demo/bootstrap/js/dropdown.js"></script>
<script src="assets-demo/bootstrap/js/collapse.js"></script>
</head>
<body class="">
<nav class="navbar-rcue navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href=".">RichWidgets</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-primary navbar-left">
<li ><a href=".">Home</a></li>
<li class="dropdown ">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Widgets <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ><a href="input/autocomplete.html">Autocomplete</a></li>
<li ><a href="output/charts.html">Charts</a></li>
<li ><a href="select/ordering-list.html">OrderingList</a></li>
<li ><a href="select/pick-list.html">PickList</a></li>
</ul>
</li>
<li><a href="/api">API Docs</a></li>
</ul>
<ul class="nav navbar-nav navbar-primary navbar-right">
<li ><a href="about.html">About</a></li>
<li class="active"><a href="tests.html">Testing</a></li>
<li ><a href="contributing.html">Contributing</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 id="testing-richwidgets-build-status-https-travis-ci-org-richwidgets-richwidgets-png-branch-master-https-travis-ci-org-richwidgets-richwidgets-">Testing RichWidgets <a href="https://travis-ci.org/richwidgets/richwidgets"><img src="https://travis-ci.org/richwidgets/richwidgets.png?branch=master" alt="Build Status"></a></h1>
<blockquote>
<p>A JavaScript project containing standalone javascript widgets based on Bootstrap, jQuery UI and other third-party widgets, styled with LESS.</p>
</blockquote>
<h2 id="testing">Testing</h2>
<p>In the rapid evolving world of Web standards, libraries, and browsers testing is of paramount importance. We need to make
sure our widgets continue to function as we upgrade the various libraries that make up our project.</p>
<p>RichWidgets uses <a href="http://pivotal.github.io/jasmine/">jasmine</a> and <a href="https://github.com/velesin/jasmine-jquery">jasmine-jquery</a>,
using <a href="http://karma-runner.github.io/">karma</a> as our test runner. Widget tests must go beyond simple setup/takedown of the widgets,
and must also test all widget options and user interactions. In this way we will be able to keep our widgets both current and stable.</p>
<h3 id="installing-karma">Installing Karma</h3>
<p><em>The Karma tool can be easily installed with NPM as:</em></p>
<pre><code>npm install -g karma</code></pre>
<h3 id="running-test-suite">Running Test Suite</h3>
<p><em>Run all tests on particular browsers:</em></p>
<pre><code>karma start karma.conf.js --browsers=PhantomJS,Chrome,Firefox</code></pre>
<h3 id="developing-tests">Developing Tests</h3>
<h4 id="run-test-suite-continuously-reacting-on-file-changes-">Run test suite continuously reacting on file changes:*</h4>
<pre><code>karma start karma.conf.js --single-run=false --auto-watch=true --browsers=Chrome</code></pre>
<h4 id="running-selected-tests-">Running selected tests:</h4>
<ul>
<li>Open a javascript test source</li>
<li>Rename the test definition from <code>it</code> to <code>iit</code><ul>
<li>or rename the specification from <code>describe</code> to <code>ddescribe</code></li>
</ul>
</li>
</ul>
<h4 id="debugging-tests-">Debugging tests:</h4>
<ul>
<li>Write <code>debugger;</code> anywhere in your test to set a breakpoint.</li>
<li>Run the test suite with <code>--single-run=false --auto-watch=true</code> options.</li>
<li>In a browser window open a console.</li>
<li>Refresh the browser tab. It should stop the execution on the defined breakpoint.</li>
</ul>
<h4 id="test-configuration">Test Configuration</h4>
<p>Tests are configured in two files:</p>
<ul>
<li><code>karma.conf.js</code> - configuration for Karma runner</li>
<li><code>test/test-main.js</code> - configuration for Module Loading (AMD)</li>
</ul>
<h3 id="running-tests-on-saucelabs-">Running Tests on SauceLabs:</h3>
<p>In order to run tests on browsers you don't normally have access to,
or for purposes of continous integration, we leverage Karma - SauceLabs runner.</p>
<p>In order to set it up locally, you have to setup environmental variables:</p>
<pre><code>export SAUCE_USERNAME=your_username
export SAUCE_ACCESS_KEY=your_generated_access_key</code></pre>
<p>Then you can start one of browsers:</p>
<pre><code>karma start --single-run=false --auto-watch=true --browsers=SL_Firefox_latest</code></pre>
<p>Consult <code>customLaunchers</code> section in <code>karma.conf.js</code> for all the configured browsers.</p>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-7306415-8', 'richwidgets.io');
ga('send', 'pageview');
</script>
</body>
</html>