@cauca-911/material 21.0.1-beta.4 → 21.0.1-beta.5

package/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.spec.ts

@@ -0,0 +1,137 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { ConfirmDialogComponent } from './confirm-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { ConfirmationOptions, ConfirmationResult } from '../services/dialog.service';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
+  let mockMatDialog: any;
+  let breakpointObserverMock: jasmine.SpyObj<BreakpointObserver>;
+
+  const defaultConfirmationOptions: ConfirmationOptions = {
+    noText: 'no',
+    noColor: undefined,
+    yesText: 'yes',
+    yesColor: 'primary',
+    messageArgs: null,
+    titleArgs: null,
+  };
+
+  beforeEach(async () => {
+    breakpointObserverMock = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+    breakpointObserverMock.observe.and.returnValue(of({ matches: true, breakpoints: {} }));
+
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close', 'addPanelClass', 'updateSize']);
+    await TestBed.configureTestingModule({
+      declarations: [
+        ConfirmDialogComponent,
+        ...MockComponents(StrokedButtonComponent, IconButtonComponent, RaisedButtonComponent),
+        MockPipe(TranslatePipe, value => value),
+      ],
+      providers: [
+        { provide: MatDialogRef<ConfirmDialogComponent>, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: { title: 'title', message: 'message', options: defaultConfirmationOptions } },
+        { provide: BreakpointObserver, useValue: breakpointObserverMock },
+      ],
+      imports: [
+        MockModule(TranslateModule),
+        MatIconModule,
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    mockMatDialog.close.calls.reset();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially add a global style class', () => {
+    expect(mockMatDialog.addPanelClass).toHaveBeenCalledWith('dialog-global-style');
+  });
+
+  it('should update dialog size when breakpoint matches', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: true, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ConfirmDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('100vw');
+  }));
+
+  it('should update dialog size when breakpoint does not match', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: false, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ConfirmDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('auto');
+  }));
+
+  it('should display the provided title and message', () => {
+    expect(fixture.nativeElement.querySelector('.title').textContent).toBe('title');
+    expect(fixture.nativeElement.querySelector('.message').textContent).toBe('message');
+  });
+
+  it('should render the yes button according to specification', () => {
+    const button = ngMocks.find<RaisedButtonComponent>('.yes-button').componentInstance;
+
+    expect(button.label).toBe(defaultConfirmationOptions.yesText);
+    expect(button.color).toBe(defaultConfirmationOptions.yesColor);
+  });
+
+  it('should render the no button according to specification', () => {
+    const button = ngMocks.find<StrokedButtonComponent>('.no-button').componentInstance;
+
+    expect(button.label).toBe(defaultConfirmationOptions.noText);
+    expect(button.color).toBe(defaultConfirmationOptions.noColor);
+  });
+
+  it('should close dialog with true when pressing ok', async () => {
+    const button = ngMocks.find<RaisedButtonComponent>('.yes-button').componentInstance;
+
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(mockMatDialog.close).toHaveBeenCalledOnceWith(ConfirmationResult.Yes);
+  });
+
+  it('should close dialog without true when pressing close', async () => {
+    const button = ngMocks.find<IconButtonComponent>('#close-button').componentInstance;
+
+    button.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalledOnceWith(ConfirmationResult.Cancel);
+  });
+
+  it('should close dialog without true when pressing no', async () => {
+    const button = ngMocks.find<StrokedButtonComponent>('.no-button').componentInstance;
+
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(mockMatDialog.close).toHaveBeenCalledOnceWith(ConfirmationResult.No);
+  });
+});

package/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,47 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { AlertDialogData } from '../alert-dialog/alert-dialog.component';
+import { ConfirmationOptions, ConfirmationResult } from '../services/dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss'],
+  standalone: true,
+  imports: [TranslateModule, MatDialogModule, RaisedButtonComponent, StrokedButtonComponent, IconButtonComponent]
+})
+export class ConfirmDialogComponent {
+
+  public title: string = '';
+  public message: string = '';
+  public options: ConfirmationOptions;
+
+  public constructor(
+    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AlertDialogData,
+    breakdownObserver: BreakpointObserver) {
+    this.title = data.title;
+    this.message = data.message;
+    this.options = data.options;
+    dialogRef.addPanelClass("dialog-global-style");
+    breakdownObserver.observe('(max-width: 500px)').pipe(takeUntilDestroyed()).subscribe(result => dialogRef.updateSize(result.matches ? '100vw' : 'auto'));
+  }
+
+  public noClick(): void {
+    this.dialogRef.close(ConfirmationResult.No);
+  }
+
+  public yesClick(): void {
+    this.dialogRef.close(ConfirmationResult.Yes);
+  }
+
+  public cancelClick(): void {
+    this.dialogRef.close(ConfirmationResult.Cancel);
+  }
+}

