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

package/src/lib/components/button/button.component.spec.ts

@@ -0,0 +1,142 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { MatIconHarness } from '@angular/material/icon/testing';
+
+describe('ButtonWithProgressComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatButtonModule,
+        MatIconModule
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should mat-icon-button when type is icon', async () => {
+
+    fixture.componentRef.setInput('type', 'icon');
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getVariant()).toBe('icon');
+  });
+
+  it('should mat-flat-button when type is flat', async () => {
+
+    fixture.componentRef.setInput('type', 'flat');
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getAppearance()).toBe('filled');
+  });
+
+  it('should mat-raised-button when type is raised', async () => {
+
+    fixture.componentRef.setInput('type', 'raised');
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getAppearance()).toBe('elevated');
+  });
+
+  it('should mat-stroked-button when type is stroked', async () => {
+
+    fixture.componentRef.setInput('type', 'stroked');
+
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getAppearance()).toBe('outlined');
+  });
+
+  it('should mat-basic-button when type is basic', async () => {
+
+    fixture.componentRef.setInput('type', 'basic');
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getVariant()).toBe('basic');
+  });
+
+  it('should correctly display label', async () => {
+    const someLabel = 'someLabel';
+
+    fixture.componentRef.setInput('label', someLabel);
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.getText()).toBe(someLabel);
+  });
+
+  it('should disable button when disabled is set', async () => {
+    fixture.componentRef.setInput('disable', true);
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeTrue();
+  });
+
+  it('should enable button when disabled is not set', async () => {
+    fixture.componentRef.setInput('disable', false);
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeFalse();
+  });
+
+  it('should disable button when disabled is not set and show load icon', async () => {
+    fixture.componentRef.setInput('inProgress', true);
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await button.isDisabled()).toBeTrue();
+    expect(await icon.getName()).toBe('update');
+  });
+
+  it('should show correct icon when not loading and icon is set', async () => {
+    fixture.componentRef.setInput('icon', 'test');
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe('test');
+  });
+
+  it('should not show any icon when not set', async () => {
+    fixture.componentRef.setInput('icon', null);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarnessOrNull(MatIconHarness);
+    expect(icon).toBe(null);
+  });
+
+  it('should emit buttonClick event when clicked', fakeAsync(async () => {
+    const clickSpy = spyOn(component.buttonClick, 'emit');
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+
+    button.click();
+    tick();
+
+    expect(clickSpy).toHaveBeenCalled();
+  }));
+});

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,22 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'cauca-button',
+    templateUrl: './button.component.html',
+    styleUrls: ['./button.component.scss'],
+    imports: [MatIconModule, MatButtonModule, NgClass],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ButtonComponent {
+  public class = input<string | null>(null);
+  public inProgress = input<boolean>(false);
+  public disable = input<boolean>(false);
+  public label = input<string>('');
+  public icon = input<string | null>(null);
+  public color = input<string>('');
+  public type = input<'basic' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab'>('basic');
+  public buttonClick = output<void>();
+}

package/src/lib/components/buttons/base-button.ts

@@ -0,0 +1,35 @@
+import { InputSignal, input, computed, output, Directive, OutputEmitterRef, signal } from "@angular/core";
+
+@Directive()
+export abstract class BaseButton {
+  public colorOnHover: InputSignal<string> = input(undefined);
+  public color: InputSignal<string> = input(undefined);
+  public icon: InputSignal<string> = input();
+  public iconAlignment: InputSignal<'left' | 'right'> = input('left');
+  public isDisabled: InputSignal<boolean> = input(false);
+  public isInProgress: InputSignal<boolean> = input(false);
+
+  public iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color()); 
+  public showIcon = computed(() => !!this.icon() || this.isInProgress());
+  public iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon());
+  public buttonDisabled = computed(() => this.isDisabled() || this.isInProgress());
+
+  public buttonClick: OutputEmitterRef<void> = output();
+
+  public isHovered = signal(false);
+
+  public onMouseEnter(): void {
+    this.isHovered.set(true);
+  }
+
+  public onMouseLeave(): void {
+    this.isHovered.set(false);
+  }
+}
+
+@Directive()
+export abstract class BaseButtonWithLabel extends BaseButton {
+  public translateLabel: InputSignal<boolean> = input(true);
+  public label: InputSignal<string> = input();
+  public small: InputSignal<boolean> = input(false);
+}

package/src/lib/components/buttons/basic-button/basic-button.component.html

@@ -0,0 +1,5 @@
+<button mat-button [ngClass]="small() ? 'small-button' : ''" [color]="color()"  onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
+    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
+    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+</button>

package/src/lib/components/buttons/basic-button/basic-button.component.scss

