fixup! refactor(mdc-prototypes): do not mark components dirty in input setters

Proposal to just not support programmatic input updates

Author: devversion

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -1,5 +1,5 @@
 import {dispatchFakeEvent} from '@angular/cdk/testing';
-import {ChangeDetectionStrategy, Component, DebugElement, Type, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, DebugElement, Type} from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -68,6 +68,29 @@ describe('MatCheckbox', () => {
          expect(inputElement.checked).toBe(false);
        }));
 
+
+    it('should toggle checkbox ripple disabledness correctly', fakeAsync(() => {
+      const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
+      const labelElement = checkboxNativeElement.querySelector('label') as HTMLLabelElement;
+
+      testComponent.isDisabled = true;
+      fixture.detectChanges();
+      dispatchFakeEvent(labelElement, 'mousedown');
+      dispatchFakeEvent(labelElement, 'mouseup');
+      labelElement.click();
+      expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
+
+      flush();
+      testComponent.isDisabled = false;
+      fixture.detectChanges();
+      dispatchFakeEvent(labelElement, 'mousedown');
+      dispatchFakeEvent(labelElement, 'mouseup');
+      labelElement.click();
+      expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
+
+      flush();
+    }));
+
     it('should add and remove indeterminate state', fakeAsync(() => {
          expect(inputElement.checked).toBe(false);
          expect(inputElement.indeterminate).toBe(false);
@@ -689,64 +712,6 @@ describe('MatCheckbox', () => {
        }));
   });
 
-  describe('using ViewChild', () => {
-    let checkboxDebugElement: DebugElement;
-    let checkboxNativeElement: HTMLElement;
-    let testComponent: CheckboxUsingViewChild;
-
-    beforeEach(() => {
-      fixture = createComponent(CheckboxUsingViewChild);
-      fixture.detectChanges();
-
-      checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox));
-      checkboxNativeElement = checkboxDebugElement.nativeElement;
-      testComponent = fixture.debugElement.componentInstance;
-    });
-
-    it('should toggle checkbox disabledness correctly', fakeAsync(() => {
-         const checkboxInstance = checkboxDebugElement.componentInstance;
-         const inputElement = <HTMLInputElement>checkboxNativeElement.querySelector('input');
-         expect(checkboxInstance.disabled).toBe(false);
-         expect(inputElement.tabIndex).toBe(0);
-         expect(inputElement.disabled).toBe(false);
-
-         testComponent.isDisabled = true;
-         fixture.detectChanges();
-
-         expect(checkboxInstance.disabled).toBe(true);
-         expect(inputElement.disabled).toBe(true);
-
-         testComponent.isDisabled = false;
-         fixture.detectChanges();
-
-         expect(checkboxInstance.disabled).toBe(false);
-         expect(inputElement.tabIndex).toBe(0);
-         expect(inputElement.disabled).toBe(false);
-       }));
-
-    it('should toggle checkbox ripple disabledness correctly', fakeAsync(() => {
-         const rippleSelector = '.mat-ripple-element:not(.mat-checkbox-persistent-ripple)';
-         const labelElement = checkboxNativeElement.querySelector('label') as HTMLLabelElement;
-
-         testComponent.isDisabled = true;
-         fixture.detectChanges();
-         dispatchFakeEvent(labelElement, 'mousedown');
-         dispatchFakeEvent(labelElement, 'mouseup');
-         labelElement.click();
-         expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(0);
-
-         flush();
-         testComponent.isDisabled = false;
-         fixture.detectChanges();
-         dispatchFakeEvent(labelElement, 'mousedown');
-         dispatchFakeEvent(labelElement, 'mouseup');
-         labelElement.click();
-         expect(checkboxNativeElement.querySelectorAll(rippleSelector).length).toBe(1);
-
-         flush();
-       }));
-  });
-
   describe('with multiple checkboxes', () => {
     beforeEach(() => {
       fixture = createComponent(MultipleCheckboxes);
@@ -1034,21 +999,6 @@ class CheckboxWithTabIndex {
   isDisabled: boolean = false;
 }
 
-
-/** Simple test component that accesses MatCheckbox using ViewChild. */
-@Component({
-  template: `
-    <mat-checkbox></mat-checkbox>`,
-})
-class CheckboxUsingViewChild {
-  @ViewChild(MatCheckbox, {static: false}) checkbox: MatCheckbox;
-
-  set isDisabled(value: boolean) {
-    this.checkbox.disabled = value;
-    this.checkbox.markForCheck();
-  }
-}
-
 /** Simple test component with an aria-label set. */
 @Component({template: `<mat-checkbox aria-label="Super effective"></mat-checkbox>`})
 class CheckboxWithAriaLabel {

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -302,14 +302,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
     this.checked = !this.checked;
   }
 
-  /**
-   * Marks the component for check. This can be called after inputs have been updated
-   * programmatically and the component should be updated to reflect the changes.
-   */
-  markForCheck() {
-    this._changeDetectorRef.markForCheck();
-  }
-
   /** Triggers the checkbox ripple. */
   _activateRipple() {
     if (!this.disabled && !this.disableRipple && this._animationMode != 'NoopAnimations') {

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -487,8 +487,7 @@ describe('MatSlideToggle with forms', () => {
       // The control should start off with being untouched.
       expect(slideToggleModel.touched).toBe(false);
 
-      slideToggle.checked = true;
-      slideToggle.markForCheck();
+      testComponent.isChecked = true;
       fixture.detectChanges();
 
       expect(slideToggleModel.touched).toBe(false);
@@ -728,10 +727,12 @@ class SlideToggleWithForm {
 }
 
 @Component({
-  template: `<mat-slide-toggle [(ngModel)]="modelValue" [disabled]="isDisabled"></mat-slide-toggle>`
+  template: `<mat-slide-toggle [(ngModel)]="modelValue" [disabled]="isDisabled"
+                               [checked]="isChecked"></mat-slide-toggle>`
 })
 class SlideToggleWithModel {
   modelValue = false;
+  isChecked = false;
   isDisabled = false;
 }
 

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -294,14 +294,6 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
     this._onChange(this.checked);
   }
 
-  /**
-   * Marks the component for check. This can be called after inputs have been updated
-   * programmatically and the component should be updated to reflect the changes.
-   */
-  markForCheck() {
-    this._changeDetectorRef.markForCheck();
-  }
-
   /** Handles blur events on the native input. */
   _onBlur() {
     // When a focused element becomes disabled, the browser *immediately* fires a blur event.