Welcome back! Well, its been another post that has taken me longer than I have anticipated 🙂 Commit details are here:
In this post, I going to discuss additional unit tests I added as well as show how I overcame an error when I first tried to deploy the ‘The Globe In My Bucket Application’ (TGIMBA) .NET Core Angular 4 Type Script upgrade to my production site.
The new tests are:
- Home/Welcome Controllers – There is not a lot to either controller yet, so I am only adding Index() tests.
- The HomeController Index() test verifies that the view returns as not null.
- The WelcomeController Index() test also verifies the view is not null, the WelcomeModel is not null and it contains the expected Dashboard data.
- Welcome Model – This test verifies that the dashboard data is set as expected.
Running them all
- .NET Core Tests
- Angular Type Script Tests
Details on how to run the Angular 4 Type Script tests are covered in this blog post:
- I am commenting out the HomeController.cs Error() action for now. I am leaving it as a template for how to handle errors. It was added by default when the project was created.
- I am also leaving SampleDataController.cs in place as a template for how to interact with more complex TypeScript files. I will eventually remove it.
- I pondered breaking up the WelcomeController and WelcomeModel tests since they are both testing that the dashboard data is being set. However, the controller uses the model and for now, I am thinking this is OK. If I find a better way to do this, I may change this.
- For both the Home and Welcome controllers, I am not longer just instantiating the ITgimbaService. I am now injecting it via the controller constructors.
For the test, I am just adding it to the constructor. For the runtime, this is done in Startup.cs by adding to ‘services.AddSingleton<ITgimbaService>(new TgimbaService());’ to Startup.cs:
- To test the ITgimbaService Dependency Injection (DI) with the unit tests, I am using MOQ. The datalayer, api layer and others will be redone with mocks at some point in the future when I am done with the Angular front end and start on those.
The error I encountered trying to put all of this together on production was an error that was a bit cryptic. More specifically, this error:
The command “node node_modules/webpack/bin/webpack.js –env.prod” exited with code 2.
My first attempt to get this working was to remove the webpack.js –env.prod commands in the TgimbaNetCoreWeb.csproj file. This allowed it to run and let me to the second error which deals (I think) the Angular 4 portion of the site not finding the Node.js run time and/or the project’s node_modules.
To deal with the first, I found an article (reference #1) which showed me that the first error was masking TypeScript errors. Following its instructions, I ran the command ‘node node_modules/webpack/bin/webpack.js –env.prod’ in the TgimbaNetCoreWeb and it exposed two classes I had not added to the @NgModule( statment declarations and imports in app.shared.module.ts for the ‘FooterComponent’ and ‘RegistrationComponent’ components:
With that error fixed, I set my sights on the second because if your project doesn’t ultimately work on production, what’s the point? 🙂
I am getting a non descriptive 500 that I have not been able to decipher yet. It is either that I need node_modules in my deployment files and/or something else. The .Net Core deployment file architecture is different and I just have to learn its secrets 🙂
Tune in as I prepare to do battle to get the Angular 4 portion of the website working 🙂