updated tests

Author: samuil4

projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.spec.ts

@@ -8,36 +8,32 @@ describe('TypeaheadComponent', () => {
   let component: TypeaheadComponent;
   let fixture: ComponentFixture<TypeaheadComponent>;
 
-  const testSearchResults = [{
+  const testSearchResults = [
+    {
       displayName: 'option1',
-      value: {key: 1}
+      value: { key: 1 },
     },
     {
       displayName: 'option2',
-      value: {key: 2}
+      value: { key: 2 },
     },
     {
       displayName: 'option3',
-      value: {id: '1234', key: 3}
-    }];
+      value: { id: '1234', key: 3 },
+    },
+  ];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        TypeaheadComponent,
-        OutsideClickListenerDirective
-      ],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule
-      ]
-    })
-    .compileComponents();
+      declarations: [TypeaheadComponent, OutsideClickListenerDirective],
+      imports: [FormsModule, ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TypeaheadComponent);
     component = fixture.componentInstance;
+    component.displayProp = 'displayName';
     fixture.detectChanges();
   });
 
@@ -48,7 +44,10 @@ describe('TypeaheadComponent', () => {
   it('#should populate with search results on end of user input', () => {
     component.searchResults = testSearchResults;
 
-    expect(component.searchResults.length > 0).toBe(true, 'search results are properly populated');
+    expect(component.searchResults.length > 0).toBe(
+      true,
+      'search results are properly populated',
+    );
   });
 
   it('#should choose one item when [multiple] = false', () => {
@@ -61,11 +60,19 @@ describe('TypeaheadComponent', () => {
     component.selectSearchResult(component.searchResults[0]);
     component.selectSearchResult(component.searchResults[1]);
 
+    console.log(
+      !Object.is(
+        component.selectedItems.get(0).value,
+        component.value[0].value,
+      ),
+    );
+
     // the typeahead should return a new array with the copied search items
-    expect(component.value.length === 1 &&
-          !Object.is(component.selectedItems.get(0).value, component.value[0].value) &&
-          component.value[0].value.id === component.selectedItems.get(0).value.id)
-      .toBe(true, 'single choice is correctly populated');
+    expect(
+      component.value.length === 1 &&
+        !Object.is(component.selectedItems.get(0), component.value[0]) &&
+        component.value[0].value.id === component.selectedItems.get(0).value.id,
+    ).toBe(true, 'single choice is correctly populated');
   });
 
   it('#should be able to choose more than one result when [multiple] = true', () => {
@@ -76,9 +83,10 @@ describe('TypeaheadComponent', () => {
       component.selectSearchResult(component.searchResults[i]);
     }
 
-    expect(component.value.length === testSearchResults.length &&
-          !Object.is(component.selectedItems, component.value))
-      .toBe(true, 'multiple choice is correctly populated');
+    expect(
+      component.value.length === testSearchResults.length &&
+        !Object.is(component.selectedItems, component.value),
+    ).toBe(true, 'multiple choice is correctly populated');
   });
 
   it('#should remove selected item by using the remove button', () => {
@@ -89,27 +97,54 @@ describe('TypeaheadComponent', () => {
 
     component.removeSearchResult(component.selectedItems.size - 1);
 
-    expect(component.value.length === 0)
-      .toBe(true, 'selected item successfully removed');
+    expect(component.value.length === 0).toBe(
+      true,
+      'selected item successfully removed',
+    );
   });
 
   it('#should be able to populate correctly with a pre-defined SearchResult[] when [multiple] = true', () => {
     component.multiple = true;
     component.value = testSearchResults;
-    expect(component.selectedItems.toArray())
-      .toEqual(component.value, 'component value and immutable list have the same items and length');
+    expect(component.selectedItems.toArray()).toEqual(
+      component.value,
+      'component value and immutable list have the same items and length',
+    );
   });
 
   it('#should be able to populate correctly with a pre-defined SearchResult[] when [multiple] = false', () => {
     component.multiple = false;
     component.value = testSearchResults;
     const itemsToArray = component.selectedItems.toArray();
-    expect(itemsToArray.length === 1)
-      .toBe(true, 'immutable list has only one item');
-
-    expect(Object.is(itemsToArray[0], component.value[0]))
-      .toBe(true, 'the only item is the first one from the value array');
+    expect(itemsToArray.length === 1).toBe(
+      true,
+      'immutable list has only one item',
+    );
+
+    expect(Object.is(itemsToArray[0], component.value[0])).toBe(
+      true,
+      'the only item is the first one from the value array',
+    );
   });
 
+  it('#should be working with plain strings', () => {
+    const stringSearchResults = ['option1', 'option2', 'option3'];
 
+    component.displayProp = '';
+    component.multiple = false;
+    component.value = stringSearchResults;
+    component.selectSearchResult(testSearchResults[0]);
+    component.selectSearchResult(testSearchResults[1]);
+
+    const itemsToArray = component.selectedItems.toArray();
+    expect(itemsToArray.length === 1).toBe(
+      true,
+      'immutable list has only one item',
+    );
+
+    expect(itemsToArray[0] === component.value[0]).toBe(
+      true,
+      'the only item is the first one from the value array',
+    );
+  });
 });