package/src/lib/components/dialogs/delete-dialog/delete-dialog.component.html

@@ -0,0 +1,17 @@
+<div mat-dialog-title>
+    @if (itemGenderIsFemale)
+    {
+        <div class="h6 title">{{ ('deleteDialog.titleFemale' | translate:{itemType}) }}</div>
+    } @else
+    {
+        <div class="h6 title">{{ ('deleteDialog.titleMale' | translate:{itemType}) }}</div>
+    }
+    <cauca-icon-button id="closeButton" (buttonClick)="closeClick()" icon="close" />
+</div>
+<div mat-dialog-content>
+    <p>{{('deleteDialog.message' | translate:{itemName})}}</p>
+</div>
+<mat-dialog-actions align="end">
+    <cauca-stroked-button id="cancelButton" label="cancel" color="primary" (buttonClick)="closeClick()"/>
+    <cauca-raised-button id="deleteButton" label="delete" color="warn" (buttonClick)="deleteClick()" />
+</mat-dialog-actions>

package/src/lib/components/dialogs/delete-dialog/delete-dialog.component.scss

@@ -0,0 +1,14 @@
+@use "../dialog-styles";
+
+:host > div:first-child {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+        flex: 1;
+    }
+}
+
+.mat-mdc-dialog-actions {
+    column-gap: 8px;
+}

package/src/lib/components/dialogs/delete-dialog/delete-dialog.component.spec.ts

@@ -0,0 +1,96 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { DeleteDialogComponent } from './delete-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+describe('DeleteDialogComponent', () => {
+  let component: DeleteDialogComponent;
+  let fixture: ComponentFixture<DeleteDialogComponent>;
+  let mockMatDialog: jasmine.SpyObj<MatDialogRef<DeleteDialogComponent>>;
+  let breakpointObserverMock: jasmine.SpyObj<BreakpointObserver>;
+
+  beforeEach(async () => {
+    breakpointObserverMock = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+    breakpointObserverMock.observe.and.returnValue(of({ matches: true, breakpoints: {} }));
+
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close', 'addPanelClass', 'updateSize']);
+    await TestBed.configureTestingModule({
+      imports: [DeleteDialogComponent, MockModule(TranslateModule)],
+      declarations: [
+        ...MockComponents(StrokedButtonComponent, RaisedButtonComponent, IconButtonComponent),
+        MockPipe(TranslatePipe, value => value),
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: BreakpointObserver, useValue: breakpointObserverMock },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DeleteDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially add a global style class', () => {
+    expect(mockMatDialog.addPanelClass).toHaveBeenCalledWith('dialog-global-style');
+  });
+
+  it('should update dialog size when breakpoint matches', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: true, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(DeleteDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('100vw');
+  }));
+
+  it('should update dialog size when breakpoint does not match', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: false, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(DeleteDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('auto');
+  }));
+
+  it('should close dialog with true when pressing delete', async () => {
+    const deleteButton = ngMocks.find<StrokedButtonComponent>('#deleteButton', null)?.componentInstance;
+
+    deleteButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalledWith(true);
+  });
+
+  it('should close dialog without true when pressing close', async () => {
+    const closeButton = ngMocks.find<IconButtonComponent>('#closeButton', null)?.componentInstance;
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).not.toHaveBeenCalledWith(true);
+  });
+
+  it('should close dialog without true when pressing cancel', async () => {
+    const cancelButton = ngMocks.find<RaisedButtonComponent>('#cancelButton', null)?.componentInstance;
+
+    cancelButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).not.toHaveBeenCalledWith(true);
+  });
+});

package/src/lib/components/dialogs/delete-dialog/delete-dialog.component.ts

