fix(stepper): overriding default completed logic when resetting (#9650)

Something that came up while looking another issue. Currently the stepper supports two ways of determining whether a step is completed: the default one that checks against the passed-in `FormControl` and the custom one where the consumer can pass in a value through the `completed` input. Currently when the stepper is reset via the `reset` method, the step sets the `completed` property which means that for any subsequent runs, that step will always be considered as incomplete. These changes switch to resetting the `completed` input only if it was being used beforehand.

src/cdk/stepper/stepper.ts

@@ -126,7 +126,10 @@ export class CdkStep implements OnChanges {
   /** Resets the step to its initial state. Note that this includes resetting form data. */
   reset(): void {
     this.interacted = false;
-    this.completed = false;
+
+    if (this._customCompleted != null) {
+      this._customCompleted = false;
+    }
 
     if (this.stepControl) {
       this.stepControl.reset();

src/lib/stepper/stepper.spec.ts

@@ -318,6 +318,10 @@ describe('MatHorizontalStepper', () => {
     it('should be able to reset the stepper to its initial state', () => {
       assertLinearStepperResetable(fixture);
     });
+
+    it('should not clobber the `complete` binding when resetting', () => {
+      assertLinearStepperResetComplete(fixture);
+    });
   });
 });
 
@@ -493,6 +497,10 @@ describe('MatVerticalStepper', () => {
     it('should be able to reset the stepper to its initial state', () => {
       assertLinearStepperResetable(fixture);
     });
+
+    it('should not clobber the `complete` binding when resetting', () => {
+      assertLinearStepperResetComplete(fixture);
+    });
   });
 });
 
@@ -971,6 +979,38 @@ function assertLinearStepperResetable(
 }
 
 
+/** Asserts that the `complete` binding is being reset correctly. */
+function assertLinearStepperResetComplete(
+  fixture: ComponentFixture<LinearMatHorizontalStepperApp|LinearMatVerticalStepperApp>) {
+
+  const testComponent = fixture.componentInstance;
+  const stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;
+  const steps: MatStep[] = stepperComponent._steps.toArray();
+  const fillOutStepper = () => {
+    testComponent.oneGroup.get('oneCtrl')!.setValue('input');
+    testComponent.twoGroup.get('twoCtrl')!.setValue('input');
+    testComponent.threeGroup.get('threeCtrl')!.setValue('valid');
+    testComponent.validationTrigger.next();
+    stepperComponent.selectedIndex = 2;
+    fixture.detectChanges();
+    stepperComponent.selectedIndex = 3;
+    fixture.detectChanges();
+  };
+
+  fillOutStepper();
+
+  expect(steps[2].completed)
+      .toBe(true, 'Expected third step to be considered complete after the first run through.');
+
+  stepperComponent.reset();
+  fixture.detectChanges();
+  fillOutStepper();
+
+  expect(steps[2].completed)
+      .toBe(true, 'Expected third step to be considered complete when doing a run after a reset.');
+}
+
+
 @Component({
   template: `
     <mat-horizontal-stepper>