karma runner - Pruebas Asp.Net 5 y Aurelia Karma

karma-runner asp.net-core

Question

Estoy tratando de configurar el proyecto de esqueleto de navegación para Aurelia en una nueva aplicación ASP.NET 5. Intenté muchas cosas y creo que me estoy acercando, pero estoy realmente atrapado en las pruebas del lado del cliente.

Descargué el proyecto de esqueleto del repositorio de Aurelia en GitHub y lo descomprimí.

Utilicé las sugerencias de Scott Allen para establecer la configuración jspm para colocar los paquetes jspm en la carpeta wwwroot como se indica en esta publicación .

Luego actualicé la estructura del proyecto para que se vea así:

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

Tengo dos preguntas:

1. ¿Dónde debe estar la carpeta de prueba del proyecto de inicio de navegación de esqueleto Aurelia? Por un lado, wwwroot tiene mucho sentido porque allí es donde vivirán el resto de los archivos javascript específicos de la aplicación. Por otro lado, esos archivos no deberían ser servidos a un cliente, por lo que ponerlos en wwwroot no tiene mucho sentido.

2. Una vez que están residiendo en su lugar apropiado en la estructura del proyecto, ¿qué archivos / valores deben actualizarse para que las pruebas se ejecuten adecuadamente? Por el momento los coloqué en el directorio wwwroot. Actualicé el basePath en el archivo karma.conf.js a ''wwwroot''. Cuando realizo el comando de inicio de karma, me está dando un error 404 tratando de localizar ''/base/app-bundle.js''. Ese archivo existe en ''wwwroot / dist / app-bundle.js'', pero no puedo encontrar la manera de configurar el karma para encontrarlo allí.

Cualquier ayuda sería muy apreciada.

Answer 1

Esta es una gran pregunta y, con suerte, servirá para beneficiar a otros en el futuro, no solo con Visual Studio e IIS, sino con cualquier estructura de proyecto impulsada por el marco principal que sirve la aplicación.

karma.conf.js

Primero, veamos lo que realmente estamos probando. Dado que karma-jspm tiene la capacidad de usar babel para transpilar sobre la marcha, estaremos probando nuestro src , no nuestro dist. Esto es importante porque queremos asegurarnos de que nuestras rutas de configuración de karma estén todas apuntando hacia allí, pero deje nuestro config.js solo para que system.js sepa cómo obtener los archivos de dist cuando realmente ejecuta la aplicación.

configuración de basepath

Dejemos nuestro camino base solo. Tenemos nuestras pruebas y src en wwwroot , pero como mencionaste, no es realmente a dónde pertenecen nuestras pruebas. Vamos a moverlos nuevamente a la raíz y establecer basePath: '''' para que todas las rutas comiencen en la raíz.

Configuraciones jspm

A continuación, le diremos a karma cómo configurar nuestra configuración específica de jspm, como qué archivos cargar y qué rutas crear. Una cosa clave que hay que recordar aquí es que los nuevos paths que definimos en nuestro config.js como ayudantes necesitan ser actualizados en nuestro karma.conf.js ya que estamos probando el src , no el dist (al que apunta config.js) . También asegúrese de anteponer wwwroot/ a cualquier archivo o ruta a archivos que comiencen con src para que el karma sepa dónde cargarlos.

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

configuración de babel

Finalmente, necesitamos actualizar nuestra configuración babel (o traceur) para que el karma sepa qué archivos deben preprocesarse y usar qué opciones. Esto se debe a que estamos cargando desde src para la prueba.

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

Nota

Normalmente me gustaría vincular a un conjunto de ejemplos de código que ayudaría, pero en este caso creo que es apropiado para el código de correo no deseado en esta respuesta, pero si se producen cambios en el futuro a karma-jspm puede valer la pena editar o señalar que en los comentarios para que la respuesta no se vuelva obsoleta.

Answer 2

IDK si hay una respuesta definitiva sobre dónde colocar la carpeta de prueba en este momento, pero lo que he hecho es crear una nueva carpeta de "aplicación" que tenga mi carpeta de "prueba" y "wwwroot" como mis hermanos. De esta forma, como mencionaste, los archivos de prueba no están dentro de wwwroot, por lo que no se mostrarán al cliente, y obtienes la ventaja de tenerlos lógicamente agrupados.

Entonces solo es cuestión de actualizar tus rutas que hacen referencia a wwwroot:

karma.conf.js

package.json :

project.json :

Answer 3

Basándose en la respuesta de @ PWKad:

Es posible que también deba modificar la propiedad paths del objeto jspm config pasado a Karma para anteponer cada ruta con base/ para que Karma pueda recogerlas.

Por ejemplo, mi archivo src/App/wwwroot/config.js ve así

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

y mi karma.conf.js ve así

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

Este proyecto tiene pruebas de unidad de trabajo configuradas para esta situación. Sí utiliza Typescript, pero el concepto es el mismo.