@@ -0,0 +1,40 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { DeleteDialogData } from './models/delete-dialog-data';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-delete-dialog',
+  templateUrl: './delete-dialog.component.html',
+  styleUrls: ['./delete-dialog.component.scss'],
+  standalone: true,
+  imports: [MatDialogModule, TranslateModule, StrokedButtonComponent, IconButtonComponent, RaisedButtonComponent]
+})
+export class DeleteDialogComponent {
+  public itemGenderIsFemale: boolean = false;
+  public itemName: string = '';
+  public itemType: string = '';
+
+  public constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteDialogData,
+    breakdownObserver: BreakpointObserver) {
+    this.itemGenderIsFemale = data.female;
+    this.itemName = data.name ? data.name : '';
+    this.itemType = data.type ? data.type.toLowerCase() : '';
+    dialogRef.addPanelClass("dialog-global-style");
+    breakdownObserver.observe('(max-width: 500px)').pipe(takeUntilDestroyed()).subscribe(result => dialogRef.updateSize(result.matches ? '100vw' : 'auto'));
+  }
+
+  public deleteClick(): void {
+    this.dialogRef.close(true);
+  }
+
+  public closeClick(): void {
+    this.dialogRef.close(false);
+  }
+}

package/src/lib/components/dialogs/delete-dialog/models/delete-dialog-data.spec.ts

@@ -0,0 +1,7 @@
+import { DeleteDialogData } from './delete-dialog-data';
+
+describe('DeleteDialogData', () => {
+  it('should create an instance', () => {
+    expect(new DeleteDialogData()).toBeTruthy();
+  });
+});

package/src/lib/components/dialogs/delete-dialog/models/delete-dialog-data.ts

@@ -0,0 +1,5 @@
+export class DeleteDialogData {
+  public name: string = '';
+  public type: string = '';
+  public female: boolean;
+}

package/src/lib/components/dialogs/dialog-styles.css

@@ -0,0 +1,9 @@
+@media (max-width: 500px) {
+  ::ng-deep .dialog-global-style {
+    max-width: 100vw !important;
+  }
+}
+
+::ng-deep .dialog-global-style {
+  margin: auto !important;
+}

package/src/lib/components/dialogs/dialog-styles.scss

@@ -0,0 +1,9 @@
+@media (max-width: 500px) {
+  ::ng-deep .dialog-global-style {
+    max-width: 100vw !important;
+  }
+}
+
+::ng-deep .dialog-global-style {
+  margin: auto !important;
+}

package/src/lib/components/dialogs/error-dialog/error-dialog.component.html

@@ -0,0 +1,10 @@
+<div mat-dialog-title>
+    <div class="h6">{{('errorDialog.titleError' | translate)}}</div>
+    <cauca-icon-button id="closeButton" (buttonClick)="closeClick()" icon="close"/>
+</div>
+<div mat-dialog-content>
+    <p>{{('errorDialog.messageError' | translate:{itemName})}}</p>
+</div>
+<mat-dialog-actions align="end">
+    <cauca-raised-button id="okButton" label="ok" color="warn" (buttonClick)="closeClick()"/>
+</mat-dialog-actions>

package/src/lib/components/dialogs/error-dialog/error-dialog.component.scss

@@ -0,0 +1,10 @@
+@use "../dialog-styles";
+
+:host > div:first-child {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+        flex: 1;
+    }
+}

package/src/lib/components/dialogs/error-dialog/error-dialog.component.spec.ts

