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

@marko/test

v10.0.0

Published

Utility to test Marko files in both a server and browser environment

Downloads

311

Readme

Utility to test Marko files in both a server and browser environment (bundled with lasso).

Getting Started

npm install @marko/test
marko-test ./test.js

or

npx @marko/test ./test.js

Usage:

marko-test supports glob patterns for locating and running test files.

Run all of the tests in a project/directory:

marko-test

equivalent to: marko-test **/test.js **/test.*.js **/test/*.js

Run all of the unit tests for a single UI component:

marko-test ./src/components/app-foo/**/test*.js

Run all of the unit tests for all UI components:

marko-test ./src/components/**/test*.js

Run only server tests:

marko-test ./src/components/**/test*server.js --server

Keep server open after the tests finish and disable headless mode for browser tests:

marko-test --debug

All node options are forwarded to the mocha process for server testing, allowing the following:

# Will start a debugging session on the spawned mocha process.
marko-test --server --inspect-brk

Writing Tests

The test runner (built on top of mocha) will run server tests in a node environment and browser tests will be bundled with lasso and run in a browser using webdriver.io. The test environment is determined based on the test's filename.

The following will run the test in the node environment:

  • test.server.js
  • test-server.js
  • foo.test.server.js
  • foo-test-server.js

All other matched test files run in the browser environment:

  • test.js
  • test.browser.js
  • test-browser.js
  • foo.test.browser.js
  • foo-test-browser.js

Below is an example test:

const expect = require("chai").expect;
const template = require("../index.marko");
const { render } = require("@marko/testing-library");

it("variant-danger", async function () {
  var { getByRole } = await render(template, { variant: "danger" });
  expect(getByRole("button").getAttribute("class")).to.contain(
    "app-button-danger"
  );
});

Code coverage

Use nyc to generate coverage reports. Just prefix any test commands with nyc:

nyc marko-test

marko-cli.js

You can provide a package-specific plugin by creating a marko-cli.js file at the root of your project:

my-app/marko-cli.js:

module.exports = function (markoCli) {
  // ...
};

A package-specific plugin will automatically be loaded when marko is launched.

Some options can be specified on the config object that markoCli exposes.

For example, shared test dependencies can be specified with the dependencies option.

module.exports = function (markoCli) {
  markoCli.config.browserTestDependencies = [
    "bluebird/js/browser/bluebird.core.js",
    "require-run: ./tools/myDependency.js"
  ];
};

For more info on how to specify dependencies can be found here.

Configuring Lasso

Lasso plugins and transforms can also be specified using the lassoOptions option.

my-app/marko-cli.js:

module.exports = function (markoCli) {
  markoCli.config.lassoOptions = {
    plugins: [
      "lasso-less" // Marko plugin is included by default.
    ],
    require: {
      transforms: [
        {
          transform: "lasso-babel-transform"
        }
      ]
    }
  };
};

Configuring Mocha

You can easily configure Mocha for server-side tests using markoCli.config.mochaOptions. Supported mocha options, and should be written in camel case:

my-app/marko-cli.js:

module.exports = function (markoCli) {
  markoCli.config.mochaOptions = {
    timeout: 5000,
    colors: true
  };
};

Browser Testing with Webdriver.io

Under the hood @marko/test uses Webdriver.io to speak to various browsers. The test command operates differently than a standard WDIO utility by compiling the tests themselves and running everything in the browser. A websocket is setup with the browser instance to stream logs. A subset of WDIO options are exposed under markoCli.config.wdioOptions.

my-app/marko-cli.js:

module.exports = function(markoCli) {
    markoCli.config.wdioOptions = {
        /**
         * Capabilities are always run in parallel.
         * By default chromedriver will be used if capabilities are left blank.
         */
        capabilities: ...,
        serverPort: 0, // The port to start the test server on (serves your components).
        idleTimeout: 60000, // Automatically disconnect after 1min of inactivity by default.
        suiteTimeout: 600000, // Automatically disconnect after 10 minutes if the tests have not completed by default.
        viewport: {
          // Configure the screen size for any drivers started (defaults below).
          width: 800,
          height: 600
        }
        /**
         * The launcher option allows you change the WDIO config before running, and cleanup afterward.
         * By default the chromedriver is launched, however if `BROWSERSTACK_USERNAME`, `SAUCE_USERNAME`
         * or `TB_KEY` is found in the environment variables a service for that provider will automatically be used.
         */
        launcher: {
            onPrepare(config, capabilities) {
                // Setup WDIO config.
            },
            onComplete() {
                // Cleanup after tests.
            }
        }
    };
}

Chromedriver

As mentioned above chromedriver is used by default for running browser tests. This package is versioned in lockstep with chrome itself and so it is up to you to ensure that you have the appropriate version of chromedriver installed to match the version of chrome you have on your local machine.

chromedriver is marked as a peerDependency of @marko/test and so you will need to npm i chromedriver@YOUR_CHROME_VERSION -D in order for this to work.