Skip to content
Permalink
Browse files
refactor(action): migrate action module (DSP-1852) (#509)
* refactor(action): migrates:
- _viewer.scss
- statusMsg.ts
- confirmation-dialog comp
- confirmation-message comp
- login-form comp
- notification service
- sorting service

* fix: enable all tests

* refactor(action): migrates:
 - message comp
 - progress indicator comp

* refactor(action): migrates:
 - sort-button comp
 - string-literal-input comp

* refactor(action): migrates selected-resource comp

* refactor(action): migrates directives

* fix: enable all tests

* fix: removes USELESS regex to make github happy

* fix: fixes import

* refactor(action): rename existing-name directive

* refactor(action): migrates all non-deprecated pipes
  • Loading branch information
mdelez committed Aug 19, 2021
1 parent ea1cd55 commit 725c45eef3e56de5f3cbe1be4117b83ffa29ea0f
Showing with 5,264 additions and 3 deletions.
  1. +7 −3 package-lock.json
  2. +32 −0 src/app/app.module.ts
  3. +11 −0 src/app/main/action/confirmation-dialog/confirmation-dialog.component.html
  4. +1 −0 src/app/main/action/confirmation-dialog/confirmation-dialog.component.scss
  5. +168 −0 src/app/main/action/confirmation-dialog/confirmation-dialog.component.spec.ts
  6. +39 −0 src/app/main/action/confirmation-dialog/confirmation-dialog.component.ts
  7. +13 −0 src/app/main/action/confirmation-dialog/confirmation-message/confirmation-message.component.html
  8. +1 −0 src/app/main/action/confirmation-dialog/confirmation-message/confirmation-message.component.scss
  9. +88 −0 src/app/main/action/confirmation-dialog/confirmation-message/confirmation-message.component.spec.ts
  10. +20 −0 src/app/main/action/confirmation-dialog/confirmation-message/confirmation-message.component.ts
  11. +67 −0 src/app/main/action/login-form/login-form.component.html
  12. +38 −0 src/app/main/action/login-form/login-form.component.scss
  13. +225 −0 src/app/main/action/login-form/login-form.component.spec.ts
  14. +201 −0 src/app/main/action/login-form/login-form.component.ts
  15. +61 −0 src/app/main/action/message/message.component.html
  16. +110 −0 src/app/main/action/message/message.component.scss
  17. +218 −0 src/app/main/action/message/message.component.spec.ts
  18. +233 −0 src/app/main/action/message/message.component.ts
  19. +33 −0 src/app/main/action/progress-indicator/progress-indicator.component.html
  20. +179 −0 src/app/main/action/progress-indicator/progress-indicator.component.scss
  21. +165 −0 src/app/main/action/progress-indicator/progress-indicator.component.spec.ts
  22. +42 −0 src/app/main/action/progress-indicator/progress-indicator.component.ts
  23. +20 −0 src/app/main/action/selected-resources/selected-resources.component.html
  24. +37 −0 src/app/main/action/selected-resources/selected-resources.component.scss
  25. +62 −0 src/app/main/action/selected-resources/selected-resources.component.spec.ts
  26. +36 −0 src/app/main/action/selected-resources/selected-resources.component.ts
  27. +13 −0 src/app/main/action/sort-button/sort-button.component.html
  28. +12 −0 src/app/main/action/sort-button/sort-button.component.scss
  29. +168 −0 src/app/main/action/sort-button/sort-button.component.spec.ts
  30. +80 −0 src/app/main/action/sort-button/sort-button.component.ts
  31. +79 −0 src/app/main/action/string-literal-input/string-literal-input.component.html
  32. +51 −0 src/app/main/action/string-literal-input/string-literal-input.component.scss
  33. +346 −0 src/app/main/action/string-literal-input/string-literal-input.component.spec.ts
  34. +296 −0 src/app/main/action/string-literal-input/string-literal-input.component.ts
  35. +21 −0 src/app/main/directive/admin-image/admin-image.config.ts
  36. +71 −0 src/app/main/directive/admin-image/admin-image.directive.spec.ts
  37. +87 −0 src/app/main/directive/admin-image/admin-image.directive.ts
  38. +216 −0 src/app/main/directive/existing-name/existing-name.directive.spec.ts
  39. +112 −0 src/app/main/directive/existing-name/existing-name.directive.ts
  40. +145 −0 src/app/main/directive/gnd/gnd.directive.spec.ts
  41. +57 −0 src/app/main/directive/gnd/gnd.directive.ts
  42. +45 −0 src/app/main/pipes/formatting/formatted-boolean.pipe.spec.ts
  43. +32 −0 src/app/main/pipes/formatting/formatted-boolean.pipe.ts
  44. +98 −0 src/app/main/pipes/formatting/knoradate.pipe.spec.ts
  45. +82 −0 src/app/main/pipes/formatting/knoradate.pipe.ts
  46. +39 −0 src/app/main/pipes/string-transformation/linkify.pipe.spec.ts
  47. +57 −0 src/app/main/pipes/string-transformation/linkify.pipe.ts
  48. +131 −0 src/app/main/pipes/string-transformation/stringify-string-literal.pipe.spec.ts
  49. +64 −0 src/app/main/pipes/string-transformation/stringify-string-literal.pipe.ts
  50. +62 −0 src/app/main/pipes/string-transformation/truncate.pipe.spec.ts
  51. +45 −0 src/app/main/pipes/string-transformation/truncate.pipe.ts
  52. +29 −0 src/app/main/services/notification.service.spec.ts
  53. +41 −0 src/app/main/services/notification.service.ts
  54. +165 −0 src/app/main/services/sorting.service.spec.ts
  55. +37 −0 src/app/main/services/sorting.service.ts
  56. +263 −0 src/assets/http/statusMsg.ts
  57. +213 −0 src/assets/style/_viewer.scss

Some generated files are not rendered by default. Learn more.

@@ -98,6 +98,22 @@ import { ResultsComponent } from './workspace/results/results.component';
import { AudioComponent } from './workspace/resource/representation/audio/audio.component';
import { IntermediateComponent } from './workspace/intermediate/intermediate.component';
import { ResourceLinkFormComponent } from './workspace/resource/resource-link-form/resource-link-form.component';
import { ConfirmationDialogComponent } from './main/action/confirmation-dialog/confirmation-dialog.component';
import { ConfirmationMessageComponent } from './main/action/confirmation-dialog/confirmation-message/confirmation-message.component';
import { LoginFormComponent } from './main/action/login-form/login-form.component';
import { MessageComponent } from './main/action/message/message.component';
import { ProgressIndicatorComponent } from './main/action/progress-indicator/progress-indicator.component';
import { StringLiteralInputComponent } from './main/action/string-literal-input/string-literal-input.component';
import { SortButtonComponent } from './main/action/sort-button/sort-button.component';
import { SelectedResourcesComponent } from './main/action/selected-resources/selected-resources.component';
import { AdminImageDirective } from './main/directive/admin-image/admin-image.directive';
import { ExistingNameDirective } from './main/directive/existing-name/existing-name.directive';
import { GndDirective } from './main/directive/gnd/gnd.directive';
import { FormattedBooleanPipe } from './main/pipes/formatting/formatted-boolean.pipe';
import { KnoraDatePipe } from './main/pipes/formatting/knoradate.pipe';
import { LinkifyPipe } from './main/pipes/string-transformation/linkify.pipe';
import { StringifyStringLiteralPipe } from './main/pipes/string-transformation/stringify-string-literal.pipe';
import { TruncatePipe } from './main/pipes/string-transformation/truncate.pipe';

// translate: AoT requires an exported function for factories
export function httpLoaderFactory(httpClient: HttpClient) {
@@ -182,6 +198,22 @@ export function httpLoaderFactory(httpClient: HttpClient) {
AudioComponent,
IntermediateComponent,
ResourceLinkFormComponent,
ConfirmationDialogComponent,
ConfirmationMessageComponent,
LoginFormComponent,
MessageComponent,
ProgressIndicatorComponent,
StringLiteralInputComponent,
SortButtonComponent,
SelectedResourcesComponent,
AdminImageDirective,
ExistingNameDirective,
GndDirective,
FormattedBooleanPipe,
KnoraDatePipe,
LinkifyPipe,
StringifyStringLiteralPipe,
TruncatePipe,
],
imports: [
AppRoutingModule,
@@ -0,0 +1,11 @@
<div class="deletion-dialog">
<mat-dialog-content>
<p class="title"> Are you sure you want to delete this value from {{data.value.propertyLabel}}?</p>
<app-confirmation-message #confirmMessage [value]="data.value"></app-confirmation-message>
</mat-dialog-content>
<mat-dialog-actions class="action-buttons">
<button class="cancel" mat-raised-button mat-dialog-close>{{data.buttonTextCancel}}</button>
<button class="ok" mat-raised-button color="primary" (click)="onConfirmClick()">{{data.buttonTextOk}}</button>
</mat-dialog-actions>
</div>

@@ -0,0 +1 @@
@import "../../../../assets/style/viewer";
@@ -0,0 +1,168 @@
import { OverlayContainer } from '@angular/cdk/overlay';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { Component, Input, OnInit } from '@angular/core';
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonHarness } from '@angular/material/button/testing';
import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatDialogHarness } from '@angular/material/dialog/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MockResource, ReadIntValue, ReadValue } from '@dasch-swiss/dsp-js';
import { ConfirmationDialogComponent, ConfirmationDialogValueDeletionPayload } from './confirmation-dialog.component';

/**
* test host component to simulate parent component with a confirmation dialog.
*/
@Component({
template: `
<p> {{confirmationDialogResponse}} </p>`
})
class ConfirmationDialogTestHostComponent implements OnInit {

confirmationDialogResponse: string;

testValue: ReadIntValue;

constructor(private dialog: MatDialog) {
}

ngOnInit() {
MockResource.getTestThing().subscribe(res => {
this.testValue = res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasInteger', ReadIntValue)[0];
});
}

openDialog() {

this.dialog.open(ConfirmationDialogComponent, {
data: {
value: this.testValue,
buttonTextOk: 'OK',
buttonTextCancel: 'Cancel'
}
}).afterClosed().subscribe((payload: ConfirmationDialogValueDeletionPayload) => {
if (payload.confirmed) {
this.confirmationDialogResponse = 'Action was confirmed!';
} else {
this.confirmationDialogResponse = 'Action was cancelled';
}
});
}
}

@Component({ selector: 'app-confirmation-message', template: '' })
class MockConfirmationMessageComponent {
@Input() value: ReadValue;

constructor() { }
}

describe('ConfirmationDialogComponent', () => {
let testHostComponent: ConfirmationDialogTestHostComponent;
let testHostFixture: ComponentFixture<ConfirmationDialogTestHostComponent>;
let rootLoader: HarnessLoader;
let overlayContainer: OverlayContainer;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
ConfirmationDialogComponent,
ConfirmationDialogTestHostComponent,
MockConfirmationMessageComponent
],
imports: [
MatDialogModule,
BrowserAnimationsModule
],
providers: [
{
provide: MAT_DIALOG_DATA,
useValue: {}
},
{
provide: MatDialogRef,
useValue: {}
}
]
})
.compileComponents();

