UnitTests @ui/searchbox

Co-authored-by: s.neumair@paragon-data.de <s.neumair@paragon-data.de>

apps/ui/searchbox/src/lib/ui-searchbox-autocomplete-option.directive.spec.ts

@@ -0,0 +1,64 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { UiSearchboxAutocompleteOptionDirective } from './ui-searchbox-autocomplete-option.directive';
+
+@Component({
+  selector: 'unit-test',
+  template: ` <button uiSearchboxAutocompleteOption value="Unit Test"></button> `,
+})
+class TestComponent {
+  @ViewChild(UiSearchboxAutocompleteOptionDirective, { read: UiSearchboxAutocompleteOptionDirective })
+  option: UiSearchboxAutocompleteOptionDirective;
+}
+
+describe('UiSearchboxAutocompleteOptionDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, UiSearchboxAutocompleteOptionDirective],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+  });
+
+  describe('registerOnSelect', () => {
+    it('should register set the onSelect proeprty', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      const functionToRegister = () => {};
+
+      fixture.componentInstance.option.registerOnSelect(functionToRegister);
+
+      expect(fixture.componentInstance.option.onSelect).toEqual(functionToRegister);
+    }));
+  });
+
+  describe('select', () => {
+    it('should call onSelect with the value', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      spyOn(fixture.componentInstance.option, 'onSelect').and.callThrough();
+
+      fixture.componentInstance.option.select();
+
+      expect(fixture.componentInstance.option.onSelect).toHaveBeenCalledWith(fixture.componentInstance.option.value);
+    }));
+  });
+
+  it('click on the option element should call select', fakeAsync(() => {
+    fixture.detectChanges();
+    tick();
+
+    spyOn(fixture.componentInstance.option, 'onSelect').and.callThrough();
+
+    fixture.debugElement.query(By.css('button')).nativeElement.click();
+
+    tick();
+
+    expect(fixture.componentInstance.option.onSelect).toHaveBeenCalled();
+  }));
+});

apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.spec.ts

