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

@s-ui/test

v8.41.0

Published

Zero config testing tool

Downloads

11,305

Readme

sui-test

Zero config testing tool

Motivation

(1) Setup properly a testing environment in JavaScript is hard. There is a lot deps and it would be easy to install different setups in different projects. To avoid that, you could run this test suit over your code to install only one tool.

Folder Structure

Your tests must be in a test folder in your project root. Each test file should follow the patter: *Spec.js.

.
├── package.json <- Project package.json
└── src
│   ├── detail.js
│   └── user.js
└── test
    ├── detail
    │   └── detailSpec.js
    └── user
        └── userSpec.js

Installation

npm install @s-ui/test --save-dev

Config Options

Client (Karma) options

  • alias You can define the custom aliases you need to resolve in your client-side tests executions, see the following example:
{
  "config": {
    "sui-test": {
      "client": {
        "alias": {
          "my-package": "path/to/my-package"
        }
      }
    }
  }
}

CLI Options

  Usage: sui-test [options] [command]


  Options:

        --version  output the version number
    -h, --help     output usage information


  Commands:

    browser|b   Run tests in the browser
    server|s    Run tests in node
    help [cmd]  display help for [cmd]

Browser options

  Usage: sui-test browser [options]


  Options:

    -H, --headless Run in headless mode
    -W, --watch    Run in watch mode
    -C, --ci       Run a Firefox headless for CI testing (deprecated, use --headless instead)
    -P, --pattern <pattern>               Path pattern to include (default: test/**/*Spec.js)
    -I, --ignore-pattern <ignorePattern>  Path pattern to ignore for testing (default: false)
    --src-pattern <srcPattern>  Define the source directory (default: src/**/*.js)
    -h, --help   output usage information
  Description:

  Run tests in a browser

  Examples:

    $ sui-test browser

Server options

  Usage: sui-test server [options]


    Options:

        -I, --inspect Inspect node process
        -W, --watch  Run in watch mode
        -T, --timeout Customize test timeout
        -P, --pattern <pattern>  Path pattern to include (default: test)
        -h, --help   output usage information
    Description:

    Run tests in node

    Examples:

      $ sui-test server -W

Tools

Describers

describeOnLocal: It will only run wrapped tests on local environment and won't be executed in CI.

import {describeOnLocal} from '@s-ui/test/lib/describers'

describeOnLocal(() => {
  describe('Some test', () => {
    it('should do something', () => {
      expect(true).toBe(true)
    })
  })
})

Descriptor by environment patcher

The descriptor by environment is a patch with the purpose of add some extra functionality to our mocha describe and it methods.

How to import it?

First of all, the patcher MUST BE APPLIED on each test that we want to have the extra methods so at the top of ourExampleSpec.js we will add the next code:

import {descriptorsByEnvironmentPatcher} from '@s-ui/test/lib/descriptor-environment-patcher'
descriptorsByEnvironmentPatcher()

And that's it, from that line you will have the next methods added to the base of the mocha lib:

  • describe.client
  • describe.server
  • describe.client.only
  • describe.server.only
  • it.client
  • it.server
  • it.client.only
  • it.server.only

How can I use it?

Just in the same way as you have been using the describe or it functions earlier:

describe.client('Users use case', () => {
  it('should....', () => {
    // ...
  })
})

describe.server('Users use case', () => {
  it('should....', () => {
    // ...
  })
})

You can also have it() by environment:

describe('Another use case', () => {
  it.client('should....', () => {
    // ...
  })

  it.server('should....', () => {
    // ...
  })
})

What about if you want to run only one describe but only for client? You can use the .only function in the same way as you've been using earlier.

describe.client.only('Another use case', () => {
  it('should....', () => {
    // ...
  })
})

Contributing

Please refer to the main repo contributing info.