Skip to content

test(material/autocomplete): refactor variable type to const in autocomplete component unit tests #22916

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
Jun 9, 2021
Merged

test(material/autocomplete): refactor variable type to const in autocomplete component unit tests #22916

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
91 changes: 47 additions & 44 deletions src/material/autocomplete/autocomplete.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1653,9 +1653,9 @@ describe('MatAutocomplete', () => {

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

fixture.componentInstance.trigger.openPanel();
Expand All @@ -1673,16 +1673,16 @@ describe('MatAutocomplete', () => {
}));

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

fixture.detectChanges();

let inputReference =
const inputReference =
fixture.debugElement.query(By.css('.mat-form-field-flex'))!.nativeElement;
spacer.style.height = '1000px';
document.body.appendChild(spacer);
Expand All @@ -1706,9 +1706,9 @@ describe('MatAutocomplete', () => {
});

it('should fall back to above position if panel cannot fit below', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();
let inputReference =
const 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"
Expand All @@ -1731,11 +1731,11 @@ describe('MatAutocomplete', () => {
}));

it('should allow the panel to expand when the number of results increases', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();

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

// Push the element down so it has a little bit of space, but not enough to render.
Expand All @@ -1752,7 +1752,7 @@ describe('MatAutocomplete', () => {
zone.simulateZoneExit();

let panel = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
let initialPanelHeight = panel.getBoundingClientRect().height;
const initialPanelHeight = panel.getBoundingClientRect().height;

fixture.componentInstance.trigger.closePanel();
fixture.detectChanges();
Expand All @@ -1773,11 +1773,11 @@ describe('MatAutocomplete', () => {
}));

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

let input = fixture.debugElement.query(By.css('input'))!.nativeElement;
let inputReference =
const input = fixture.debugElement.query(By.css('input'))!.nativeElement;
const 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"
Expand All @@ -1802,13 +1802,13 @@ describe('MatAutocomplete', () => {

it('should fall back to above position when requested if options are added while ' +
'the panel is open', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.componentInstance.states = fixture.componentInstance.states.slice(0, 1);
fixture.componentInstance.filteredStates = fixture.componentInstance.states.slice();
fixture.detectChanges();

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

// Push the element down so it has a little bit of space, but not enough to render.
Expand All @@ -1820,7 +1820,7 @@ describe('MatAutocomplete', () => {
zone.simulateZoneExit();
fixture.detectChanges();

let panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel')!;
let inputRect = inputReference.getBoundingClientRect();
let panelRect = panel.getBoundingClientRect();

Expand All @@ -1846,17 +1846,17 @@ describe('MatAutocomplete', () => {
}));

it('should not throw if a panel reposition is requested while the panel is closed', () => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();

expect(() => fixture.componentInstance.trigger.updatePosition()).not.toThrow();
});

it('should be able to force below position even if there is not enough space', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.componentInstance.position = 'below';
fixture.detectChanges();
let inputReference =
const 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.
Expand All @@ -1879,10 +1879,10 @@ describe('MatAutocomplete', () => {
}));

it('should be able to force above position even if there is not enough space', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.componentInstance.position = 'above';
fixture.detectChanges();
let inputReference =
const inputReference =
fixture.debugElement.query(By.css('.mat-form-field-flex'))!.nativeElement;

// Push the autocomplete trigger up so it won't have room to open above.
Expand All @@ -1905,11 +1905,11 @@ describe('MatAutocomplete', () => {
}));

it('should handle the position being changed after the first open', fakeAsync(() => {
let fixture = createComponent(SimpleAutocomplete);
const fixture = createComponent(SimpleAutocomplete);
fixture.detectChanges();
let inputReference =
const inputReference =
fixture.debugElement.query(By.css('.mat-form-field-flex'))!.nativeElement;
let openPanel = () => {
const openPanel = () => {
fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();
zone.simulateZoneExit();
Expand Down Expand Up @@ -1966,7 +1966,7 @@ describe('MatAutocomplete', () => {
zone.simulateZoneExit();
fixture.detectChanges();

let componentOptions = fixture.componentInstance.options.toArray();
const componentOptions = fixture.componentInstance.options.toArray();
expect(componentOptions[0].selected)
.toBe(true, `Clicked option should be selected.`);

Expand All @@ -1992,7 +1992,7 @@ describe('MatAutocomplete', () => {
zone.simulateZoneExit();
fixture.detectChanges();

let componentOptions = fixture.componentInstance.options.toArray();
const componentOptions = fixture.componentInstance.options.toArray();
componentOptions.forEach(option => spyOn(option, 'deselect'));

expect(componentOptions[0].selected)
Expand Down Expand Up @@ -2079,7 +2079,7 @@ describe('MatAutocomplete', () => {
fixture.destroy();
fixture = TestBed.createComponent(SimpleAutocomplete);

let spy = jasmine.createSpy('option selection spy');
const spy = jasmine.createSpy('option selection spy');
let subscription: Subscription;

expect(fixture.componentInstance.trigger.autocomplete).toBeFalsy();
Expand All @@ -2103,9 +2103,9 @@ describe('MatAutocomplete', () => {
}));

it('should reposition the panel when the amount of options changes', fakeAsync(() => {
let formField = fixture.debugElement.query(By.css('.mat-form-field'))!.nativeElement;
let inputReference = formField.querySelector('.mat-form-field-flex');
let input = inputReference.querySelector('input');
const formField = fixture.debugElement.query(By.css('.mat-form-field'))!.nativeElement;
const inputReference = formField.querySelector('.mat-form-field-flex');
const input = inputReference.querySelector('input');

formField.style.bottom = '100px';
formField.style.position = 'fixed';
Expand Down Expand Up @@ -2607,7 +2607,7 @@ describe('MatAutocomplete', () => {

it('should show the panel when the options are initialized later within a component with ' +
'OnPush change detection', fakeAsync(() => {
let fixture = createComponent(AutocompleteWithOnPushDelay);
const fixture = createComponent(AutocompleteWithOnPushDelay);

fixture.detectChanges();
dispatchFakeEvent(fixture.debugElement.query(By.css('input'))!.nativeElement, 'focusin');
Expand All @@ -2617,39 +2617,41 @@ describe('MatAutocomplete', () => {
tick();

Promise.resolve().then(() => {
let panel = overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
let visibleClass = 'mat-autocomplete-visible';
const panel =
overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
const visibleClass = 'mat-autocomplete-visible';

fixture.detectChanges();
expect(panel.classList).toContain(visibleClass, `Expected panel to be visible.`);
});
}));

it('should emit an event when an option is selected', fakeAsync(() => {
let fixture = createComponent(AutocompleteWithSelectEvent);
const fixture = createComponent(AutocompleteWithSelectEvent);

fixture.detectChanges();
fixture.componentInstance.trigger.openPanel();
zone.simulateZoneExit();
fixture.detectChanges();

let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
let spy = fixture.componentInstance.optionSelected;
const options =
overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
const spy = fixture.componentInstance.optionSelected;

options[1].click();
tick();
fixture.detectChanges();

expect(spy).toHaveBeenCalledTimes(1);

let event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent;
const event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent;

expect(event.source).toBe(fixture.componentInstance.autocomplete);
expect(event.option.value).toBe('Washington');
}));

it('should emit an event when a newly-added option is selected', fakeAsync(() => {
let fixture = createComponent(AutocompleteWithSelectEvent);
const fixture = createComponent(AutocompleteWithSelectEvent);

fixture.detectChanges();
fixture.componentInstance.trigger.openPanel();
Expand All @@ -2661,16 +2663,17 @@ describe('MatAutocomplete', () => {
tick();
fixture.detectChanges();

let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
let spy = fixture.componentInstance.optionSelected;
const options =
overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
const spy = fixture.componentInstance.optionSelected;

options[3].click();
tick();
fixture.detectChanges();

expect(spy).toHaveBeenCalledTimes(1);

let event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent;
const event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent;

expect(event.source).toBe(fixture.componentInstance.autocomplete);
expect(event.option.value).toBe('Puerto Rico');
Expand Down