[ACS-4130] Added unit tests for new autocomplete functionality

projects/aca-content/folder-rules/src/mock/conditions.mock.ts

@@ -37,8 +37,8 @@ export const mimeTypeMock: RuleSimpleCondition = {
   parameter: ''
 };
 
-export const categoryMock: RuleSimpleCondition = {
-  field: 'category',
+export const tagMock: RuleSimpleCondition = {
+  field: 'tag',
   comparator: 'equals',
   parameter: ''
 };

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html

@@ -33,15 +33,18 @@
           matInput
           [matAutocomplete]="auto"
           formControlName="parameter"
+          data-automation-id="auto-complete-input-field"
         />
         <mat-autocomplete
           #auto="matAutocomplete"
+          data-automation-id="folder-rule-autocomplete"
           [displayWith]="autoCompleteDisplayFunction">
             <mat-option disabled *ngIf="showLoadingSpinner; else optionList">
               <span class="aca-rule-simple-condition__autocomplete-loading-spinner">
                 <mat-progress-spinner
                   color="primary"
                   mode="indeterminate"
+                  data-automation-id="autocomplete-loading-spinner"
                   [diameter]="25"
                 ></mat-progress-spinner>
               </span>

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.spec.ts

@@ -22,16 +22,89 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-component';
 import { CoreTestingModule } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { categoryMock, mimeTypeMock, simpleConditionUnknownFieldMock } from '../../mock/conditions.mock';
+import { tagMock, mimeTypeMock, simpleConditionUnknownFieldMock } from '../../mock/conditions.mock';
 import { MimeType } from './rule-mime-types';
+import { CategoryService } from '@alfresco/adf-content-services';
+import { of } from 'rxjs';
+import { RuleSimpleCondition } from '../../model/rule-simple-condition.model';
+import { delay } from 'rxjs/operators';
 
 describe('RuleSimpleConditionUiComponent', () => {
   let fixture: ComponentFixture<RuleSimpleConditionUiComponent>;
+  let categoryService: CategoryService;
+
+  const savedCategoryMock: RuleSimpleCondition = {
+    field: 'category',
+    comparator: 'equals',
+    parameter: 'a-fake-category-id'
+  };
+
+  const fakeCategory = {
+    entry: {
+      path: '/a/fake/category/path',
+      hasChildren: false,
+      name: 'FakeCategory',
+      id: 'fake-category-id-1'
+    }
+  };
+
+  const fakeCategoriesList = {
+    list: {
+      pagination: {
+        count: 3,
+        hasMoreItems: false,
+        totalItems: 0,
+        skipCount: 0,
+        maxItems: 25
+      },
+      entries: [
+        {
+          entry: {
+            path: {
+              name: '/a/fake/category/path/1'
+            },
+            hasChildren: false,
+            name: 'FakeCategory1',
+            id: 'fake-category-id-1',
+            nodeType: 'cm:category',
+            isFile: false,
+            isFolder: false
+          }
+        },
+        {
+          entry: {
+            path: {
+              name: '/a/fake/category/path/2'
+            },
+            hasChildren: false,
+            name: 'FakeCategory2',
+            id: 'fake-category-id-2',
+            nodeType: 'cm:category',
+            isFile: false,
+            isFolder: false
+          }
+        },
+        {
+          entry: {
+            path: {
+              name: '/a/fake/category/path/3'
+            },
+            hasChildren: false,
+            name: 'FakeCategory3',
+            id: 'fake-category-id-3',
+            nodeType: 'cm:category',
+            isFile: false,
+            isFolder: false
+          }
+        }
+      ]
+    }
+  };
 
   const getByDataAutomationId = (dataAutomationId: string): DebugElement =>
     fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
@@ -45,12 +118,20 @@ describe('RuleSimpleConditionUiComponent', () => {
     fixture.detectChanges();
   };
 
+  const setValueInInputField = (inputFieldDataAutomationId, value) => {
+    const inputField = fixture.debugElement.query(By.css(`[data-automation-id="${inputFieldDataAutomationId}"]`)).nativeElement;
+    inputField.value = value;
+    inputField.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [CoreTestingModule, RuleSimpleConditionUiComponent]
     });
 
     fixture = TestBed.createComponent(RuleSimpleConditionUiComponent);
+    categoryService = TestBed.inject(CategoryService);
   });
 
   it('should default the field to the name, the comparator to equals and the value empty', () => {
@@ -87,6 +168,20 @@ describe('RuleSimpleConditionUiComponent', () => {
     expect(getComputedStyle(comparatorFormField).display).toBe('none');
   });
 
+  it('should hide the comparator select box if the type of the field is autoComplete', () => {
+    const autoCompleteField = 'category';
+    fixture.detectChanges();
+    const comparatorFormField = getByDataAutomationId('comparator-form-field').nativeElement;
+
+    expect(fixture.componentInstance.isComparatorHidden).toBeFalsy();
+    expect(getComputedStyle(comparatorFormField).display).not.toBe('none');
+
+    changeMatSelectValue('field-select', autoCompleteField);
+
+    expect(fixture.componentInstance.isComparatorHidden).toBeTruthy();
+    expect(getComputedStyle(comparatorFormField).display).toBe('none');
+  });
+
   it('should set the comparator to equals if the field is set to a type with different comparators', () => {
     const onChangeFieldSpy = spyOn(fixture.componentInstance, 'onChangeField').and.callThrough();
     fixture.detectChanges();
@@ -165,9 +260,77 @@ describe('RuleSimpleConditionUiComponent', () => {
 
     expect(getByDataAutomationId('simple-condition-value-select')).toBeTruthy();
 
-    fixture.componentInstance.writeValue(categoryMock);
+    fixture.componentInstance.writeValue(tagMock);
     fixture.detectChanges();
 
     expect(getByDataAutomationId('value-input').nativeElement.value).toBe('');
   });
+
+  it('should provide autocomplete option when category is selected', () => {
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+
+    expect(getByDataAutomationId('auto-complete-input-field')).toBeTruthy();
+    expect(fixture.componentInstance.form.get('parameter').value).toEqual('');
+  });
+
+  it('should fetch category list when category option is selected', fakeAsync(() => {
+    spyOn(categoryService, 'searchCategories').and.returnValue(of(fakeCategoriesList));
+
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+    tick(500);
+
+    expect(categoryService.searchCategories).toHaveBeenCalledWith('');
+  }));
+
+  it('should fetch new category list with user input when user types into parameter field after category option is select', fakeAsync(() => {
+    const categoryValue = 'a new category';
+    spyOn(categoryService, 'searchCategories').and.returnValue(of(fakeCategoriesList));
+
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+    tick(500);
+    expect(categoryService.searchCategories).toHaveBeenCalledWith('');
+
+    setValueInInputField('auto-complete-input-field', categoryValue);
+    tick(500);
+    expect(categoryService.searchCategories).toHaveBeenCalledWith(categoryValue);
+  }));
+
+  it('should fetch category details when a saved rule with category condition is edited', () => {
+    spyOn(categoryService, 'getCategory').and.returnValue(of(fakeCategory));
+
+    fixture.componentInstance.writeValue(savedCategoryMock);
+    fixture.detectChanges();
+
+    expect(categoryService.getCategory).toHaveBeenCalledWith(savedCategoryMock.parameter, { include: ['path'] });
+  });
+
+  it('should show loading spinner while autocomplete options are fetched, and then remove it once it is received', fakeAsync(() => {
+    spyOn(categoryService, 'searchCategories').and.returnValue(of(fakeCategoriesList).pipe(delay(1000)));
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+    tick(500);
+    getByDataAutomationId('auto-complete-input-field')?.nativeElement?.click();
+    let loadingSpinner = getByDataAutomationId('autocomplete-loading-spinner');
+    expect(loadingSpinner).not.toBeNull();
+    tick(1000);
+    fixture.detectChanges();
+    loadingSpinner = getByDataAutomationId('autocomplete-loading-spinner');
+    expect(loadingSpinner).toBeNull();
+    discardPeriodicTasks();
+  }));
+
+  it('should display correct label for category when user selects a category from autocomplete dropdown', fakeAsync(() => {
+    spyOn(categoryService, 'searchCategories').and.returnValue(of(fakeCategoriesList));
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+    tick(500);
+    getByDataAutomationId('auto-complete-input-field')?.nativeElement?.click();
+    changeMatSelectValue('folder-rule-autocomplete', fakeCategoriesList.list.entries[0].entry.id);
+    const displayValue = getByDataAutomationId('auto-complete-input-field')?.nativeElement?.value;
+    expect(displayValue).toBe('category/path/1/FakeCategory1');
+    discardPeriodicTasks();
+  }));
 });