Skip to content

Commit

Permalink
test(stark-ui): use harnesses
Browse files Browse the repository at this point in the history 
action-bar component
app-data component
app-menu component

use harnesses for testing

ISSUES CLOSED: NationalBankBelgium#2767
  • Loading branch information
@mhenkens
mhenkens committed Nov 4, 2024
1 parent f720352 commit 9299f34
Show file tree
Hide file tree
Showing 9 changed files with 217 additions and 159 deletions.
88 changes: 50 additions & 38 deletions packages/stark-ui/src/modules/action-bar/components/action-bar.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
/* eslint-disable @angular-eslint/component-max-inline-declarations */
import { Component, ViewChild } from "@angular/core";
import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import {
StarkActionBarComponent,
StarkActionBarComponentMode
} from "@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar.component";
import { MatLegacyButtonModule as MatButtonModule } from "@angular/material/legacy-button";
import { MatIconModule } from "@angular/material/icon";
import { MatIconTestingModule } from "@angular/material/icon/testing";
import { MatLegacyMenuModule as MatMenuModule } from "@angular/material/legacy-menu";
import { MatLegacyTooltipModule as MatTooltipModule } from "@angular/material/legacy-tooltip";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { StarkActionBarComponent, StarkActionBarComponentMode } from "./action-bar.component";
import { StarkAction } from "./action.intf";
import { StarkActionBarConfig } from "./action-bar-config.intf";
import { Component, ViewChild } from "@angular/core";
import { StarkActionBarConfig } from "@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar-config.intf";
import { StarkAction } from "@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action.intf";
import { HarnessLoader } from "@angular/cdk/testing";
import createSpy = jasmine.createSpy;
import { MatButtonHarness } from "@angular/material/button/testing";
import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";

