it('should show ripples by default', () => {
      expect(optionInstance.disableRipple).toBeFalsy('Expected ripples to be enabled by default');
      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
        .toBe(0, 'Expected no ripples to show up initially');

      dispatchFakeEvent(optionNativeElement, 'mousedown');
      dispatchFakeEvent(optionNativeElement, 'mouseup');

      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
        .toBe(1, 'Expected one ripple to show up after a fake click.');
    });

    it('should not execute the global events in the Angular zone', () => {
      const spy = jasmine.createSpy('zone unstable callback');
      const subscription = fixture.ngZone!.onUnstable.subscribe(spy);

      scroll.scrolled(0, () => {});
      dispatchFakeEvent(document, 'scroll');
      dispatchFakeEvent(window, 'resize');

      expect(spy).not.toHaveBeenCalled();
      subscription.unsubscribe();
    });

    it('should be able to unsubscribe from the global scrollable', () => {
      const spy = jasmine.createSpy('global scroll callback');
      const subscription = scroll.scrolled(0).subscribe(spy);

      dispatchFakeEvent(document, 'scroll', false);
      expect(spy).toHaveBeenCalledTimes(1);

      subscription.unsubscribe();
      dispatchFakeEvent(document, 'scroll', false);

      expect(spy).toHaveBeenCalledTimes(1);
    });

    it('should not show ripples if the ripples are disabled using disableRipple', () => {
      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
        .toBe(0, 'Expected no ripples to show up initially');

      optionInstance.disableRipple = true;
      fixture.detectChanges();

      dispatchFakeEvent(optionNativeElement, 'mousedown');
      dispatchFakeEvent(optionNativeElement, 'mouseup');

      expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
        .toBe(0, 'Expected no ripples to show up after click when ripples are disabled.');
    });

        fakeAsync(() => {
      // Listen for notifications from scroll directive
      const scrollable = fixture.componentInstance.scrollable;
      const directiveSpy = jasmine.createSpy('directive scroll callback');
      scrollable.elementScrolled().subscribe(directiveSpy);

      // Listen for notifications from scroll service with a throttle of 100ms
      const throttleTime = 100;
      const serviceSpy = jasmine.createSpy('service scroll callback');
      scroll.scrolled(throttleTime).subscribe(serviceSpy);

      // Emit a scroll event from the scrolling element in our component.
      // This event should be picked up by the scrollable directive and notify.
      // The notification should be picked up by the service.
      dispatchFakeEvent(fixture.componentInstance.scrollingElement.nativeElement, 'scroll', false);

      // The scrollable directive should have notified the service immediately.
      expect(directiveSpy).toHaveBeenCalled();

      // Verify that the throttle is used, the service should wait for the throttle time until
      // sending the notification.
      expect(serviceSpy).not.toHaveBeenCalled();

      // After the throttle time, the notification should be sent.
      tick(throttleTime);
      expect(serviceSpy).toHaveBeenCalled();
    }));

    it('should run the resize event outside the NgZone', () => {
      const spy = jasmine.createSpy('viewport changed spy');
      const subscription = ruler.change(0).subscribe(() => spy(NgZone.isInAngularZone()));

      dispatchFakeEvent(window, 'resize');
      expect(spy).toHaveBeenCalledWith(false);
      subscription.unsubscribe();
    });

    it('should not execute the scrollable events in the Angular zone', () => {
      const spy = jasmine.createSpy('zone unstable callback');
      const subscription = fixture.ngZone!.onUnstable.subscribe(spy);

      dispatchFakeEvent(fixture.componentInstance.scrollingElement.nativeElement, 'scroll', false);

      expect(spy).not.toHaveBeenCalled();
      subscription.unsubscribe();
    });