Process of testing with TypeORM and Nestjs, and jest using mocks? - testing

This question can likely be generalized to stubbing repositories in a service and how to properly test and provide coverage in the context of this question.
I am in the process of learning more about testing, but am stuck with how to properly perform testing that involves the DB.
I have a User entity that defines the columns and some initial validation logic.
import { IsAlphanumeric, IsEmail, MinLength } from 'class-validator';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
#Entity()
export class User {
#PrimaryGeneratedColumn()
public id!: number;
#Column()
public name!: string;
#IsEmail()
#Column()
public email!: string;
#MinLength(8)
#Column()
public password!: string;
}
And I have a UserService that injects the Repository for the entity.
import { Injectable } from '#nestjs/common';
import { InjectRepository } from '#nestjs/typeorm';
import { validateOrReject } from 'class-validator';
import { Repository } from 'typeorm';
import { CreateUserDTO } from './dto/create-user.dto';
import { User } from './user.entity';
#Injectable()
export class UserService {
constructor(
#InjectRepository(User) private readonly userRepository: Repository<User>
) {}
public async create(dto: CreateUserDTO) {
const user = this.userRepository.create(dto);
await validateOrReject(user);
await this.userRepository.save(user);
}
public async findAll(): Promise<User[]> {
return await this.userRepository.find();
}
public async findByEmail(email: string): Promise<User | undefined> {
return await this.userRepository.findOne({
where: {
email,
},
});
}
}
And here is my preliminary test so you can follow my train of thought...
import { Test, TestingModule } from '#nestjs/testing';
import { getRepositoryToken } from '#nestjs/typeorm';
import { User } from './user.entity';
import { UserService } from './user.service';
const createMock = jest.fn((dto: any) => {
return dto;
});
const saveMock = jest.fn((dto: any) => {
return dto;
});
const MockRepository = jest.fn().mockImplementation(() => {
return {
create: createMock,
save: saveMock,
};
});
const mockRepository = new MockRepository();
describe('UserService', () => {
let service: UserService;
beforeAll(async () => {
const module: TestingModule = await Test.createTestingModule({
providers: [
UserService,
{
provide: getRepositoryToken(User),
useValue: mockRepository,
},
],
}).compile();
service = module.get<UserService>(UserService);
});
it('should be defined', () => {
expect(service).toBeDefined();
});
it('should not create invalid user', async () => {
// ??
});
});
So while I can make the test run and everything, I am not sure what I am actually supposed to be testing. I can obviously test that it validates on create, and for other things like findAll, I feel like I am just mocking the database? For me to properly test this, would it need to be connected to a database so I can check that the right data is returned?
The nest documents say "we usually want to avoid any database connection", but doesn't doing that defeat the purpose since we aren't really testing the functionality? Because while I can mock that the save returns a value, I am not testing for any errors that can occur with unique columns, nullable data, incrementing values to be set, etc... right?

Many see it as bad practice to test against a db. But for exactly the reasons you mention + saving myself the hassle of managing the mocks and stubs, I nearly always run my tests against a dedicated test-database.
In my jest start-up I clear out all tables and then have helpers which help me create entities with relations as needed, to ensure that my test remain atomic.

What #AyKarsi suggest is better than nothing, but it's still a bad practice.
Unit testing should mock databases and third party API calls.
Integration testing should test what has been mocked with the real database, and that part only.
End-to-end testing is there to check that the whole app is well connected altogether.
For more details, you can read : https://martinfowler.com/articles/practical-test-pyramid.html

Related

How can I use type-graphql and RESTDataSource