describe("ActionBarComponent", () => {
@Component({
Expand All @@ -36,23 +41,21 @@ describe("ActionBarComponent", () => {
public alternativeActions?: StarkAction[];
}

// IMPORTANT: The official way to test components using ChangeDetectionStrategy.OnPush is to wrap it with a test host component
// see https://github.com/angular/angular/issues/12313#issuecomment-444623173
let hostFixture: ComponentFixture<TestHostComponent>;
let hostComponent: TestHostComponent;
let component: StarkActionBarComponent;
const buttonToggleSelector = ".extend-action-bar";
let loader: HarnessLoader;

beforeEach(waitForAsync(() =>
TestBed.configureTestingModule({
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [StarkActionBarComponent, TestHostComponent],
imports: [MatButtonModule, MatIconModule, MatIconTestingModule, MatMenuModule, MatTooltipModule, TranslateModule.forRoot()],
providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, TranslateService]
}).compileComponents()));
}).compileComponents();

beforeEach(() => {
hostFixture = TestBed.createComponent(TestHostComponent);
hostComponent = hostFixture.componentInstance;

const demoActions: StarkAction[] = [
{
id: "userDetailValidate",
Expand All @@ -78,23 +81,27 @@ describe("ActionBarComponent", () => {
};
hostFixture.detectChanges();
component = hostComponent.starkActionBar;

loader = TestbedHarnessEnvironment.loader(hostFixture);
});

describe("@Input() mode", () => {
it("should have the toggle action bar button visible in full mode", () => {
it("should have the toggle action bar button visible in full mode", async () => {
hostComponent.mode = "full";
hostFixture.detectChanges();

const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
expect(buttonToggleExtend).toBeDefined();
const extendActionBarButton = await loader.getHarnessOrNull(MatButtonHarness.with({ selector: ".extend-action-bar" }));

expect(extendActionBarButton).toBeDefined();
});

it("should not have the toggle action bar button visible in compact mode", () => {
it("should not have the toggle action bar button visible in compact mode", async () => {
hostComponent.mode = "compact";
hostFixture.detectChanges();

const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
expect(buttonToggleExtend).toBeNull();
const extendActionBarButton = await loader.getHarnessOrNull(MatButtonHarness.with({ selector: ".extend-action-bar" }));

expect(extendActionBarButton).toBeNull();
});
});

Expand All @@ -109,19 +116,19 @@ describe("ActionBarComponent", () => {
});

describe("@Input() actionBarConfig", () => {
it("should not call the defined action when disabled", () => {
const menuItem: HTMLElement = hostFixture.nativeElement.querySelector(
`#${hostComponent.actionBarId}-${hostComponent.actionBarConfig.actions[0].id}`
it("should not call the defined action when disabled", async () => {
const buttonHarness: MatButtonHarness[] = await loader.getAllHarnesses(
MatButtonHarness.with({ selector: ".stark-action-bar-action" })
);
menuItem.click();
await buttonHarness[0].click();
expect(hostComponent.actionBarConfig.actions[0].actionCall).not.toHaveBeenCalled();
});

it("should call the defined action when enabled", () => {
const menuItem: HTMLElement = hostFixture.nativeElement.querySelector(
`#${hostComponent.actionBarId}-${hostComponent.actionBarConfig.actions[1].id}`
it("should not call the defined action when disabled", async () => {
const buttonHarness: MatButtonHarness[] = await loader.getAllHarnesses(
MatButtonHarness.with({ selector: ".stark-action-bar-action" })
);
menuItem.click();
await buttonHarness[1].click();
expect(hostComponent.actionBarConfig.actions[1].actionCall).toHaveBeenCalledTimes(1);
});
});
Expand All @@ -132,29 +139,34 @@ describe("ActionBarComponent", () => {
hostFixture.detectChanges();
});

it("should display", () => {
const actionBar: HTMLElement = hostFixture.nativeElement.querySelector(".open-alt-actions");
expect(actionBar).toBeDefined();
it("should display", async () => {
const menuButton = await loader.getHarnessOrNull(MatButtonHarness.with({ selector: ".open-alt-actions" }));
expect(menuButton).not.toBeNull();
});
});

describe("toggle extended action bar", () => {
it("should toggle the action bar extension", () => {
it("should toggle the extended action bar", async () => {
hostComponent.mode = "full";
hostFixture.detectChanges();

const buttonToggleExtend: HTMLElement = hostFixture.nativeElement.querySelector(buttonToggleSelector);
spyOn(component, "toggleExtendedActionBar").and.callThrough();
buttonToggleExtend.click();
hostFixture.detectChanges();

const buttonHarness = await loader.getHarness(
MatButtonHarness.with({
selector: ".extend-action-bar"
})
);

await buttonHarness.click();
hostFixture.detectChanges();
expect(component.toggleExtendedActionBar).toHaveBeenCalledTimes(1);
expect(component.isExtended).toBe(true);
buttonToggleExtend.click();
expect(component.isExtended).toBeTrue();

await buttonHarness.click();
hostFixture.detectChanges();
expect(component.toggleExtendedActionBar).toHaveBeenCalledTimes(2);
expect(component.isExtended).toBe(false);
expect(component.isExtended).toBeFalse();
});
});
});
1 change: 1 addition & 0 deletions packages/stark-ui/src/modules/app-data/components.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from "./components/app-data.component";
export * from "./components/app-data.component.harness";
52 changes: 52 additions & 0 deletions packages/stark-ui/src/modules/app-data/components/app-data.component.harness.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { ComponentHarness } from "@angular/cdk/testing";
import { MatLegacyMenuHarness } from "@angular/material/legacy-menu/testing";

export class StarkAppDataComponentHarness extends ComponentHarness {
public static hostSelector = "stark-app-data";

protected getSummary = this.locatorForOptional(".stark-app-data-summary");
protected getDropdownDiv = this.locatorForOptional(".stark-app-data.dropdown");
protected getMenuDiv = this.locatorForOptional(".stark-app-data.menu");

public getDropdownHarness = this.locatorForOptional(MatLegacyMenuHarness);

public async isSummaryPresent(): Promise<boolean> {
const detail = await this.getSummary();
return !!detail;
}

public async getSummaryText(): Promise<string | undefined> {
const summary = await this.getSummary();
return summary ? summary.text() : undefined;
}

public async isDropdownDivPresent(): Promise<boolean> {
const dropdown = await this.getDropdownDiv();
return !!dropdown;
}

public async isMenuDivPresent(): Promise<boolean> {
const menu = await this.getMenuDiv();
return !!menu;
}

public async getDropdownDetailContentText(): Promise<string | undefined> {
const rootLocator = this.documentRootLocatorFactory();
const element = await rootLocator.locatorForOptional(".mat-menu-content")();
return element ? element.text() : undefined;
}

public async openDropdownDetail(): Promise<void> {
const matMenuHarness = await this.getDropdownHarness();
if (matMenuHarness) {
await matMenuHarness.open();
}
}

public async closeDropdownDetail(): Promise<void> {
const matMenuHarness = await this.getDropdownHarness();
if (matMenuHarness) {
await matMenuHarness.close();
}
}
}
Loading

0 comments on commit 9299f34

Please sign in to comment.