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

plus.garden

v0.1.2

Published

BDD testing framework for browser based apps and websites

Downloads

31

Readme

Plus.garden! NPM version Dependency Status

API Reference | CLI | CSS Selectors | Features and Definitions | Config | Modules

Garden is a BDD testing framework for browser based apps and websites.

It's built on Node.js, Сucumber.js, Selenium WebDriver API.


Main Features

  • Simple API to manage browser (WebDriver)
  • Using CSS3 selectors to interact with DOM
  • All network interactions data are accessible within the tests (headers, body, size etc)
  • Built-in command-line test runner
  • Head and headless browser testing (phantom.js, chrome, firefox)

Requirements

  • node.js

Getting started

  1. Make a new directory, and cd into it:

    mkdir my-new-project && cd $_
  2. Setup garden environment by generator-garden

    npm install -g yo generator-garden
  3. Then generate your new project:

    yo garden
  4. Run first test

NOTE: If you use plus.garden.webdriver, please start Selenium server first.

node garden.js test 

It execute next scenario

  Scenario: I want to see good health
    Given  I am on external host "https://twitter.com/"
    Then   status code should be 200
    Then   take screenshot

Usage

Generator of garden generates the simplest scenario by default:

[your folder]/features/Health.feature

@webdriver.init @webdriver.quit
Feature: Health feature

  @health
  Scenario: I want to see good health
    Given  I am on external hosts "https://twitter.com/" with element
    Then   take screenshot

with step defenitions that cover this, it looks like:

[your folder]/features/step_definitions/common.js

var {defineSupportCode} = require('cucumber');
defineSupportCode(function({ Given, Then }) {
    Given(/^I am on "(.+)"/, function (url, callback) {
        this.browser.visit(url).then(callback);
    });

    Given(/^I am on external host "(.+)"/, function (url, callback) {
        this.browser.visitExternal(url).then(callback);
    });

    Given(/^I am on homepage$/, function (callback) {
        this.browser.visit('/').then(callback);
    });

    Given(/^I should be on "([^"]*)" page$/, function(expectedTitle, callback) {
        this.browser.assertTitle(expectedTitle).then(callback);
    });

    Then(/^take screenshot$/, function (callback) {
        this.browser.saveScreenshot('.screen.png').then(callback);
    });
});

Full example of this you can find in features folder of Generator of garden:

Fixtures

Usually we need fixtures in our applications to have some sandbox. This functionality available via modules. For example mongodb fixtures looks like this:

    //users.js
    exports.users = [
        { name: 'Gob' },
        { name: 'Buster' },
        { name: 'Steve Holt' }
    ];

and garden loads this in tests and in CLI.

./garden.js fixtures.load
./garden.js fixtures.drop

For now garden supports mongodb and mysql fixtures via modules. Feel free to develop new ones.

For more examples please take a look:

RESTFul API testing

When we develop web-service/micro-services we need to test RESTFul API. That is great ability to test api and have some user friendly specification for this. It looks like this one:

    # demo/get.feature

    Feature: Make a GET request
        In order to programmatically access
        As a Web Service User
        I need to have an ability to make a GET request and check response

        Scenario: Make a GET request to Fake Online REST API
          When I make GET request to "http://jsonplaceholder.typicode.com/posts/1"
          Then the status code should be 200
           And content type should be "application/json; charset=utf-8"
           And the JSON response should be:
           """
           {
             "userId": 1,
             "id": 1,
             "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
             "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
           }
           """

Modules

Full list of modules we will publish here (Modules)

Be Happy!

And cover you stuff with tests!