overlayContainer = TestBed.inject(OverlayContainer);
}));

beforeEach(() => {
testHostFixture = TestBed.createComponent(ConfirmationDialogTestHostComponent);
testHostComponent = testHostFixture.componentInstance;
rootLoader = TestbedHarnessEnvironment.documentRootLoader(testHostFixture);
testHostFixture.detectChanges();
expect(testHostComponent).toBeTruthy();
});

afterEach(async () => {
const dialogs = await rootLoader.getAllHarnesses(MatDialogHarness);
await Promise.all(dialogs.map(async d => await d.close()));

// angular won't call this for us so we need to do it ourselves to avoid leaks.
overlayContainer.ngOnDestroy();
});

it('should display a confirmation dialog', async () => {

testHostComponent.openDialog();

testHostFixture.detectChanges();

await testHostFixture.whenStable();

const dialogDiv = document.querySelector('mat-dialog-container');
expect(dialogDiv).toBeTruthy();

const dspConfirmMsg = document.querySelector('app-confirmation-message');
expect(dspConfirmMsg).toBeTruthy();

const dialogTitle = dialogDiv.querySelector('.title');
expect(dialogTitle.innerHTML.trim()).toEqual('Are you sure you want to delete this value from Integer?');

});

it('should return a confirmation message when the OK button is clicked', async () => {

testHostComponent.openDialog();

let dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness);

expect(dialogHarnesses.length).toEqual(1);

const okButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.ok' }));

await okButton.click();

dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness);

