Skip to content

build: fix autocomplete test failures on ios #10442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 16, 2018
Merged

build: fix autocomplete test failures on ios #10442

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
63 changes: 37 additions & 26 deletions src/lib/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ import {
describe('MatAutocomplete', () => {
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let scrolledSubject = new Subject();
let zone: MockNgZone;

// Creates a test component fixture.
Expand All @@ -70,13 +69,7 @@ describe('MatAutocomplete', () => {
],
declarations: [component],
providers: [
{provide: ScrollDispatcher, useFactory: () => ({
scrolled: () => scrolledSubject.asObservable()
})},
{provide: NgZone, useFactory: () => {
zone = new MockNgZone();
return zone;
}},
{provide: NgZone, useFactory: () => zone = new MockNgZone()},
...providers
]
});
Expand Down Expand Up @@ -1289,19 +1282,11 @@ describe('MatAutocomplete', () => {
});

describe('Fallback positions', () => {
let fixture: ComponentFixture<SimpleAutocomplete>;
let input: HTMLInputElement;
let inputReference: HTMLInputElement;

beforeEach(() => {
fixture = createComponent(SimpleAutocomplete);
it('should use below positioning by default', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;

input = fixture.debugElement.query(By.css('input')).nativeElement;
inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
});

it('should use below positioning by default', fakeAsync(() => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();
zone.simulateZoneExit();
Expand All @@ -1315,8 +1300,16 @@ describe('MatAutocomplete', () => {
}));

it('should reposition the panel on scroll', () => {
const spacer = document.createElement('div');
let scrolledSubject = new Subject();
let spacer = document.createElement('div');
let fixture = createComponent(SimpleAutocomplete, [{
provide: ScrollDispatcher,
useValue: {scrolled: () => scrolledSubject.asObservable()}
}]);

fixture.detectChanges();

let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;
spacer.style.height = '1000px';
document.body.appendChild(spacer);

Expand All @@ -1335,9 +1328,14 @@ describe('MatAutocomplete', () => {
'Expected panel top to match input bottom after scrolling.');

document.body.removeChild(spacer);
window.scroll(0, 0);
});

it('should fall back to above position if panel cannot fit below', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;

// Push the autocomplete trigger down so it won't have room to open "below"
inputReference.style.bottom = '0';
inputReference.style.position = 'fixed';
Expand All @@ -1355,6 +1353,12 @@ describe('MatAutocomplete', () => {
}));

it('should align panel properly when filtering in "above" position', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();

let input = fixture.debugElement.query(By.css('input')).nativeElement;
let inputReference = fixture.debugElement.query(By.css('.mat-form-field-flex')).nativeElement;

// Push the autocomplete trigger down so it won't have room to open "below"
inputReference.style.bottom = '0';
inputReference.style.position = 'fixed';
Expand Down Expand Up @@ -1707,12 +1711,19 @@ describe('MatAutocomplete', () => {
}));

it('should reset correctly when closed programmatically', fakeAsync(() => {
TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, {
useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
deps: [Overlay]
});
const scrolledSubject = new Subject();
const fixture = createComponent(SimpleAutocomplete, [
{
provide: ScrollDispatcher,
useValue: {scrolled: () => scrolledSubject.asObservable()}
},
{
provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
deps: [Overlay]
}
]);

const fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();
const trigger = fixture.componentInstance.trigger;

Expand Down Expand Up @@ -1871,7 +1882,7 @@ describe('MatAutocomplete', () => {
<mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn"
[disableRipple]="disableRipple" (opened)="openedSpy()" (closed)="closedSpy()">
<mat-option *ngFor="let state of filteredStates" [value]="state">
<span> {{ state.code }}: {{ state.name }} </span>
<span>{{ state.code }}: {{ state.name }}</span>
</mat-option>
</mat-autocomplete>
`
Expand Down