diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 08a97ade0a72..180c8ee49428 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -49,7 +49,6 @@ describe('MatSlideToggle without forms', () => { let labelElement: HTMLLabelElement; let inputElement: HTMLInputElement; - // This initialization is async() because it needs to wait for ngModel to set the initial value. beforeEach(fakeAsync(() => { fixture = TestBed.createComponent(SlideToggleBasic); @@ -251,14 +250,17 @@ describe('MatSlideToggle without forms', () => { expect(testComponent.lastEvent.checked).toBe(true); })); - it('should support subscription on the change observable', () => { - slideToggle.change.subscribe((event: MatSlideToggleChange) => { - expect(event.checked).toBe(true); - }); + it('should support subscription on the change observable', fakeAsync(() => { + const spy = jasmine.createSpy('change spy'); + const subscription = slideToggle.change.subscribe(spy); - slideToggle.toggle(); + labelElement.click(); fixture.detectChanges(); - }); + tick(); + + expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({checked: true})); + subscription.unsubscribe(); + })); it('should show a ripple when focused by a keyboard action', fakeAsync(() => { expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length) @@ -739,6 +741,18 @@ describe('MatSlideToggle with forms', () => { expect(modelInstance.pristine).toBe(true); })); + + it('should set the model value when toggling via the `toggle` method', fakeAsync(() => { + expect(testComponent.modelValue).toBe(false); + + fixture.debugElement.query(By.directive(MatSlideToggle)).componentInstance.toggle(); + fixture.detectChanges(); + flushMicrotasks(); + + fixture.detectChanges(); + expect(testComponent.modelValue).toBe(true); + })); + }); describe('with a FormControl', () => { diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 776091cb4daa..b7536af64850 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -252,6 +252,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro /** Toggles the checked state of the slide-toggle. */ toggle(): void { this.checked = !this.checked; + this.onChange(this.checked); } /** Function is called whenever the focus changes for the input element. */