How to write tests for Angular validators.

Image for post
Image for post
Photo by Arian Darvishi on Unsplash

Example

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

Image for post
Image for post
All credits reserved to Karol Wons

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.

Image for post
Image for post
All credits reserved to organizers of Wrocław Typescript

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.

Type safety at runtime with JSON decoders

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).

To start using JSON decoders you can use library called…


Meetup at RST Software Masters office in Wrocław, Poland.

Image for post
Image for post
All credits reserved to RST Software Masters.

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.

Migration to Typescript

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.

Image for post
Image for post

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.

Dictionary — for what?

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…


How to show loading status by intercepting HTTP requests

Image for post
Image for post
Photo by Keith Johnston on Unsplash

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.

Store & Interceptor method

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…


Image for post
Image for post
Photo by Dmitry Chernyshov on Unsplash

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.

Library

Package…


Image for post
Image for post
Photo by Annie Spratt on Unsplash

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.

Subscription on specific FormControl value changes

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.

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!


Image for post
Image for post
Photo by Carl Heyerdahl on Unsplash

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.

Fingerprints

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.


Image for post
Image for post
Source https://unsplash.com/photos/fSWOVc3e06w

How to avoid circular dependency.

Angular provides us an easy way to dynamically create components but sometimes there’s..

Problem

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.

Circular dependency warning

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. …

Wojciech Szućko

Frontend developer — https://wojciechszucko.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store