@@ -0,0 +1,120 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { of } from 'rxjs';
+import { UiSearchboxAutocompleteOptionDirective } from './ui-searchbox-autocomplete-option.directive';
+import { UiSearchboxAutocompleteComponent } from './ui-searchbox-autocomplete.component';
+
+@Component({
+  selector: 'unit-test',
+  template: `<ui-searchbox-autocomplete>
+    <p uiSearchboxAutocompleteOption>Test Option 1</p>
+    <p uiSearchboxAutocompleteOption>Test Option 2</p>
+    <p uiSearchboxAutocompleteOption *ngIf="showOption">Test Option 3</p>
+  </ui-searchbox-autocomplete>`,
+})
+export class TestComponent {
+  showOption = false;
+
+  @ViewChild(UiSearchboxAutocompleteComponent, { read: UiSearchboxAutocompleteComponent, static: true })
+  searchboxAutocomplete: UiSearchboxAutocompleteComponent;
+
+  constructor() {}
+}
+
+describe('UiSearchboxAutocompleteComponent', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UiSearchboxAutocompleteComponent, UiSearchboxAutocompleteOptionDirective, TestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('ngAfterContentInit', () => {
+    beforeEach(() => {
+      spyOn(component.searchboxAutocomplete, 'registerOptionOnSelect').and.callThrough();
+
+      fixture.detectChanges();
+    });
+
+    it('should call registerOptionOnSelect', () => {
+      component.searchboxAutocomplete.ngAfterContentInit();
+      expect(component.searchboxAutocomplete.registerOptionOnSelect).toHaveBeenCalled();
+    });
+    it('should subscribe to options.changes and call registerOptionSelect', async () => {
+      component.showOption = true;
+      fixture.detectChanges();
+
+      expect(component.searchboxAutocomplete.registerOptionOnSelect).toHaveBeenCalled();
+    });
+  });
+
+  describe('toggle', () => {
+    it('should set show and call showChanged', () => {
+      spyOn(component.searchboxAutocomplete, 'showChanged').and.callThrough();
+      const expectedShowValue = !component.searchboxAutocomplete['show'];
+
+      component.searchboxAutocomplete.toggle();
+
+      expect(component.searchboxAutocomplete['show']).toEqual(expectedShowValue);
+      expect(component.searchboxAutocomplete.showChanged).toHaveBeenCalledWith(component.searchboxAutocomplete['show']);
+    });
+  });
+
+  describe('open', () => {
+    it('should set show and call showChanged', () => {
+      spyOn(component.searchboxAutocomplete, 'showChanged').and.callThrough();
+
+      component.searchboxAutocomplete.open();
+
+      expect(component.searchboxAutocomplete['show']).toEqual(true);
+      expect(component.searchboxAutocomplete.showChanged).toHaveBeenCalledWith(component.searchboxAutocomplete['show']);
+    });
+  });
+
+  describe('close', () => {
+    it('should set show and call showChanged', () => {
+      spyOn(component.searchboxAutocomplete, 'showChanged').and.callThrough();
+
+      component.searchboxAutocomplete.close();
+
+      expect(component.searchboxAutocomplete['show']).toEqual(false);
+      expect(component.searchboxAutocomplete.showChanged).toHaveBeenCalledWith(component.searchboxAutocomplete['show']);
+    });
+  });
+
+  describe('selectValue', () => {
+    it('should call onSelect and close', () => {
+      spyOn(component.searchboxAutocomplete, 'onSelect').and.callThrough();
+      spyOn(component.searchboxAutocomplete, 'close').and.callThrough();
+
+      const value = 'Test Value';
+      component.searchboxAutocomplete.selectValue(value);
+      expect(component.searchboxAutocomplete.onSelect).toHaveBeenCalledWith(value);
+      expect(component.searchboxAutocomplete.close).toHaveBeenCalled();
+    });
+  });
+
+  describe('Autocomplete Options', () => {
+    const getOptions = () => fixture.debugElement.queryAll(By.css('[uiSearchboxAutocompleteOption]'));
+    it('should show autocomplete options if show is set to true', () => {
+      component.searchboxAutocomplete['show'] = true;
+      fixture.detectChanges();
+
+      const options = getOptions();
+      expect(options.length).toBeTruthy();
+    });
+    it('should show not autocomplete options if show is set to false', () => {
+      component.searchboxAutocomplete['show'] = false;
+      fixture.detectChanges();
+
+      const options = getOptions();
+      expect(options.length).toBeFalsy();
+    });
+  });
+});

apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.ts

