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
Typescript is just plain Javascript under the hood. One of the thing you should know is that interfaces and types disappear after the compilation. So Typescript cannot do validation at the runtime but to the rescue comes JSON decoders (JSON decoders itself comes from ELM).
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 loader.interceptor.ts
.
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
Lately I started my learning Vue.js path. Was working on my household finances app using Vue, Vue-router and Vuex. In app there finance operations and goals collections which I need to manage somehow. It can be a lot of work to manage collections in JavaScript, for example to edit some object in collection, first you need to find index in collection and then assign to this specific index a new object (maybe there’s more elegant way?).
We need to do some work for every collection so I decided to make own entity adapter inspired by @ngrx/entity-adapter.
Package…
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 OneComponent
.
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. …