I wonder how it is possible to use RESTDataSource in type-graphql and thus cache correctly in a redis. I would be grateful for a small example.
At the moment I use the DI container to get a service, which is extended from the RestDataSource class, but this is not the right way.
BookmarkResolver.ts
import { Resolver, FieldResolver, Root, Query, Ctx, Authorized } from 'type-graphql';
import { DealService } from '../service/DealService';
import { AvailableLocale } from '../enum/AvailableLocale';
import { Bookmark } from '../entity/Bookmark';
#Resolver(_of => Bookmark)
export class BookmarkResolver {
constructor(private dealService: DealService) {}
#FieldResolver()
async wordpressDeal(#Root() bookmark: Bookmark) {
return await this.dealService.getDealById(bookmark.item_id, AvailableLocale.STAGING);
}
}
DealService.ts
import { Service } from 'typedi';
import { AbstractService } from './AbstractService';
import { AvailableLocale } from '../enum/AvailableLocale';
#Service()
export class DealService extends AbstractService {
baseURL = process.env.DEAL_SERVICE_URL;
async getDealById(dealId: string | number, locale: AvailableLocale) {
const response = await this.get(
'deals/' + dealId,
{ locale }
);
return this.dealReducer(response);
}
dealReducer(deal: any) {
return {
id: deal.id || 0,
title: deal.title
};
}
}
AbstractService.ts
import { RESTDataSource, HTTPCache } from 'apollo-datasource-rest';
import { Service } from 'typedi';
#Service()
export class AbstractService extends RESTDataSource {
constructor() {
super();
this.httpCache = new HTTPCache();
}
}
Share the RESTDataSource via ApolloServer's context. Use it in the resolver by accessing the context with the #Ctx() decorator.
1. Define a RESTDataSource
Define the data source according to the apollo-datasource-rest example.
export class TodoDataSource extends RESTDataSource {
constructor() {
super();
this.baseURL = "https://jsonplaceholder.typicode.com/todos";
}
async getTodos(): Promise<Todo[]> {
return this.get("/");
}
}
2. Create an instance of the DataSource and put it in the Context
When you start the server, add data sources to the context by defining a function that creates the data sources.
const server = new ApolloServer({
schema,
playground: true,
dataSources: () => ({
todoDataSource: new TodoDataSource(),
}),
});
3. Access the DataSource in the resolver
Use the #Ctx() decorator to access the context in the resolver so you can use the data source.
#Resolver(Todo)
export class TodoResolver {
#Query(() => [Todo])
async todos(#Ctx() context: Context) {
return context.dataSources.todoDataSource.getTodos();
}
}
Full, runnable example at https://github.com/lauriharpf/type-graphql-restdatasource

Vuex-module-decorator, modifying state inside an action

