Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Confirmation Dialog Message Subcomponent (#174)
* refactor (confirmation-dialog): a subcomponent now handles the message part of the confirmation dialog * refactor (tests): confirmation dialog & message tests now use the mocked int value from the js-lib. confirmation dialog now mocks the confirmation message component. * refactor (test): use async/await instead of using .then()
- Loading branch information
Showing
12 changed files
with
168 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...s/dsp-ui/src/lib/action/components/confirmation-dialog/confirmation-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...cts/dsp-ui/src/lib/action/components/confirmation-dialog/confirmation-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
...n/components/confirmation-dialog/confirmation-message/confirmation-message.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <div class="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> | ||
| </div> |
8 changes: 8 additions & 0 deletions
8
...n/components/confirmation-dialog/confirmation-message/confirmation-message.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .message { | ||
| font-size: 16px; | ||
| background-color: #ededf5; | ||
| border: 1px solid #d8d8df; | ||
| border-radius: 5px; | ||
| padding: 20px 10px 20px 10px; | ||
| text-align: center; | ||
| } |
87 changes: 87 additions & 0 deletions
87
...omponents/confirmation-dialog/confirmation-message/confirmation-message.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { MockResource, ReadIntValue } from '@dasch-swiss/dsp-js'; | ||
| import { ConfirmationMessageComponent } from './confirmation-message.component'; | ||
|
|
||
| /** | ||
| * Test host component to simulate parent component with a confirmation dialog. | ||
| */ | ||
| @Component({ | ||
| template: `<dsp-confirmation-message [value]="testValue"></dsp-confirmation-message>` | ||
| }) | ||
| class ConfirmationMessageTestHostComponent implements OnInit { | ||
|
|
||
| testValue: ReadIntValue; | ||
|
|
||
| constructor() { | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| MockResource.getTestthing().subscribe(res => { | ||
| this.testValue = res.getValuesAs('http://0.0.0.0:3333/ontology/0001/anything/v2#hasInteger', ReadIntValue)[0]; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| describe('ConfirmationMessageComponent', () => { | ||
| let testHostComponent: ConfirmationMessageTestHostComponent; | ||
| let testHostFixture: ComponentFixture<ConfirmationMessageTestHostComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ | ||
| ConfirmationMessageTestHostComponent, | ||
| ConfirmationMessageComponent | ||
| ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| testHostFixture = TestBed.createComponent(ConfirmationMessageTestHostComponent); | ||
| testHostComponent = testHostFixture.componentInstance; | ||
| testHostFixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(testHostComponent).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should bind the values correctly', () => { | ||
| testHostComponent.testValue.valueHasComment = 'My comment'; | ||
| testHostFixture.detectChanges(); | ||
|
|
||
| const hostCompDe = testHostFixture.debugElement; | ||
| const valueComponentDe = hostCompDe.query(By.directive(ConfirmationMessageComponent)); | ||
|
|
||
| expect(valueComponentDe).toBeTruthy(); | ||
|
|
||
| const label = valueComponentDe.query(By.css('.val-label')).nativeElement; | ||
| expect(label.innerText).toEqual('Confirming this action will delete the following value from Integer:'); | ||
|
|
||
| const value = valueComponentDe.query(By.css('.val-value')).nativeElement; | ||
| expect(value.innerText).toEqual('Value: 1'); | ||
|
|
||
| const comment = valueComponentDe.query(By.css('.val-comment')).nativeElement; | ||
| expect(comment.innerText).toEqual('Value Comment: My comment'); | ||
|
|
||
| const creationDate = valueComponentDe.query(By.css('.val-creation-date')).nativeElement; | ||
| expect(creationDate.innerText).toEqual('Value Creation Date: 2018-05-28T15:52:03.897Z'); | ||
|
|
||
| }); | ||
|
|
||
| it('should default to "no comment" if the value does not contain a comment', () => { | ||
| testHostComponent.testValue.valueHasComment = null; | ||
| testHostFixture.detectChanges(); | ||
|
|
||
| const hostCompDe = testHostFixture.debugElement; | ||
| const valueComponentDe = hostCompDe.query(By.directive(ConfirmationMessageComponent)); | ||
|
|
||
| expect(valueComponentDe).toBeTruthy(); | ||
|
|
||
| const comment = valueComponentDe.query(By.css('.val-comment')).nativeElement; | ||
| expect(comment.innerText).toEqual('Value Comment: No comment'); | ||
|
|
||
| }); | ||
| }); |
15 changes: 15 additions & 0 deletions
15
...ion/components/confirmation-dialog/confirmation-message/confirmation-message.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
| import { ReadValue } from '@dasch-swiss/dsp-js'; | ||
|
|
||
| @Component({ | ||
| selector: 'dsp-confirmation-message', | ||
| templateUrl: './confirmation-message.component.html', | ||
| styleUrls: ['./confirmation-message.component.scss'] | ||
| }) | ||
| export class ConfirmationMessageComponent { | ||
|
|
||
| @Input() value: ReadValue; | ||
|
|
||
| constructor() { } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters