Category Archives: Programming

[EN] How to debug angular app in VS Code and Chrome

I have started to develop frontend side of my pet project and yesterday I worked on login service and I had to debug it. I use Visual Studio Code to write app in angular2 and typescript and I thought why not to use VS Code for debugging? Ok, but not so fast. Few steps are required to achieve it.

In VS code open cmd palette with key combination Ctrl+Shift+P and type:

ext install

1	ext install

Then type Debugger for Chrome in extensions manager and install it.

After installation restart VS code.

Next go to Debugger or press Ctrl+Shift+D and click on the gear icon to create launch.json file.

By default it looks like this:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\serve",
            "outFiles": []
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "address": "localhost",
            "port": 5858,
            "outFiles": []
        }
    ]
}

{

// Use IntelliSense to learn about possible Node.js debug attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Launch Program",

"program": "${workspaceRoot}\\serve",

"outFiles": []

{

"type": "node",

"request": "attach",

"name": "Attach to Process",

"address": "localhost",

"port": 5858,

"outFiles": []

}

]

}

but to be able to debug angular app you need to modify it. My launch.json file looks like this:

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4200/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:4200/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

{

"version": "0.2.0",

"configurations": [{

"name": "Launch Chrome against localhost, with sourcemaps",

"type": "chrome",

"request": "launch",

"url": "http://localhost:4200/",

"runtimeArgs": [

"--user-data-dir",

"--remote-debugging-port=9222"

"sourceMaps": true,

"diagnosticLogging": true,

"webRoot": "${workspaceRoot}",

"userDataDir": "${workspaceRoot}/.vscode/chrome"

{

"name": "Attach to Chrome, with sourcemaps",

"type": "chrome",

"request": "attach",

"url": "http://localhost:4200/",

"port": 9222,

"sourceMaps": true,

"diagnosticLogging": true,

"webRoot": "${workspaceRoot}"

}]

}

Url is default url where angular app is located, port: 9222 is the port used by Chrome browser.

In this config file there are two configs, one of these is for launching chrome with attached debugger and the second one is for attaching existing chrome instance. Let’s try to launch new chrome window. Click on green start icon.

Now you can just put a breakpoint in VS Code, wherever you want and you can debug your angular app 😉

[EN] How to add Autofac container to ASP.NET Core app?

I created few projects in my solution. I have models, services, tests and webApi project. I added LoginController which uses Services, but it uses it by interfaces. I need to use dependency injection to resolve it for me. I decided to add Autofac. It is IoC container which allow us to register all types and it’s implementations, to inject specific types for us. In the last year I wrote post how to add Autofac to ASP.NET MVC app, but post is in Polish and adding Autofac to .NET Core app is slighty different than the last time.

First step to add Autofac to our project is to download nuget package Autofac.Extensions.DependencyInjection.

Next step is to register all types from assemblies. We need to do it for each assembly (install Autofac too). For example I have ELP.Model, ELP.Service, ELP.WebApi projects and I want to register all types from them. To do it let’s start from ELP.Service project. I prefer to add new interface to it. Just empty interface to determine assembly.

 public interface IDetermineServicesAssembly
    {
    }

public interface IDetermineServicesAssembly

{

}

Add also new class derived from Autofac.Module class and override Load method.

using Autofac;
using System.Reflection;

namespace ELP.Service
{
    public class ServiceModule : Autofac.Module
    {
        protected override void Load(ContainerBuilder builder)
        {            
            base.Load(builder);
            builder.RegisterAssemblyTypes(typeof(IDetermineServicesAssembly).GetTypeInfo().Assembly).AsImplementedInterfaces();
        }
    }
}

using Autofac;

using System.Reflection;

namespace ELP.Service

{

public class ServiceModule : Autofac.Module

{

protected override void Load(ContainerBuilder builder)

{

base.Load(builder);

builder.RegisterAssemblyTypes(typeof(IDetermineServicesAssembly).GetTypeInfo().Assembly).AsImplementedInterfaces();

}

As you see the interface is only to get type info from it to get all assemblies and register it in the container. We need to repeat these steps for each project (in my case ELP.Model, ELP.WebApi). This method is very helpful, because every type will be registered automatically without our attention. When we add new interface and class that implements it, no action is required. Autofac does all for us!

Ok if we have modules, it’s time to modify Startup class a little bit.
Add new property ApplicationContainer of IContainer type. Then Create Container builder in ConfigureServices method and register all modules in it, then build and return result in ApplicationContainer. Take a look at my Startup class below.

using System;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using ELP.Model;
using Autofac;
using Autofac.Extensions.DependencyInjection;
using ELP.Service;
using Microsoft.EntityFrameworkCore;
using ELP.Model.Entities;
using ELP.WebApi.Models;

namespace ELP.WebApi
{
    public class Startup
    {
        public Startup(IHostingEnvironment env)
        {
            var builder = new ConfigurationBuilder()
                .SetBasePath(env.ContentRootPath)
                .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
                .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
                .AddEnvironmentVariables();
            Configuration = builder.Build();
        }

        public IContainer ApplicationContainer { get; private set; }

        public IConfigurationRoot Configuration { get; }

        public IServiceProvider ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            var connectionString = Configuration["secretConString"];
            services.AddDbContext<ELPContext>(o => o.UseSqlServer(connectionString));

            var builder = new ContainerBuilder();
            builder.RegisterModule<ModelModule>();
            builder.RegisterModule<ServiceModule>();
            builder.RegisterModule<WebApiModule>();
            builder.Populate(services);
            ApplicationContainer = builder.Build();
            return new AutofacServiceProvider(ApplicationContainer);
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
            app.UseMvc();
        }
    }
}

using System;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Logging;

using ELP.Model;

using Autofac;

using Autofac.Extensions.DependencyInjection;

using ELP.Service;

using Microsoft.EntityFrameworkCore;

using ELP.Model.Entities;

using ELP.WebApi.Models;

namespace ELP.WebApi

{

public class Startup

{

public Startup(IHostingEnvironment env)

{

var builder = new ConfigurationBuilder()

.SetBasePath(env.ContentRootPath)

.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)

.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)

.AddEnvironmentVariables();

Configuration = builder.Build();

}

public IContainer ApplicationContainer { get; private set; }

public IConfigurationRoot Configuration { get; }

public IServiceProvider ConfigureServices(IServiceCollection services)

{

services.AddMvc();

var connectionString = Configuration["secretConString"];

services.AddDbContext<ELPContext>(o => o.UseSqlServer(connectionString));

var builder = new ContainerBuilder();

builder.RegisterModule<ModelModule>();

builder.RegisterModule<ServiceModule>();

builder.RegisterModule<WebApiModule>();

builder.Populate(services);

ApplicationContainer = builder.Build();

return new AutofacServiceProvider(ApplicationContainer);

}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

{

loggerFactory.AddConsole(Configuration.GetSection("Logging"));

loggerFactory.AddDebug();

app.UseMvc();

}

That’s it. You can ask what if I have few types that implements one interface? How Autofac handles it? It registers the newest one, but maybe there will be a situation when you want to register specific type, then you can do it like this

builder.RegisterType<MyType>().As<IMyType>();

1	builder.RegisterType<MyType>().As<IMyType>();

If you want to use Autofac in you applications I recommend you to take a look at the documentation, where you can read more about it.

[EN] Angular2 – project structure, changing css to sass, using CLI

Angular2 project structure

Few posts ago I showed how to create new Angular2 project using Angular CLI. Let’s take a look at the project structure. Here we have app folder which contains few items.

Look at the diagram below to better understand this structure.

By default we have AppModule and AppComponent which is inside AppModule. This is how Angular2 project structure looks. We can have more components in one module and more modules with components of course.

Take a look into code. This is app.module class. It contains few core imports that come from angular library itself. There is also import of app.component class that has to be loaded. Beside it this class is empty for now.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Look at the app.component class. It imports angular/core only, but it has another interesting thing inside component. There is selector ‚app-root’ which will be used in index.html to display component interior, templateUrl which is link to html file with view for this component, styleUrls which is link to css file for our view. Inside class AppComponent we have title – ‚app works!’ which is visible when you run application.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app works!';

}

Changing css to sass

Ok, we have css, but what if I want to have sass – css with super powers 😀 Sass is CSS pre-processor and allows you use variables, nested rules and more. It allows to create stylesheets faster. To change css to sass, first we need to download sass with npm

npm install node-sass --save-dev

1	npm install node-sass --save-dev

then set default extensions in our project

ng set defaults.styleExt sass

1	ng set defaults.styleExt sass

then we need to change styles from .css to .sass in .angular-cli.json file

    "styles": [
        "styles.sass"
      ],

"styles": [

"styles.sass"

and rename file from app.component.css to app.component.sass and rename another file from styles.css to styles.sass. In addition there’s one modification needed in app.component.ts file. StyleUrls should refer to sass file, not css file.

styleUrls: ['./app.component.sass']

1	styleUrls: ['./app.component.sass']

ok project supports sass files now.
Let’s implement something in our project. As I mentiond before about modules and components, every module should be created for one feature.

Using CLI

I want to start from implementing login module, so let’s create module using CLI.
It is so simple. Just type in powershell command

ng g module login

1	ng g module login

this command will create new module file in folder. Awesome! You don’t need to know best practices for organising your project, CLI does it for you.

The same situation is when we want to add component or service. Try it.

ng g component login
ng g service login

1 2	ng g component login ng g service login

After executing these commands app folder looks like this. I created login.service, because it will be a part responsible for communicating with WebApi. Login.component will use this service. Unfortunately login.service is not in login folder. I want to have everything connected with login in one folder for better organisation so I will move it.

In official angular cli’s readme , we can see all possibillities that we have to generate files.

You can read more here.
Ok, project is ready to start implementation of login component. Maybe I will describe in next post how to connect WebApi. We will see 😉

[EN] Entity Framework Core – Code First migrations

In this post I want to show you how to create new database using Entity Framework Core – Code First migrations approach.

codefirst

I have project ELP.Model in which I defined few entities. I want to create database from it. It is approach called Code First. This is how looks one of my entity

public class Event : AuditableEntity<long>
    {
        [Required]
        [MaxLength(100)]
        public string Name { get; set; }
    }

 public class AuditableEntity<T> : Entity<T>, IAuditableEntity
    {
        [ScaffoldColumn(false)]
        public DateTime CreatedDate { get; set; }

        [MaxLength(256)]
        [ScaffoldColumn(false)]
        public string CreatedBy { get; set; }

        [ScaffoldColumn(false)]
        public DateTime UpdatedDate { get; set; }

        [MaxLength(256)]
        [ScaffoldColumn(false)]
        public string UpdatedBy { get; set; }
    }

 public abstract class Entity<T> : BaseEntity, IEntity<T>
    {
        public virtual T Id { get; set; }
    }

 public abstract class BaseEntity
    {
    }

  public interface IEntity<T>
    {
        T Id { get; set; }
    }

public class Event : AuditableEntity<long>

{

[Required]

[MaxLength(100)]

public string Name { get; set; }

}

public class AuditableEntity<T> : Entity<T>, IAuditableEntity

{

[ScaffoldColumn(false)]

public DateTime CreatedDate { get; set; }

[MaxLength(256)]

[ScaffoldColumn(false)]

public string CreatedBy { get; set; }

[ScaffoldColumn(false)]

public DateTime UpdatedDate { get; set; }

[MaxLength(256)]

[ScaffoldColumn(false)]

public string UpdatedBy { get; set; }

}

public abstract class Entity<T> : BaseEntity, IEntity<T>

{

public virtual T Id { get; set; }

}

public abstract class BaseEntity

{

}

public interface IEntity<T>

{

T Id { get; set; }

}

To be able to enable migration and create database, we need to create Context. My Context Class looks like this

 public class ELPContext : DbContext, IContext
    {
        public ELPContext(DbContextOptions dbContextOptions) : base(dbContextOptions)
        {
        }

        public DbSet<Event> Events { get; set; }
        public DbSet<User> Users { get; set; }
        public DbSet<Role> Roles { get; set; }
        public DbSet<UserRole> UserRoles { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            base.OnConfiguring(optionsBuilder);
        }

        public override int SaveChanges()
        {
            var modifiedEntries = ChangeTracker.Entries()
                .Where(x => x.Entity is IAuditableEntity
                    && (x.State == EntityState.Added || x.State == EntityState.Modified));

            foreach (var entry in modifiedEntries)
            {
                IAuditableEntity entity = entry.Entity as IAuditableEntity;
                if (entity != null)
                {
                    DateTime now = DateTime.UtcNow;

                    if (entry.State == EntityState.Added)
                    {
                        entity.CreatedDate = now;
                    }
                    else
                    {
                        base.Entry(entity).Property(x => x.CreatedBy).IsModified = false;
                        base.Entry(entity).Property(x => x.CreatedDate).IsModified = false;
                    }
                    entity.UpdatedDate = now;
                }
            }

            return base.SaveChanges();
        }
    }

public class ELPContext : DbContext, IContext

{

public ELPContext(DbContextOptions dbContextOptions) : base(dbContextOptions)

{

}

public DbSet<Event> Events { get; set; }

public DbSet<User> Users { get; set; }

public DbSet<Role> Roles { get; set; }

public DbSet<UserRole> UserRoles { get; set; }

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)

{

base.OnConfiguring(optionsBuilder);

}

public override int SaveChanges()

{

var modifiedEntries = ChangeTracker.Entries()

.Where(x => x.Entity is IAuditableEntity

&& (x.State == EntityState.Added || x.State == EntityState.Modified));

foreach (var entry in modifiedEntries)

{

IAuditableEntity entity = entry.Entity as IAuditableEntity;

if (entity != null)

{

DateTime now = DateTime.UtcNow;

if (entry.State == EntityState.Added)

{

entity.CreatedDate = now;

}

else

{

base.Entry(entity).Property(x => x.CreatedBy).IsModified = false;

base.Entry(entity).Property(x => x.CreatedDate).IsModified = false;

}

entity.UpdatedDate = now;

}

return base.SaveChanges();

}

We need to install few packages before we start with actual migration.

To do it, open Package Manager Console (In VS Tools-> Nuget Package Manager -> Package Manager Console) set Default Project to your target project and install packages. Make sure to install the newest versions or the same versions for all.

Install-Package Microsoft.EntityFrameworkCore

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Install-Package Microsoft.EntityFrameworkCore.Tools

Install-Package Microsoft.EntityFrameworkCore

Install-Package Microsoft.EntityFrameworkCore.SqlServer

Install-Package Microsoft.EntityFrameworkCore.Tools

To enable migrations in our project first we need to type in the same console Add-Migration MigrationName

Add-Migration InitialMigration

1	Add-Migration InitialMigration

and here is surprise. Not so easy man. I missed something. Yes exactly, we need to add implementation of IDbContextFactory<ELPContext>

This class should look like this:

 public class ELPContextFactory : IDbContextFactory<ELPContext>
    {
        public ELPContext Create(DbContextFactoryOptions options)
        {
            var builder = new DbContextOptionsBuilder<ELPContext>();
            builder.UseSqlServer("Server=(localdb)\\mssqllocaldb;Database=ELPdb;Trusted_Connection=True;MultipleActiveResultSets=true");
            return new ELPContext(builder.Options);
        }
    }

public class ELPContextFactory : IDbContextFactory<ELPContext>

{

public ELPContext Create(DbContextFactoryOptions options)

{

var builder = new DbContextOptionsBuilder<ELPContext>();

builder.UseSqlServer("Server=(localdb)\\mssqllocaldb;Database=ELPdb;Trusted_Connection=True;MultipleActiveResultSets=true");

return new ELPContext(builder.Options);

}

Another Try to Add Migration and … another error…

What da… !? It looks like it is an issue in EF Core v 1.1.0. Work around for it is to change version to 1.0 :/ To do it we need to modify TargetFramework in csproj file from netcoreapp1.1 to netcoreapp1.0

Another try

Add-Migration InitialMigration

1	Add-Migration InitialMigration

Uff now everything works fine.

Take a look into Solution Explorer. Here we have new classes and Migrations folder.

The last step is to execute Update-Database command in Package Manager Console.

Update-Database

1	Update-Database

Fortunately this time it worked for me in first try. I didn’t expect it will be so easy 😉

To verify it, open SQL Server Object Explorer and check it. It should create new database.

Yeah, we have created database, nice. Now we can add something to it 🙂

[EN] How to mock DbSet in Entity Framework

duck as mock

In my project ELP I decided to start with core implementation of backend side. I started with service for sign in and register user accounts. I use TDD approach, so I create test with expected result that fails at the beginning and then I implement code to pass this test.

I created MembershipService in my project that is responsible for creating accounts, validating, etc. This service uses other services like UserService for getting users from database or UserRoleService for getting user roles. Services use context, (BTW I rejected using repository pattern, maybe I will describe more about it in the future) and context contains DbSets.

 public class UserService : EntityService<User>, IUserService
    {      
        public UserService(IContext context) : base(context)
        {
        }

        public User GetUserByUsername(string username)
        {
            return _dbset.FirstOrDefault(u => u.Username == username);
        }
    }

public class UserService : EntityService<User>, IUserService

{

public UserService(IContext context) : base(context)

{

}

public User GetUserByUsername(string username)

{

return _dbset.FirstOrDefault(u => u.Username == username);

}

First problem that you can meet is how to mock this thing?

Let’s see how to write a test for method GetUserByUsername.

  [Fact]
        public void GetUserByUsernameTest()
        {
            string username = "testUser1";
            var ctx = new Mock<IContext>();
            List<User> users = new List<User>();
            users.Add(new User() { Username = username});
            var mockDbSet = ServiceTestsHelper.GetMockDbSet<User>(users);            
            ctx.Setup(c => c.Set<User>()).Returns(mockDbSet.Object);
            IUserService service = new UserService(ctx.Object);
            var result = service.GetUserByUsername(username);
            Assert.NotNull(result);
        }

[Fact]

public void GetUserByUsernameTest()

{

string username = "testUser1";

var ctx = new Mock<IContext>();

List<User> users = new List<User>();

users.Add(new User() { Username = username});

var mockDbSet = ServiceTestsHelper.GetMockDbSet<User>(users);

ctx.Setup(c => c.Set<User>()).Returns(mockDbSet.Object);

IUserService service = new UserService(ctx.Object);

var result = service.GetUserByUsername(username);

Assert.NotNull(result);

}

This is my test. I use xUnit testing framework and Moq for mocking. If you want to use it as I, you need to install it from Nuget Packages manager.

As you see I created list with one user and I want to pass it to my context, It will act like data get from database. First we need to create our DbSet for Users. I have little helper method for it. It is generic, so you can use it too.

internal static Mock<DbSet<T>> GetMockDbSet<T>(ICollection<T> entities) where T : class
        {
            var mockSet = new Mock<DbSet<T>>();
            mockSet.As<IQueryable<T>>().Setup(m => m.Provider).Returns(entities.AsQueryable().Provider);
            mockSet.As<IQueryable<T>>().Setup(m => m.Expression).Returns(entities.AsQueryable().Expression);
            mockSet.As<IQueryable<T>>().Setup(m => m.ElementType).Returns(entities.AsQueryable().ElementType);
            mockSet.As<IQueryable<T>>().Setup(m => m.GetEnumerator()).Returns(entities.AsQueryable().GetEnumerator());
            mockSet.Setup(m => m.Add(It.IsAny<T>())).Callback<T>(entities.Add);
            return mockSet;
        }

internal static Mock<DbSet<T>> GetMockDbSet<T>(ICollection<T> entities) where T : class

{

var mockSet = new Mock<DbSet<T>>();

mockSet.As<IQueryable<T>>().Setup(m => m.Provider).Returns(entities.AsQueryable().Provider);

mockSet.As<IQueryable<T>>().Setup(m => m.Expression).Returns(entities.AsQueryable().Expression);

mockSet.As<IQueryable<T>>().Setup(m => m.ElementType).Returns(entities.AsQueryable().ElementType);

mockSet.As<IQueryable<T>>().Setup(m => m.GetEnumerator()).Returns(entities.AsQueryable().GetEnumerator());

mockSet.Setup(m => m.Add(It.IsAny<T>())).Callback<T>(entities.Add);

return mockSet;

}

Ok, so first test we have completed, but there’s one more thing that I wanted to share with you.

Let’s get back to my service that I mentioned before – MembershipService. I’d like to test CreateUser method which at the end adds user entity to User’s DbSet. Problem is with verifying it if you use mocks. If you check User’s DbSet from Context class there’s nothing in it. Null. And here comes Verify method from Moq framework that helps.

Here are 3 lines of code from my testing method, it executes CreateUserMethod, so I expect User’s DbSet will contain one item and UserRole’s DbSet will contain two items.

User result = service.CreateUser("testUser1", "test@email.com", "password", new List<int>() { 1, 2 });
usersMockDbSet.Verify(m => m.Add(It.IsAny<User>()), Times.Once);
userRolesMockDbSet.Verify(m => m.Add(It.IsAny<UserRole>()), Times.Exactly(2));

User result = service.CreateUser("testUser1", "test@email.com", "password", new List<int>() { 1, 2 });

usersMockDbSet.Verify(m => m.Add(It.IsAny<User>()), Times.Once);

userRolesMockDbSet.Verify(m => m.Add(It.IsAny<UserRole>()), Times.Exactly(2));

With help of Verify method result is as expected and test is green.

If you want to read more about testing Entity Framework you can go to https://msdn.microsoft.com/en-us/library/dn314429(v=vs.113).aspx

[EN] Visual Studio 2017 in English

This time it’s short post. I’d like to share with you one thing about the newest Visual Studio 2017.

As you know I decided to write posts in English and share my experience with you, so I want to attach screenshots from Visual Studio which is in English, it’s simple isn’t it? Previous versions was in English by default, but not this time…

I decided to write about it, because it took me a while to figure it out. Maybe it’s obvious, but you can save time when you read this and you will encounter this problem.

When you install VS 2017 it decides for you what language to use by default and it’s your operation system’s language. I have Windows in Polish, so my VS was in Polish too. I noticed that some attendands DSP 2017 contest use Polish version, but it looks very weird in my opinion. I didn’t want it, so I had a small problem. How to change language?

It’s not that simple.

You can open Tools->Options->Environment-> International Setiings but there’s no English. What!? Ok, so I opened stack overflow and search for solution 😀

Working solution for it is to open VS installer and go to Modify or „Modyfikuj” in my case.

If you haven’t got it as I before, you need to update your version of VS and try again and then click on Language packages or „Pakiety językowe” when you use Polish version of Windows. Then you can choose languages you like to install.

Great, so modify your installation, open VS after it and get back to Tools->Options->Environment-> International Setiings . You will see more options 😉

[EN] Creating Angular2 CLI project

What is Angular2 CLI?

Angular2 CLI is Command Line Interface introduced by Angular team, to help us develop applications in Angular 2, through automate some operations and keep consistent project structure. You may think it’s a waste of time to learn another new thing, but I encourage you to use CLI, even if you are new to Angular. It’s even more helpful in this case, because with CLI your development will be faster and easier.

Before we start make sure you have node.js installed on your machine. If not, you can download it here https://nodejs.org/en/download/. It is essential to develop Angular applications.

Let’s start

To create new Angular2 CLI project, open your command line tool. At the beginning you need to install angular CLI, to do it type:

npm install -g @angular/cli

1	npm install -g @angular/cli

Wait for a while, take a beer or yerba mate if you prefer and come back after few minutes 😛

Then type command that will create new project, something like this:

ng new PROJECT_NAME

1	ng new PROJECT_NAME

Where PROJECT_NAME is any name for your project. As you can see you need to wait for install packages via npm, so take another beer don’t waste your time 😉

After that go to project location, dig in your project folder, type cd PROJECT_NAME. You will se new files and folders here like on image below. This is our brand new project.

And let’s do the magic. Type ng serve and you will see… an error maybe, but you should’n if everything you did before correctly. If everything works fine your console output should looks like this:

Open your browser and type http://localhost:4200 you should see:

It means you have working app! Congrats ;0

For developing our front end side of application, I recommend you Visual Studio Code Editor. You can download it here. https://code.visualstudio.com/

Open whole folder of your new application in VS Code

That’s it. Project structure and other Angular2 CLI features I will cover in the next posts.

[EN] How to create ASP.NET Core project using Visual Studio 2017

In this post I would like to show you how to create ASP.NET Core project using Visual Studio 2017. I’m using VS Community RC edition, but it’s not so important, you can use different edition. So, let’s create new empty solution and then add new Project.

I want to create ASP.NET Core Web API project. Let’s choose correct template then.

You will see new window where you can choose ASP.NET Core Template. I want to create Web API so I’m choosing it. You can choose authentication on the right hand side (Work or School Accounts or Windows Authentication), but I don’t want it. There’s also one very interesting feature here, look at the bottom of this window – there’s option to enable Docker support – WOW, but we will take a look at it maybe later 🙂 Yes, docker is also a thing that I want to learn about in practice.

Ok and project is created. It’s good to test our app if everything is ok. Push F5 and check. You should see new browser tab which displays:

[„value1″,”value2”]

Don’t worry, it means it’s fine 🙂 Project is ready, we can start to work on our API.

P	W	Ś	C	P	S	N
« Maj
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Jakub Skoczeń

.NET Developer

Category Archives: Programming

[EN] How to debug angular app in VS Code and Chrome

[EN] How to add Autofac container to ASP.NET Core app?

[EN] Angular2 – project structure, changing css to sass, using CLI

Angular2 project structure

Changing css to sass

Using CLI

[EN] Entity Framework Core – Code First migrations

[EN] How to mock DbSet in Entity Framework

[EN] Visual Studio 2017 in English

[EN] Creating Angular2 CLI project

What is Angular2 CLI?

Let’s start

[EN] How to create ASP.NET Core project using Visual Studio 2017