Using the vuex-module-decorator I have a authenticate action that should mutate the state.
#Action
public authenticate(email: string, password: string): Promise<Principal> {
this.principal = null;
return authenticator
.authenticate(email, password)
.then(auth => {
const principal = new Principal(auth.username);
this.context.commit('setPrincipal', principal);
return principal;
})
.catch(error => {
this.context.commit('setError', error);
return error;
});
}
// mutations for error and principal
But this fail with the following message:
Unhandled promise rejection Error: "ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an #Action?
That works only in dynamic modules.
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
What I don't understand is that it works well with #MutationAction and async. However I miss the return type Promise<Principal>.
#MutationAction
public async authenticate(email: string, password: string) {
this.principal = null;
try {
const auth = await authenticator.authenticate(email, password);
return { principal: new Principal(auth.username), error: null };
} catch (ex) {
const error = ex as Error;
return { principal: null, error };
}
}
--
At this time I feel blocked and would like to have some help to implement an #Action that can mutate the state and return a specific type in a Promise.
Just add rawError option to the annotation so it becomes
#Action({rawError: true})
And it display error normally. this is because the the library "vuex-module-decorators" wrap error so by doing this you will able to get a RawError that you can work with
You can vote down this answer if you would like because it isn't answering the specific question being posed. Instead, I am going to suggest that if you are using typescript, then don't use vuex. I have spent the past month trying to learn vue /vuex and typescript. The one thing I am committed to is using typescript because I am a firm believer in the benefits of using typescript. I will never use raw javascript again.
If somebody would have told me to not use vuex from the beginning, I would have saved myself 3 of the past 4 weeks. So I am here to try and share that insight with others.
The key is Vue 3's new ref implementation. It is what really changes the game for vuex and typescript. It allows us to not have to rely on vuex to automatically wrap state in a reactive. Instead, we can do that ourselves with the ref construct in vue 3. Here is a small example from my app that uses ref and a typescript class where I was expecting to use vuex in the past.
NOTE1: the one thing you lose when using this approach is vuex dev tools.
NOTE2: I might be biased as I am ported 25,000 lines of typescript (with 7000 unit tests) from Knockout.js to Vue. Knockout.js was all about providing Observables (Vue's ref) and binding. Looking back, it was kind of ahead of its time, but it didn't get the following and support.
Ok, lets create a vuex module class that doesn't use vuex. Put this in appStore.ts. To simplify it will just include the user info and the id of the club the user is logged into. A user can switch clubs so there is an action to do that.
export class AppClass {
public loaded: Ref<boolean>;
public userId: Ref<number>;
public userFirstName: Ref<string>;
public userLastName: Ref<string>;
// Getters are computed if you want to use them in components
public userName: Ref<string>;
constructor() {
this.loaded = ref(false);
initializeFromServer()
.then(info: SomeTypeWithSettingsFromServer) => {
this.userId = ref(info.userId);
this.userFirstName = ref(info.userFirstName);
this.userLastName = ref(info.userLastName);
this.userName = computed<string>(() =>
return this.userFirstName.value + ' ' + this.userLastName.value;
}
}
.catch(/* do some error handling here */);
}
private initializeFromServer(): Promise<SomeTypeWithSettingsFromServer> {
return axios.get('url').then((response) => response.data);
}
// This is a getter that you don't need to be reactive
public fullName(): string {
return this.userFirstName.value + ' ' + this.userLastName.value;
}
public switchToClub(clubId: number): Promise<any> {
return axios.post('switch url')
.then((data: clubInfo) => {
// do some processing here
}
.catch(// do some error handling here);
}
}
export appModule = new AppClass();
Then when you want to access appModule anywhere, you end up doing this:
import { appModule } from 'AppStore';
...
if (appModule.loaded.value) {
const userName = appModule.fullName();
}
or in a compositionApi based component. This is what would replace mapActions etc.
<script lang="ts">
import { defineComponent } from '#vue/composition-api';
import { appModule } from '#/store/appStore';
import footer from './footer/footer.vue';
export default defineComponent({
name: 'App',
components: { sfooter: footer },
props: {},
setup() {
return { ...appModule }
}
});
</script>
and now you can use userId, userFirstName, userName etc in your template.
Hope that helps.
I just added the computed getter. I need to test if that is really needed. It might not be needed because you might be able to just reference fullName() in your template and since fullName() references the .value variables of the other refs, fullName might become a reference itself. But I have to check that out first.
I sugest this simple solution, work fine for me 👌:
// In SomeClassComponent.vue
import { getModule } from "vuex-module-decorators";
import YourModule from "#/store/YourModule";
someMethod() {
const moduleStore = getModule(YourModule, this.$store);
moduleStore.someAction();
}
If the action has parameters, put them.
Taken from: https://github.com/championswimmer/vuex-module-decorators/issues/86#issuecomment-464027359

How to make Testing with Angular 6 and Apollo client for GraphQl

I'm trying to make test development with Angular 6 and GraphQl but we really don't know how to do as the best way possible. I have tried to find something on the internet that explains this, but nothing really good has been found.
I'll post my case here looking for someone who could help me to do, or someone who could tell me any tutorial/web to find more and good information.
The problem
I want to test an Auth. I have an auth.service.js and the respective spec.js. You can see it below:
AUTH_SERVICE_TS
import { Injectable } from '#angular/core';
import { Store } from '#ngrx/store';
import * as UserActions from './../../store/user/actions';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
import { Router } from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class AuthService {
user;
constructor(private store: Store<any>, private apollo: Apollo, private router: Router) {
this.store.select('state').subscribe(state => this.user = state);
}
/**
* Function that check the email and password for login
* #param email
* #param password
*/
login(email: string, password: string) {
this.apollo.mutate({
mutation: this.loginRequestGql(),
variables: {
email: email,
password: password
}
}).subscribe(value => {
const data = value.data.login;
this.saveUserData(data);
this.router.navigate(['/app']);
});
}
/**
* Function that save user data in the store and in the session storage
* #param data
*/
saveUserData(data) {
this.store.dispatch(new UserActions.Login({token: data.token}));
this.setSessionStorage(this.user);
}
/**
* Function that remove user info in the store
*/
logout() {
this.store.dispatch(new UserActions.Logout());
this.setSessionStorage(this.user);
}
/**
* Function that create the request with Graphql sintax
*/
loginRequestGql() {
return gql`
mutation Login($email: String!, $password: String!) {
login(email: $email, password: $password) {
token
}
}
`;
}
/**
* Function that save in the session storage the data parameter
* #param data
*/
setSessionStorage(data) {
sessionStorage.setItem('session', JSON.stringify(data));
}
}
AUTH_SERVICE_SPEC_TS
import { TestBed, inject } from '#angular/core/testing';
import { ApolloTestingController, ApolloTestingModule } from "apollo-angular/testing";
import { RouterTestingModule } from '#angular/router/testing';
import { AuthService } from './auth.service';
import { Store, StoreModule } from '#ngrx/store';
import { reducer } from '../../store/user/reducer';
describe('AuthService', () => {
let backend: ApolloTestingController;
let authService: AuthService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ RouterTestingModule, ApolloTestingModule, StoreModule.forRoot({ state: reducer }) ],
providers: [ AuthService,
{ provide: ApolloTestingModule, useClass: ApolloTestingModule }
]
});
});
beforeEach(() => {
backend = TestBed.get(ApolloTestingController);
authService = TestBed.get(AuthService);
});
it('should be created', inject([AuthService], (service: AuthService) => {
expect(service).toBeTruthy();
}));
it('should test login', (done) => {
const email = 'diego#mail.com';
const password = '123456';
// const a = authService.login(email, password);
// expect(a).toBe(TEST_RESPONSE['data'].login.token);
// authService.login(email, password);
// backend.expectOne(authService.loginRequestGql).flush(TEST_RESPONSE);
});
});
const TEST_RESPONSE: Object = {
"data": {
"login": {
"token": "eyJ0eXAiOiJKLCJhbGciOiJSUzI1NiIsImp0aSI6IjZjZDBjMDMXX0.as7-r_nlYfJ2w3CfOqwtLcTlBg5LrwFcm_ZXZ_GzCl5Qq0GS92r5tqGJtFzRfG02PPoLZ8uwsbgLj-5v2pYBXHjBLZvbjnW_zgXRLoDEcrBDpfPAoVH85ca_hb_xVaIgEUGumUPfn2IOx0Ce8fLlqtWGqoWtWzcCE
}
};
Thanks in advance to the community!! Hope you can help me!!
PD: If you need more information, just request and i'll give.
In one of recent versions of apollo-angular we released a testing utilities. Testing technique is pretty much similar to how you test HttpClient in Angular.
To learn more about how to test components and services that uses Apollo, please read the official documentation about it.
https://www.apollographql.com/docs/angular/guides/testing.html
It seems we cannot use expectOne with a simple DocumentNode parameter when doing a mutation.
So instead of:
backend.expectOne(authService.loginRequestGql).flush(TEST_RESPONSE);
we must pass to expectOne a function which asserts the operation's query definition is the expected one:
backend.expectOne((operation) => {
expect(operation.query.definitions).toEqual(mutation.definitions);
return true;
})
.flush(TEST_RESPONSE);

Typeahead: how to force the change detection

I have a question regarding the TypeAhead as I didn't want to pollute the git space backlog.
I setup the typeahead to work with my own observable based on the async demo (I'm pulling the google prediction data) and the typehead kind of works, but has the refresh (or change detection) issue where I'm typing the correct address but the highlighted results are always one or two letters 'behind' in terms of highlighting, or the results are missing as the search might have been narrowed down. The component does update if I for example press the key left or right, which tells me there must be some detection issue.
If there any way I could force it do detect changes? I've tried to run the change detector right after the asyncaction but that didn't help. Thanks heaps
Here is the stackblitz code
https://stackblitz.com/edit/angular-ufgm4x
To see what I struggle to understand where is the delay, try to follow these steps:
quickly type in e.g. '30 Manni'
wait for the response, wait a little, let's say 3 sec
then press 'k' and wait and don't interact with the app...wait and then only after couple of seconds the component updates (match highlight). Or press 'k', wait a little and interact with the app and you will see the highlight kicks-in.
It appears that this is not the google place lookup response time as they are quite good. There must be something else.
This odd behavior is especially noticeable with the search delay
[typeaheadWaitMs]="1000"
export class TypeaheadComponent {
asyncSelected: string;
typeaheadLoading: boolean;
typeaheadNoResults: boolean;
dataSource: Observable<any>;
constructor(private geocoder: GeocodeService,
private chd: ChangeDetectorRef,
private zone: NgZone) {
this.dataSource = Observable.create((observer: any) => {
// Runs on every search
observer.next(this.asyncSelected);
}).mergeMap((token: string) => this.geocoder.getSuggestions(token)).do(() => {
setTimeout(() => {
this.chd.detectChanges(); // --> Doesn't do anything
}, 200);
});
}
changeTypeaheadLoading(e: boolean): void {
this.typeaheadLoading = e;
}
typeaheadOnSelect(e: TypeaheadMatch): void {
console.log('Selected value: ', e.value);
}
}
public getSuggestions(keyword: string): Observable<object> {
if (typeof google === 'undefined') {
return new Observable<object>();
}
const autocompleter = new google.maps.places.AutocompleteService();
return new Observable<object>((observer) => {
// Prepare the callback for the autocomplete
const onPredictionsReady = (predictions: any[]) => {
observer.next(predictions || []);
observer.complete();
};
// do the search
autocompleter.getPlacePredictions({ input: keyword }, onPredictionsReady);
});
}
I had the same problem, here's how I solved it:
My service:
import {Injectable} from '#angular/core';
import {MapsAPILoader} from '#agm/core';
import {Observable} from 'rxjs/Rx';
import {} from 'googlemaps';
#Injectable()
export class GooglePlacesService {
googleAutocompleteService;
constructor(private mapsAPILoader: MapsAPILoader) {
this.mapsAPILoader.load().then(() => {
this.googleAutocompleteService = new google.maps.places.AutocompleteService();
});
}
getPredictions(inputText: string) {
const callback = this.googleAutocompleteService.getPlacePredictions.bind(this.googleAutocompleteService);
const observable = Observable.bindCallback(callback, (predictions, status) => {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
return [];
} else {
return predictions;
}
});
return observable({
input: inputText
});
}
}
My component (ts):
import {Component, NgZone, OnInit} from '#angular/core';
import {} from 'googlemaps';
import {Observable} from 'rxjs/Observable';
import AutocompletePrediction = google.maps.places.AutocompletePrediction;
import {GooglePlacesService} from '../../api/google-places.service';
#Component({
selector: 'search-location-input',
templateUrl: './search-location-input.component.html',
styleUrls: ['./search-location-input.component.css']
})
export class SearchLocationInputComponent implements OnInit {
inputText = '';
predictions: Observable<AutocompletePrediction[]>;
constructor(private googlePlacesService: GooglePlacesService,
private ngZone: NgZone) {
}
ngOnInit() {
this.predictions = Observable.create((observer: any) => {
this.googlePlacesService.getPredictions(this.inputText)
.subscribe((result: any) => {
this.ngZone.run(() => observer.next(result));
});
});
}
}
My component (html):
<input [(ngModel)]="inputText"
[typeahead]="predictions"
typeaheadOptionField="description"
[typeaheadWaitMs]="200"
type="text">

