Tests Asp.Net 5 and Aurelia Karma

Question

I am trying to set up a skeleton navigation project for Aurelia in a new ASP.NET 5 application. I have tried many things and believe that I am getting closer, but I really get to the client side tests.

I downloaded the skeleton project from the Aurelia repository on GitHub and unpacked it.

I used Scott Allen's suggestions for setting jspm options to put jspm packages in the wwwroot folder, as indicated in this post .

Then I 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 Launch Project be located? On the one hand, wwwroot makes a lot of sense, because it is there that the rest of the application javascript files will live. On the other hand, although these files should never be served by the client, therefore, to put them in wwwroot does not make much sense.

2. Once they are in the right place in the project structure, what files / values ​​need to be updated in order to verify the correctness of the tests? At the moment, I have placed them in the wwwroot directory. I updated basePath in the karma.conf.js file to "wwwroot". When I execute the karma launch command, although it gives me a 404 error trying to find "/base/app-bundle.js". This file exists in 'wwwroot / dist / app-bundle.js', but I cannot figure out how to configure karma to find it there.

Any help would be greatly appreciated.

Answer 1

Based on @PWKad answer:

You may also need to change the paths property of the jspm configuration jspm passed to Karma to add each path using base/ so that Karma can pick them up.

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

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

and my karma.conf.js as follows

 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/*' } } 

In this project , the work units configured for this situation are set. It uses Typescript, but the concept is the same.

Answer 2

This is a great question, and we hope that it will benefit others in the future, not only with Visual Studio and IIS, but with any project structure that is managed by the parent base that serves the application.

karma.conf.js

First, let's see what we are actually testing. Since karma-jspm has the ability to use babel to fly on the fly, we will test our src , not our level. This is important because we want to make sure that all karma configuration paths all point there, but leave our config.js alone, so system.js knows how to get the files from the very beginning when the application starts.

base path setup

Leave our base path alone. We have our tests and src at wwwroot , but as you mentioned, they are not really our tests. Put them back in the root directory and set basePath: '' so that all paths start from the root.

Jspm settings

Next, let's talk about karma, how to configure our jspm specific parameters, such as files to download and which paths to create. Here we need to remember that the new paths that we define in our config.js , as helpers should be updated in our karma.conf.js, because we are testing src , not dist (which config.js points to). Also, be sure to add wwwroot/ to any files or file paths starting with src so that karma knows where to download them.

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

buffer settings>

Finally, we need to update the babel (or traceur) settings so that karma knows which files need to be pre-processed and using which parameters. This is because we are loading from src for testing.

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

Footnote

I would usually refer to a bunch of code samples that could help, but in this case I think it matches the code spam in this answer, but if any changes happen in the future in karma-jspm, it might be worth changing or noting that in the comments so that the answer does not become obsolete.

Answer 3

IDK, if there is a definitive answer about where to place the test folder at this stage, but I did this by creating a new "application" folder in which there is my "test" folder and "wwwroot" as brothers and sisters. Thus, as you already mentioned, the test files are not inside wwwroot, so they will not be served by the client, and you will benefit from their logical grouping.

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

karma.conf.js

package.json

project.json