expect(dialogHarnesses.length).toEqual(0);

expect(testHostComponent.confirmationDialogResponse).toEqual('Action was confirmed!');

});

it('should return a cancelled message when the cancel button is clicked', async () => {

testHostComponent.openDialog();

let dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness);

expect(dialogHarnesses.length).toEqual(1);

const cancelButton = await rootLoader.getHarness(MatButtonHarness.with({ selector: '.cancel' }));

await cancelButton.click();

dialogHarnesses = await rootLoader.getAllHarnesses(MatDialogHarness);

expect(dialogHarnesses.length).toEqual(0);

expect(testHostComponent.confirmationDialogResponse).toEqual('Action was cancelled');


});
});
@@ -0,0 +1,39 @@
import { Component, Inject, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ReadValue } from '@dasch-swiss/dsp-js';
import { ConfirmationMessageComponent } from './confirmation-message/confirmation-message.component';

export class ConfirmationDialogData {
value: ReadValue;
buttonTextOk: string;
buttonTextCancel: string;
}

export class ConfirmationDialogValueDeletionPayload {
confirmed: boolean;
deletionComment?: string;
}

@Component({
selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.scss']
})
export class ConfirmationDialogComponent {
@ViewChild('confirmMessage') confirmationMessageComponent: ConfirmationMessageComponent;

// type assertion doesn't seem to be enforced
// https://stackoverflow.com/a/57787554
constructor(
@Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData,
private _dialogRef: MatDialogRef<ConfirmationDialogComponent>
) { }

onConfirmClick(): void {
const payload = new ConfirmationDialogValueDeletionPayload();
payload.confirmed = true;
payload.deletionComment = this.confirmationMessageComponent.comment ? this.confirmationMessageComponent.comment : undefined;
this._dialogRef.close(payload);
}

}
@@ -0,0 +1,13 @@
<div class="deletion-dialog-message">
<p class="val-label">Confirming this action will delete the following value from {{value.propertyLabel}}:</p>
<p class="val-value">Value: {{value.strval}}</p>
<p class="val-comment">Value Comment: {{value.valueHasComment ? value.valueHasComment : 'No comment'}}</p>
<p class="val-creation-date">Value Creation Date: {{value.valueCreationDate}}</p>
<textarea
matinput
class="deletion-comment"
type="text"
(keyup)="onKey($event)"
[placeholder]="'Comment why value is being deleted'"
></textarea>
</div>
@@ -0,0 +1 @@
@import "../../../../../assets/style/viewer";
Loading

0 comments on commit 725c45e

Please sign in to comment.