--- title: FuncUnit - Fun Web Application Testing description: FuncUnit - Fun Web Application Testing image: https://www.bitovi.com/hubfs/open-source/os-funcunit.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com July 26, 2010 # FuncUnit - Fun Web Application Testing FuncUnit - Fun Web Application Testing ![Brian Moschel](https://www.bitovi.com/hubfs/brian.jpeg) Brian Moschel Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) Last week we released [Syn](http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html) and mentioned how all testing solutions suffer from some fatal flaw. Today, we are releasing a beta of [FuncUnit](http://funcunit.com/), which has "solved" JavaScript web application testing. ## Features - Functional Testing - Test complex behavior like drag-drop. - High Fidelity - Create identical events that a mouse and keyboard create. Run tests in a real browser. - Automated - Test multiple browsers from the command line. - Easy to Write - Write, run, and debug tests in the browser, without configuring a server or other tool. Write tests in a familiar jQuery-style API. - Free - It's open source! Save yourself $5,000 for similar solutions. - Multi-system - Runs in IE 6+, FF 2+, Safari 4+, Opera 9+, Chrome, on PC, Mac, and Linux. ## Download [Download FuncUnit Beta 4](http://github.com/downloads/jupiterjs/funcunit/funcunit-beta-4.zip) ## What FuncUnit is a web application testing framework that combines [Selenium](http://seleniumhq.org/), [jQuery](http://jquery.com/), [QUnit](http://docs.jquery.com/QUnit), and [Envjs](http://www.envjs.com/). It focuses on making testing as easy and fun as possible. Writing tests is a chore and won't be done unless it's stupidly easy. Plus, tests won't get run unless they can be run automatically. The problem with other automated testing solutions is that everyone has to install and configure cumbersome external software to even begin writing tests. After setting up the software, you write the tests with some obtuse API in a language other than JavaScript. But the worst part is debugging these tests across the software-browser bridge. The tests are almost impossible to debug! We fixed this. ### Write, Run, and Debug with the Browser FuncUnit lets you write tests by just creating an `html` file that includes `funcunit.js`. Simply open the html page in your browser and it runs your tests. If you made a mistake, or your app breaks, use your favorite debugger (Firebug) to catch the problem. It's easy. ### Automate Your Tests When you've setup your testing server with the browsers you want to support, running the same tests is as simple as opening the test page with envjs: ``` envjs http://test.myco.com/tests/filemanager.html ``` We typically set this up to run as a nightly build. ### API FuncUnit's API is super sweet. If you know QUnit and jQuery, it will be second nature. The following tests the handy [autosuggest](http://www.phpguru.org/static/AutoComplete.html) from [phpguru](http://phpguru.com/). See it in action [here](http://v3.javascriptmvc.com/funcunit/autosuggest/funcunit.html). (Turn off your popup blocker!) ``` module("autosuggest",{ setup : function(){ S.open('autosuggest.html') } }); test("JavaScript results",function(){ S('input').click().type("JavaScript") ``` ## Demos Make sure you have your popup blocker off! - [A basic AutoComplete](http://v3.javascriptmvc.com/funcunit/autosuggest/funcunit.html) - [Bitovi's Phui tests](http://v3.javascriptmvc.com/mxui/funcunit.html) (Runs [Menu](http://v3.javascriptmvc.com/mxui/menuable/funcunit.html), [Grid](http://v3.javascriptmvc.com/mxui/grid_funcunit.html), [Sortable](http://v3.javascriptmvc.com/mxui/sortable/funcunit.html), [Filler](http://v3.javascriptmvc.com/mxui/filler/funcunit.html)) [Some might break in IE, this is a problem with the widgets, not FuncUnit]. ## Documentation JavaScriptMVC's [FuncUnit docs](http://v3.javascriptmvc.com/index.html#&who=FuncUnit). ## Use Setting up FuncUnit is almost exactly like setting up QUnit. After downloading FuncUnit into a public folder on your server (or a local file on your hard drive): 1. Create an empty test script (ex: `mytest.js`). 2. Create a qunit like page (ex: `mytest.html`) that will load your test and display your results. Use [this as a template](http://v3.javascriptmvc.com/funcunit/template.html) (It's also in the download). 3. Have that page include funcunit.js, qunit.css, and your test script (mytest.js) Open mytest.html, you should see something like: ![Functemplate](https://www.bitovi.com/hubfs/Imported_Blog_Media/functemplate.png "Functemplate") **** you probably want to change the name of these files **** ## Writing Tests All interaction with the tested page is done through the `FuncUnit` object. This is aliased as `S`. `S` is to FuncUnit as `$` is to `jQuery`. Typically a test is broken down in 5 parts: - Opening a page - Performing user **actions** (like clicking and typing). - **Waiting** for the page to complete its response (animations and Ajax) - **Getting** properties of the page (like the text of an element) - **Asserting** the properties are correct (like the text == "Hello World") Testing a dynamic webpage is largely asynchronous. To avoid LOTS of nested callback functions, most FuncUnit commands are queued. But these commands take a callback function that runs after the command completes, but before the next command runs. For example, the following performs 3 drags that each take a second. But, between the second and third drag, it checks the `#start `element's text. ``` S("#start") .drag({ to:"#first", duration: 1000 }) .drag({ to:"#second", duration: 1000 }, function(){ equals(S("#start").text(),"2 drops") }) .drag({ to:"#third", duration: 1000 }) ``` ### Opening a page To open a page is simple. Write: ``` S.open("path/to/mypage.html") ``` The path to the page should be relative to the FuncUnit test page (`mytest.html`). Typically an open should be done in a module's setup function. ### Actions Actions are used to simulate user behavior such as clicking, typing, moving the mouse. FuncUnit provides the following actions: - `click `- clicks an element (mousedown, mouseup, click). - `dblclick `- two clicks followed by a dblclick. - `rightClick `- a right mousedown, mouseup, and contextmenu. - `type `- Types characters into an element. - `move `- mousemove, mouseover, and mouseouts from one element to another. - `drag `- a drag motion from one element to another. - `scroll `- scrolls an element. The following might simulate typing and resizing a "resizable" textarea plugin: ``` S('textarea').click().type( "Hello World" ); ``` ### Waits Waits are used to wait for a specific condition to be met before continuing to command. Waits look like most jQuery setter methods. For example, the following waits until the width of an element is 200 pixels and tests its offset. ``` var sm = S("#sliderMenu"); sm.width( 200, function(){ ``` You can also provide a test function that when true, continues to the next action or wait command. The following is equivalent to the previous example: ``` var sm = S("#sliderMenu"); ``` ### Getters Getters are used to test the conditions of the page. Most getter commands also correspond to a jQuery method of the same name. The following checks that a textarea, which can only be resized vertically, is 20 pixels taller after a drag, but the same width: ``` var txtarea = S('textarea'), // save references to width and height startingWidth = txtarea.width(), startingHeight = txtarea.height(); S('.resizer').drag("+20 +20", function(){ equals(txtarea.width(), startingWidth, "width stays the same"); ``` ### Assertions FuncUnit uses qUnit for assertions so you can use: - `ok - ok(state, message)` - `equals - equals(actual, expected, message)` - `same - same(actual, expected, message)` ## Running Tests Running tests in the browser is easy - just open the FuncUnit page. But running tests via the command line is equally as easy. Simply open your test page with envjs: ``` envjs http://localhost/tests/grid.html ``` Or if you are using Mac/Linux: ``` ./envjs http://localhost/tests/grid.html ``` ### Setting Up Your Test Server We'll be putting this up in JavaScriptMVC's [FuncUnit docs](http://v3.javascriptmvc.com/index.html#&who=FuncUnit). ## Conclusion We believe FuncUnit finally makes testing JavaScript approachable. We hope you can use to to write better, more robust applications that move web development along faster than ever. If you have questions or comments please post on [FuncUnit's Google Group](http://groups.google.com/group/funcunit). ## Thanks! FuncUnit is a mashup of some of the best open source tools available: - [Selenium](http://seleniumhq.org/) - Browser automation - [QUnit](http://docs.jquery.com/QUnit) - Testing API - [jQuery](http://jquery.com/) - CSS selector and DOM utilities (your app does not need jQuery) - [EnvJS](http://www.envjs.com/) - Simulated browser environment - [Syn](http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html) - A synthetic event library ## Important Links - [FuncUnit Homepage](http://funcunit.com/) - [Google Group](http://groups.google.com/group/funcunit) - [GitHub](http://github.com/pinhook/funcunit) - [@funcunit](http://twitter.com/funcunit) on twitter [![Tag for open source](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) open source ](https://www.bitovi.com/blog/topic/open-source)[![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development) Previous Post ![js-banner](https://www.bitovi.com/hs-fs/hubfs/js-banner.jpg?height=117&name=js-banner.jpg) [ Tips on Hiring a jQuery Consultant ](https://www.bitovi.com/blog/tips-on-hiring-a-jquery-consultant)   Next Post ![os-funcunit](https://www.bitovi.com/hs-fs/hubfs/open-source/os-funcunit.png?height=117&name=os-funcunit.png) [ How FuncUnit works ](https://www.bitovi.com/blog/how-funcunit-works) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/funcunit-fun-web-application-testing", "@type" : "WebPage", "description" : "FuncUnit - Fun Web Application Testing" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Brian Moschel" }, "dateModified" : "November 29, 2018, 6:28:08 PM", "datePublished" : "2010-07-26 20:00:46", "description" : "FuncUnit - Fun Web Application Testing", "headline" : "FuncUnit - Fun Web Application Testing", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/open-source/os-funcunit.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```