@@ -8,7 +8,7 @@ import { UiSearchboxAutocompleteOptionDirective } from './ui-searchbox-autocompl
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UiSearchboxAutocompleteComponent implements AfterContentInit {
-  show: boolean;
+  protected show = false;
 
   @ContentChildren(UiSearchboxAutocompleteOptionDirective, { read: UiSearchboxAutocompleteOptionDirective })
   options: QueryList<UiSearchboxAutocompleteOptionDirective>;

apps/ui/searchbox/src/lib/ui-searchbox-input.directive.spec.ts

@@ -0,0 +1,74 @@
+import { Component, Renderer2, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { UiSearchboxInputDirective } from '@ui/searchbox';
+
+@Component({
+  selector: 'unit-test',
+  template: `<input uiSearchboxInput />`,
+})
+class TestComponent {
+  @ViewChild(UiSearchboxInputDirective, { read: UiSearchboxInputDirective })
+  directive: UiSearchboxInputDirective;
+}
+
+describe('UiSearchboxInputDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, UiSearchboxInputDirective],
+      providers: [Renderer2],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('setValue', () => {
+    it('should set the value property on the nativeElement', fakeAsync(() => {
+      fixture.detectChanges();
+
+      const testValue = 'Test';
+      component.directive.setValue(testValue);
+
+      fixture.detectChanges();
+      tick();
+
+      const input = component.directive.nativeElement;
+
+      expect(input.value).toEqual(testValue);
+    }));
+  });
+
+  describe('blur event', () => {
+    it('should set focused to false', fakeAsync(() => {
+      fixture.detectChanges();
+      spyOn(component.directive, 'onBlur').and.callThrough();
+
+      const debugEl = fixture.debugElement.query(By.css('input[uiSearchboxInput]'));
+      debugEl.triggerEventHandler('blur', {});
+      fixture.detectChanges();
+      tick();
+
+      expect(component.directive.onBlur).toHaveBeenCalled();
+      expect(component.directive.focused).toBe(false);
+    }));
+  });
+
+  describe('focus event', () => {
+    it('should set focused to true', fakeAsync(() => {
+      fixture.detectChanges();
+      spyOn(component.directive, 'onFocus').and.callThrough();
+
+      const debugEl = fixture.debugElement.query(By.css('input[uiSearchboxInput]'));
+      debugEl.triggerEventHandler('focus', {});
+      fixture.detectChanges();
+      tick();
+
+      expect(component.directive.onFocus).toHaveBeenCalled();
+      expect(component.directive.focused).toBe(true);
+    }));
+  });
+});

apps/ui/searchbox/src/lib/ui-searchbox.component.spec.ts

@@ -0,0 +1,116 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { UiSearchboxAutocompleteComponent } from './ui-searchbox-autocomplete.component';
+import { UiSearchboxComponent } from './ui-searchbox.component';
+import { UiSearchboxModule } from './ui-searchbox.module';
+
+// #region TestComponent
+@Component({
+  selector: 'unit-test',
+  template: `
+    <ui-searchbox>
+      <input uiSearchboxInput />
+      <ui-searchbox-warning>Unit Test</ui-searchbox-warning>
+      <button uiSearchboxSearchButton>Search</button>
+      <ui-searchbox-autocomplete></ui-searchbox-autocomplete>
+    </ui-searchbox>
+  `,
+})
+export class TestComponent {
+  @ViewChild(UiSearchboxComponent, { read: UiSearchboxComponent, static: true })
+  searchboxComponent: UiSearchboxComponent;
+
+  constructor() {}
+}
+// #endregion
+
+describe('UiSearchboxComponent', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [UiSearchboxModule],
+      declarations: [TestComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+  });
+
+  describe('selectOption', () => {
+    it('should call UiSearchboxInputDirective.setValue', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      spyOn(fixture.componentInstance.searchboxComponent.input, 'setValue');
+      fixture.componentInstance.searchboxComponent.selectOption('My Option');
+
+      expect(fixture.componentInstance.searchboxComponent.input.setValue).toHaveBeenCalledWith('My Option');
+    }));
+  });
+
+  describe('input', () => {
+    it('should render the input Element', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const inputElement = fixture.debugElement.query(By.css('[uisearchboxinput]'));
+      expect(inputElement).not.toBeNull();
+    }));
+  });
+
+  describe('warning', () => {
+    it('should render the warning Component', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const warningElement = fixture.debugElement.query(By.css('ui-searchbox-warning'));
+      expect(warningElement).not.toBeNull();
+    }));
+  });
+
+  describe('search button', () => {
+    it('should render the search button Element', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const searchButton = fixture.debugElement.query(By.css('[uisearchboxsearchbutton]'));
+      expect(searchButton).not.toBeNull();
+    }));
+  });
+
+  describe('autocomplete', () => {
+    it('should render the autocomplete Component', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const autocompleteElement = fixture.debugElement.query(By.css('ui-searchbox-autocomplete'));
+      expect(autocompleteElement).not.toBeNull();
+    }));
+  });
+
+  describe('autocomplete-visible class', () => {
+    it('should add the class when autocomplete.show it true', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      fixture.componentInstance.searchboxComponent.autocomplete.open();
+
+      fixture.detectChanges();
+      tick();
+
+      const element = fixture.debugElement.query(By.css('.autocomplete-visible'));
+      expect(element).not.toBeNull();
+    }));
+  });
+
+  describe('ngAfterContentInit', () => {
+    it('should register an onSelect and onShowChanges function', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      spyOn(fixture.componentInstance.searchboxComponent.autocomplete, 'registerOnSelect').and.callThrough();
+      spyOn(fixture.componentInstance.searchboxComponent.autocomplete, 'registerOnShowChanged').and.callThrough();
+
+      fixture.componentInstance.searchboxComponent.ngAfterContentInit();
+
+      expect(fixture.componentInstance.searchboxComponent.autocomplete.registerOnSelect).toHaveBeenCalled();
+      expect(fixture.componentInstance.searchboxComponent.autocomplete.registerOnShowChanged).toHaveBeenCalled();
+    }));
+  });
+});