From 5132f4d48215cb53a8468dd8431a131f42bcad83 Mon Sep 17 00:00:00 2001 From: domsteinbach <36757218+domsteinbach@users.noreply.github.com> Date: Tue, 31 Oct 2023 08:51:43 +0100 Subject: [PATCH] feat(expert search): implement default gravsearch as placeholder (#1247) --- .../list-info-form.component.spec.ts | 2 +- .../edit-list-item.component.spec.ts | 3 +- .../list-item-form.component.spec.ts | 10 +- .../property-form.component.spec.ts | 2 +- .../resource-class-form.component.spec.ts | 4 +- .../project-form.component.spec.ts | 2 +- .../src/app/project/project.component.spec.ts | 2 +- .../user/account/account.component.spec.ts | 9 ++ .../user/profile/profile.component.spec.ts | 16 ++- .../src/app/user/user.component.spec.ts | 2 +- .../expert-search.component.html | 7 +- .../expert-search.component.spec.ts | 118 ++---------------- .../expert-search/expert-search.component.ts | 46 +++++-- 13 files changed, 88 insertions(+), 135 deletions(-) diff --git a/apps/dsp-app/src/app/project/list/list-info-form/list-info-form.component.spec.ts b/apps/dsp-app/src/app/project/list/list-info-form/list-info-form.component.spec.ts index 10dfc4167e..10127afd6c 100644 --- a/apps/dsp-app/src/app/project/list/list-info-form/list-info-form.component.spec.ts +++ b/apps/dsp-app/src/app/project/list/list-info-form/list-info-form.component.spec.ts @@ -83,7 +83,7 @@ class TestHostCreateListComponent { /** * test component that mocks StringLiteralInputComponent */ -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; @Input() language: string; diff --git a/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts b/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts index 97a0ed41a6..6cbf56f2b0 100644 --- a/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts +++ b/apps/dsp-app/src/app/project/list/list-item-form/edit-list-item/edit-list-item.component.spec.ts @@ -28,6 +28,7 @@ import { EditListItemComponent } from './edit-list-item.component'; import { MockProvider } from 'ng-mocks'; import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; + /** * test host component to simulate parent component for updating an existing child node. */ @@ -70,7 +71,7 @@ class TestHostInsertChildNodeComponent { constructor() {} } -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; @Input() language: string; diff --git a/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.spec.ts b/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.spec.ts index e276de81c6..1c760efcfb 100644 --- a/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.spec.ts +++ b/apps/dsp-app/src/app/project/list/list-item-form/list-item-form.component.spec.ts @@ -40,6 +40,13 @@ import { ApplicationStateService } from '@dasch-swiss/vre/shared/app-state-servi import { MockProvider } from 'ng-mocks'; import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; + +@Component({ + selector: 'dasch-swiss-app-progress-indicator', + template: '', +}) +class MockProgressIndicatorComponent {} + /** * test host component to simulate parent component. */ @@ -84,7 +91,7 @@ class TestHostComponent implements OnInit { /** * test component that mocks StringLiteralInputComponent */ -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; @Input() language: string; @@ -128,6 +135,7 @@ describe('ListItemFormComponent', () => { StringifyStringLiteralPipe, TruncatePipe, MockStringLiteralInputComponent, + MockProgressIndicatorComponent, ], imports: [ BrowserAnimationsModule, diff --git a/apps/dsp-app/src/app/project/ontology/property-form/property-form.component.spec.ts b/apps/dsp-app/src/app/project/ontology/property-form/property-form.component.spec.ts index 4afda583a6..9f254e047d 100644 --- a/apps/dsp-app/src/app/project/ontology/property-form/property-form.component.spec.ts +++ b/apps/dsp-app/src/app/project/ontology/property-form/property-form.component.spec.ts @@ -233,7 +233,7 @@ class ListHostComponent { }; } -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; @Input() language: string; diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts index 43294e63d7..541d1ca523 100644 --- a/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts +++ b/apps/dsp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts @@ -38,6 +38,7 @@ import { ResourceClassFormComponent } from './resource-class-form.component'; import { MockProvider } from 'ng-mocks'; import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; + /** * test host component to simulate parent component. */ @@ -46,10 +47,9 @@ import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; }) class TestHostResourceClassFormComponent {} -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; - @Input() language: string; @Input() textarea: boolean; @Input() value: StringLiteral[] = []; @Input() disabled: boolean; diff --git a/apps/dsp-app/src/app/project/project-form/project-form.component.spec.ts b/apps/dsp-app/src/app/project/project-form/project-form.component.spec.ts index 9f67260ead..e76f4217cd 100644 --- a/apps/dsp-app/src/app/project/project-form/project-form.component.spec.ts +++ b/apps/dsp-app/src/app/project/project-form/project-form.component.spec.ts @@ -29,7 +29,7 @@ import { MockProvider } from 'ng-mocks'; import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; import {convertToParamMap} from "@angular/router"; -@Component({ selector: 'app-string-literal-input', template: '' }) +@Component({ selector: 'dasch-swiss-app-string-literal', template: '' }) class MockStringLiteralInputComponent { @Input() placeholder = 'Label'; @Input() language: string; diff --git a/apps/dsp-app/src/app/project/project.component.spec.ts b/apps/dsp-app/src/app/project/project.component.spec.ts index 66d476c1c9..41758d4490 100644 --- a/apps/dsp-app/src/app/project/project.component.spec.ts +++ b/apps/dsp-app/src/app/project/project.component.spec.ts @@ -50,7 +50,7 @@ class MockOntologyClassesComponent { } @Component({ - selector: 'app-progress-indicator', + selector: 'dasch-swiss-app-progress-indicator', template: '', }) class MockProgressIndicatorComponent {} diff --git a/apps/dsp-app/src/app/user/account/account.component.spec.ts b/apps/dsp-app/src/app/user/account/account.component.spec.ts index 20d2fbc400..b7453ece32 100644 --- a/apps/dsp-app/src/app/user/account/account.component.spec.ts +++ b/apps/dsp-app/src/app/user/account/account.component.spec.ts @@ -20,6 +20,14 @@ import { StatusComponent } from '@dsp-app/src/app/main/status/status.component'; import { TestConfig } from '@dsp-app/src/test.config'; import { PasswordFormComponent } from '../user-form/password-form/password-form.component'; import { AccountComponent } from './account.component'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'dasch-swiss-app-progress-indicator', + template: '', +}) +class MockProgressIndicatorComponent {} + describe('AccountComponent', () => { let component: AccountComponent; @@ -32,6 +40,7 @@ describe('AccountComponent', () => { PasswordFormComponent, DialogComponent, StatusComponent, + MockProgressIndicatorComponent ], imports: [ BrowserAnimationsModule, diff --git a/apps/dsp-app/src/app/user/profile/profile.component.spec.ts b/apps/dsp-app/src/app/user/profile/profile.component.spec.ts index 4d5b3b158a..50924f885d 100644 --- a/apps/dsp-app/src/app/user/profile/profile.component.spec.ts +++ b/apps/dsp-app/src/app/user/profile/profile.component.spec.ts @@ -16,6 +16,15 @@ import { DialogComponent } from '@dsp-app/src/app/main/dialog/dialog.component'; import { StatusComponent } from '@dsp-app/src/app/main/status/status.component'; import { TestConfig } from '@dsp-app/src/test.config'; import { ProfileComponent } from './profile.component'; +import { Component } from '@angular/core'; + + +@Component({ + selector: 'dasch-swiss-app-progress-indicator', + template: '', +}) +class MockProgressIndicatorComponent {} + describe('ProfileComponent', () => { let component: ProfileComponent; @@ -23,7 +32,12 @@ describe('ProfileComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ProfileComponent, DialogComponent, StatusComponent], + declarations: [ + ProfileComponent, + DialogComponent, + StatusComponent, + MockProgressIndicatorComponent + ], imports: [ BrowserAnimationsModule, MatButtonModule, diff --git a/apps/dsp-app/src/app/user/user.component.spec.ts b/apps/dsp-app/src/app/user/user.component.spec.ts index 0203fa2747..0b52319376 100644 --- a/apps/dsp-app/src/app/user/user.component.spec.ts +++ b/apps/dsp-app/src/app/user/user.component.spec.ts @@ -37,7 +37,7 @@ import { AppLoggingService } from '@dasch-swiss/vre/shared/app-logging'; * test component to simulate child component, here progress-indicator from action module. */ @Component({ - selector: 'app-progress-indicator', + selector: 'dasch-swiss-app-progress-indicator', template: '', }) class TestProgressIndicatorComponent {} diff --git a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.html b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.html index a1f4f66119..e51b734bb4 100644 --- a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.html +++ b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.html @@ -2,7 +2,12 @@
Write your Gravsearch query - diff --git a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.spec.ts b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.spec.ts index 567f4a4ed0..89840ec628 100644 --- a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.spec.ts +++ b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.spec.ts @@ -107,28 +107,6 @@ describe('ExpertSearchComponent', () => { expect(testHostComponent.expertSearch).toBeTruthy(); }); - it('should init the form with the default query', () => { - const textarea = hostCompDe.query( - By.css('textarea.textarea-field-content') - ); - const textareaEle = textarea.nativeElement; - - expect(textareaEle.value).toBe( - `PREFIX knora-api: -PREFIX incunabula: - -CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . - -} WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . -} -` - ); - }); - it('should reset the form', () => { const resetBtn = hostCompDe.query(By.css('button.reset')); const textarea = hostCompDe.query( @@ -138,9 +116,8 @@ CONSTRUCT { const resetEle = resetBtn.nativeElement; const textareaEle = textarea.nativeElement; - // delete textarea content displayed by default to make a change - textareaEle.value = ''; - expect(textareaEle.value).toBe(''); + // mock enter some characters into textarea + textareaEle.value = 'some text'; resetEle.click(); @@ -148,105 +125,24 @@ CONSTRUCT { // reset the textarea content expect(textareaEle.value).toBe( - `PREFIX knora-api: -PREFIX incunabula: - -CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . - -} WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . -} -` - ); - }); - - it('should register the query in the params service', () => { - const expectedGravsearch = `PREFIX knora-api: -PREFIX incunabula: - -CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . - -} WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . -} - - OFFSET 0 - `; - const submitBtn = hostCompDe.query(By.css('button[type="submit"]')); - const submitBtnEle = submitBtn.nativeElement; - - submitBtnEle.click(); - testHostFixture.detectChanges(); - - expect( - searchParamsServiceSpy.changeSearchParamsMsg - ).toHaveBeenCalledTimes(1); - expect(gravsearchSearchParams).toBeDefined(); - expect(gravsearchSearchParams.generateGravsearch(0)).toEqual( - expectedGravsearch + '' ); }); - it('should emit the Gravsearch query', () => { - const expectedGravsearch = `PREFIX knora-api: -PREFIX incunabula: - -CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . - -} WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . -} - - OFFSET 0 - `; - - const submitBtn = hostCompDe.query(By.css('button[type="submit"]')); - const submitBtnEle = submitBtn.nativeElement; - - expect(testHostComponent.gravsearchQ).toBeUndefined(); - - submitBtnEle.click(); - testHostFixture.detectChanges(); - - expect(testHostComponent.gravsearchQ).toBeDefined(); - expect(testHostComponent.gravsearchQ.query).toEqual(expectedGravsearch); - expect(testHostComponent.gravsearchQ.mode).toEqual('gravsearch'); - }); - it('should not return an invalid query', () => { + // if no query is entered expect( testHostComponent.expertSearch.expertSearchForm.valid - ).toBeTruthy(); + ).toBeFalsy(); const textarea = hostCompDe.query( By.css('textarea.textarea-field-content') ); const textareaEle = textarea.nativeElement; - expect(textareaEle.value).toBe( - `PREFIX knora-api: -PREFIX incunabula: - -CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . - -} WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . -} -` - ); + expect(textareaEle.value).toBe(''); + // mock enter a wrong gravsearch query into textarea: "OFFSET 0" is not allowed in the query. textareaEle.value = `PREFIX knora-api: PREFIX incunabula: diff --git a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.ts b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.ts index d29b7896fb..46812c8777 100644 --- a/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.ts +++ b/apps/dsp-app/src/app/workspace/search/expert-search/expert-search.component.ts @@ -1,4 +1,13 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + OnInit, + Output, + ViewChild +} from '@angular/core'; import { AbstractControl, UntypedFormBuilder, @@ -31,7 +40,7 @@ export function forbiddenTermValidator(termRe: RegExp): ValidatorFn { templateUrl: './expert-search.component.html', styleUrls: ['./expert-search.component.scss'], }) -export class ExpertSearchComponent implements OnInit { +export class ExpertSearchComponent implements OnInit, AfterViewInit { /** * the data event emitter of type SearchParams * @@ -39,51 +48,62 @@ export class ExpertSearchComponent implements OnInit { */ @Output() search = new EventEmitter(); + @ViewChild('textArea') textAreaElement: ElementRef; + expertSearchForm: UntypedFormGroup; queryFormControl: UntypedFormControl; iriBaseUrl = this._os.getIriBaseUrl(); defaultGravsearchQuery = `PREFIX knora-api: -PREFIX incunabula: <${this.iriBaseUrl}/ontology/0803/incunabula/v2#> +PREFIX webern: <${this.iriBaseUrl}/ontology/0806/webern-onto/v2#> CONSTRUCT { - ?book knora-api:isMainResource true . - ?book incunabula:title ?title . +?s knora-api:isMainResource true . +?s webern:hasTitle ?title . } WHERE { - ?book a incunabula:book . - ?book incunabula:title ?title . +?s a knora-api:Resource . +?s a webern:EditedText . +?s webern:hasTitle ?title . } `; constructor( private _os: OntologyService, private _searchParamsService: SearchParamsService, - private _fb: UntypedFormBuilder + private _fb: UntypedFormBuilder, + private _cdr: ChangeDetectorRef ) {} ngOnInit(): void { - // initialize the form with predefined Gravsearch query as example. - this.queryFormControl = new UntypedFormControl( - this.defaultGravsearchQuery + this.queryFormControl = new UntypedFormControl('' ); this.expertSearchForm = this._fb.group({ gravsearchquery: [ - this.defaultGravsearchQuery, + '', [Validators.required, forbiddenTermValidator(/OFFSET/i)], ], }); } + ngAfterViewInit() { + if (this.textAreaElement?.nativeElement) { + // focus the text area + this.textAreaElement.nativeElement.focus(); + this._cdr.detectChanges(); + } + } + /** * reset the form to the initial state. */ resetForm() { this.expertSearchForm.reset({ - gravsearchquery: this.defaultGravsearchQuery, }); + // focus the text area + this.textAreaElement.nativeElement.focus(); } /**