Skip to end of metadata
Go to start of metadata

This topic will show you how to set up and configure your JavaScript unit testing framework to run tests through Sauce Labs browsers using Grunt and the Grunt-Saucelabs task through an example project. The example project includes all the necessary components for using the Mocha, Jasmine, YUI, and QUnit testing frameworks, including example grunt.js and package.json files.

Prerequisites

Getting the Sample Project

Open a terminal window, clone the example project, and install the dependencies.

$ git clone https://github.com/bernii/yummy-pasta.git && cd yummy-pasta
      $ git submodule init && git submodule update
      $ npm install

What Do These Files Do?

In the Examples directory you will find example files for each type of testing framework, including custom frameworks. The package.json file pulls in all the dependencies that are necessary to run your tests on Sauce, and provides metadata about the project you're testing. Check out the official documentation at nmpjs.com for more information about the contents of this file. 

Example package.json File
 {
        "name": "yummy-pasta",
        "version": "0.0.1",
        "description": "If you love pasta, you need Sauce too",
        "repository": {
        "type": "git",
        "url": "git://github.com/bernii/yummy-pasta.git"
        },
        "dependencies": {},
        "devDependencies": {
        "grunt": "~0.4.0",
        "grunt-cli": "~0.1.6",
        "grunt-saucelabs": "~4.0.2",
        "grunt-contrib-connect": "~0.1.2",
        "grunt-contrib-watch": "~0.2.0"
        },
        "scripts": {
        "test": "grunt test"
        }

GruntFile.js specifies the browsers and operating systems you want to run your tests against and the configuration options for your testing framework. Check out the official Grunt documentation of this file for more information about setting it up. Notice that in this example launches tests for all the frameworks at the same time. If you wanted to launch the tests for a single framework, you would edit grunt.registerTask("test...).

Sample grunt.js file for Jasmine
module.exports = function(grunt) {
    var browsers = [{
        browserName: "firefox",
        version: "19",
        platform: "XP"
    }, {
        browserName: "googlechrome",
        platform: "XP"
    }, {
        browserName: "googlechrome",
        platform: "linux"
    }, {
        browserName: "internet explorer",
        platform: "WIN8",
        version: "10"
    }];


    grunt.initConfig({
        connect: {
            server: {
                options: {
                    base: "",
                    port: 9999
                }
            }
        },
        'saucelabs-jasmine': {
            all: {
                options: {
                    urls: ["http://127.0.0.1:9999/test-jasmine/SpecRunner.html"],
                    tunnelTimeout: 5,
                    build: process.env.TRAVIS_JOB_ID,
                    concurrency: 3,
                    browsers: browsers,
                    testname: "pasta tests",
                    tags: ["master"]
                }
            }
        },
        'saucelabs-qunit': {
            all: {
                options: {
                    urls: ["http://127.0.0.1:9999/test-qunit/index.html"],
                    tunnelTimeout: 5,
                    build: process.env.TRAVIS_JOB_ID,
                    concurrency: 3,
                    browsers: browsers,
                    testname: "qunit tests",
                    tags: ["master"]
                }
            }
        },
        'saucelabs-mocha': {
            all: {
                options: {
                    urls: ["http://127.0.0.1:9999/test-mocha/test/browser/opts.html"],
                    tunnelTimeout: 5,
                    build: process.env.TRAVIS_JOB_ID,
                    concurrency: 3,
                    browsers: browsers,
                    testname: "mocha tests",
                    tags: ["master"]
                }
            }
        },
        'saucelabs-yui': {
            all: {
                options: {
                    urls: ["http://127.0.0.1:9999/test-yui/index.html"],
                    tunnelTimeout: 5,
                    build: process.env.TRAVIS_JOB_ID,
                    concurrency: 3,
                    browsers: browsers,
                    testname: "yui tests",
                    tags: ["master"]
                }
            }
        },
        watch: {}
    });

    // Loading dependencies
    for (var key in grunt.file.readJSON("package.json").devDependencies) {
        if (key !== "grunt" && key.indexOf("grunt") === 0) grunt.loadNpmTasks(key);
    }

    grunt.registerTask("dev", ["connect", "watch"]);
    grunt.registerTask("test", ["connect", "saucelabs-jasmine", "saucelabs-qunit", "saucelabs-mocha", "saucelabs-yui"]);
};

Running the Sample Tests

  1. Log in to your Sauce Labs account so you can see the results of your tests on your dashboard. 
  2. Open a terminal window and navigate to the location where you downloaded the sample yummy-pasta project. 
  3. Run the tests.

    grunt test
  4. Open a Web browser and navigate to the test page for each testing framework to see the results of your tests. 

What Happens When the Tests Run

  1. Sauce Connect Proxy launches a secure tunnel that enables access to your local machine from the Sauce Cloud so you can run your tests on our browsers.
  2. Virtual machines are launched on the Sauce cloud to execute the tests on the platforms specified in Gruntfile.js, which also specifies a concurrency of three virtual machines, so you can run more than one test at a time.
  3. The Sauce cloud launches all the specified operating systems and browsers, and executes the tests for each framework on each of them.
  4. We never forget to clean up after ourselves - after returning results, the tunnel is closed and all virtual machines are destroyed, leaving no trace of your tests and code.
  5. The test results are reported to your Sauce Labs dashboard using the method for your testing framework

Going Further with Continous Integration

The sample projects also include a sample .travis.yml file that you can use to include the tests into a TravisCI integration process. Check out the topics under Using Sauce Labs with Continuous Integration Platforms for information on how to use Sauce with continuous integration platforms like TravisCI, Jenkins, and Bamboo.

 

 

  • No labels