test(igx-autocomplete): defulat width #3585

IgniteUI · Jan 24, 2019 · 5d318b2 · 5d318b2
1 parent 6ae8c2a
commit 5d318b2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
@@ -5,13 +5,15 @@ import { IgxAutocompleteModule, IgxAutocompleteDirective } from './autocomplete.
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { IgxInputDirective } from '../input/input.directive';
-import { IgxInputGroupModule } from '../../input-group';
+import { IgxInputGroupModule, IgxInputGroupComponent } from '../../input-group';
 import { IgxDropDownModule, IgxDropDownComponent } from '../../drop-down';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IgxIconModule } from '../../icon';
 
-describe('IgxAutocomplete', () => {
+fdescribe('IgxAutocomplete', () => {
     let fixture;
     let autocomplete: IgxAutocompleteDirective;
+    let group: IgxInputGroupComponent;
     let input: IgxInputDirective;
     let dropDown: IgxDropDownComponent;
     configureTestSuite();
@@ -28,7 +30,8 @@ describe('IgxAutocomplete', () => {
                 IgxAutocompleteModule,
                 FormsModule,
                 ReactiveFormsModule,
-                NoopAnimationsModule
+                NoopAnimationsModule,
+                IgxIconModule
             ]
         })
         .compileComponents();
@@ -40,6 +43,7 @@ describe('IgxAutocomplete', () => {
             fixture = TestBed.createComponent(AutocompleteComponent);
             fixture.detectChanges();
             autocomplete = fixture.componentInstance.autocomplete;
+            group = fixture.componentInstance.group;
             input = fixture.componentInstance.input;
             dropDown = fixture.componentInstance.dropDown;
             input.nativeElement.click();
@@ -103,17 +107,28 @@ describe('IgxAutocomplete', () => {
         it('Selection and events', fakeAsync(() => {}));
         it('Keyboard Navigation', fakeAsync(() => {}));
         it('DropDown settings', fakeAsync(() => {}));
-        it('DropDown default width', fakeAsync(() => {}));
+        it('DropDown default width', fakeAsync(() => {
+            UIInteractions.sendInput(input, 's', fixture);
+            fixture.detectChanges();
+            tick();
+            const dropDownAny = dropDown as any;
+            expect(dropDownAny.scrollContainer.getBoundingClientRect().width)
+                .toEqual(group.element.nativeElement.getBoundingClientRect().width);
+        }));
         it('Aria', fakeAsync(() => {}));
         it('ReactiveForm', fakeAsync(() => {}));
+        it('On HTML input', fakeAsync(() => {}));
+        it('On textarea', fakeAsync(() => {}));
     });
 });
 
 @Component({
     template: `<igx-input-group>
+        <igx-prefix igxRipple><igx-icon fontSet="material">home</igx-icon> </igx-prefix>
         <input igxInput name="towns" type="text" [(ngModel)]="townSelected" required
             [igxAutocomplete]='townsPanel'/>
         <label igxLabel for="towns">Towns</label>
+        <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
     <igx-drop-down #townsPanel>
         <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
@@ -123,6 +138,7 @@ describe('IgxAutocomplete', () => {
 })
 class AutocompleteComponent {
     @ViewChild(IgxAutocompleteDirective) public autocomplete: IgxAutocompleteDirective;
+    @ViewChild(IgxInputGroupComponent) public group: IgxInputGroupComponent;
     @ViewChild(IgxInputDirective) public input: IgxInputDirective;
     @ViewChild(IgxDropDownComponent) public dropDown: IgxDropDownComponent;
     townSelected;

diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -4,13 +4,14 @@ import {
     NgModule, ElementRef, HostListener, ChangeDetectorRef } from '@angular/core';
 import { NgModel, FormControlName } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { CancelableEventArgs } from '../../core/utils';
 import { OverlaySettings, AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../../services';
 import { ISelectionEventArgs } from '../../drop-down';
 import { IgxDropDownModule, IgxDropDownComponent } from '../../drop-down/drop-down.component';
 import { IgxDropDownItemNavigationDirective } from '../../drop-down/drop-down-navigation.directive';
-import { Subject } from 'rxjs';
+import { IgxInputGroupComponent } from '../../input-group';
 //#endregion
 
 /**
@@ -28,6 +29,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
 
     constructor(@Self() @Optional() @Inject(NgModel) protected ngModel: NgModel,
                 @Self() @Optional() @Inject(FormControlName) protected formControl: FormControlName,
+                @Optional() protected group: IgxInputGroupComponent,
                 protected elementRef: ElementRef,
                 protected cdr: ChangeDetectorRef) {
         super(null);
@@ -43,6 +45,10 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         return this.elementRef.nativeElement;
     }
 
+    get parentElement(): HTMLElement {
+        return this.group ? this.group.element.nativeElement : this.nativeElement;
+    }
+
     private get collapsed(): boolean {
         return this.dropDown ? this.dropDown.collapsed : true;
     }
@@ -57,7 +63,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     overlaySettings: OverlaySettings = {
         modal: false,
         scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new ConnectedPositioningStrategy({ target: this.nativeElement })
+        positionStrategy: new ConnectedPositioningStrategy({ target: this.parentElement })
     };
 
     @Input('igxAutocompleteHighlightMatch')
@@ -132,7 +138,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     private open() {
         this.dropDown.open(this.overlaySettings);
         this.target = this.dropDown;
-        this.dropDown.width = this.nativeElement.clientWidth + 'px';
+        this.dropDown.width = this.parentElement.clientWidth + 'px';
         this.dropDown.onSelection.subscribe(this.select);
         this.dropDown.onOpened.pipe(first()).subscribe(() => {
             this.highlightFirstItem();