Rules_nodejs: ts_web_test dependencies from node_modules

[mattem]

I'm trying to run tests within Karma using the ts_web_test rule that have external dependencies that are contained within the projects node_modules folder.

ts_web_test(
    srcs = [
      "//:node_modules/moment/moment.js",
      "//:node_modules/sprintf-js/src/sprintf.js",
    ],
    bootstrap = [
    ],
    deps = [
      ":test_microtime"
    ],
    timeout = "short"
)

When this is run (bazel test //libs/microtime) the following error is shown from Karma:

26 03 2018 21:26:44.034:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
26 03 2018 21:26:44.037:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
26 03 2018 21:26:44.059:INFO [launcher]: Starting browser ChromeHeadless
26 03 2018 21:26:44.677:INFO [HeadlessChrome 65.0.3325 (Mac OS X 10.13.3)]: Connected on socket 18N1E2tKoSZvmr8CAAAA with id 54973063
26 03 2018 21:26:44.790:WARN [web-server]: 404: /base/sprintf-js.js
26 03 2018 21:26:44.794:WARN [web-server]: 404: /base/moment.js
HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR
  Script error.
  at :0:0

HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR
  Script error.
  at :0:0

HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR: 'There is no timestamp for /base/sprintf-js.js!'

HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR: 'There is no timestamp for /base/moment.js!'

HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR
  Script error.
  at :0:0

HeadlessChrome 65.0.3325 (Mac OS X 10.13.3) ERROR
  Script error.
  at :0:0

No matter where I put the references to those files, srcs, bootstrap, deps I always get the same error. The tests run as expected if using the jasmine_node_test rule. What am I doing wrong here?

[alexeagle]

The ts_web_test rule expects that all the sources can be concatenated together, and doesn't yet provide a way to serve files by XHR/fetch.
That's https://github.com/bazelbuild/rules_typescript/issues/131

In practice that means you can't really use third-party libraries yet. Will keep this issue for documenting the right way to do it.

[achew22]

If you're willing to squint your eyes, cross your fingers and straight up cheat, you can get away with some really horrible hackery (that might be useful to implement bazelbuild/rules_typescript#131).

There is a bootstrap argument available on the ts_web_test rule. You can use that to inject arbitrary JS into the page. Assuming you're referring to moment off the window object, this would be enough to get the test running. If you're requiring it and it isn't coming from the window, then you can pull another trick and make a file bootstrap.js (your name can be different) and fill it with something like this:

define('moment', [], () => window.moment);

then add that as the first entry in the srcs list and it will make that available in require.js.

Not pretty, but it works.

[mattem]

Thanks, I'll give that a try in the meantime.
Happy to add a PR for documentation if / when needed.

[yohcop]

bazelbuild/rules_typescript#131 appears to be closed with bazelbuild/rules_typescript#209 . I also get a similar error:

4 07 2018 03:52:59.087:WARN [web-server]: 404: /typescript-fsa.js
HeadlessChrome 66.0.3356 (Linux 0.0.0) ERROR: 'There is no timestamp for typescript-fsa.js!'

HeadlessChrome 66.0.3356 (Linux 0.0.0) ERROR
  Script error.
  at :0:0

How are we supposed to use this? I've checked the examples directory, but haven't found something relevant.
Thank you!

[qzmfranklin]

Hi,

I ran into exactly the same issue as described here: I wanted to use lodash in my jasmine spec.

@alexeagle: Thank you for all your work! You mentioned to keep this issue to document the right way of doing it. What IS the right way? Where can I find it? Thanks in advance!

[rolaveric]

I'm not sure if this will work with ts_web_test, but I'm currently using ts_web_test_suite with third-party libraries by providing a RequireJS config that specifies the correct path to use:
https://github.com/rolaveric/bazel-tryout/blob/master/apps/using-lodash/BUILD.bazel#L111
https://github.com/rolaveric/bazel-tryout/blob/master/apps/using-lodash/require.karma-config.js

Hope this helps.

[yoonjesung]

@rolaveric I tried out your example with @ng-bootstrap -- it gets rid of the 404 of bootstrap.js but still getting a timeout. Any ideas?

BUILD

ts_web_test_suite(
  name = "test",
  srcs = [
    ":require.karma-config.js"
  ],
  deps = [
    ":test_lib",
    ":rxjs_umd_modules"
  ],
  static_files = [
    "@npm//:node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.umd.js"
  ],
  browsers = ["io_bazel_rules_webtesting//browsers:chromium-local"]
  bootstrap = [
    "@npm//:node_modules/zone.js/dist/zone-testing-bundle.js",
    "@npn//:node_modules/reflect-metadata/Reflect.js"
  ],
  runtime_deps = [":initialize_testbed"],
  tags = ["native", "no-bazelci"]
)

require.karma-config.js

require.config({
  paths: {
    '@ng-bootstrap/ng-bootstrap': '/base/npm/node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.umd'
  }
});

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for 90 days. It will be closed if no further activity occurs in two weeks. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[github-actions[bot]]

This issue was automatically closed because it went two weeks without a reply since it was labeled "Can Close?"