add tests for new label & placeholder behavior

Author: mmalerba

src/lib/input/input.spec.ts

@@ -21,7 +21,7 @@ import {
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
   getMatFormFieldPlaceholderConflictError,
-  MatFormField,
+  MatFormField, MatFormFieldAppearance,
   MatFormFieldModule,
 } from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
@@ -1132,6 +1132,76 @@ describe('MatInput with forms', () => {
   }));
 });
 
+describe('MatInput with appearance', () => {
+  const nonLegacyAppearances: MatFormFieldAppearance[] = ['standard', 'box'];
+  let fixture: ComponentFixture<MatInputWithAppearance>;
+  let testComponent: MatInputWithAppearance;
+  let containerEl: HTMLElement;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        PlatformModule,
+        ReactiveFormsModule,
+      ],
+      declarations: [
+        MatInputWithAppearance,
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(fakeAsync(() => {
+    fixture = TestBed.createComponent(MatInputWithAppearance);
+    fixture.detectChanges();
+    testComponent = fixture.componentInstance;
+    containerEl = fixture.debugElement.query(By.css('mat-form-field')).nativeElement;
+  }));
+
+  it('legacy appearance should promote placeholder to label', fakeAsync(() => {
+    testComponent.appearance = 'legacy';
+    fixture.detectChanges();
+
+    expect(containerEl.classList).toContain('mat-form-field-appearance-legacy');
+    expect(testComponent.formField._hasFloatingLabel()).toBe(true);
+    expect(testComponent.formField._hideControlPlaceholder()).toBe(true);
+  }));
+
+  it('non-legacy appearances should not promote placeholder to label', fakeAsync(() => {
+    for (let appearance of nonLegacyAppearances) {
+      testComponent.appearance = appearance;
+      fixture.detectChanges();
+
+      expect(containerEl.classList).toContain(`mat-form-field-appearance-${appearance}`);
+      expect(testComponent.formField._hasFloatingLabel()).toBe(false);
+      expect(testComponent.formField._hideControlPlaceholder()).toBe(false);
+    }
+  }));
+
+  it('legacy appearance should respect float never', fakeAsync(() => {
+    testComponent.appearance = 'legacy';
+    fixture.detectChanges();
+
+    expect(containerEl.classList).toContain('mat-form-field-appearance-legacy');
+    expect(testComponent.formField.floatLabel).toBe('never');
+  }));
+
+  it('non-legacy appearances should not respect float never', fakeAsync(() => {
+    for (let appearance of nonLegacyAppearances) {
+      testComponent.appearance = appearance;
+      fixture.detectChanges();
+
+      expect(containerEl.classList).toContain(`mat-form-field-appearance-${appearance}`);
+      expect(testComponent.formField.floatLabel).toBe('auto');
+    }
+  }));
+});
+
 @Component({
   template: `
     <mat-form-field>
@@ -1467,3 +1537,15 @@ class MatInputWithReadonlyInput {}
 class MatInputWithLabelAndPlaceholder {
   floatLabel: FloatLabelType;
 }
+
+@Component({
+  template: `
+    <mat-form-field [appearance]="appearance" floatLabel="never">
+      <input matInput placeholder="Placeholder">
+    </mat-form-field>
+  `
+})
+class MatInputWithAppearance {
+  @ViewChild(MatFormField) formField: MatFormField;
+  appearance: MatFormFieldAppearance;
+}