Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(ontology): edit data model info (DSP-1208) (#385)
  • Loading branch information
kilchenmann committed Mar 18, 2021
1 parent 8824682 commit 86a5fb8
Show file tree
Hide file tree
Showing 9 changed files with 226 additions and 78 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -32,7 +32,7 @@
"@angular/platform-browser-dynamic": "^9.1.13",
"@angular/router": "^9.1.13",
"@ckeditor/ckeditor5-angular": "^1.2.3",
"@dasch-swiss/dsp-js": "^2.1.1",
"@dasch-swiss/dsp-js": "^2.2.0",
"@dasch-swiss/dsp-ui": "^1.2.2",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "5.0.0",
Expand Down
7 changes: 4 additions & 3 deletions src/app/main/dialog/dialog.component.html
Expand Up @@ -213,15 +213,16 @@

<!-- Ontology editor: create new ontology -->
<div *ngSwitchCase="'createOntology'">
<app-dialog-header [title]="'Data model'" [subtitle]="'Create new'"></app-dialog-header>
<app-dialog-header [title]="data.title" [subtitle]="'Create new'"></app-dialog-header>
<app-ontology-form [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
[existingOntologyNames]="data.existing"></app-ontology-form>
</div>

<div *ngSwitchCase="'editOntology'">
<app-dialog-header [title]="'Data model'" [subtitle]="'Edit'" (close)="dialogRef.close()">
<app-dialog-header [title]="data.title" [subtitle]="'Customize data model'" (close)="dialogRef.close()">
</app-dialog-header>
<p class="todo" [innerHtml]="notYetImplemented"></p>
<app-ontology-form [iri]="data.id" [projectcode]="data.project" (closeDialog)="dialogRef.close($event)"
[existingOntologyNames]="data.existing"></app-ontology-form>
</div>

<div *ngSwitchCase="'deleteOntology'">
Expand Down
31 changes: 21 additions & 10 deletions src/app/project/ontology/ontology-form/ontology-form.component.html
@@ -1,23 +1,31 @@
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

<form [formGroup]="ontologyForm" (ngSubmit)="createOntology()" class="form" *ngIf="!loading">
<form [formGroup]="ontologyForm" (ngSubmit)="submitData()" class="form" *ngIf="!loading">
<!-- auto complete list to select resource classes -->
<div class="form-content">
<mat-form-field class="large-field ontology-name">
<input matInput [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
<input matInput class="ontology-name" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
[placeholder]="'Set a unique name *'">
<mat-hint *ngIf="formErrors.name">
<mat-hint *ngIf="formErrors.name" class="medium-field">
{{ formErrors.name }}
</mat-hint>
<mat-hint align="end">{{ontologyForm.controls['name'].value.length}} / {{nameMaxLength}}</mat-hint>
</mat-form-field>

<mat-form-field class="large-field ontology-label">
<input matInput [formControl]="ontologyForm.controls['label']" [placeholder]="'Label'"
<input matInput [formControl]="ontologyForm.controls['label']" [placeholder]="iri ? 'Label *' : 'Label'"
[value]="ontologyLabel">
<span matPrefix>{{project.shortname}}:&nbsp;</span>
<mat-hint *ngIf="formErrors.label">
{{ formErrors.label }}
</mat-hint>
<span *ngIf="!iri" matPrefix>{{project.shortname}}:&nbsp;</span>
<mat-hint *ngIf="formErrors.label">
{{ formErrors.label }}
</mat-hint>
</mat-form-field>

<mat-form-field class="large-field ontology-comment">
<textarea matInput [formControl]="ontologyForm.controls['comment']"
[placeholder]="'Comment'" [value]="ontologyComment"
[matAutosizeMinRows]="6" [matAutosizeMaxRows]="12">
</textarea>
</mat-form-field>

<div class="form-panel form-action">
Expand All @@ -28,8 +36,11 @@
</span>
<span class="fill-remaining-space"></span>
<span>
<button mat-raised-button type="submit" color="primary" [disabled]="!ontologyForm.valid">
Create
<button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'" [disabled]="!ontologyForm.valid">
<dsp-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</dsp-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{error ? 'Failed' : (iri ? 'Update' : 'Create')}}
</button>
</span>
</div>
Expand Down
104 changes: 87 additions & 17 deletions src/app/project/ontology/ontology-form/ontology-form.component.spec.ts
Expand Up @@ -3,9 +3,10 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { By } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
import { KnoraApiConnection, MockProjects } from '@dasch-swiss/dsp-js';
import {
AppInitService,
DspActionModule,
Expand All @@ -14,23 +15,23 @@ import {
DspCoreModule
} from '@dasch-swiss/dsp-ui';
import { TranslateModule } from '@ngx-translate/core';
import { DialogComponent } from 'src/app/main/dialog/dialog.component';
import { ErrorComponent } from 'src/app/main/error/error.component';
import { of } from 'rxjs';
import { CacheService } from 'src/app/main/cache/cache.service';
import { TestConfig } from 'test.config';
import { OntologyFormComponent } from './ontology-form.component';

describe('OntologyFormComponent', () => {
let component: OntologyFormComponent;
let fixture: ComponentFixture<OntologyFormComponent>;
let ontologyFormComponent: OntologyFormComponent;
let ontologyFormFixture: ComponentFixture<OntologyFormComponent>;

const formBuilder: FormBuilder = new FormBuilder();

const cacheServiceSpy = jasmine.createSpyObj('CacheService', ['get']);

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
OntologyFormComponent,
DialogComponent,
ErrorComponent
OntologyFormComponent
],
imports: [
BrowserAnimationsModule,
Expand All @@ -54,26 +55,95 @@ describe('OntologyFormComponent', () => {
{
provide: DspApiConnectionToken,
useValue: new KnoraApiConnection(TestConfig.ApiConfig)
},
{
provide: CacheService,
useValue: cacheServiceSpy
}
]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(OntologyFormComponent);
component = fixture.componentInstance;
// mock cache service for currentOntology
const cacheSpy = TestBed.inject(CacheService);

(cacheSpy as jasmine.SpyObj<CacheService>).get.and.callFake(
() => {
const response = MockProjects.mockProject();
return of(response);
}
);

// pass in the form dynamically
component.ontologyForm = formBuilder.group({
name: null,
label: null
});
ontologyFormFixture = TestBed.createComponent(OntologyFormComponent);
ontologyFormComponent = ontologyFormFixture.componentInstance;
ontologyFormComponent.projectcode = '00FF';
// ontologyFormComponent.iri = 'http://0.0.0.0:3333/ontology/0001/anything/v2';
ontologyFormComponent.existingOntologyNames = ['images'];

fixture.detectChanges();
ontologyFormComponent.ngOnInit();
ontologyFormFixture.detectChanges();
});


it('should create', () => {
expect(component).toBeTruthy();
expect(ontologyFormComponent).toBeTruthy();
});

it('should render input elements', () => {
const compiled = ontologyFormFixture.debugElement;
const nameInput = compiled.query(By.css('.ontology-name input'));
const labelInput = compiled.query(By.css('.ontology-label input'));
const commentInput = compiled.query(By.css('.ontology-comment textarea'));

expect(nameInput).toBeTruthy();
expect(labelInput).toBeTruthy();
expect(commentInput).toBeTruthy();
});

it('should test form validity with allowed name', () => {
const form = ontologyFormComponent.ontologyForm;
expect(form.valid).toBeFalsy();

const nameInput = form.controls.name;
nameInput.setValue('biblio');

expect(form.valid).toBeTruthy();
});

it('should test form validity with forbidden names', () => {
const form = ontologyFormComponent.ontologyForm;
expect(form.valid).toBeFalsy();

const nameInput = form.controls.name;

nameInput.setValue('ontology');
expect(form.valid).toBeFalsy();

nameInput.setValue('images');
expect(form.valid).toBeFalsy();

});

it('should test form validity without label', () => {
const form = ontologyFormComponent.ontologyForm;
expect(form.valid).toBeFalsy();

const nameInput = form.controls.name;
const labelInput = form.controls.label;

nameInput.setValue('biblio');

const compiled = ontologyFormFixture.debugElement;
expect(ontologyFormComponent.ontologyLabel).toEqual('Biblio');
expect(form.valid).toBeTruthy();


labelInput.setValue('Biblio Ontology');
expect(ontologyFormComponent.ontologyForm.controls.label.value).toEqual('Biblio Ontology');
expect(form.valid).toBeTruthy();

});

});

0 comments on commit 86a5fb8

Please sign in to comment.