aurelia / testing

Simplifies the testing of UI components by providing an elegant, fluent interface for arranging test setups along with a number of runtime debug/test helpers.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rejection because of 404 aurelia-loader-default

MarcScheib opened this issue · comments

Hi,

I am trying to test my custom attribute with the StageComponent. However, I face the following issue when running the test:

19 05 2016 19:20:37.075:WARN [web-server]: 404: /base/aurelia-loader-default.js
ERROR: 'Potentially unhandled rejection [3] Error: XHR error (404 Not Found) loading http://localhost:9876/base/aurelia-loader-default.js
Error loading http://localhost:9876/base/aurelia-loader-default.js'

I have added "aurelia-testing": "^0.2.2" to my JSPM devDependencies. My testcase is pretty much the one from blog entry.

Do you have any hints for me? Thanks in advance.

It looks like you're missing some configuration. aurelia-loader-default is the name of the package that's trying to be loaded, but when files are loaded up to be run, you should see a path more like jspm_packages/npm/aurelia-loader-default@1.0.0-beta.1.2.2.

The fact that there is no path to such a file included in the request (Karma runs itself off of /base, so that's why you see at least that there) leads me to believe that you're missing something in your config.js. Can you give me your config.js file, and the test that is trying to load the file and failing?

Yah, when using karma and jspm, it looks for the usual place for the config.js, so adding the option in the jspm config inside karma should only be for when you have the config in a different location.

So, I am rather confused to the issue you're having. You're not referencing the aurelia-loader-default library directly, but something is asking for it (some other library must have it as a dependency). I see that the aurelia bootstrapped library does in fact have it listed as a dependency in the config (this library may or may not be the actual problem), which means that if it asked for it, SystemJS would be able to find it.
This does not appear to be what's happening, however. It seems that there is some library out there that is not loading up modules based off the config.js.

For kicks and giggles I went ahead and tried installing the aurelia-loader-default library with jspm, and voila, no 404 problems loading up the module... However now it's complaining about aurelia-templating-binding.

This all rings some bells from when I first started trying to build the aurelia application from scratch. There seem to be a set of libraries need to be installed for aurelia to actually do stuff ( @EisenbergEffect, please correct me if I'm wrong). If you look at the skeleton project for Aurelia, there are many libraries defined, but there isn't documentation (to my knowledge) that gives a bare bones how to build an aurelia app from scratch approach, which would be very helpful and might help solve these kinds of problems.

If you're looking for a way to fix this problem right now, you can go ahead and try installing the library it's complaining about, one at a time until it no longer yells at you.... But that's pretty much the pits and not an ideal approach. I made it this far down that approach before finally deciding to just post what I have :P

jspm install aurelia-templating-binding aurelia-loader-default aurelia-templating-resources aurelia-history-browser aurelia-templating-router

@MarcScheib What version of JSPM are you running? I have run in to similar issues when using some specific versions of JSPM that are not able correctly install all dependencies. Try lock the version in package.json to 0.16.15: "jspm": "0.16.15", remove jspm_packages folder and jspm install again.

@martingust I was running 0.16.34. I switched to 0.16.15 now (jspm -v):

0.16.15
Running against local jspm install.

Didn't changed anyhting (except the error message):
20 05 2016 11:12:32.351:WARN [web-server]: 404: /base/aurelia-loader-default.js
ERROR: 'Potentially unhandled rejection [3] Error: XHR error (404 Not Found) loading http://localhost:9876/base/aurelia-loader-default.js
at error (http://localhost:9876/base/jspm_packages/system.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1020:16)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9876/base/jspm_packages/system.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:1028:13)'

@MarcScheib Thanks for trying that. Just to confirm: did you jspm-install all over again after switching to 0.16.15 ?

@martingust yes, I removed the complete jspm_packages folder and ran install again after switching.

@MarcScheib Ok, then @AStoker's solution to indivudually install the dependencies is the best solutions I can come up with as well. You can also check in either the Aurelia or JSPM Gitter to see if anyone has any ideas. The problem is most likely not in this repository.

I added the dependencies as described by @AStoker to my JSPM dependencies and loading works now. Buit seems like it is not possible to test custom attributes (Potentially unhandled rejection [1] TypeError: Cannot read property 'viewModel' of undefined) because of this line https://github.com/aurelia/testing/blob/master/src/component-tester.js#L59 , is that right @martingust ?

What kind of error are you getting based off of that line?
You can still bind a view model to a test on a custom attribute, even if it's just an empty object.
It looks like your test is missing something across these lines:

.boundTo(viewModel)

in the process of staging the component

I get the following:
Potentially unhandled rejection [1] TypeError: Cannot read property 'viewModel' of undefined at eval (http://localhost:9876/base/jspm_packages/npm/aurelia-testing@0.2.2/aurelia-testing.js:70:58)

Seems like the boundTo() approach is not working. I tried to provide an empty object and some basic VM.
I tried to access elment.au.controller in my sample as well via dev tools, but even au is not available there, however, the sample is working.

Sorry, should have clarified. viewModel is an object that actually is your view model.
Can you give me your setup code there for the test?

I opened a private chat in gitter, perhaps we can talk there?

was this ever resolved? I am getting this issue as well.
TypeError: Cannot read property 'viewModel' of undefined at Object.<anonymous> (src\dependent\edit\component.spec.js:99:14)

Pretty sure we resolved it (it was a while ago)...
Not sure what your problem is exactly @boazblake without some context of the surrounding code :)

@boazblake I can't remember what was the exact problem at that time. However, the code I cited seems to be unchanged (didn't watched the sourroundings). I am not up-2-date on this lib whether it is working now without my changes!

Back then, I decided to change the create() method of the ComponentTester to get it work without VM (see usage at the end of this post):

class ComponentTester {
  bind;
  dispose;
  element;
  configure = aurelia => aurelia.use.standardConfiguration();
  _html;
  _resources = [];
  _rootView;

  bootstrap(configure) {
    this.configure = configure;
  }

  withResources(resources) {
    this._resources = resources;
    return this;
  }

  inView(html) {
    this._html = html;
    return this;
  }

  create() {
    return bootstrap(aurelia => {
      return Promise.resolve(this.configure(aurelia)).then(() => {
        aurelia.use.globalResources(this._resources);
        return aurelia.start().then(a => {
          let host = document.createElement('div');
          host.innerHTML = this._html;
          document.body.appendChild(host);
          aurelia.enhance({}, host);
          this._rootView = aurelia.root;
          this.element = host.firstElementChild;
          this.dispose = () => host.parentNode.removeChild(host);
          return new Promise(resolve => setTimeout(() => resolve(), 0));
        });
      });
    });
  }
}

Use it like this:

var component = new ComponentTester()
      .withResources('src/syntax-highlighter')
      .inView(`<code class="language-css" au-syntax>.splash {
  text-align: center;
  margin: 10% 0 0 0;
  box-sizing: border-box;
}</code>`);

@AStoker @MarcScheib

Thanks guys - it was an issue on my end regarding how I was creating my httpMock class. I had given it a data property and two methods (get and post) that have access to that property. It turns out that the I needed to give the HttpMock class a constructor and add the data property there.

@boazblake Perhaps I should give my source an update then :D