inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-08-14 17:58:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add test for mat-error on empty search term and handle loading state properly

Browse Source
This commit is contained in:
Shivangi917
2025-07-22 03:22:05 -04:00
parent bd330b83fb
commit b7e6bef8cf
6 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
View File

@@ -28,6 +28,6 @@
<button mat-icon-button (click)="clear()">
<mat-icon *ngIf="searchFieldFormControl.value.length" class="app-suffix-icon">clear</mat-icon>
</button>
</div>
</div>
</mat-form-field>
</div>

2
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.spec.ts
View File

@@ -94,5 +94,5 @@ describe('SearchInputControlComponent', () => {
component.searchTerm = 'dd';
fixture.detectChanges();
expect(component.isTermTooShort()).toBe(false);
});
});
});

1
projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.ts
View File

@@ -90,7 +90,6 @@ export class SearchInputControlComponent implements OnInit {
searchSubmit() {
this.searchFieldFormControl.markAsTouched();
const trimmedTerm = this.searchTerm?.trim();
if (this.searchFieldFormControl.valid && trimmedTerm?.length > 0) {
this.submit.emit(trimmedTerm);

1
projects/aca-content/src/lib/components/search/search-input/search-input.component.html
View File

@@ -50,7 +50,6 @@
*ngIf="searchInputControl.searchFieldFormControl.errors?.required && searchInputControl.searchFieldFormControl.touched" class="app-search-error">
{{ 'SEARCH.INPUT.REQUIRED' | translate }}
</mat-error>
<div id="search-options" class="app-search-options">
<mat-checkbox *ngFor="let option of searchOptions"
id="{{ option.id }}"

118
projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts
View File

@@ -1,62 +1,116 @@
/*!
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Alfresco Example Content Application
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchInputComponent } from './search-input.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MatError } from '@angular/material/form-field';
import { AppStore } from '@alfresco/aca-shared/store';
import { By } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppTestingModule } from '../../../testing/app-testing.module';
import { SearchInputComponent } from './search-input.component';
import { SearchInputControlComponent } from '../search-input-control/search-input-control.component';
import { Store } from '@ngrx/store';
import { of } from 'rxjs';
describe('SearchInputComponent', () => {
let fixture: ComponentFixture<SearchInputComponent>;
let component: SearchInputComponent;
let store: jasmine.SpyObj<Store<AppStore>>;
beforeEach(async () => {
const storeSpy = jasmine.createSpyObj<Store<AppStore>>('Store', ['dispatch', 'pipe']);
await TestBed.configureTestingModule({
imports: [AppTestingModule, ReactiveFormsModule, SearchInputComponent, SearchInputControlComponent],
schemas: [NO_ERRORS_SCHEMA]
providers: [{ provide: Store, useValue: storeSpy }],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(SearchInputComponent);
component = fixture.componentInstance;
// (component as any).searchInputControl = mockControl;
store = TestBed.inject(Store) as jasmine.SpyObj<Store<AppStore>>;
store.pipe.and.returnValue(of([]));
fixture.detectChanges();
});
describe('Validation Behavior', () => {
function getFirstError(): string {
const error = fixture.debugElement.query(By.directive(MatError));
return error?.nativeElement.textContent.trim();
}
function getFirstError(): string {
const error = fixture.debugElement.query(By.directive(MatError));
return error?.nativeElement.textContent.trim();
}
it('should show required error when field is empty and touched', () => {
component.searchInputControl.searchFieldFormControl.setValue('');
component.searchInputControl.searchFieldFormControl.markAsTouched();
fixture.detectChanges();
function openSearchContainer(): void {
const menuButton = fixture.debugElement.query(By.css('.app-search-container'));
menuButton?.nativeElement.click();
fixture.detectChanges();
}
const error = getFirstError();
fixture.detectChanges();
expect(error).toBe('SEARCH.INPUT.REQUIRED');
});
it('should show required error when field is empty and touched', () => {
openSearchContainer();
component.searchInputControl.searchFieldFormControl.setValue('');
component.searchInputControl.searchFieldFormControl.markAsTouched();
fixture.detectChanges();
expect(getFirstError()).toBe('SEARCH.INPUT.REQUIRED');
});
// it('should not show error when field has value', () => {
// mockControl.searchFieldFormControl.setValue('test');
// mockControl.searchFieldFormControl.markAsTouched();
// fixture.detectChanges();
it('should not show error when field has value', () => {
openSearchContainer();
component.searchInputControl.searchFieldFormControl.setValue('test');
component.searchInputControl.searchFieldFormControl.markAsTouched();
fixture.detectChanges();
const error = fixture.debugElement.query(By.directive(MatError));
expect(error).toBeNull();
});
// const error = fixture.debugElement.query(By.directive(MatError));
// expect(error).toBeNull();
// });
it('should not show error when field is untouched', () => {
openSearchContainer();
component.searchInputControl.searchFieldFormControl.setValue('');
component.searchInputControl.searchFieldFormControl.markAsUntouched();
fixture.detectChanges();
const error = fixture.debugElement.query(By.directive(MatError));
expect(error).toBeNull();
});
// it('should not show error when field is untouched', () => {
// mockControl.searchFieldFormControl.setValue('');
// mockControl.searchFieldFormControl.markAsUntouched();
// fixture.detectChanges();
it('should dispatch SearchByTermAction when libraries are checked and term is new', () => {
spyOn(component as any, 'isLibrariesChecked').and.returnValue(true);
spyOn(component as any, 'isFoldersChecked').and.returnValue(false);
spyOn(component as any, 'isFilesChecked').and.returnValue(false);
component.searchedWord = 'test';
component.onSearchSubmit('Enter');
expect(store.dispatch).toHaveBeenCalled();
});
// const error = fixture.debugElement.query(By.directive(MatError));
// expect(error).toBeNull();
// });
it('should not dispatch SearchByTermAction when no checkboxes are selected and term is empty', () => {
store.dispatch.calls.reset();
spyOn(component as any, 'isLibrariesChecked').and.returnValue(false);
spyOn(component as any, 'isFoldersChecked').and.returnValue(false);
spyOn(component as any, 'isFilesChecked').and.returnValue(false);
component.searchedWord = '';
component.onSearchSubmit({ target: { value: '' } });
expect(store.dispatch).not.toHaveBeenCalled();
});
});

8
projects/aca-content/src/lib/components/search/search-input/search-input.component.ts
View File

@@ -213,8 +213,8 @@ export class SearchInputComponent implements OnInit, OnDestroy {
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
if (this.onLibrariesSearchResults && this.isSameSearchTerm()) {
this.queryLibrariesBuilder.update();
} else if (this.searchedWord) {
this.store.dispatch(new SearchByTermAction(this.searchedWord, this.searchOptions));
} else if (searchTerm) {
this.store.dispatch(new SearchByTermAction(searchTerm, this.searchOptions));
}
} else {
if (this.isFoldersChecked() && !this.isFilesChecked()) {
@@ -227,8 +227,8 @@ export class SearchInputComponent implements OnInit, OnDestroy {
if (this.onSearchResults && this.isSameSearchTerm()) {
this.queryBuilder.update();
} else if (this.searchedWord) {
this.store.dispatch(new SearchByTermAction(this.searchedWord, this.searchOptions));
} else if (searchTerm) {
this.store.dispatch(new SearchByTermAction(searchTerm, this.searchOptions));
}
}
}