NgRx v7.0 included the released of a new @ngrx/store/testing module that features a mock Store to be used in testing NgRx applications. The module was introduced in #1027 with some documentation following in #1591.

Note: You can use this API and functionality in NgRx v5 and v6 using the standalone ngrx-mockstore package.

Currently, the documentation is light and doesn’t include a complete working code sample. I’ll provide two examples that should help clear things up.

Existing: StoreModule

It has been possible to condition the NgRx store in a unit test by providing the StoreModule in the testing module configuration. The StoreModule creates…

A common use of the RxJs filter operator is to only allow or prevent certain types from being passed to the next pipe operator or subscribe function.

const scrollEvents$ = router.events.pipe(
  filter(event => event instanceof Scroll)
);

However, you’ll notice in the above snippet that scrollEvents$ is inferred to be of type Observable<Event> instead of Observable<Scroll>. This inability to correctly infer type is not an issue with RxJs, but rather Typescript (open issues: #10734 and #16069).

Review: Type Checking in Typescript

Feel free to skip this section if you are familiar with type checking in Typescript.

Primitives

You can use typeof to check the primitive type:

…

Motivation

Angular is a fast evolving framework. At a similar pace, there is a growing set of tools to improve our usage of it, including UI tests. Although Protractor is the Angular designated UI testing framework, there has been excitement about Cypress.

Most development teams who use one UI testing framework wouldn’t dare switch, because it would include a total rewrite of their suite.

What if we used a UI testing pattern that allowed us to swap frameworks in and out more easily?

In addition to changing testing frameworks, as a part of the development lifecycle, front-end application are subject to…

Many Angular developers chose to use Angular Material because it provides a huge set of components that reduce the complexity of building user experiences. One of my favorites has been the Dialog component.

The default functionality provided by Material allows developers to launch a dialog by injecting the MatDialog service in a component’s constructor, then calling the service's open function, passing in the component to be shown in a dialog. We can also pass data to the dialog component and configure the layout of the dialog:

But as users of the web, we expect to be able to navigate…

Inspiration

Angular Version 6.1 added the “Scroll Position Restoration” feature. It allows configuration of the scroll position on navigation.

`ScrollPositionRestoration` has been added to the option of the second argument of `RouterModule.forRoot` method, usually imported in the App Module. It includes three options with the following functionality:

* ‘disabled’ — does nothing (default).

* ‘top’ — set the scroll position to 0,0..

* ‘enabled’ — set the scroll position to the stored position. This option will be the default in

In my use case, the three “out of the box” solutions did not provide my desired solution. I want the same…