@@ -0,0 +1,91 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { ErrorDialogComponent } from './error-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+describe('ErrorDialogComponent', () => {
+  let component: ErrorDialogComponent;
+  let fixture: ComponentFixture<ErrorDialogComponent>;
+  let mockMatDialog: jasmine.SpyObj<MatDialogRef<any>>;
+  let breakpointObserverMock: jasmine.SpyObj<BreakpointObserver>;
+
+  beforeEach(async () => {
+    breakpointObserverMock = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+    breakpointObserverMock.observe.and.returnValue(of({ matches: true, breakpoints: {} }));
+
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close', 'addPanelClass', 'updateSize']);
+    await TestBed.configureTestingModule({
+      declarations: [
+        ...MockComponents(IconButtonComponent, RaisedButtonComponent),
+        MockPipe(TranslatePipe, value => value),
+      ],
+      imports: [
+        ErrorDialogComponent,
+        MockModule(TranslateModule)
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: BreakpointObserver, useValue: breakpointObserverMock },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially add a global style class', () => {
+    expect(mockMatDialog.addPanelClass).toHaveBeenCalledWith('dialog-global-style');
+  });
+
+  it('should update dialog size when breakpoint matches', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: true, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ErrorDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('100vw');
+  }));
+
+  it('should update dialog size when breakpoint does not match', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: false, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+    TestBed.createComponent(ErrorDialogComponent);
+
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('auto');
+  }));
+
+  it('should close dialog when pressing close', async () => {
+    const closeButton = ngMocks.find<IconButtonComponent>('#closeButton', null)?.componentInstance;
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+
+  it('should close dialog when pressing ok', async () => {
+    const cancelButton = ngMocks.find<RaisedButtonComponent>('#okButton', null)?.componentInstance;
+
+    cancelButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+
+});

package/src/lib/components/dialogs/error-dialog/error-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { DeleteDialogData } from '../delete-dialog/models/delete-dialog-data';
+import { TranslateModule } from '@ngx-translate/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-error-dialog',
+  templateUrl: './error-dialog.component.html',
+  styleUrls: ['./error-dialog.component.scss'],
+  standalone: true,
+  imports: [MatDialogModule, TranslateModule, RaisedButtonComponent, IconButtonComponent]
+})
+export class ErrorDialogComponent {
+  public itemName: string = '';
+
+  public constructor(
+    public dialogRef: MatDialogRef<ErrorDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteDialogData,
+    breakdownObserver: BreakpointObserver) {
+    this.itemName = data.name ? data.name : '';
+    dialogRef.addPanelClass("dialog-global-style");
+    breakdownObserver.observe('(max-width: 500px)').pipe(takeUntilDestroyed()).subscribe(result => dialogRef.updateSize(result.matches ? '100vw' : 'auto'));
+  }
+
+  public closeClick(): void {
+    this.dialogRef.close();
+  }
+}

package/src/lib/components/dialogs/services/dialog.service.spec.ts

@@ -0,0 +1,82 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfirmationResult, DialogService } from './dialog.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { AlertDialogComponent } from '../alert-dialog/alert-dialog.component';
+import { of } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+
+describe('DialogService', () => {
+  let service: DialogService;
+  let mockMatDialog: any;
+  let mockMatDialogRef: any;
+  let translateService: jasmine.SpyObj<any>;
+
+  beforeEach(() => {
+    mockMatDialog = jasmine.createSpyObj('MatDialog', ['open']);
+    mockMatDialogRef = jasmine.createSpyObj('MatDialogRef', ['afterClosed']);
+    translateService = jasmine.createSpyObj('TranslateService', ['instant']);
+    translateService.instant.and.callFake((key: string) => key);
+
+    TestBed.configureTestingModule({
+      providers: [DialogService,
+        { provide: MatDialog, useValue: mockMatDialog },
+        { provide: TranslateService, useValue: translateService }
+      ],
+      imports: [
+        MatDialogModule,
+      ]
+    });
+    service = TestBed.inject(DialogService);
+    mockMatDialog.open.and.returnValue(mockMatDialogRef);
+  });
+
+  afterEach(() => {
+    mockMatDialog.open.calls.reset();
+    mockMatDialogRef.afterClosed.calls.reset();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should have config with data when showCustomDialog without options', async () => {
+    const myData = 'myData';
+    mockMatDialogRef.afterClosed.and.returnValue(of({}));
+
+    await service.showCustomDialog(AlertDialogComponent, myData );
+
+    expect(mockMatDialog.open).toHaveBeenCalledWith(
+      AlertDialogComponent,
+      jasmine.objectContaining({ data: myData })
+    );
+  });
+
+  it('should have config with width and height when showCustomDialog ', async () => {
+    const myData = 'myData';
+    mockMatDialogRef.afterClosed.and.returnValue(of({}));
+
+    await service.showCustomDialog(AlertDialogComponent, myData, {width: 10, height:20} );
+
+    expect(mockMatDialog.open).toHaveBeenCalledWith(
+      AlertDialogComponent,
+      jasmine.objectContaining({ data: myData, width: 10 , height: 20})
+    );
+  });
+
+  it('should should ask user for confirmation', async () => {
+    mockMatDialogRef.afterClosed.and.returnValue(of(ConfirmationResult.Yes));
+
+    await service.askForConfirmation('title', 'message');
+
+    expect(mockMatDialog.open).toHaveBeenCalledTimes(1);
+  });
+
+  it('should returns user answer after confirmation', async () => {
+    mockMatDialogRef.afterClosed.and.returnValue(of(ConfirmationResult.Yes));
+
+    const result = await service.askForConfirmation('title', 'message');
+
+    expect(result).toBe(ConfirmationResult.Yes);
+  });
+});