@@ -0,0 +1,12 @@
+.mdc-button.mat-white,
+.mat-stroked-button.mat-white {
+    color: white;
+    border-color: white;
+}
+.mdc-button.mat-white:hover,
+.mat-mdc-outlined-button.mat-white:hover {
+  background-color: transparent;
+}
+mat-icon {
+  color: inherit;
+}

package/src/lib/components/buttons/basic-button/basic-button.component.spec.ts

@@ -0,0 +1,106 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicButtonComponent } from './basic-button.component';
+import { MatIconHarness } from '@angular/material/icon/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
+describe('BasicButtonComponent', () => {
+  let component: BasicButtonComponent;
+  let fixture: ComponentFixture<BasicButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BasicButtonComponent,
+      ],
+      declarations: [MockPipe(TranslatePipe, key => key)]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(BasicButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the provided icon', async() => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const icon = await loader.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe(component.icon());
+  });
+
+  it('should display the label', async () => {
+    fixture.componentRef.setInput('label', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const button = await loader.getHarness(MatButtonHarness);
+    expect(await button.getText()).toContain(component.label());
+  });
+
+  it('should disable button when disabled is set', async () => {
+    fixture.componentRef.setInput('isDisabled', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeTrue();
+  });
+
+  it('should enable button when disabled is not set', async () => {
+    fixture.componentRef.setInput('isDisabled', false);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeFalse();
+  });
+
+  it('should disable button when disabled is not set and show load icon', async () => {
+    fixture.componentRef.setInput('isInProgress', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await button.isDisabled()).toBeTrue();
+    expect(await icon.getName()).toBe('update');
+  });
+
+  it('should not show any icon when not set', async () => {
+    fixture.componentRef.setInput('icon', null);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarnessOrNull(MatIconHarness);
+    expect(icon).toBe(null);
+  });
+
+  it('should emit buttonClick event when clicked', async () => {
+    const clickSpy = spyOn(component.buttonClick, 'emit');
+    const button = await loader.getHarness(MatButtonHarness);
+
+    await button.click();
+
+    expect(clickSpy).toHaveBeenCalled();
+  });
+
+  it('should add small-button class when small is set', () => {
+    fixture.componentRef.setInput('small', false);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
+    
+    fixture.componentRef.setInput('small', true);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
+  });
+});

package/src/lib/components/buttons/basic-button/basic-button.component.ts

@@ -0,0 +1,17 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { BaseButtonWithLabel } from '../base-button';
+
+@Component({
+  selector: 'cauca-basic-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatIcon, MatButton, TranslateModule, NgClass],
+  templateUrl: './basic-button.component.html',
+  styleUrl: './basic-button.component.scss'
+})
+export class BasicButtonComponent extends BaseButtonWithLabel {
+}

package/src/lib/components/buttons/fab-button/fab-button.component.html

@@ -0,0 +1,3 @@
+<button mat-fab [color]="color()" onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
+    @if (showIcon()) { <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+</button>

package/src/lib/components/buttons/fab-button/fab-button.component.scss

@@ -0,0 +1,12 @@
+.mdc-button.mat-white,
+.mat-mdc-fab {
+    color: white;
+    border-color: white;
+}
+.mdc-button.mat-white:hover,
+.mat-mdc-outlined-button.mat-white:hover {
+  background-color: transparent;
+}
+mat-icon {
+  color: inherit;
+}

package/src/lib/components/buttons/fab-button/fab-button.component.spec.ts

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabButtonComponent } from './fab-button.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import {MatIconHarness} from '@angular/material/icon/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+
+describe('FabButtonComponent', () => {
+  let component: FabButtonComponent;
+  let fixture: ComponentFixture<FabButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FabButtonComponent,
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(FabButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the provided icon', async() => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const icon = await loader.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe(component.icon());
+  });
+
+  it('should disable button when disabled is set', async () => {
+    fixture.componentRef.setInput('isDisabled', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeTrue();
+  });
+
+  it('should enable button when disabled is not set', async () => {
+    fixture.componentRef.setInput('isDisabled', false);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeFalse();
+  });
+
+  it('should disable button when disabled is not set and show load icon', async () => {
+    fixture.componentRef.setInput('isInProgress', true);
+
+    fixture.detectChanges();
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await button.isDisabled()).toBeTrue();
+    expect(await icon.getName()).toBe('update');
+  });
+
+  it('should not show any icon when not set', async () => {
+    fixture.componentRef.setInput('icon', null);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarnessOrNull(MatIconHarness);
+    expect(icon).toBe(null);
+  });
+
+  it('should emit buttonClick event when clicked', async () => {
+    const clickSpy = spyOn(component.buttonClick, 'emit');
+    const button = await loader.getHarness(MatButtonHarness);
+
+    await button.click();
+
+    expect(clickSpy).toHaveBeenCalled();
+  });
+});

