<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blog &#187; javascript lint</title>
	<atom:link href="http://monket.net/blog/tag/javascript-lint/feed/" rel="self" type="application/rss+xml" />
	<link>http://monket.net/blog</link>
	<description></description>
	<lastBuildDate>Mon, 12 Apr 2010 13:11:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Loris: Autotest for Javascript</title>
		<link>http://monket.net/blog/2009/11/loris-autotest-for-javascript/</link>
		<comments>http://monket.net/blog/2009/11/loris-autotest-for-javascript/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 14:26:54 +0000</pubDate>
		<dc:creator>Karl O&#39;Keeffe</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[autotest]]></category>
		<category><![CDATA[growl]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[javascript lint]]></category>
		<category><![CDATA[js test driver]]></category>
		<category><![CDATA[jspec]]></category>
		<category><![CDATA[loris]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://monket.net/blog/?p=261</guid>
		<description><![CDATA[I&#8217;ve previously written a number of posts on javascript and autotest. Explaining how to integrate javascript lint, unit tests, and growl with the ruby Autotest project. While this all worked, it felt a little clunky as Autotest doesn&#8217;t natively support the idea of running multiple tasks one after the other. Rather than hack at the [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve <a href="http://monket.net/blog/tag/autotest/">previously written a number of posts on javascript and autotest</a>. Explaining how to integrate javascript lint, unit tests, and growl with the ruby <a href="http://ph7spot.com/articles/getting_started_with_autotest">Autotest</a> project.</p>

<p>While this all worked, it felt a little clunky as Autotest doesn&#8217;t natively support the idea of running multiple tasks one after the other. Rather than hack at the Autotest codebase, I thought I&#8217;d get some ruby experience by rolling my own autotest-style framework. Not great for reuse of code, but a great way for me to learn :)</p>

<h2>Loris</h2>

<p>Loris will monitor your project and run <a href="http://www.javascriptlint.com/">Javascript Lint</a> and <a href="http://code.google.com/p/js-test-driver/">JS Test Driver</a> whenever a file changes, it will report the results to the command line and using <a href="http://growl.info/">Growl</a>. If required, Loris will automatically start the JS Test Driver server and register your default browser with it.</p>

<h3>Installing</h3>

<p>Loris is hosted on <a href="http://gemcutter.org/">Gemcutter</a>, so you need to install their gem if you haven&#8217;t already.</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> gem update <span style="color: #660033;">--system</span>
<span style="color: #c20cb9; font-weight: bold;">sudo</span> gem <span style="color: #c20cb9; font-weight: bold;">install</span> gemcutter
gem tumble</pre></div></div>


<p>Then to install Loris, just run the following:</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">sudo</span> gem <span style="color: #c20cb9; font-weight: bold;">install</span> loris</pre></div></div>


<p>Loris has no command line options, and no configuration file (at the moment). It looks for configurations files to decide which tasks to run.</p>

<h3>Configuring Javascript Lint</h3>

<p>To enable Javascript Lint, create a <code>jsl.conf</code> file in the folder where you run Loris. This should be a standard Javascript Lint config file. If you need here is an <a href="http://mike.kruckenberg.com/archives/2009/03/configuration-options-for-javascript-lint.html">example Javascript Lint config file</a></p>

<p>You just need to specify which files Javascipt Lint should process. For example:</p>


<div class="wp_syntax"><div class="code"><pre class="conf" style="font-family:monospace;">### Files
# Specify which files to lint
# Use &quot;+recurse&quot; to enable recursion (disabled by default).
# To add a set of files, use &quot;+process FileName&quot;, &quot;+process Folder\Path\*.js&quot;,
# or &quot;+process Folder\Path\*.htm&quot;.
#
+process src/js/*.js
+process tests/js/*.js</pre></div></div>


<p>If no <code>jsl.conf</code> file is found, the Javascript Lint task is silently skipped.</p>

<h3>Configuring JS Test Driver</h3>

<p>To enable JS Test Driver, create a <code>jsTestDriver.conf</code> file in the folder where you run Loris. This should be a standard <a href="http://code.google.com/p/js-test-driver/wiki/ConfigurationFile">JS Test Driver config file</a>.</p>

<p>This should specify which files JS Test Driver should process, and how it connects to the JS Test Driver server. For example:</p>


<div class="wp_syntax"><div class="code"><pre class="yaml" style="font-family:monospace;">server: http://localhost:9876
&nbsp;
load:
  - tests/qunit/equiv.js
  - tests/qunit/QUnitAdapter.js
&nbsp;
  - src/js/*.js
  - tests/js/*.js</pre></div></div>


<p>If no <code>jsTestDriver.conf</code> file is found, the JS Test Driver task is silently skipped.</p>

<p>To make it really simple to run JS Test Driver tests, if the server is set to run on <code>localhost</code>, and Loris doesn&#8217;t detect one running, it will automatically start one, and register your default browser with it.</p>

<p>This makes it a one step process to get automated tests up and running.</p>

<h3>Running</h3>

<p>To run, open a command line window, navigate to the root folder of your project, and run:</p>


<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">loris</pre></div></div>


<p>Loris will run Javascript Lint, and JS Test Driver tasks (if it finds their configuration files), and will output the results on the command line.</p>

<h4>Example output</h4>


<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">Javascript Lint
success
All files are clean
&nbsp;
0 error(s), 0 warning(s)
JS Test Driver
success
All tests pass
[PASSED] GreeterTest.testGreet
  [LOG] JsTestDriver Hello World!
[PASSED] GreeterTest.testGoodbye
[PASSED] GreeterTest.testSetName
[PASSED] GreeterTest.testSetNameAndNameParamter
[PASSED] Asserts.test OK true succeeds
[PASSED] Asserts.test Equals succeeds
  [LOG] about to call assertEquals
[PASSED] Asserts.test Same assert succeeds
[PASSED] Lifecycle.test Setup and Teardown are run, and can contain assertions
Total 8 tests (Passed: 8; Fails: 0; Errors: 0) (3.00 ms)
  Firefox 1.9.1.4 MacIntel: Run 8 tests (Passed: 8; Fails: 0; Errors 0) (3.00 ms)</pre></div></div>


<p>Every time you make a change to a Javascript file, or a configuration file, Loris will automatically re-run Javascript Lint and JS Test Driver. So you can instant feedback on your changes.</p>

<p>Loris will clear the command line when re-running tasks. So the latest run is always at the top of you command line.</p>

<p>Loris will also report a summary of each task using <a href="http://growl.info/">Growl</a> (if it is installed). This allows you to get quick feedback without needing to refer back to the command line on every change.</p>

<h3>Requirements</h3>

<p>JS Test Driver is written in Java, so you will need to have Java installed to run it.</p>

<p>To get Growl notifications, you will need to install either <a href="http://growl.info/">Growl for OSX</a> or <a href="http://www.growlforwindows.com/">Growl for Windows</a>. Growl for Windows requires the <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5&amp;displaylang=en">.NET Framework 2.0+</a>.</p>

<h3>Caveat</h3>

<p>Loris is pretty limited at the moment, I just wired up the basics to get it running for a work project.</p>

<p>It doesn&#8217;t have any configuration options at the moment, so you have to follow it&#8217;s assumptions for now. I&#8217;m happy to add configuration options for any element as required.</p>

<p>Loris only comes with a few tasks (Javascript Lint, JS Test Driver, JSpec, and RSpec), but I hope to allow it have new tasks added via new gems (kind of similar to Autotest).</p>

<p>It comes packaged with a version of Javascript Lint, and JS Test Driver, and will use it&#8217;s own versions. It only includes the OSX and Windows versions of Javascript Lint.</p>

<p>If you want to modify the code, just fork the <a href="http://github.com/karl/loris">Loris github project</a></p>
]]></content:encoded>
			<wfw:commentRss>http://monket.net/blog/2009/11/loris-autotest-for-javascript/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Javascript Lint with Autotest</title>
		<link>http://monket.net/blog/2009/06/javascript-lint-with-autotest/</link>
		<comments>http://monket.net/blog/2009/06/javascript-lint-with-autotest/#comments</comments>
		<pubDate>Mon, 15 Jun 2009 09:00:00 +0000</pubDate>
		<dc:creator>Karl O&#39;Keeffe</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[autotest]]></category>
		<category><![CDATA[growl]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[javascript lint]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://monket.net/blog/?p=13</guid>
		<description><![CDATA[As well as using Autotest to run Cucumber scenarios I have also been looking into integrating lower level test into the Autotest cycle. My first attempt at this is a small module to run Javascript Lint on all the javascript files within a project any time any file changes. The module below hooks in to [...]]]></description>
			<content:encoded><![CDATA[<p>As well as using <a href="http://monket.net/blog/2009/06/autotest-cucumber-and-growl/">Autotest to run Cucumber scenarios</a> I have also been looking into integrating lower level test into the Autotest cycle.</p>

<p>My first attempt at this is a small module to run <a href="http://javascriptlint.com/">Javascript Lint</a> on all the javascript files within a project any time any file changes.</p>

<p>The module below hooks in to Autotest just before the tests are normally run. It runs javascript lint over all the <code>*.js</code> files in the project, outputs the results to the autotest results object and the standard output, and finally fires a new <code>ran_javascript_lint</code> hook</p>

<p>Errors and warnings found by Javascript Lint will also be notified through <a href="http://growl.info/">Growl</a> (if Growl and <a href="http://github.com/svoop/autotest-growl/tree/master">autotest-growl</a> are installed). If there are no errors or warnings than no Growl notification is shown. This keeps distracting popups to a minimum.</p>

<h2>Installing Autotest Javascript Lint</h2>

<p>First up, <a href="http://javascriptlint.com/download.htm">download Javascript Lint</a>. Extract the <code>jsl</code> executable to <code>lib/autotest/</code> within your project.</p>

<p>Copy the code below to <code>lib/autotest/javascript-lint.rb</code> within your project (the same directory where you have the <code>jsl</code> execuatable).</p>

<h4>javascript-lint.rb</h4>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#008000; font-style:italic;"># Run Javascript Lint as part of autotest</span>
<span style="color:#008000; font-style:italic;"># Supports Growl notifications if using autotest-growl</span>
<span style="color:#008000; font-style:italic;">#</span>
<span style="color:#008000; font-style:italic;"># Version 1.0</span>
&nbsp;
<span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'autotest'</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">module</span> <span style="color:#6666ff; font-weight:bold;">Autotest::JavascriptLint</span>
    @@js_dir = <span style="color:#996600;">''</span>
    @@jsl_dir = <span style="color:#CC00FF; font-weight:bold;">File</span>.<span style="color:#9900CC;">dirname</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF; font-weight:bold;">__FILE__</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">'/'</span>
    @@config_file = <span style="color:#996600;">''</span>
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">js_dir</span>=<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0066; font-weight:bold;">string</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        @@js_dir = <span style="color:#CC0066; font-weight:bold;">string</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">jsl_dir</span>=<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0066; font-weight:bold;">string</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        @@jsl_dir = <span style="color:#CC0066; font-weight:bold;">string</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">config_file</span>=<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0066; font-weight:bold;">string</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        @@config_file = <span style="color:#CC0066; font-weight:bold;">string</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
    Autotest.<span style="color:#9900CC;">add_hook</span> <span style="color:#ff3333; font-weight:bold;">:run_command</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>at<span style="color:#006600; font-weight:bold;">|</span>
&nbsp;
        <span style="color:#008000; font-style:italic;"># run javascript lint</span>
        results = <span style="color:#996600;">`#{@@jsl_dir}jsl -conf &quot;#{@@config_file}&quot;  -process &quot;#{@@js_dir}*.js&quot; +recurse`</span>
        <span style="color:#CC0066; font-weight:bold;">puts</span> results
&nbsp;
        at.<span style="color:#9900CC;">results</span> = <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#9966CC; font-weight:bold;">if</span> at.<span style="color:#9900CC;">results</span>.<span style="color:#0000FF; font-weight:bold;">nil</span>?
        at.<span style="color:#9900CC;">results</span>.<span style="color:#9900CC;">concat</span><span style="color:#006600; font-weight:bold;">&#40;</span>results.<span style="color:#CC0066; font-weight:bold;">split</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;<span style="color:#000099;">\n</span>&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
        at.<span style="color:#9900CC;">hook</span> <span style="color:#ff3333; font-weight:bold;">:ran_javascript_lint</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">module</span> <span style="color:#6666ff; font-weight:bold;">Autotest::Growl</span>
&nbsp;
    @@show_js_lint_success = <span style="color:#0000FF; font-weight:bold;">false</span>
&nbsp;
    <span style="color:#9966CC; font-weight:bold;">def</span> <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">show_js_lint_success</span>=<span style="color:#006600; font-weight:bold;">&#40;</span>bool<span style="color:#006600; font-weight:bold;">&#41;</span>
        @@show_js_lint_success=bool
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
    <span style="color:#008000; font-style:italic;"># Growl results of Javscript Lint</span>
    Autotest.<span style="color:#9900CC;">add_hook</span> <span style="color:#ff3333; font-weight:bold;">:ran_javascript_lint</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>autotest<span style="color:#006600; font-weight:bold;">|</span>
        gist = autotest.<span style="color:#9900CC;">results</span>.<span style="color:#9900CC;">grep</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">/</span>\d<span style="color:#006600; font-weight:bold;">+</span>\s<span style="color:#006600; font-weight:bold;">+</span>error.<span style="color:#006600; font-weight:bold;">*</span>,\s<span style="color:#006600; font-weight:bold;">+</span>\d<span style="color:#006600; font-weight:bold;">+</span>\s<span style="color:#006600; font-weight:bold;">+</span>warning.<span style="color:#006600; font-weight:bold;">*/</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">join</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot; / &quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">strip</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
        <span style="color:#9966CC; font-weight:bold;">if</span> gist == <span style="color:#996600;">''</span>
            growl <span style="color:#0066ff; font-weight:bold;">@label</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">'Cannot run javascript lint.'</span>, <span style="color:#996600;">''</span>, <span style="color:#996600;">'error'</span>
        <span style="color:#9966CC; font-weight:bold;">else</span>
            <span style="color:#9966CC; font-weight:bold;">if</span> gist =~ <span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">9</span><span style="color:#006600; font-weight:bold;">&#93;</span>\d<span style="color:#006600; font-weight:bold;">*</span>\s<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#40;</span>error<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">/</span>
                growl <span style="color:#0066ff; font-weight:bold;">@label</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">'Lint: Some files have errors.'</span>, gist, <span style="color:#996600;">'failed'</span>
            <span style="color:#9966CC; font-weight:bold;">elsif</span> gist =~ <span style="color:#006600; font-weight:bold;">/</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">9</span><span style="color:#006600; font-weight:bold;">&#93;</span>\d<span style="color:#006600; font-weight:bold;">*</span>\s<span style="color:#006600; font-weight:bold;">+</span><span style="color:#006600; font-weight:bold;">&#40;</span>warning<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">/</span>
                growl <span style="color:#0066ff; font-weight:bold;">@label</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">'Lint: Some files have warnings.'</span>, gist, <span style="color:#996600;">'pending'</span>
            <span style="color:#9966CC; font-weight:bold;">elsif</span> @@show_js_lint_success
                growl <span style="color:#0066ff; font-weight:bold;">@label</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#996600;">'Lint: All files are clean.'</span>, gist, <span style="color:#996600;">'passed'</span>
            <span style="color:#9966CC; font-weight:bold;">end</span>
        <span style="color:#9966CC; font-weight:bold;">end</span>
        <span style="color:#0000FF; font-weight:bold;">false</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>


<p>Then add Autotest Javascript Lint to your <code>.autotest</code> configuration file within the base of your project.</p>


<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#CC0066; font-weight:bold;">require</span> <span style="color:#996600;">'lib/autotest/javascript-lint'</span></pre></div></div>


<h2>To Do</h2>

<p>This could be packaged as a gem for easy installation, and it could possibly be modified to only run over changed files.</p>
]]></content:encoded>
			<wfw:commentRss>http://monket.net/blog/2009/06/javascript-lint-with-autotest/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
