Asp.Net 5 and Aurelia Karma tests

Question

I'm trying to setup the skeleton-navigation project for Aurelia in a new ASP.NET 5 application. I've tried numerous things and believe I'm getting close, but am really getting caught up on the client-side tests.

I downloaded the skeleton project from the Aurelia repo on GitHub and unzipped it.

I utilized Scott Allen's suggestions for setting the jspm settings to place the jspm packages in the wwwroot folder as stated in this post.

I then updated the project structure to look like this:

sln
|->wwwroot
 |->dist
 |->jspm_modules
 |->src
 |->styles
 |->test
 |->config.js
 |->index.html
 |->index.js
|->build
|->Controllers
|->doc
|->node_modules
|->aurelia.protractor.js
|->aureliafile.js
|->gulpfile.js
|->karma.conf.js
|->package.json
|->project.json
|->protractor.conf.js
|->Startup.cs

I have two questions:

1. Where should the test folder from the Aurelia skeleton-navigation startup project live? On the one hand wwwroot makes a lot of sense because that is where the rest of the application specific javascript files will live. On the other hand though, those files shouldn't ever be served to a client, so to put them in wwwroot doesn't make a whole lot of sense.

2. Once they are residing in their proper place in the project structure, what files/values need to be updated to get the tests running appropriately? For the moment I placed them in the wwwroot directory. I updated the basePath in the karma.conf.js file to 'wwwroot'. When I perform the karma start command though it is giving me a 404 error trying to locate '/base/app-bundle.js'. That file exists at 'wwwroot/dist/app-bundle.js', but I can't figure out how to configure karma to find it there.

Any help would be greatly appreciated.

Answer 1

This is a great question and hopefully will serve to benefit others in the future, not just with Visual Studio and IIS but any project structure that is driven by the parent framework serving the application.

karma.conf.js

First, let's look at what we are actually testing. Since karma-jspm has the ability to use babel to transpile on the fly, we will be testing our src, not our dist. This is important because we want to make sure that our karma config paths are all pointing there, but leave our config.js alone so system.js knows to get the files from dist when actually running the app.

basepath setting

Let's leave our base path alone. We have our tests and src in wwwroot, but like you mentioned it's not really where our tests belong. Let's move them back out to the root and set basePath: '' so all paths start at the root.

jspm settings

Next, let's tell karma how to set up our jspm specific settings such as which files to load and which paths to create. One key thing to remember here is that the new paths we define in our config.js as helpers need to be updated in our karma.conf.js since we are testing the src, not the dist (which the config.js points to). Also make sure to prepend wwwroot/ to any files or paths to files which start with src so that karma knows where to load them.

jspm: {
  // Edit this to your needs
  loadFiles: ['wwwroot/src/**/*.js', '/test/unit/**/*.js'],
  paths: {
    '*': '*.js',
    "services/*": "wwwroot/src/services/*.js"
  }
},

babel settings

Finally, we need to update our babel (or traceur) settings so that karma knows which files need to be preprocessed and using which options. This is because we are loading from src for testing.

preprocessors: {
  'test/**/*.js': ['babel'],
  'wwwroot/src/**/*.js': ['babel']
},

Footnote

Normally I would link to a bunch of code samples that would help but in this case I think it is appropriate to code-spam in this answer, but if any changes occur in the future to karma-jspm it may be worth editing or noting that in comments so the answer doesn't become stale.

Answer 2

IDK if there's a definitive answer as to where to put the test folder at this point, but what I've done is create an new "app" folder that has my "test" folder and "wwwroot" as siblings. This way, like you mentioned, the test files aren't inside of wwwroot so they won't get served to the client, and you get the benefit of having them logically grouped together.

Then it's just a matter of updating your paths that reference wwwroot:

karma.conf.js

package.json:

project.json:

Answer 3

Building on @PWKad's answer:

You might also need to modify the paths property of the jspm config object passed to Karma to prepend each path with base/ so that Karma can pick them up.

For example, my src/App/wwwroot/config.js file looks like this

paths: {
    "*": "app/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
}

and my karma.conf.js looks like this

basePath: '',
urlRoot: '/',
jspm: {
     config: 'src/app/wwwroot/config.js',
     packages: 'src/app/wwwroot/jspm_packages',
     loadFiles: 'tests/unit/**/*.js',
     serveFiles: 'src/app/wwwroot/app/**/*.js',
     paths: {
                "app/*": 'base/src/app/wwwroot/app/*',
                "test/*": 'base/test/*',
                "github:*": 'base/src/app/wwwroot/jspm_packages/github/*',
                "npm:*": 'base/src/app/wwwroot/jspm_packages/npm/*'
            }
}

This project has working unit tests set up for this situation. It does use Typescript, but the concept is the same.