package/src/lib/components/buttons/fab-button/fab-button.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { MatButtonModule, } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { BaseButtonWithLabel } from '../base-button';
+
+@Component({
+  selector: 'cauca-fab-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatButtonModule, MatIconModule],
+  templateUrl: './fab-button.component.html',
+  styleUrl: './fab-button.component.scss',
+})
+export class FabButtonComponent extends BaseButtonWithLabel {
+  public iconColor = computed(() => this.color() === 'primary' ? 'white' : undefined);
+}

package/src/lib/components/buttons/flat-button/flat-button.component.html

@@ -0,0 +1,5 @@
+<button mat-flat-button [ngClass]="small() ? 'small-button' : ''" [color]="color()" onclick="this.blur()"  [disabled]="buttonDisabled()" (click)="buttonClick.emit();">
+    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
+    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+</button>

package/src/lib/components/buttons/flat-button/flat-button.component.scss

@@ -0,0 +1,12 @@
+.mdc-button.mat-white,
+.mat-stroked-button.mat-white {
+    color: white;
+    border-color: white;
+}
+.mdc-button.mat-white:hover,
+.mat-mdc-outlined-button.mat-white:hover {
+  background-color: transparent;
+}
+mat-icon {
+  color: inherit;
+}

package/src/lib/components/buttons/flat-button/flat-button.component.spec.ts

@@ -0,0 +1,106 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlatButtonComponent } from './flat-button.component';
+import { MatIconHarness } from '@angular/material/icon/testing';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
+describe('FlatButtonComponent', () => {
+  let component: FlatButtonComponent;
+  let fixture: ComponentFixture<FlatButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FlatButtonComponent,
+      ],
+      declarations: [MockPipe(TranslatePipe, key => key)]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(FlatButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the provided icon', async() => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const icon = await loader.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe(component.icon());
+  });
+
+  it('should display the label', async () => {
+    fixture.componentRef.setInput('label', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const button = await loader.getHarness(MatButtonHarness);
+    expect(await button.getText()).toContain(component.label());
+  });
+
+  it('should disable button when disabled is set', async () => {
+    fixture.componentRef.setInput('isDisabled', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeTrue();
+  });
+
+  it('should enable button when disabled is not set', async () => {
+    fixture.componentRef.setInput('isDisabled', false);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeFalse();
+  });
+
+  it('should disable button when disabled is not set and show load icon', async () => {
+    fixture.componentRef.setInput('isInProgress', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await button.isDisabled()).toBeTrue();
+    expect(await icon.getName()).toBe('update');
+  });
+
+  it('should not show any icon when not set', async () => {
+    fixture.componentRef.setInput('icon', null);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarnessOrNull(MatIconHarness);
+    expect(icon).toBe(null);
+  });
+
+  it('should emit buttonClick event when clicked', async () => {
+    const clickSpy = spyOn(component.buttonClick, 'emit');
+    const button = await loader.getHarness(MatButtonHarness);
+
+    await button.click();
+
+    expect(clickSpy).toHaveBeenCalled();
+  });
+
+  it('should add small-button class when small is set', () => {
+    fixture.componentRef.setInput('small', false);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
+
+    fixture.componentRef.setInput('small', true);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
+  });
+});

package/src/lib/components/buttons/flat-button/flat-button.component.ts

@@ -0,0 +1,17 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { BaseButtonWithLabel } from '../base-button';
+
+@Component({
+  selector: 'cauca-flat-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatIcon, MatButton, TranslateModule, NgClass],
+  templateUrl: './flat-button.component.html',
+  styleUrl: './flat-button.component.scss'
+})
+export class FlatButtonComponent extends BaseButtonWithLabel {
+}

package/src/lib/components/buttons/icon-button/icon-button.component.html

@@ -0,0 +1,3 @@
+<button (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" mat-icon-button onclick="this.blur()" (click)="buttonClick.emit();" [disabled]="buttonDisabled()">
+    <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon>
+</button>

package/src/lib/components/buttons/icon-button/icon-button.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+}
+
+.mdc-button.mat-white,
+.mat-stroked-button.mat-white {
+    color: white;
+    border-color: white;
+}
+.mdc-button.mat-white:hover,
+.mat-mdc-outlined-button.mat-white:hover {
+  background-color: transparent;
+}
+
+mat-icon {
+  color: #006496;
+}
+
+.mat-mdc-button-disabled {
+  .mat-icon {
+    color: rgba(18, 16, 20, 0.38);
+  }
+}

package/src/lib/components/buttons/icon-button/icon-button.component.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconButtonComponent } from './icon-button.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatIconHarness } from '@angular/material/icon/testing';
+
+describe('IconButtonComponent', () => {
+  let component: IconButtonComponent;
+  let fixture: ComponentFixture<IconButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconButtonComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(IconButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the provided icon', async() => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const icon = await loader.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe(component.icon());
+  });
+
+});