Testing Angular2 with Jasmine. Class property not being set

I am currently writing tests for my Angular2 (with Typescript) application and all has been fine and dandy so far, that is until I have attempted to start testing one of my services.
This service has the Angular2 Http module injected on instantiation as shown below:
import { Injectable, EventEmitter } from 'angular2/core';
import { Http } from 'angular2/http';
import 'rxjs/add/operator/map';
import { ConfigObject } from '../ConfigObject';
import { HTTPHelper } from '../helpers/HTTPHelper';
import { Category } from '../classes/Category';
#Injectable()
export class CategoryService {
public emitter: EventEmitter<Category>;
constructor(private _http: Http) {
this.emitter = new EventEmitter();
}
private APIUrl = ConfigObject.productBox + ConfigObject.apiVersion + 'category';
getCategories(filters) {
return this._http.get(this.APIUrl + HTTPHelper.convertVarsToString(filters))
.map(res => res.json());
}
public emitCat(category): void {
this.emitter.emit(category);
}
}
This is then used to make GET requests to an API box I have created.
Here is my Jasmine test spec file for the service:
import { CategoryService } from '../../services/category.service';
import { Http } from 'angular2/http';
describe('Category service', () => {
let testCategoryService: CategoryService;
let _http: Http;
beforeEach(function() {
testCategoryService = new CategoryService(Http);
});
it('should have emitter name set', () => {
expect(testCategoryService.emitter._isScalar).toBeDefined();
});
it('should return categories', () => {
testCategoryService.getCategories({
order : 'asc',
order_by : 'name',
parent_id : 0,
});
});
});
As you can see, am including the Http object here too and injecting it into the test instantiation of my service class before each test on this line:
beforeEach(function() {
testCategoryService = new CategoryService(Http);
});
When I try and test the 'getCategories' function on my service class I get the following error:
TypeError: this._http.get is not a function
Which is odd as as far as I am concerned I am injecting the Http service into my test instantiation on the line above so this should be set in the class constructor?
Can anyone see why the Http object in my class is not being set?
Thanks