npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mock-browser

v0.92.14

Published

A mock browser with window, document, location, navigation, local and session storage to use for client side code tests in a node environment.

Downloads

33,132

Readme

#Mock Browser


NPM version Build Status Dependency Status

Overview

A mock browser with window, document, location, navigation, local and session storage to use for client side code tests in a node environment. A majority of the implementation is from the jsdom project with enhancements for local and session storage plus some fixes for un-implemented document features (classList).

The mock browser eliminates the need for a headless browser like phantomjs to provide a much faster unit test framework. It's perfect for browserify projects that run tests prior to compiling the bundle.

Installation

    npm install mock-browser --save

If you just use the mock for testing then '--save-dev' is more appropriate. But, the AbstractBrowser could (should) be used for run time to replace client logic that normally accesses globals provided by the local browser. This not only enhances testing and mocking but also enables cross-browser workarounds through interception rather than override.

Use

Mock Browser

The typical use case is a browserify project with unit tests that need to provide access to browser globals like window, document, location, etc. The best way to simulate this is to use a proxy wall between the normally global browser objects a require the application to get instances of window, document, etc. That way you can supply a mock for all of these objects with a common interface (AbstractBrowser). It looks like this...

	var MockBrowser = require('mock-browser').mocks.MockBrowser;
	var mock = new MockBrowser();

    // and in the run-code inside some object
    var doc = mock.getDocument(),
    	div = doc.createElement('div');

    var storage = mock.getLocalStorage();
    storage.setItem('mykey', 'my value');
    assert storage.getItem('mykey') === 'my value';

Mock Browser Object Methods

Two convenience methods are added to make it easy to get either a window or DOM document mock.

  • MockBrowser.createDocument()
  • MockBrowser.createWindow()

Abstract Browser

The AbstractBrowser object can be used as an interface for run-time client apps to access browser window related objects. This approach enables code to be used both in and outside the browser.

	var AbstractBrowser = require('mock-browser').delegates.AbstractBrowser;

	// configure in some factory
	var opts = {};

    if (typeof window === 'object') {
    	// assign the browser window if it exists
    	opts.window = window;
    } else {
    	// create a mock window object for testing
    	opts.window =  MockBrowser.createWindow();
    }

    // create the browser object with a real window in brwosers and mock when not in browser
	var browser = new AbstractBrowser( opts );

    var doc = browser.getDocument();
    var element = doc.getElementById('my-dom-element');

Abstract Browser API

Instance methods...

  • getDocument()
  • getWindow()
  • getLocation()
  • getNavigator()
  • getHistory()
  • getLocalStorage()
  • getSessionStorage()

Object Methods...

  • AbstractBrowser.extend(child, options) <- extend the abstract object

These methods are inherited by MockBrowser to provide a consistent interface between test and run-time environments.

Extending AbstractBrowser

For run-time use you can extend AbstractBrowser to inherit the API. This enables attaching other object to the browser object rather than using globals.

	var AbstractBrowser = require('mock-browser').delegates.AbstractBrowser;

    var MyBrowser = function(options) {
    	var browser = this,
        	builder = options.componentBuilder;

        // inherit getWindow(), getDocument(), getLocation(), getHistory(),
        // getLocalStorage(), getSessionStorage(), getNavigator()
        AbstractBrowser.extend( this, options );

        // my browser API extension...
        this.getComponentBuilder = function() {
        	return builder;
        };
    };

Mock Storage

The MockStorage object is used to mock out local and session storage. When used with mock browser, they are attached to the window object and can be accessed from AbstractBrowser instances by invoking getLocalStorage() or getSessionStorage().

This object may also be used standalone when you just need to mock out either local or session storage. It looks like this:

	var MockStorage = require('mock-browser').mocks.MockStorage;

    var storage = new MockStorage();

    storage.setItem( 'mykey', 'my string value' );
    assert storage.getItem( 'mykey' ) === 'my string value';

    assert storage.length === 1;

Examples

There is an open source project that uses not only MockBrowser for tests but AbstractBrowser as a foundation for the client's browser object.

Tests

All objects are tested using gulp and mocha. You can run tests by doing this:

	make test

    // or

    gulp test

    // or

    npm test

You can find more info for use and rational in this post...

License

Apache 2.0