| <!DOCTYPE html> | |
| <html itemscope itemtype="https://schema.org/WebPage" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta content="IE=edge" http-equiv="X-UA-Compatible"> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"> | |
| <link href="/rules_nodejs/Karma.html" rel="canonical"> | |
| <link href="" rel="shortcut icon" type="image/png"> | |
| <title>rules_nodejs - Karma</title> | |
| <!-- Webfont --> | |
| <link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet"> | |
| <!-- Bootstrap --> | |
| <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | |
| integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet"> | |
| <!-- Font Awesome --> | |
| <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| <!-- Custom stylesheet --> | |
| <link href="/rules_nodejs/css/main.css" rel="stylesheet"> | |
| <!-- metadata --> | |
| <meta content="rules_nodejs" name="og:title"/> | |
| <meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav"> | |
| <div class="container"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" | |
| type="button"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="/rules_nodejs/"> | |
| <img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg"> | |
| </a> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box"> | |
| <div class="form-group"> | |
| <input type="hidden" name="cx" value="2735dc72dd157bd19"> | |
| <input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search"> | |
| </div> | |
| </form> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li> | |
| </ul> | |
| </div><!-- /.navbar-collapse --> | |
| </div><!-- /.container-fluid --> | |
| </nav> | |
| <div class="container vpad"> | |
| <div class="row"> | |
| <div class="col-md-2"> | |
| <a aria-controls="sidebar-nav" | |
| aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse" | |
| href="#sidebar-nav"> | |
| <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation | |
| </a> | |
| <nav class="sidebar collapse" id="sidebar-nav"> | |
| <h3>rules_nodejs</h3> | |
| <ul class="sidebar-nav"> | |
| <li><a href="/rules_nodejs/">Introduction</a></li> | |
| <li><a href="install.html">Installation</a></li> | |
| <li><a href="repositories.html">Repositories</a></li> | |
| <li><a href="dependencies.html">Dependencies</a></li> | |
| <li><a href="debugging.html">Debugging</a></li> | |
| <li><a href="stamping.html">Stamping</a></li> | |
| <li><a href="changing-rules.html">Making changes to rules_nodejs</a></li> | |
| <li><a href="examples.html">Examples</a></li> | |
| </ul> | |
| <h3>Rules</h3> | |
| <ul class="sidebar-nav"> | |
| <li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li> | |
| <li><a href="/rules_nodejs/Cypress.html">Cypress</a></li> | |
| <li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li> | |
| <li><a href="/rules_nodejs/Karma.html">Karma</a></li> | |
| <li><a href="/rules_nodejs/Labs.html">Labs</a></li> | |
| <li><a href="/rules_nodejs/Protractor.html">Protractor</a></li> | |
| <li><a href="/rules_nodejs/Rollup.html">Rollup</a></li> | |
| <li><a href="/rules_nodejs/Terser.html">Terser</a></li> | |
| <li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li> | |
| </ul> | |
| <h3>Community</h3> | |
| <ul class="sidebar-nav"> | |
| <li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to | |
| rules_nodejs</a></li> | |
| <li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li> | |
| <li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li> | |
| <li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="col-md-8"> | |
| <div class="content"> | |
| <!-- ********************* | |
| DO NOT EDIT THIS FILE | |
| It is a generated build output from Stardoc. | |
| Instead you must edit the .bzl file where the rules are declared, | |
| or possibly a markdown file next to the .bzl file | |
| ********************* --> | |
| <h1 id="karma-rules-for-bazel">Karma rules for Bazel</h1> | |
| <p>The Karma rules run karma tests with Bazel.</p> | |
| <h2 id="installation">Installation</h2> | |
| <p>Add the <code class="language-plaintext highlighter-rouge">@bazel/karma</code> npm package to your <code class="language-plaintext highlighter-rouge">devDependencies</code> in <code class="language-plaintext highlighter-rouge">package.json</code>.</p> | |
| <p>Now add this to your <code class="language-plaintext highlighter-rouge">WORKSPACE</code> to install the Karma dependencies:</p> | |
| <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Fetch transitive Bazel dependencies of @bazel/karma | |
| </span><span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/karma:package.bzl"</span><span class="p">,</span> <span class="s">"npm_bazel_karma_dependencies"</span><span class="p">)</span> | |
| <span class="n">npm_bazel_karma_dependencies</span><span class="p">()</span> | |
| </code></pre></div></div> | |
| <p>This installs the <code class="language-plaintext highlighter-rouge">io_bazel_rules_webtesting</code> repository, if you haven’t installed it earlier.</p> | |
| <p>Finally, configure the rules_webtesting:</p> | |
| <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Set up web testing, choose browsers we can test on | |
| </span><span class="n">load</span><span class="p">(</span><span class="s">"@io_bazel_rules_webtesting//web:repositories.bzl"</span><span class="p">,</span> <span class="s">"web_test_repositories"</span><span class="p">)</span> | |
| <span class="n">web_test_repositories</span><span class="p">()</span> | |
| <span class="n">load</span><span class="p">(</span><span class="s">"@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl"</span><span class="p">,</span> <span class="s">"browser_repositories"</span><span class="p">)</span> | |
| <span class="n">browser_repositories</span><span class="p">(</span> | |
| <span class="n">chromium</span> <span class="o">=</span> <span class="bp">True</span><span class="p">,</span> | |
| <span class="n">firefox</span> <span class="o">=</span> <span class="bp">True</span><span class="p">,</span> | |
| <span class="p">)</span> | |
| </code></pre></div></div> | |
| <h2 id="installing-with-self-managed-dependencies">Installing with self-managed dependencies</h2> | |
| <p>If you didn’t use the <code class="language-plaintext highlighter-rouge">yarn_install</code> or <code class="language-plaintext highlighter-rouge">npm_install</code> rule to create an <code class="language-plaintext highlighter-rouge">npm</code> workspace, you’ll have to declare a rule in your root <code class="language-plaintext highlighter-rouge">BUILD.bazel</code> file to execute karma:</p> | |
| <div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Create a karma rule to use in ts_web_test_suite karma | |
| # attribute when using self-managed dependencies | |
| </span><span class="n">nodejs_binary</span><span class="p">(</span> | |
| <span class="n">name</span> <span class="o">=</span> <span class="s">"karma/karma"</span><span class="p">,</span> | |
| <span class="n">entry_point</span> <span class="o">=</span> <span class="s">"//:node_modules/karma/bin/karma"</span><span class="p">,</span> | |
| <span class="c1"># Point bazel to your node_modules to find the entry point | |
| </span> <span class="n">node_modules</span> <span class="o">=</span> <span class="p">[</span><span class="s">"//:node_modules"</span><span class="p">],</span> | |
| <span class="p">)</span> | |
| </code></pre></div></div> | |
| <h2 id="karma_web_test">karma_web_test</h2> | |
| <p><strong>USAGE</strong></p> | |
| <pre> | |
| karma_web_test(<a href="#karma_web_test-srcs">srcs</a>, <a href="#karma_web_test-deps">deps</a>, <a href="#karma_web_test-data">data</a>, <a href="#karma_web_test-configuration_env_vars">configuration_env_vars</a>, <a href="#karma_web_test-bootstrap">bootstrap</a>, <a href="#karma_web_test-runtime_deps">runtime_deps</a>, <a href="#karma_web_test-static_files">static_files</a>, | |
| <a href="#karma_web_test-config_file">config_file</a>, <a href="#karma_web_test-tags">tags</a>, <a href="#karma_web_test-peer_deps">peer_deps</a>, <a href="#karma_web_test-kwargs">kwargs</a>) | |
| </pre> | |
| <p>Runs unit tests in a browser with Karma.</p> | |
| <p>When executed under <code class="language-plaintext highlighter-rouge">bazel test</code>, this uses a headless browser for speed. | |
| This is also because <code class="language-plaintext highlighter-rouge">bazel test</code> allows multiple targets to be tested together, | |
| and we don’t want to open a Chrome window on your machine for each one. Also, | |
| under <code class="language-plaintext highlighter-rouge">bazel test</code> the test will execute and immediately terminate.</p> | |
| <p>Running under <code class="language-plaintext highlighter-rouge">ibazel test</code> gives you a “watch mode” for your tests. The rule is | |
| optimized for this case - the test runner server will stay running and just | |
| re-serve the up-to-date JavaScript source bundle.</p> | |
| <p>To debug a single test target, run it with <code class="language-plaintext highlighter-rouge">bazel run</code> instead. This will open a | |
| browser window on your computer. Also you can use any other browser by opening | |
| the URL printed when the test starts up. The test will remain running until you | |
| cancel the <code class="language-plaintext highlighter-rouge">bazel run</code> command.</p> | |
| <p>This rule will use your system Chrome by default. In the default case, your | |
| environment must specify CHROME_BIN so that the rule will know which Chrome binary to run. | |
| Other <code class="language-plaintext highlighter-rouge">browsers</code> and <code class="language-plaintext highlighter-rouge">customLaunchers</code> may be set using the a base Karma configuration | |
| specified in the <code class="language-plaintext highlighter-rouge">config_file</code> attribute.</p> | |
| <p>By default we open a headless Chrome. To use a real Chrome browser window, you can pass | |
| <code class="language-plaintext highlighter-rouge">--define DISPLAY=true</code> to Bazel, along with <code class="language-plaintext highlighter-rouge">configuration_env_vars = ["DISPLAY"]</code> on | |
| <code class="language-plaintext highlighter-rouge">karma_web_test</code>.</p> | |
| <p><strong>PARAMETERS</strong></p> | |
| <h4 id="karma_web_test-srcs">srcs</h4> | |
| <p>A list of JavaScript test files</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-deps">deps</h4> | |
| <p>Other targets which produce JavaScript such as <code class="language-plaintext highlighter-rouge">ts_library</code></p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-data">data</h4> | |
| <p>Runtime dependencies</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-configuration_env_vars">configuration_env_vars</h4> | |
| <p>Pass these configuration environment variables to the resulting binary. | |
| Chooses a subset of the configuration environment variables (taken from ctx.var), which also | |
| includes anything specified via the –define flag. | |
| Note, this can lead to different outputs produced by this rule.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-bootstrap">bootstrap</h4> | |
| <p>JavaScript files to include <em>before</em> the module loader (require.js). | |
| For example, you can include Reflect,js for TypeScript decorator metadata reflection, | |
| or UMD bundles for third-party libraries.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-runtime_deps">runtime_deps</h4> | |
| <p>Dependencies which should be loaded after the module loader but before the srcs and deps. | |
| These should be a list of targets which produce JavaScript such as <code class="language-plaintext highlighter-rouge">ts_library</code>. | |
| The files will be loaded in the same order they are declared by that rule.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-static_files">static_files</h4> | |
| <p>Arbitrary files which are available to be served on request. | |
| Files are served at: | |
| <code class="language-plaintext highlighter-rouge">/base/&lt;WORKSPACE_NAME&gt;/&lt;path-to-file&gt;</code>, e.g. | |
| <code class="language-plaintext highlighter-rouge">/base/npm_bazel_typescript/examples/testing/static_script.js</code></p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-config_file">config_file</h4> | |
| <p>User supplied Karma configuration file. Bazel will override | |
| certain attributes of this configuration file. Attributes that are | |
| overridden will be outputted to the test log.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p> | |
| <h4 id="karma_web_test-tags">tags</h4> | |
| <p>Standard Bazel tags, this macro adds tags for ibazel support</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test-peer_deps">peer_deps</h4> | |
| <p>list of peer npm deps required by karma_web_test</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">["@npm//jasmine-core", "@npm//karma", "@npm//karma-chrome-launcher", "@npm//karma-firefox-launcher", "@npm//karma-jasmine", "@npm//karma-requirejs", "@npm//karma-sourcemap-loader", "@npm//requirejs"]</code></p> | |
| <h4 id="karma_web_test-kwargs">kwargs</h4> | |
| <p>Passed through to <code class="language-plaintext highlighter-rouge">karma_web_test</code></p> | |
| <h2 id="karma_web_test_suite">karma_web_test_suite</h2> | |
| <p><strong>USAGE</strong></p> | |
| <pre> | |
| karma_web_test_suite(<a href="#karma_web_test_suite-name">name</a>, <a href="#karma_web_test_suite-browsers">browsers</a>, <a href="#karma_web_test_suite-web_test_data">web_test_data</a>, <a href="#karma_web_test_suite-wrapped_test_tags">wrapped_test_tags</a>, <a href="#karma_web_test_suite-kwargs">kwargs</a>) | |
| </pre> | |
| <p>Defines a test_suite of web_test targets that wrap a karma_web_test target.</p> | |
| <p>This macro accepts all parameters in karma_web_test and adds additional parameters | |
| for the suite. See karma_web_test docs for all karma_web_test.</p> | |
| <p>The wrapping macro is <code class="language-plaintext highlighter-rouge">web_test_suite</code> which comes from rules_websting: | |
| https://github.com/bazelbuild/rules_webtesting/blob/master/web/web.bzl.</p> | |
| <p><strong>PARAMETERS</strong></p> | |
| <h4 id="karma_web_test_suite-name">name</h4> | |
| <p>The base name of the test</p> | |
| <h4 id="karma_web_test_suite-browsers">browsers</h4> | |
| <p>A sequence of labels specifying the browsers to use.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">None</code></p> | |
| <h4 id="karma_web_test_suite-web_test_data">web_test_data</h4> | |
| <p>Data dependencies for the wrapper web_test targets.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p> | |
| <h4 id="karma_web_test_suite-wrapped_test_tags">wrapped_test_tags</h4> | |
| <p>A list of test tag strings to use for the wrapped | |
| karma_web_test target.</p> | |
| <p>Defaults to <code class="language-plaintext highlighter-rouge">["manual", "noci"]</code></p> | |
| <h4 id="karma_web_test_suite-kwargs">kwargs</h4> | |
| <p>Arguments for the wrapped karma_web_test target.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-2 sticky-sidebar"> | |
| <div class="right-sidebar"> | |
| <ul class="gh-links"> | |
| <li> | |
| <i class="fa fa-github"></i> | |
| <a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: Karma&labels=question/docs">Create | |
| issue</a> | |
| </li> | |
| </ul> | |
| <ul class="section-nav"> | |
| <li class="toc-entry toc-h2"><a href="#installation">Installation</a></li> | |
| <li class="toc-entry toc-h2"><a href="#installing-with-self-managed-dependencies">Installing with self-managed dependencies</a></li> | |
| <li class="toc-entry toc-h2"><a href="#karma_web_test">karma_web_test</a></li> | |
| <li class="toc-entry toc-h2"><a href="#karma_web_test_suite">karma_web_test_suite</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-8"> | |
| <p class="text-muted">© 2020 The rules_nodejs authors</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <!-- Include all compiled plugins (below), or include individual files as needed --> | |
| <script crossorigin="anonymous" | |
| integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" | |
| src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <!-- Anchor JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.min.js" type="text/javascript"></script> | |
| <script> | |
| // Automatically add anchors and links to all header elements that don't already have them. | |
| anchors.options = { placement: 'left' }; | |
| anchors.add(); | |
| </script> | |
| <script> | |
| var shiftWindow = function () { | |
| if (location.hash.length !== 0) { | |
| window.scrollBy(0, -50); | |
| } | |
| }; | |
| window.addEventListener("hashchange", shiftWindow); | |
| var highlightCurrentSidebarNav = function () { | |
| var href = location.pathname; | |
| var item = $('#sidebar-nav [href$="' + href + '"]'); | |
| if (item) { | |
| var li = item.parent(); | |
| li.addClass("active"); | |
| if (li.parent() && li.parent().is("ul")) { | |
| do { | |
| var ul = li.parent(); | |
| if (ul.hasClass("collapse")) { | |
| ul.collapse("show"); | |
| } | |
| li = ul.parent(); | |
| } while (li && li.is("li")); | |
| } | |
| } | |
| }; | |
| $(document).ready(function () { | |
| // Scroll to anchor of location hash, adjusted for fixed navbar. | |
| window.setTimeout(function () { | |
| shiftWindow(); | |
| }, 1); | |
| // Flip the caret when submenu toggles are clicked. | |
| $(".sidebar-submenu").on("show.bs.collapse", function () { | |
| var toggle = $('[href$="#' + $(this).attr('id') + '"]'); | |
| if (toggle) { | |
| toggle.addClass("dropup"); | |
| } | |
| }); | |
| $(".sidebar-submenu").on("hide.bs.collapse", function () { | |
| var toggle = $('[href$="#' + $(this).attr('id') + '"]'); | |
| if (toggle) { | |
| toggle.removeClass("dropup"); | |
| } | |
| }); | |
| // Highlight the current page on the sidebar nav. | |
| highlightCurrentSidebarNav(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |