ASP.NET Core Integration test using Moq Framework

 Testing coverage is the key part of any project development and Testing coverage is not only about the unit testing instead Integration Testing is extremely important to make sure entire system is unbroken & bug free with any change or subsequent enhancement.

When we talk about integration testing, mocking dependencies are the oxygen to cover the integration testing. You may create a replica of your services as mock to work with integration testing but do we really need to do that, when Moq framework is doing the same for us and we can save lot of time & effort from writing unnecessary codes.

So lets see How to achieve Integration Testing for ASP.NET Core using Moq framework. My intention here is to only show the integration testing using Moq hence I’m doing a simple ASP.NET Core Web API project which has a service endpoint to return the weather forecast and goal is to test the end-to-end flow of api call by mocking the service which calculates the forecast.

I’m using .Net core 6, xUnit for testing and Moq for mocking.

Now, first we will be creating a blank solution named ‘MoqDemoSol.sln” and add a .net core 6 class library project named CoreWebAPIMoqDemo.Services and two files as :
IWeatherForecastService.cs : interface for business service to calculate weather forecast

namespace CoreWebAPIMoqDemo.Services
{
    public interface IWeatherForecastService
    {
        Task<WeatherForecast[]> GetWeatherForecast();
    }public record WeatherForecast(DateTime Date, int TemperatureC, string? Summary)
    {
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

and

WeatherForecastService.cs : implementation of business service to calculate weather forecast

namespace CoreWebAPIMoqDemo.Services
{
    public class WeatherForecastService : IWeatherForecastService
    {
        string[] summaries = new string[]
        {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };
        
        public async Task<WeatherForecast[]> GetWeatherForecast()
        {
            var forecast = Enumerable.Range(1, 5).Select(index =>
                new WeatherForecast
                (
                    DateTime.Now.AddDays(index),
                    Random.Shared.Next(-20, 55),
                    summaries[Random.Shared.Next(summaries.Length)]
                )).ToArray();
            return forecast;
        }
    }
}

Our business layer service which calculates the weather forecast is ready.

Now let’s create a .net core 6 web api project named as ‘CoreWebAPIMoqDemo’ using the template and replace the code in Program.cs as:

using CoreWebAPIMoqDemo.Services;var builder = WebApplication.CreateBuilder(args);// Add services to the container.
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddSingleton<IWeatherForecastService, WeatherForecastService>();var app = builder.Build();// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}app.UseHttpsRedirection();app.MapGet("/weatherforecast", async (IWeatherForecastService service) => 
{
    return await service.GetWeatherForecast();
})
.WithName("GetWeatherForecast");app.Run();public partial class Program { }

Highlighted(in bold) codes are the modified code from the actual template Program.cs, Now if you run this you will see the service in swagger UI as:

Now our application is ready, hence we will be moving forward to do the integration testing to test end-to-end flow of /weatherforecast service by mocking the service dependency of CoreWebAPIMoqDemo.Services.IWeatherForecastService .

why we are doing this is, assume this is a third party service call and we can’t get this in our testing environment. Now lets add the unit test project (of your choice i.e. MSTest, nUnit, xUnit etc, in my case it is xUnit) named as ‘CoreWebAPIMoqDemo.Tests’ and install the package related to your unit test framework.

Next, since we will be using Moq framework for mocking hence install the Moq package through nuget package manager. In my case it is:

<PackageReference Include="Moq" Version="4.18.1" />

I’ll be keeping mocked service at once place hence adding a class named ‘MockServices.cs’ which will have the Mocked services as well as a method (which uses reflection) to return list of all mocked service’s interface type and mock object defined here. Code is:

using Moq;
using CoreWebAPIMoqDemo.Services;
using System.Reflection;namespace CoreWebAPIMoqDemo.Tests
{
    internal class MockServices
    {
        public Mock<IWeatherForecastService> WeatherForecastServiceMock { get; init; }public MockServices()
        {
            WeatherForecastServiceMock = new Mock<IWeatherForecastService>();
        }/// <summary>
        /// This returns the collection of all mock service's interface type and the mock object, defined here i.e. <see cref="WeatherForecastServiceMock"/>.
        /// </summary>
        /// <returns></returns>
        public IEnumerable<(Type, object)> GetMocks()
        {
            return GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance)
                .Select(x =>
                {
                    var interfaceType = x.PropertyType.GetGenericArguments()[0];
                    var value = x.GetValue(this) as Mock;return (interfaceType, value.Object);
                })
                .ToArray();
        }
    }
}

The purpose of doing this is, to keep all mocked services at one place and then GetMocks() which help me get all the mocked object and interface type so that I’ll be able to inject this with .net core dependency container collection IServiceCollection to use during unit test execution.

Next adding a class named ‘TestMoqPOCApplication.cs’ which inherits WebApplicationFactory<Program> to override CreateHost() method to prepare the IServiceCollection for integration tests. code is:

using Microsoft.AspNetCore.Mvc.Testing;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using CoreWebAPIMoqDemo.Services;namespace CoreWebAPIMoqDemo.Tests
{
    internal class TestMoqPOCApplication : WebApplicationFactory<Program>
    {
        private readonly MockServices _mockServices;
        public TestMoqPOCApplication(MockServices mockServices)
        {
            _mockServices = mockServices;
        }protected override IHost CreateHost(IHostBuilder builder)
        {
            builder.ConfigureServices(services => {
                foreach ((var interfaceType, var serviceMock) in _mockServices.GetMocks())
                {
                    services.Remove(services.SingleOrDefault(d => d.ServiceType == interfaceType));
                    services.AddSingleton(typeof(IWeatherForecastService), serviceMock);
                }
            });
            return base.CreateHost(builder);
            
        }    }
}

in above highlighted code, our MockServices instance is available through constructor and then inside CreateHost method looping through each mock services we defined in the MockService class and putting into dependency container by removing the existing one which will be having actual business implementation of IWeatherForecastService.

By this we are ready with mocking and now add the code for the integration test for /weatherforecast api call. Add a class WeatherForecastTests.cs and add the code into it as:

using Moq;
using CoreWebAPIMoqDemo.Services;
using Newtonsoft.Json;namespace CoreWebAPIMoqDemo.Tests
{
    public class WeatherForecastTests
    {
        private readonly TestMoqPOCApplication _testMoqPOCApplication;
        private readonly MockServices _mockServices;
        public readonly HttpClient _client;
        
        public WeatherForecastTests()
        {
            _mockServices = new MockServices();
            //instantiating TestMoqPOCApplication
            _testMoqPOCApplication = new TestMoqPOCApplication(_mockServices);
            //creating client for api call
            _client = _testMoqPOCApplication.CreateClient();
        }[Fact]
        public async void GetWeatherForecastTest()
        {
            //mocking the business service's GetWeatherForecast() method to return result as below  
            var expResult = new WeatherForecast[]
            {
                new WeatherForecast(DateTime.Now, 26, "Bengaluru")
            };
            //mocking the business service's GetWeatherForecast()
            _mockServices.WeatherForecastServiceMock.Setup(m => m.GetWeatherForecast()).ReturnsAsync(expResult);//calling the api
            var response = await _client.GetAsync("/weatherforecast");
            string jsonString = await response.Content.ReadAsStringAsync();
            var result = JsonConvert.DeserializeObject<WeatherForecast[]>(jsonString);//testing the response
            Assert.Equal(response.StatusCode, System.Net.HttpStatusCode.OK);
            Assert.Equal(expResult, result);}
    }
}

Whoop, we are done. now if you run the test, you will see the result as:

Entire code is available here: https://github.com/binodmahto/FunProjects/tree/main/CoreWebAPIMoqDemo

That’s all. Hope you enjoyed the content. Please don’t forget to follow me for more like this and like/comment for it. Happy programming.

props vs emit in vue.js

 In my last article here , I tried to explain about data(), props, methods and components. Here I’m gonna explain about emit function of vue.js.

From the last article we understood the concept behind props and the usage of it. In short props helps to pass the information from parent to child but not vice versa, so what should do if we need to pass information back to parent(caller) from the child component. This is where emit function helps us.

$emit function emit or send custom events to it’s parent.

Lets see by an example, how we can do this. I’m considering a scenario here, where a child components will receive payload information from parent via props and child component will send modified value (payload) via an event back to the parent.

Creating child components names MyComponent.vue

<template>
  <div>
     <input type="text" v-model="firstName"/>
    <input type="text" v-model="lastName"/>
    <br/>
     <button @click='onButtonClick()'>
        Click Me
    </button>
  </div>
</template>
<script>
 export default {
   
  props: ['firstName', 'lastName'],
  
  emits: ['onClick'],
  
  methods :{
    onButtonClick($event){
      this.$emit("onClick", { fName: this.firstName, lName:this.lastName});
    }
  },
   
}
</script>

Here in the child component, we have two text box which binds the value firstName and lastName as received from parent. There is a button which calls the method ‘onButtonClick’ on click and emit an event for parent with payload information with updated firstName and lastName.

Now let’s create the main component, App.vue

<script>
  import MyComp from './MyComponent.vue' //import the component
export default {
  
  components: { 
       'my-comp' : MyCompl  //define the component
  }, 
   
 data() {
    return {
      firstName: 'Binod',
      lastName: 'Mahto',
      fullName:'',
    }
  },
  
 methods : {
    mtdCalculateFullName(payload) {
     this.$data.firstName = payload.fName;
     this.$data.lastName = payload.lName;
     this.$data.fullName =  this.$data.firstName +  ' ' + this.$data.lastName;
   }
  },  
}
</script>
<template>
 <div>
   <my-comp :first-Name='firstName' :last-Name='lastName' @on-Click='mtdCalculateFullName'></my-comp>
  </div>
  <div>
      <p>Full Name:</p><p>{{fullName}}</p>
  </div>
</template>

In above main component, I have give a name to my child component as ‘my-comp’ and in the template using the child component as <my-comp/>. This is optional and instead you can use <MyComp/> if you don’t want to give any name as I did in my last article example.
Main component (parent) here binding data() function members firstName and lastName against the props :first-Name=’firstName’ :last-Name=’lastName’ to pass the information to child, and it also binds the emitted event by child @on-click with a method available in parent @on-Click=’mtdCalculateFullName’.

In result, when you click on button rendered by child component, child component will emit a event name ‘on-click’ with updated firstName and lastName as event payload to the parent. if you run the example, your output would be as:

Conclusion:

props is a way to pass information from parent to child and emit function is a way to pass information back to parent from child.

That’s all. Hope you enjoyed the content, don’t forget to follow me for more like this and like/comment for it please. Happy programming.

Reference:
https://vuejs.org/guide/introduction.html

Reminder once again, you don’t need any tool or install anything to try above example instead you can do this via vue’s SFC playgorund: https://sfc.vuejs.org/

data vs props and methods vs computed in Vue.js

 Vue.js is a versatile & popular framework for building web user interfaces. Even I feel, compare to other UI frameworks, Vue framework seems to be easier to learn & code. There are four basic & major concepts of Vue framework which often seems to be confusing from each others, specially for beginners.

These four concepts on which entire vue page/components depends on are:
1. data()
2. props
3. computed and
4. methods

Here I’ll try to explain these concepts and also make sure there won’t be any more confusion around them to use it. For the article below, I’ll be using below example for explanation so please pay attention to it but don’t worry as I'll explain what I did here.

App.vue

<script>
export default {
 data() {
    return {
      firstName: 'Binod',
      lastName: 'Mahto',
      fullName:'',
      methodcount:0,
      computedcount:0
    }
  },
  
 methods : {
    mtdCalculateFullName() {
      this.$data.methodcount++;
     this.$data.fullName =  this.$data.firstName +  ' ' + this.$data.lastName;
   }
  },
  
  computed : {
    cmptCalculateFullName() {
      this.$data.computedcount++;
     this.$data.fullName =  this.$data.firstName +  ' ' + this.$data.lastName;
   }
  }
  
}
</script><template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <div>
      <button @click='mtdCalculateFullName()'>
        Click Me
    </button>
      <p>Full Name:</p><p>{{fullName}}</p>
     <p>count: {{methodcount}}</p>
  </div>
  <div>
      <button @click='cmptCalculateFullName'>
        Click Me
    </button>
      <p>Full Name:</p><p>{{fullName}}</p>
     <p>count: {{computedcount}}</p>
  </div>
</template>

Let’s discuss the concepts now.

data():

by definition, it is a function that returns the initial reactive state for the component instance.
Technically it is a data placeholder which keeps the state of data throughout the component/page life cycle. For backend programmer, it is like class variables which holds the data state for the class.
In above example here, I have five data members to capture the data state for my vue page and they are defined as:

data() {
    return {
      firstName: 'Binod',
      lastName: 'Mahto',
      fullName:'',
      methodcount:0,
      computedcount:0
    }
  }

The syntax is like a function named ‘data()’ which returns a type holding members and it is consumed within the script as

this.$data.{datamembername} 
//not necessary to use $data instead you do this.{datamembername} but i'm doing this for readability purpose.

This member’s value can be modified through out the page/component lifecycle and it will retain the state for the same. In my example, I’m using the same data member in UI component to bind with <input/> as well to display it in html.

Hence, as the name says data(), the purpose of it is to maintain the data for throughout the component life cycle.

props:
props are one-way-down data binding technique to bind between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. Hence for the child component it is read only.
For an example let’s create a reusable component which has a template to display messages passed by parent and this is what exactly the props serves.

Here is the component : MyComp.vue

<template>
  <div>
     <p>{{greetingMessage}}</p>
  </div>
</template><script>
  export default {
  props: ['greetingMessage']
}
</script>

and use this component in parent component as:

<script>
 
import MyComp from './MyComp.vue' //import it firstexport default {
  components: { 
      MyComp  //define the component
  }, 
 data() {
    return {
      message: 'Hi This is a message for props',
    }
  },
  
  
}
</script><template>
    <MyComp greetingMessage ='Hi This is props'></MyComp>
    <MyComp greeting-Message ='Hi This is props'></MyComp>
    <MyComp :greeting-Message ='message'></MyComp>
  </div>
</template>

Above code will display the message passed by parent in the child component. Hope you noticed something here, I have used the child component in three different ways and the purpose was to make you aware so that you will not get confused.
In short, from the above code greeting-Message (pascal case) is the standard suggested to follow to keep code inline with html syntax and when you need to bind the data member, you will have to use the props with ‘:’ as prefix i.e. :greeting-Message =’message’.

one more thing, if you noticed the props (you can call it property) I defined in child component, looks like an array and this is one way of defining it. Vue framework allows you to define in other way also (like an object). i.e.

<template>
  <div>
     <p>{{greetingMessage}}</p>
  </div>
</template>
<script>
  export default {
  props: {
     greetingMessage : string,
  }
}
</script>

It’s all your call, vue framework allows both. In any way, in case of complex object for props you would need the second way of declaration.

Hence, props are a way of one-way data binding technique to pass value from parent to child and not vice versa.

methods:
methods allows you to create your re-usable functions to perform your logic. it takes parameters and returns output or void. Syntax for defining methods is:

methods:{
     mymethod1(payload: any){
      //logic goes here
     }
  
  //syntax to define async methods
  async mymethod2(payload: any){
      //logic goes here
     }
}

In my first example, I have a method called ‘mtdCalculateFullName’ which formats the full name string and save it back to data() function member.

Hence, methods provides to define functions which perform certain action, logic etc. These functions you can call within a function or you can bind to action event also. i.e.

<button @click='mtdCalculateFullName()'>

computed:
This is similar to methods in terms of syntax or use but it is not really similar and it has a great purpose behind it. This is where most of the people get confused between methods and computed.

computed allows you to define properties or methods with the reactive dependencies of the data and the output of computed property or function is cached (and will not be re-executed or calculated) until data state changes.

Not clear, no worries, plz pay attention to my first example here (App.vue) which has a computed member (function) named ‘cmptCalculateFullName()’ which formats the full name as the methods member (function) named ‘mtdCalculateFullName()’ does. Both the functions increment the data variable named computedcount and methodcount respectively when the specific function is being called on click on respective buttons.

When you run the example, you will see the output as:

and here is the key fact: no matter how many times you are clicking the second button, count value will not change for second div unless you change the firstName and lastName from the input text box and that is the purpose of computed property or function, where as you will always see the count value increasing on click of 1st button because the methods function is being re-executed every time it is being called but computed function’s data is cached and ignore the execution unless data is changed.

Hence, computed allows you to create property or function which works with reactive dependencies of data member by caching the output until data changes.

I hope this made you clear the purpose of method and computed concepts of the vue framework. Now let me give you one simple example with respect to computed: Suppose in your application component you have data() member which is array of string data, example countries :[‘India’, ‘Japan’, …]. In your component you bind this data multiple places but by sorting it in a ascending order. So in this case, the best option to use computed member instead of method to gain the performance.

One more confusing fact, In some articles you may find people saying that, “computed doesn’t allow parameter but methods does allow” is as one of the difference but this statement is partially true, let’s see how.

This is true that computed function doesn’t allow function’s input parameter but the same can be achieved through getters, setters property of computed member, here is the example:

export default {
  data() {
    return {
      firstName: 'Binod',
      lastName: 'Mahto'
    }
  },
  computed: {
    computedFullName: {
      // getter
      get() {
        return this.$data.firstName + ' ' + this.$data.lastName
      },
      // setter
      set(newValue) {
        // Note: we are using destructuring assignment syntax here.
        [this.$data.firstName, this.$data.lastName] = newValue.split(' ')
      }
    }
  }
}

You can call this getters, setters as:

this.computedFullName = 'James Bond';//to set the new value
this.computedFullName; // to get the value.

Hence, though computed doesn’t allow you to do this:

//this is not allowed
computed:{
 cmptCalculateFullName(payload : string)
 {
 }
}

but then you have the way to achieve the same using setters:

computed: {
    computedFullName: {
      // setter
      set(newValue) {
        // Note: we are using destructuring assignment syntax here.
        [this.$data.firstName, this.$data.lastName] = newValue.split(' ')
      }
    }
  }

Hence saying that, computed doesn’t allow payload input parameter is partially true because though it is not possible through computed function but by computed member’s setter you can achieve the same.

That’s all. Hope you enjoyed the content, don’t forget to follow me for more like this and like/comment for it please. Happy programming.

Reference:

Introduction | Vue.js

You are reading the documentation for Vue 3! Vue (pronounced /vjuː/, like view) is a JavaScript framework for building…

vuejs.org

Also, you don’t need any tool or to install anything, to try above example instead you can do this via vue’s SFC playgorund: https://sfc.vuejs.org/