based-ghost / aspnet-core-vue-fullstack-testing

Prototype with Vue.js client (testing with Jest/Nightwatch) and ASP.NET Core 5.0 Web API (testing with xUnit.net)

Full-Stack Testing (ASP.NET Core 5.0 & Vue.js)

Prototype application with a Vue.js client that has significant unit testing coverage with Vue Test Utils (Jest as the test runner) and configured for e2e testing with Nightwatch. The web API is built using ASP.NET Core 5.0 and unit/integration testing is handled using xUnit.core. Has a basic, functional UI for executing requests to a back-end web api.

Demo

General/Technology Stack Overview

• Front-end initially bootstrapped using the Vue CLI App with the following options: Babel, TypeScript, PWA, Router, Vuex, CSS Pre-processors (node-sass), Linter (ts-lint), Unit Testing (Jest/ts-jest), E2E Testing (Nightwatch)
• Additionally I added:
  • Bulma CSS Framework for modular styling
  • axios for REST endpoint requests
  • vuex-module-decorators which enables you to write class based vuex store modules
  • vue-snotify snackbar notifications (based off the original library for Angular)
  • vue-js-modal for displaying compiled templates as modal components, or the option to create modals dynamically at runtime (my preferred modal plugin for Vue.js)
• Back-end Web API using ASP.NET Core 5.0 and a seperate xUnit.core test project (for integration testing of Web API). For both Development and xUnit tests I am using the InMemory database option with Entity Framework Core for convienence

Setup

1. Install the following (or confirm installed):
   • .NET 5.0 SDK
   • Node.js >= v10
2. After cloning the repo, run the command npm install in the ClientApp directory to restore all Node packages/dependencies from package.json
3. Open the .sln solution in Visual Studio and make sure all dependencies and Nuget dependencies are installed/restored - won't hurt to rebuild the entire solution (both projects)
4. Two potential ways to start the entire project:
   • I installed and configured the aspnetcore-vueclimiddleware in the FullStackTesting.Web.Api project - in theory this makes things easier by allowing you to launch the Web Api and the Vue.js client from within Visual Studio by just running the project. I found its functionality to be spotty when used with .NET Core 2.x, however, after upgrading to .NET 5.0 and bump the Nuget package to the 5.0 version I encountered zero issues.

using VueCliMiddleware;

app.UseEndpoints(endpoints => {
    endpoints.MapControllers();

    if (System.Diagnostics.Debugger.IsAttached)
    {
        endpoints.MapToVueCliProxy(
           "{*path}",
           new SpaOptions { SourcePath = _spaSourcePath },
           npmScript: "serve",
           regex: "running at",
           forceKill: true
        );
    }
    else
    {
        endpoints.MapFallbackToFile("index.html");
    }
});

• You can choose to not use this the way it is currently configured and instead launch the front-end and back-end independently and proxy requests to your specified port.

Scripts (ClientApp)

npm install

After cloning the repo, run this command. This will:

• Install Node dependencies from package.json

npm run serve

To start the app (development build), run this command. This will:

• Compile the app and run on the development server

npm run test:unit

• This will execute your unit tests located at ClientApp/tests/unit - they should follow the naming convention [name].spec.ts. I have 7 tests already written and passing in there.

npm run test:e2e

• This will execute your end-to-end integration Nightwatch tests located at ClientApp/tests/e2e/specs

npm run lint

• Run the linter (configured in the tslint.json file found in the root of this project)

npm run build

This script will:

• Build release Webpack bundles

xUnit Integration Tests (.NET Core)

A few of the ways to execute the tests contained within the project FullStackTestin.Web.Api.IntegrationTests:

• Run the CLI command dotnet test from within the FullStackTesting.Web.Api.IntegrationTests folder
• If you have the Open Command Line Visual Studio extension installed you can right click FullStackTesting.Web.Api.IntegrationTests project when loaded in Visual Studio to launch the cmd/PowerShell prompt that way and proceed to run dotnet test
• From within Visual Studio (with the FullStackTesting.Web.Api.IntegrationTests project loaded) via Test/Run/[select option]