fixup! feat(material-experimental/mdc-form-field): separate out text …

…and icon prefixes/suffixes
angular · Feb 25, 2021 · 0b6589c · 0b6589c
1 parent f798e2f
commit 0b6589c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/material-experimental/mdc-input/BUILD.bazel b/src/material-experimental/mdc-input/BUILD.bazel
@@ -53,6 +53,7 @@ ng_test_library(
         "//src/material-experimental/mdc-core",
         "//src/material-experimental/mdc-form-field",
         "//src/material/core",
+        "//src/material/icon",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
     ],

diff --git a/src/material-experimental/mdc-input/input.spec.ts b/src/material-experimental/mdc-input/input.spec.ts
@@ -20,19 +20,20 @@ import {
   Validators,
 } from '@angular/forms';
 import {
+  ErrorStateMatcher,
+  ShowOnDirtyErrorStateMatcher,
+  ThemePalette,
+} from '@angular/material-experimental/mdc-core';
+import {
+  FloatLabelType,
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
   MAT_FORM_FIELD_DEFAULT_OPTIONS,
   MatFormField,
   MatFormFieldAppearance,
   MatFormFieldModule,
-  FloatLabelType,
 } from '@angular/material-experimental/mdc-form-field';
-import {
-  ErrorStateMatcher,
-  ShowOnDirtyErrorStateMatcher,
-  ThemePalette,
-} from '@angular/material-experimental/mdc-core';
+import {MatIconModule} from '@angular/material/icon';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MAT_INPUT_VALUE_ACCESSOR, MatInput, MatInputModule} from './index';
@@ -701,13 +702,19 @@ describe('MatMdcInput without forms', () => {
     const fixture = createComponent(MatInputWithPrefixAndSuffix);
     fixture.detectChanges();
 
-    const prefixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-prefix'))!;
-    const suffixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-suffix'))!;
+    const textPrefixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-text-prefix'))!;
+    const textSuffixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-text-suffix'))!;
+    const iconPrefixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-icon-prefix'))!;
+    const iconSuffixEl = fixture.debugElement.query(By.css('.mat-mdc-form-field-icon-suffix'))!;
 
-    expect(prefixEl).not.toBeNull();
-    expect(suffixEl).not.toBeNull();
-    expect(prefixEl.nativeElement.innerText.trim()).toEqual('Prefix');
-    expect(suffixEl.nativeElement.innerText.trim()).toEqual('Suffix');
+    expect(textPrefixEl).not.toBeNull();
+    expect(textSuffixEl).not.toBeNull();
+    expect(iconPrefixEl).not.toBeNull();
+    expect(iconSuffixEl).not.toBeNull();
+    expect(textPrefixEl.nativeElement.innerText.trim()).toEqual('Prefix');
+    expect(textSuffixEl.nativeElement.innerText.trim()).toEqual('Suffix');
+    expect(iconPrefixEl.nativeElement.innerText.trim()).toEqual('favorite');
+    expect(iconSuffixEl.nativeElement.innerText.trim()).toEqual('favorite');
   }));
 
   it('should update empty class when value changes programmatically and OnPush', fakeAsync(() => {
@@ -1285,6 +1292,7 @@ function configureTestingModule(component: Type<any>, options:
     imports: [
       FormsModule,
       MatFormFieldModule,
+      MatIconModule,
       MatInputModule,
       animations ? BrowserAnimationsModule : NoopAnimationsModule,
       PlatformModule,
@@ -1597,9 +1605,11 @@ class MatInputWithFormGroupErrorMessages {
 @Component({
   template: `
     <mat-form-field>
-      <div matPrefix>Prefix</div>
+      <mat-icon matIconPrefix>favorite</mat-icon>
+      <div matTextPrefix>Prefix</div>
       <input matInput>
-      <div matSuffix>Suffix</div>
+      <div matTextSuffix>Suffix</div>
+      <mat-icon matIconSuffix>favorite</mat-icon>
     </mat-form-field>
   `
 })