Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 87 additions & 43 deletions src/material/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,18 @@ import {
waitForAsync,
} from '@angular/core/testing';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AsyncPipe} from '@angular/common';
import {By} from '@angular/platform-browser';
import {Observable, Subject, Subscription} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {MATERIAL_ANIMATIONS, MatOption, MatOptionSelectionChange} from '../core';
import {MatFormField, MatFormFieldModule} from '../form-field';
import {MATERIAL_ANIMATIONS, MatOptgroup, MatOption, MatOptionSelectionChange} from '../core';
import {MatFormField} from '../form-field';
import {MatInputModule} from '../input';
import {
MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
MatAutocomplete,
MatAutocompleteDefaultOptions,
MatAutocompleteModule,
MatAutocompleteOrigin,
MatAutocompleteSelectedEvent,
MatAutocompleteTrigger,
Expand All @@ -61,23 +61,13 @@ describe('MatAutocomplete', () => {
// Creates a test component fixture.
function createComponent<T>(component: Type<T>, providers: Provider[] = []) {
TestBed.configureTestingModule({
imports: [
MatAutocompleteModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
OverlayModule,
],
providers: [
...providers,
{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
],
declarations: [component],
});

overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();

return TestBed.createComponent<T>(component);
}

Expand Down Expand Up @@ -4022,7 +4012,16 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
</mat-autocomplete>
`;

@Component({template: SIMPLE_AUTOCOMPLETE_TEMPLATE, standalone: false})
@Component({
template: SIMPLE_AUTOCOMPLETE_TEMPLATE,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
],
})
class SimpleAutocomplete implements OnDestroy {
stateCtrl = new FormControl<{name: string; code: string} | string | null>(null);
filteredStates: any[];
Expand Down Expand Up @@ -4081,27 +4080,40 @@ class SimpleAutocomplete implements OnDestroy {
@Component({
template: SIMPLE_AUTOCOMPLETE_TEMPLATE,
encapsulation: ViewEncapsulation.ShadowDom,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
],
})
class SimpleAutocompleteShadowDom extends SimpleAutocomplete {}

@Component({
template: `
@if (isVisible) {
<mat-form-field>
<input matInput placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
</mat-form-field>
}
<mat-form-field>
<input matInput placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
</mat-form-field>
}

<mat-autocomplete #auto="matAutocomplete">
@for (option of filteredOptions | async; track option) {
<mat-option [value]="option">
{{option}}
</mat-option>
}
<mat-option [value]="option">
{{option}}
</mat-option>
}
</mat-autocomplete>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
AsyncPipe,
],
})
class NgIfAutocomplete {
optionCtrl = new FormControl('');
Expand Down Expand Up @@ -4139,7 +4151,7 @@ class NgIfAutocomplete {
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule],
})
class AutocompleteWithoutForms {
filteredStates: any[];
Expand Down Expand Up @@ -4169,7 +4181,7 @@ class AutocompleteWithoutForms {
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule, FormsModule],
})
class AutocompleteWithNgModel {
filteredStates: any[];
Expand Down Expand Up @@ -4201,7 +4213,7 @@ class AutocompleteWithNgModel {
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule, FormsModule],
})
class AutocompleteWithNumbers {
selectedNumber: number;
Expand All @@ -4221,7 +4233,13 @@ class AutocompleteWithNumbers {
}
</mat-autocomplete>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
],
})
class AutocompleteWithOnPushDelay implements OnInit {
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
Expand All @@ -4244,7 +4262,7 @@ class AutocompleteWithOnPushDelay implements OnInit {
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, ReactiveFormsModule, AsyncPipe],
})
class AutocompleteWithNativeInput {
optionCtrl = new FormControl('');
Expand All @@ -4268,7 +4286,7 @@ class AutocompleteWithNativeInput {

@Component({
template: `<input placeholder="Choose" [matAutocomplete]="auto" [formControl]="control">`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, ReactiveFormsModule],
})
class AutocompleteWithoutPanel {
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
Expand All @@ -4293,7 +4311,14 @@ class AutocompleteWithoutPanel {
}
</mat-autocomplete>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOptgroup,
MatOption,
MatInputModule,
FormsModule,
],
})
class AutocompleteWithGroups {
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
Expand Down Expand Up @@ -4334,7 +4359,14 @@ class AutocompleteWithGroups {
}
</mat-autocomplete>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOptgroup,
MatOption,
MatInputModule,
FormsModule,
],
})
class AutocompleteWithIndirectGroups extends AutocompleteWithGroups {}

Expand All @@ -4352,7 +4384,7 @@ class AutocompleteWithIndirectGroups extends AutocompleteWithGroups {}
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule, FormsModule],
})
class AutocompleteWithSelectEvent {
selectedState: string;
Expand All @@ -4368,7 +4400,7 @@ class AutocompleteWithSelectEvent {
<input [formControl]="formControl" [matAutocomplete]="auto"/>
<mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, ReactiveFormsModule],
})
class PlainAutocompleteInputWithFormControl {
formControl = new FormControl('');
Expand All @@ -4386,7 +4418,7 @@ class PlainAutocompleteInputWithFormControl {
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule, FormsModule],
})
class AutocompleteWithNumberInputAndNgModel {
selectedValue: number;
Expand Down Expand Up @@ -4419,7 +4451,14 @@ class AutocompleteWithNumberInputAndNgModel {
}
</mat-autocomplete>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatAutocompleteOrigin,
MatOption,
MatInputModule,
FormsModule,
],
})
class AutocompleteWithDifferentOrigin {
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
Expand All @@ -4434,15 +4473,15 @@ class AutocompleteWithDifferentOrigin {
<input autocomplete="changed" [(ngModel)]="value" [matAutocomplete]="auto"/>
<mat-autocomplete #auto="matAutocomplete"></mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, FormsModule],
})
class AutocompleteWithNativeAutocompleteAttribute {
value: string;
}

@Component({
template: '<input [matAutocomplete]="null" matAutocompleteDisabled>',
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption],
})
class InputWithoutAutocompleteAndDisabled {}

Expand All @@ -4458,7 +4497,7 @@ class InputWithoutAutocompleteAndDisabled {}
}
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule],
})
class AutocompleteWithActivatedEvent {
states = ['California', 'West Virginia', 'Florida'];
Expand All @@ -4470,7 +4509,6 @@ class AutocompleteWithActivatedEvent {
}

@Component({
selector: 'autocomplete-inside-a-modal',
template: `
<button cdkOverlayOrigin #trigger="cdkOverlayOrigin">open dialog</button>
<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]="true"
Expand All @@ -4488,7 +4526,14 @@ class AutocompleteWithActivatedEvent {
</div>
</ng-template>
`,
standalone: false,
imports: [
MatAutocomplete,
MatAutocompleteTrigger,
MatOption,
MatInputModule,
ReactiveFormsModule,
OverlayModule,
],
})
class AutocompleteInsideAModal {
foods = [
Expand All @@ -4506,7 +4551,6 @@ class AutocompleteInsideAModal {
}

@Component({
selector: 'autocomplete-without-options',
template: `
<mat-form-field>
<input matInput [matAutocomplete]="auto">
Expand All @@ -4515,7 +4559,7 @@ class AutocompleteInsideAModal {
<mat-autocomplete #auto="matAutocomplete">
</mat-autocomplete>
`,
standalone: false,
imports: [MatAutocomplete, MatAutocompleteTrigger, MatOption, MatInputModule],
})
class AutocompleteWithoutOptions {
@ViewChild(MatAutocompleteTrigger, {static: true}) trigger: MatAutocompleteTrigger;
Expand Down
Loading
Loading