MockMatchMedia doesn't register overlaps ranges

Bug Report

What is the expected behavior?

When using MockMatchMedia for mocking activation of breakpoint range it doesn’t properly register overlapped ranges.

it('should return correct activation state', inject([
  ɵMatchMedia,
  MediaObserver,
], (
  matchMedia: ɵMockMatchMedia,
  media: MediaObserver,
) => {
  matchMedia.activate('xs', true);
  expect(media.isActive('xs')).toBe(true); // works
  expect(media.isActive('sm')).toBe(false);
  expect(media.isActive('lt-sm')).toBe(true); // doesn't work
  expect(media.isActive('gt-sm')).toBe(false);
  expect(media.isActive('md')).toBe(false);
  expect(media.isActive('lt-md')).toBe(true); // doesn't work
  expect(media.isActive('gt-md')).toBe(false);
  expect(media.isActive('lg')).toBe(false);
  expect(media.isActive('lt-lg')).toBe(true); // doesn't work
  expect(media.isActive('gt-lg')).toBe(false);
  expect(media.isActive('xl')).toBe(false);
  expect(media.isActive('lt-xl')).toBe(true); // doesn't work
  expect(media.isActive('gt-xl')).toBe(false);
}))

In general it should work as described in unit test provided in here without need to manualy register aliases.

What is the current behavior?

it('should return correct activation state', inject([
  ɵMatchMedia,
  MediaObserver,
], (
  matchMedia: ɵMockMatchMedia,
  media: MediaObserver,
) => {
  matchMedia.activate('xs', true);
  expect(media.isActive('xs')).toBe(true);
  expect(media.isActive('sm')).toBe(false);
  expect(media.isActive('lt-sm')).toBe(false);
  expect(media.isActive('gt-sm')).toBe(false);
  expect(media.isActive('md')).toBe(false);
  expect(media.isActive('lt-md')).toBe(false);
  expect(media.isActive('gt-md')).toBe(false);
  expect(media.isActive('lg')).toBe(false);
  expect(media.isActive('lt-lg')).toBe(false);
  expect(media.isActive('gt-lg')).toBe(false);
  expect(media.isActive('xl')).toBe(false);
  expect(media.isActive('lt-xl')).toBe(false);
  expect(media.isActive('gt-xl')).toBe(false);
}))

Similar for other ranges activation with useOverlaps to true activates sets activation only to activated alias and for no overlaps. For those test to pass correctly we need to manualy register ranges like this:

beforeEach(() => {
    const matchMedia = TestBed.get(ɵMatchMedia) as any as ɵMockMatchMedia;
    [
      'xl',
      'lt-xl',
      'gt-lg',
      'lg',
      'lt-lg',
      'gt-md',
      'md',
      'lt-md',
      'gt-sm',
      'sm',
      'lt-sm',
      'gt-xs',
      'xs',
    ].forEach((alias) => {
      // as any to get to private methods available in ɵMockMatchMedia
      (matchMedia as any)._registerMediaQuery((matchMedia as any)._validateQuery(alias));
    });
  });

What are the steps to reproduce?

See those tests

What is the use-case or motivation for changing an existing behavior?

To be able to use ɵMockMatchMedia as mocking mechanism for unit tests without needing to hack into private methods that are already available there.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on Angular 8 so that is on "@angular/flex-layout": "^8.0.0-beta.27",

Is there anything else we should know?

Having documentation for ɵMatchMedia, ɵMockMatchMedia, ɵMockMatchMediaProvider would be nice to have. Reading through source code to be able to use it is quite time consuming.

[CaerusKaru]

@Xesenix we may well add a testing API if/when the library goes into full release (eg non-beta). In the meantime it is not.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}