From 6d8c8b62e1b66b25c2d79864104342427817e375 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Thu, 24 Oct 2019 13:31:27 +0300 Subject: [PATCH 1/2] fix(suggest): toggle disable state on searchable --- .../src/ui-suggest.component.spec.ts | 99 ++++++++++++---- .../ui-suggest/src/ui-suggest.component.ts | 110 ++++++++++-------- 2 files changed, 136 insertions(+), 73 deletions(-) diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts index 4f842e22b..80220df72 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.spec.ts @@ -1,49 +1,49 @@ import { - Component, - ViewChild, + Component, + ViewChild, } from '@angular/core'; import { - async, - ComponentFixture, - discardPeriodicTasks, - fakeAsync, - TestBed, - tick, + async, + ComponentFixture, + discardPeriodicTasks, + fakeAsync, + TestBed, + tick, } from '@angular/core/testing'; import { - FormBuilder, - FormGroup, - ReactiveFormsModule, + FormBuilder, + FormGroup, + ReactiveFormsModule, } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { - EventGenerator, - Key, + EventGenerator, + Key, } from '@uipath/angular/testing'; import * as faker from 'faker'; import { VirtualScrollItemStatus } from 'projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api'; import { - Observable, - of, + Observable, + of, } from 'rxjs'; import { - delay, - finalize, - map, - skip, - take, + delay, + finalize, + map, + skip, + take, } from 'rxjs/operators'; import { - ISuggestValue, - ISuggestValues, + ISuggestValue, + ISuggestValues, } from './models'; import { - generateSuggestionItem, - generateSuggetionItemList, + generateSuggestionItem, + generateSuggetionItemList, } from './test'; import { UiSuggestComponent } from './ui-suggest.component'; import { UiSuggestModule } from './ui-suggest.module'; @@ -527,6 +527,57 @@ const sharedSpecifications = ( }); }); + describe('Scenario: toggle disabled state', () => { + it('should toggle loading state if it is searchable with items', async () => { + const items = generateSuggetionItemList(); + component.items = items; + component.disabled = true; + component.searchable = true; + + fixture.detectChanges(); + + expect(uiSuggest.disabled).toBeTruthy(); + expect(uiSuggest.loading$.value).toBeTruthy(); + + component.disabled = false; + fixture.detectChanges(); + + expect(uiSuggest.disabled).toBeFalsy(); + + const display = fixture.debugElement.query(By.css('.display')); + display.nativeElement.dispatchEvent(EventGenerator.click); + + expect(uiSuggest.loading$.value).toBeFalsy(); + }); + + it('should not be in loading state if it has a searchSourceFactory', async () => { + const items = generateSuggetionItemList(); + component.disabled = true; + uiSuggest.searchSourceFactory = (term) => { + return of([...items]).pipe( + map(itemList => ({ + data: itemList.filter(item => item.text.includes(term as string)), + total: itemList.length, + }) as ISuggestValues), + ); + }; + + fixture.detectChanges(); + expect(uiSuggest.disabled).toBeTruthy(); + + component.disabled = false; + fixture.detectChanges(); + expect(uiSuggest.disabled).toBeFalsy(); + + const display = fixture.debugElement.query(By.css('.display')); + display.nativeElement.dispatchEvent(EventGenerator.click); + await fixture.whenStable(); + + expect(uiSuggest.loading$.value).toBeFalsy(); + }); + }); + + it('should not open on first click and close on the second', () => { fixture.detectChanges(); diff --git a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts index 51e194386..90cf6369e 100644 --- a/projects/angular/components/ui-suggest/src/ui-suggest.component.ts +++ b/projects/angular/components/ui-suggest/src/ui-suggest.component.ts @@ -2,29 +2,29 @@ import { LiveAnnouncer } from '@angular/cdk/a11y'; import { ListRange } from '@angular/cdk/collections'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; import { - AfterViewInit, - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ContentChild, - ElementRef, - EventEmitter, - HostBinding, - Input, - isDevMode, - OnDestroy, - OnInit, - Optional, - Output, - Self, - TemplateRef, - ViewChild, - ViewEncapsulation, + AfterViewInit, + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ContentChild, + ElementRef, + EventEmitter, + HostBinding, + Input, + isDevMode, + OnDestroy, + OnInit, + Optional, + Output, + Self, + TemplateRef, + ViewChild, + ViewEncapsulation, } from '@angular/core'; import { - FormGroupDirective, - NgControl, - NgForm, + FormGroupDirective, + NgControl, + NgForm, } from '@angular/forms'; import { ErrorStateMatcher } from '@angular/material/core'; import { MatFormFieldControl } from '@angular/material/form-field'; @@ -33,44 +33,44 @@ import { VirtualScrollItemStatus } from '@uipath/angular/directives/ui-virtual-s import cloneDeep from 'lodash-es/cloneDeep'; import isEqual from 'lodash-es/isEqual'; import { - BehaviorSubject, - combineLatest, - merge, - Observable, - Subject, - Subscription, + BehaviorSubject, + combineLatest, + merge, + Observable, + Subject, + Subscription, } from 'rxjs'; import { - debounceTime, - delay, - distinctUntilChanged, - filter, - finalize, - map, - retry, - startWith, - takeUntil, - tap, + debounceTime, + delay, + distinctUntilChanged, + filter, + finalize, + map, + retry, + startWith, + takeUntil, + tap, } from 'rxjs/operators'; import { - ISuggestValue, - ISuggestValues, - SuggestDirection, + ISuggestValue, + ISuggestValues, + SuggestDirection, } from './models'; import { UI_SUGGEST_ANIMATIONS } from './ui-suggest.animations'; import { UiSuggestIntl } from './ui-suggest.intl'; import { UiSuggestMatFormField } from './ui-suggest.mat-form-field'; import { - caseInsensitiveCompare, - generateLoadingInitialCollection, - inMemorySearch, - mapInitialItems, - resetUnloadedState, - setLoadedState, - setPendingState, - sortByPriorityAndDirection, - toSuggestValue, + caseInsensitiveCompare, + generateLoadingInitialCollection, + inMemorySearch, + mapInitialItems, + resetUnloadedState, + setLoadedState, + setPendingState, + sortByPriorityAndDirection, + toSuggestValue, } from './utils'; /** @@ -113,6 +113,8 @@ export class UiSuggestComponent extends UiSuggestMatFormField return this._disabled; } public set disabled(value) { + if (this._disabled === !!value) { return; } + this._disabled = !!value; if ( value && @@ -123,6 +125,16 @@ export class UiSuggestComponent extends UiSuggestMatFormField this._cd.markForCheck(); this.stateChanges.next(); + + if (value || !this.searchable) { + return; + } + + if (this.searchSourceFactory) { + this.fetch(); + } else { + this.loading$.next(false); + } } /** From e7c22c51ce59146687954e874edcdc71f57affb0 Mon Sep 17 00:00:00 2001 From: Andrei Balasescu Date: Thu, 24 Oct 2019 16:09:16 +0300 Subject: [PATCH 2/2] chore: bump version /w changelog --- CHANGELOG.md | 3 +++ package-lock.json | 2 +- package.json | 2 +- projects/angular/package.json | 2 +- 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 206f5c08d..a395cdbfa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +# v0.10.12 (2019-10-24) +* **suggest** fix `loading` state on toggle disabled + # v0.10.11 (2019-10-24) * **testing** define `keyCode` and bind correct `code` in generator diff --git a/package-lock.json b/package-lock.json index 8b71948aa..6e1cab0dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "angular-components", - "version": "0.10.11", + "version": "0.10.12", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 93e4b14f6..70e11b5ef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-components", - "version": "0.10.11", + "version": "0.10.12", "author": { "name": "UiPath Inc", "url": "https://uipath.com" diff --git a/projects/angular/package.json b/projects/angular/package.json index bd24c60ab..0048ac90b 100644 --- a/projects/angular/package.json +++ b/projects/angular/package.json @@ -1,6 +1,6 @@ { "name": "@uipath/angular", - "version": "0.10.11", + "version": "0.10.12", "license": "MIT", "author": { "name": "UiPath Inc",