DEV Community: Jay Vincent

Creating Observables from an array of sequentially completing Promises

Jay Vincent — Thu, 02 Jan 2020 19:00:43 +0000

A super-quick post from me today, as I wanted to share some newly acquired knowledge.

Let's say you have an array of data, userIds in this example:

export class PageComponent {
  userIds = ['user_1', 'user_2', 'user_3'];
}

And you want to create an Observable stream of User objects from an API request, where each API request is run in sequence - ie. the request for user_2 won't be made until user_1 has resolved. How would you do it?

Let's assume we have a function which returns a promise of our User object.

You may be tempted to map over the userIds and use Promise.all like so:

export class PageComponent {
  userIds = ['user_1', 'user_2', 'user_3'];
  users: User[];

  async ngOnInit(): void {
    this.users = await Promise.all([
      ...this.userIds.map(userId => this.userService.getUser(userId))
    ]);
  }
}

However, this will make all asynchronous calls at the same time and won't set this.users until all inner promises have resolved.

Observables are a much better pattern for this kind of use-case.

What we want to do is create an Observable from the userIds array with the rxjs from function, then use the concatMap operator to map each userId to an inner observable (or promise in this case), which won't be subscribed to until the previous one has completed.

export class PageComponent {
  userIds = ['user_1', 'user_2', 'user_3'];
  users$: Observable<User>;

  ngOnInit(): void {
    this.users$ = from(this.userIds).pipe(
      concatMap(userId => this.userService.getUser(userId))
    );
  }
}

When subscribed to, this observable will request and emit each user in sequence, emitting 3 User objects over time before completing.

Bonus points - use `scan` to accumulate values over time

Let's say you wanted the Observable to build up an array of User objects over time and not just emit individual User objects. Let's use the rxjs scan operator!

export class PageComponent {
  userIds = ['user_1', 'user_2', 'user_3'];
  users$: Observable<User[]>;

  ngOnInit(): void {
    this.users$ = from(this.userIds).pipe(
      concatMap(userId => this.userService.getUser(userId)),
      scan((acc, curr) => acc.push(curr), [])
    );
  }
}

Et voila! Simply loop over users$ | async in your template and watch your user list grow.

The power and magic of rxjs and Observables everybody :)

Testing the ScrollToTop component in React with Enzyme and Jest

Jay Vincent — Wed, 17 Jul 2019 13:00:35 +0000

If you’ve implemented React Router in an application with long pages, you will have no doubt noticed that the scroll position doesn’t get reset when the location changes.

React Training recommend a neat little component to wrap around your App component, which will reset the scroll position to 0 when it detects a change in location:

import React from 'react';
import { withRouter } from 'react-router';
class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);

To ensure the component is doing what we expect, let’s write some unit tests for this component.

We want to test that:

The component calls window.scrollTo with the correct parameters when location changes.
It renders nested components correctly.

Let’s set up our test file:

import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
global.scrollTo = jest.fn();
describe('ScrollToTop', () => {
  let wrapper;
  let history;
  beforeEach(() => {
    wrapper = mount(
      <MemoryRouter initialEntries={['/']}>
        <ScrollToTop>
          <p>Hi</p>
        </ScrollToTop>
      </MemoryRouter>
    );
    history = wrapper.instance().history;
  });
  afterEach(() => {
    jest.clearAllMocks();
  });
});

Firstly, we create a spy for the window.scrollTo method. Jest uses global as the window object, so we do this by assigning the spy to global.scrollTo.

We mount our ScrollToTop component within MemoryRouter and get a reference to the mounted components history.

We then make sure to reset our spy method after each test.

With the set-up done, we are ready to write some tests!

it('calls window.scrollTo when route changes', () => {
  expect(global.scrollTo).not.toHaveBeenCalled();
  history.push('/new-url');
  expect(global.scrollTo).toHaveBeenCalledWith(0, 0);
});

We call history.push just as we would in our application. This will activate a route change within MemoryRouter which will then pass through updated props to the ScrollToTop component, triggering the componentDidUpdate lifecycle method.

We can then assert that our spy method has been called with the correct parameters.

Lastly, we write a test to ensure ScrollToTop is rendering it’s nested components as expected.

it('it renders children', () => {
  const component = wrapper.find(ScrollToTop);
  expect(component.children().length).toEqual(1);
  expect(component.contains(<p>Hi</p>)).toEqual(true);
});

And we are done! I hope this proves useful to someone wanting to test a component that reacts to router events.

DEV Community: Jay Vincent

Creating Observables from an array of sequentially completing Promises

Bonus points - use scan to accumulate values over time

Testing the ScrollToTop component in React with Enzyme and Jest

Bonus points - use `scan` to accumulate values over time