How to write tests for Angular validators.
While creating application I often create my FormGroups inside dedicated services then they are easier for unit testing. In this example it will be FormService. It is simple service with injected FormBuilder and one method called createForm which builds form.
If you use
ng g service form you should receive second file with
.spec.ts extension. Otherwise create one by yourself.
In this example I injected FormBuilder to my service so I need to add this service as provider to my testing module. Now basic test
should be created should pass.
Meetup at Collibra’s Office in Wrocław, Poland
By Mateusz Burzyński
Developing application can be hard. Especially when after releases you have tons of bugs and new requirements. If you are in hurry you can end up with spaghetti code which is not what are you looking for.
To help you trace how your components work you can use state machine concept. It means you describe states of your component and transitions between them. State machines help to find software bugs and missing parts in your business requirements.
Mateusz showed library called XState which helps you with state machines. You can…
Meetup at Spawn Point’s office in Wrocław, Poland.
Meetup was in English and took place in the basement which looks like former gym. It was in interesting format — there were 9 lightning (small) talks each of them last maximum 5 minutes.
By Kajetan Świątek
Meetup at RST Software Masters office in Wrocław, Poland.
The whole meetup was in polish language. Meetup was well organized. I was impressed by videos that announced speakers — it looks almost like in TV.
There were three lectures — each lasts about 15–20 minutes. I prepared a little summary for each of them.
By Rafał Budzis
Rafał was describing his experience with migrations. He started with migration from PHP 5.4 to PHP 7 which didn’t went good and was failure at the end. …
Stop comparing strings.
While ago I wrote article about how to use dictionaries in Angular. They were developed by using class or enum. In this article I want to present simpler solution which you can use anywhere you want — React/Angular/Vue etc.
Let assume that you have to compare article type with some string. Maybe to show some additional content. Normally you would compare pure strings like
article.type === 'short' etc. It is easy to misspell words and can be hard to change it in several places if type change.
In those scenarios dictionary is helping you. You define…
When building an application, one key feature is to show the loading status for HTTP requests.
In this piece, I’ll walk you through how to use an interceptor to intercept all HTTP requests.
There are several approaches to showing the loader, such as doing it dynamically or using structural directives. I will show you both using NGXS store to retrieve the loading status.
Create a new file which will contain your interceptor. I named mine
As you can see, we are dispatching two actions in the interceptor. Before our request, we are dispatching
ShowLoaderAction, and when it is…
Inspired by @ngrx/entity
We need to do some work for every collection so I decided to make own entity adapter inspired by @ngrx/entity-adapter.
In clean way.
Suppose you have component with Reactive Form in it. On some FormControl value changes you want to emit event using
EventEmitter object. You can achieve it in multiple ways.
Both methods are working solution but don’t really look clean. If you care how your code looks, you should go with the third solution.
Custom emitEvent directive. It emits new events whenever value is changed also it deals with subscription by invoking
unsubscribe method for you.
To see power of directive just pass event emitter to it.
Maybe you know better solution, if so please share it!
In Angular apps I use RavenJS for logging errors to Sentry. On the beginning I just use
Raven.captureException() to log errors from app but then I go deeper and found two useful features to help log API errors. See these features below.
When you want to be sure your API errors will be group properly you can use fingerprints. Fingerprint is just simple string to identify error. It’s really useful whenever you have endpoint with dynamic parameters like id because sentry sometimes doesn’t group it correctly.
To log all data from error object we can pass additional data to our log. Let’s modify
log method from previous example.
You use sentry and ravenjs like me? Please share your thoughts about useful features.
How to avoid circular dependency.
Angular provides us an easy way to dynamically create components but sometimes there’s..
Let’s assume we have two components and service to dynamically render components. Render service have method called
render. Which accept component type as argument for example
Component one is using our service to
render component two and component two is using our service to
render component one.
It’s happening because component one is importing component two while component two is importing component one. Mess, right?
Recently I discovered a pretty funky way to solve this problem. …