Skip to content
Snippets Groups Projects
Commit c0e068a5 authored by Albert Bruns's avatar Albert Bruns
Browse files

OZG-7472-7632 ods buttons

parent 201b3d38
Branches
Tags
1 merge request!49Ozg 7474 weiterleiten button
Show whitespace changes
Inline Side-by-side
Showing
with 373 additions and 308 deletions
alfa-client/libs/test-utils/src/lib/jest.helper.ts
+ 7
− 1
View file @ c0e068a5
......@@ -23,7 +23,8 @@
*/
import { ComponentFixture } from '@angular/core/testing';
import { expect } from '@jest/globals';
import { getElementFromFixture } from './helper';
import { TooltipDirective } from '@ods/system';
import { getDebugElementFromFixtureByCss, getElementFromFixture } from './helper';
export function notExistsAsHtmlElement(fixture: ComponentFixture<any>, domElement: string): void {
expect(getElementFromFixture(fixture, domElement)).not.toBeInstanceOf(HTMLElement);
......@@ -32,3 +33,8 @@ export function notExistsAsHtmlElement(fixture: ComponentFixture<any>, domElemen
export function existsAsHtmlElement(fixture: ComponentFixture<any>, domElement: string): void {
expect(getElementFromFixture(fixture, domElement)).toBeInstanceOf(HTMLElement);
}
export function tooltipExistsWithText(fixture: ComponentFixture<any>, domElement: string, tooltipText: string) {
const tooltipInstance = getDebugElementFromFixtureByCss(fixture, domElement).injector.get(TooltipDirective);
expect(tooltipInstance.componentRef.instance.text).toBe(tooltipText);
}
alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.html
+ 24
− 21
View file @ c0e068a5
......@@ -23,24 +23,27 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
<ng-container *ngIf="vorgang | hasLink: linkRel.ANNEHMEN">
<ozgcloud-stroked-button-with-spinner
*ngIf="!showAsIconButton"
data-test-id="annehmen-button"
text="Annehmen"
icon="check_circle_outline"
@if(vorgang | hasLink: linkRel.ANNEHMEN){
@if(showAsIconButton){
<ods-button-with-spinner
[stateResource]="commandStateResource$ | async"
(clickEmitter)="annehmen()"
>
</ozgcloud-stroked-button-with-spinner>
<ozgcloud-icon-button-with-spinner
*ngIf="showAsIconButton"
data-test-id="annehmen-icon-button"
icon="check_circle_outline"
toolTip="Vorgang annehmen"
variant="icon"
size="fit"
data-test-id="annehmen-icon-button"
>
<ods-check-icon icon class="fill-primary"/>
</ods-button-with-spinner>
} @else {
<ods-button-with-spinner
[stateResource]="commandStateResource$ | async"
(clickEmitter)="annehmen()"
toolTip="Vorgang annehmen"
variant="outline"
data-test-id="annehmen-button"
>
</ozgcloud-icon-button-with-spinner>
</ng-container>
<ods-check-icon icon class="fill-primary"/>
</ods-button-with-spinner>
}
}
\ No newline at end of file
alfa-client/libs/vorgang-detail/src/lib/buttons/annehmen-button/annehmen-button.component.spec.ts
+ 74
− 48
View file @ c0e068a5
......@@ -21,14 +21,13 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HasLinkPipe, createStateResource } from '@alfa-client/tech-shared';
import { mock } from '@alfa-client/test-utils';
import {
IconButtonWithSpinnerComponent,
OzgcloudStrokedButtonWithSpinnerComponent,
} from '@alfa-client/ui';
import { CommandResource } from '@alfa-client/command-shared';
import { createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
import { getElementComponentFromFixtureByCss, mock, notExistsAsHtmlElement, triggerEvent } from '@alfa-client/test-utils';
import { VorgangCommandService, VorgangWithEingangLinkRel } from '@alfa-client/vorgang-shared';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ButtonWithSpinnerComponent } from '@ods/component';
import { CheckIconComponent, TooltipDirective } from '@ods/system';
import { createCommandResource } from 'libs/command-shared/test/command';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
......@@ -52,9 +51,10 @@ describe('AnnehmenButtonComponent', () => {
await TestBed.configureTestingModule({
declarations: [
AnnehmenButtonComponent,
MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
MockComponent(IconButtonWithSpinnerComponent),
HasLinkPipe,
TooltipDirective,
MockComponent(ButtonWithSpinnerComponent),
MockComponent(CheckIconComponent),
],
providers: [
{
......@@ -75,6 +75,7 @@ describe('AnnehmenButtonComponent', () => {
expect(component).toBeTruthy();
});
describe('component', () => {
describe('ngOnInit', () => {
it('should call service', () => {
component.ngOnInit();
......@@ -90,6 +91,16 @@ describe('AnnehmenButtonComponent', () => {
expect(vorgangCommandService.annehmen).toHaveBeenCalled();
});
});
});
describe('template', () => {
const state: StateResource<CommandResource> = createStateResource(createCommandResource());
beforeEach(() => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
component.commandStateResource$ = of(state);
fixture.detectChanges();
});
describe('annehmen button', () => {
beforeEach(() => {
......@@ -97,22 +108,29 @@ describe('AnnehmenButtonComponent', () => {
fixture.detectChanges();
});
it('should be hidden', () => {
it('should not exist', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(annehmenButton);
expect(buttonElement).not.toBeInstanceOf(HTMLElement);
notExistsAsHtmlElement(fixture, annehmenButton);
});
it('should be visible', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
it('should exist with input', () => {
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(annehmenButton);
expect(buttonElement).toBeInstanceOf(HTMLElement);
const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, annehmenButton);
expect(button).toBeTruthy();
expect(button.stateResource).toBe(state);
});
it('should call annehmen on click', () => {
component.annehmen = jest.fn();
triggerEvent({ fixture, name: 'clickEmitter', elementSelector: annehmenButton });
expect(component.annehmen).toHaveBeenCalled();
});
});
......@@ -122,22 +140,30 @@ describe('AnnehmenButtonComponent', () => {
fixture.detectChanges();
});
it('should be hidden', () => {
it('should not exist', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(annehmenIconButton);
expect(buttonElement).not.toBeInstanceOf(HTMLElement);
notExistsAsHtmlElement(fixture, annehmenIconButton);
});
it('should be visible', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ANNEHMEN]);
it('should exist with input', () => {
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(annehmenIconButton);
expect(buttonElement).toBeInstanceOf(HTMLElement);
const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, annehmenIconButton);
expect(button).toBeTruthy();
expect(button.stateResource).toBe(state);
});
it('should call annehmen on click', () => {
component.annehmen = jest.fn();
triggerEvent({ fixture, name: 'clickEmitter', elementSelector: annehmenIconButton });
expect(component.annehmen).toHaveBeenCalled();
});
});
});
});
alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.html
+ 24
− 21
View file @ c0e068a5
......@@ -23,24 +23,27 @@
unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
<ng-container *ngIf="vorgang | hasLink: linkRel.BESCHEIDEN">
<ozgcloud-stroked-button-with-spinner
*ngIf="!showAsIconButton"
data-test-id="bescheiden-button"
[text]="buttonText"
svgIcon="stamp"
@if (vorgang | hasLink: linkRel.BESCHEIDEN) {
@if (showAsIconButton) {
<ods-button-with-spinner
[stateResource]="commandStateResource$ | async"
(clickEmitter)="bescheiden()"
>
</ozgcloud-stroked-button-with-spinner>
<ozgcloud-icon-button-with-spinner
*ngIf="showAsIconButton"
[tooltip]="toolTipText"
variant="icon"
size="fit"
data-test-id="bescheiden-icon-button"
svgIcon="stamp"
[toolTip]="toolTipText"
>
<ods-stamp-icon icon class="fill-black" size="medium" />
</ods-button-with-spinner>
} @else {
<ods-button-with-spinner
[stateResource]="commandStateResource$ | async"
(clickEmitter)="bescheiden()"
[text]="buttonText"
variant="outline"
data-test-id="bescheiden-button"
>
</ozgcloud-icon-button-with-spinner>
</ng-container>
<ods-stamp-icon icon class="fill-primary" size="medium" />
</ods-button-with-spinner>
}
}
alfa-client/libs/vorgang-detail/src/lib/buttons/bescheiden-button/bescheiden-button.component.spec.ts
+ 242
− 217
View file @ c0e068a5
......@@ -24,12 +24,16 @@
import { BescheidResource, BescheidService, BescheidWizardDialogResult } from '@alfa-client/bescheid-shared';
import { CommandResource } from '@alfa-client/command-shared';
import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
import { Mock, mock } from '@alfa-client/test-utils';
import {
IconButtonWithSpinnerComponent,
OzgcloudDialogService,
OzgcloudStrokedButtonWithSpinnerComponent,
} from '@alfa-client/ui';
getElementComponentFromFixtureByCss,
getMockComponent,
Mock,
mock,
notExistsAsHtmlElement,
tooltipExistsWithText,
triggerEvent,
} from '@alfa-client/test-utils';
import { OzgcloudDialogService } from '@alfa-client/ui';
import { BescheidenDialogData } from '@alfa-client/vorgang-detail';
import {
VorgangCommandService,
......@@ -39,6 +43,8 @@ import {
} from '@alfa-client/vorgang-shared';
import { DialogRef } from '@angular/cdk/dialog';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ButtonWithSpinnerComponent } from '@ods/component';
import { StampIconComponent, TooltipDirective } from '@ods/system';
import { createCommandResource } from 'libs/command-shared/test/command';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
......@@ -74,8 +80,9 @@ describe('BescheidenButtonComponent', () => {
declarations: [
BescheidenButtonComponent,
HasLinkPipe,
MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
MockComponent(IconButtonWithSpinnerComponent),
TooltipDirective,
MockComponent(ButtonWithSpinnerComponent),
MockComponent(StampIconComponent),
],
providers: [
{
......@@ -107,6 +114,7 @@ describe('BescheidenButtonComponent', () => {
expect(component).toBeTruthy();
});
describe('component', () => {
describe('ngOnInit', () => {
it('should call service', () => {
component.ngOnInit();
......@@ -115,71 +123,6 @@ describe('BescheidenButtonComponent', () => {
});
});
describe('bescheiden button', () => {
beforeEach(() => {
component.showAsIconButton = false;
fixture.detectChanges();
});
it('should be hidden', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
expect(buttonElement).not.toBeInstanceOf(HTMLElement);
});
it('should be visible', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(bescheidenButton);
expect(buttonElement).toBeInstanceOf(HTMLElement);
});
it('should get "Bescheid" text', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
const buttonText: string = component.buttonText;
expect(buttonText).toBe('Bescheiden');
});
it('should get "Bescheiden fortsetzen" text', () => {
component.vorgang = createVorgangWithEingangResource([
VorgangWithEingangLinkRel.BESCHEIDEN,
VorgangWithEingangLinkRel.BESCHEID_DRAFT,
]);
const buttonText: string = component.buttonText;
expect(buttonText).toBe('Bescheiden fortsetzen');
});
});
describe('tool tip', () => {
it('should get "Vorgang bescheiden" text', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
const toolTipText: string = component.toolTipText;
expect(toolTipText).toBe('Vorgang bescheiden');
});
it('should get "Vorgang bescheiden fortsetzen" text', () => {
component.vorgang = createVorgangWithEingangResource([
VorgangWithEingangLinkRel.BESCHEIDEN,
VorgangWithEingangLinkRel.BESCHEID_DRAFT,
]);
const toolTipText: string = component.toolTipText;
expect(toolTipText).toBe('Vorgang bescheiden fortsetzen');
});
});
describe('bescheiden', () => {
describe('should open bescheid wizard', () => {
beforeEach(() => {
......@@ -224,31 +167,6 @@ describe('BescheidenButtonComponent', () => {
});
});
describe('bescheiden icon button', () => {
beforeEach(() => {
component.showAsIconButton = true;
fixture.detectChanges();
});
it('should be hidden', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
expect(buttonElement).not.toBeInstanceOf(HTMLElement);
});
it('should be visible', () => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
fixture.detectChanges();
const buttonElement = fixture.nativeElement.querySelector(bescheidenIconButton);
expect(buttonElement).toBeInstanceOf(HTMLElement);
});
});
// TODO: Use this version after completed Bescheid refactoring and delete the other version below.
// describe('openBescheidenWizard', () => {
// let dialogRefMock: DialogRefMock<BescheidWizardDialogResult>;
......@@ -397,10 +315,117 @@ describe('BescheidenButtonComponent', () => {
expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
});
it.each([null, undefined])('should not reload current vorgang if result nil', (dialogResult: BescheidWizardDialogResult) => {
it.each([null, undefined])(
'should not reload current vorgang if result nil',
(dialogResult: BescheidWizardDialogResult) => {
component.handleBescheidWizardClosed(dialogResult);
expect(vorgangService.reloadCurrentVorgang).not.toHaveBeenCalled();
},
);
});
});
describe('template', () => {
const state: StateResource<CommandResource> = createStateResource(createCommandResource());
beforeEach(() => {
component.vorgang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.BESCHEIDEN]);
component.commandStateResource$ = of(state);
fixture.detectChanges();
});
describe('bescheiden button', () => {
beforeEach(() => {
component.showAsIconButton = false;
fixture.detectChanges();
});
it('should not exits', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
notExistsAsHtmlElement(fixture, bescheidenButton);
});
it('should exist with input', () => {
const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenButton);
expect(button).toBeTruthy();
expect(button.stateResource).toBe(state);
});
it('should get "Bescheid" text', () => {
const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
expect(button.text).toBe('Bescheiden');
});
it('should get "Bescheiden fortsetzen" text', () => {
component.vorgang = createVorgangWithEingangResource([
VorgangWithEingangLinkRel.BESCHEIDEN,
VorgangWithEingangLinkRel.BESCHEID_DRAFT,
]);
fixture.detectChanges();
const button: ButtonWithSpinnerComponent = getMockComponent(fixture, ButtonWithSpinnerComponent);
expect(button.text).toBe('Bescheiden fortsetzen');
});
it('should call bescheiden on click', () => {
component.bescheiden = jest.fn();
triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenButton });
expect(component.bescheiden).toHaveBeenCalled();
});
});
describe('bescheiden icon button', () => {
beforeEach(() => {
component.showAsIconButton = true;
fixture.detectChanges();
});
it('should not exist', () => {
component.vorgang = createVorgangWithEingangResource();
fixture.detectChanges();
notExistsAsHtmlElement(fixture, bescheidenIconButton);
});
it('should exist with input', () => {
const button: ButtonWithSpinnerComponent = getElementComponentFromFixtureByCss(fixture, bescheidenIconButton);
expect(button).toBeTruthy();
expect(button.stateResource).toBe(state);
});
it('should have "Vorgang bescheiden" tooltip', () => {
tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden');
});
it('should have "Vorgang bescheiden fortsetzen" tooltip', () => {
component.vorgang = createVorgangWithEingangResource([
VorgangWithEingangLinkRel.BESCHEIDEN,
VorgangWithEingangLinkRel.BESCHEID_DRAFT,
]);
fixture.detectChanges();
tooltipExistsWithText(fixture, bescheidenIconButton, 'Vorgang bescheiden fortsetzen');
});
it('should call bescheiden on click', () => {
component.bescheiden = jest.fn();
triggerEvent({ fixture, name: 'clickEmitter', elementSelector: bescheidenIconButton });
expect(component.bescheiden).toHaveBeenCalled();
});
});
});
});
alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
+ 2
− 0
View file @ c0e068a5
......@@ -70,6 +70,7 @@ import {
SendIconComponent,
SpinnerIconComponent,
StampIconComponent,
TooltipDirective,
} from '@ods/system';
import { AktenzeichenEditDialogComponent } from './aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component';
import { AktenzeichenEditableComponent } from './aktenzeichen-editable/aktenzeichen-editable.component';
......@@ -179,6 +180,7 @@ const routes: Routes = [
MoreIconComponent,
FileIconComponent,
ForwardByOzgcloudButtonContainerComponent,
TooltipDirective,
],
declarations: [
VorgangDetailPageComponent,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz - Barrierefreiheit