From 876b4851ca468e3a53f3578caf0c80ecc39f4afd Mon Sep 17 00:00:00 2001 From: Vicki League Date: Thu, 26 Jun 2025 15:27:19 -0400 Subject: [PATCH] fix unit tests --- .../src/banner/banner.component.spec.ts | 6 +- .../radio-button.component.spec.ts | 81 +++++++++---------- .../src/toggle-group/toggle.component.spec.ts | 75 +++++++---------- 3 files changed, 70 insertions(+), 92 deletions(-) diff --git a/libs/components/src/banner/banner.component.spec.ts b/libs/components/src/banner/banner.component.spec.ts index 2bbc7965642..edfbe8c8be9 100644 --- a/libs/components/src/banner/banner.component.spec.ts +++ b/libs/components/src/banner/banner.component.spec.ts @@ -30,17 +30,17 @@ describe("BannerComponent", () => { }); it("should create with alert", () => { - expect(component.useAlertRole).toBe(true); + expect(component.useAlertRole()).toBe(true); const el = fixture.nativeElement.children[0]; expect(el.getAttribute("role")).toEqual("status"); expect(el.getAttribute("aria-live")).toEqual("polite"); }); it("useAlertRole=false", () => { - component.useAlertRole = false; + fixture.componentRef.setInput("useAlertRole", false); fixture.autoDetectChanges(); - expect(component.useAlertRole).toBe(false); + expect(component.useAlertRole()).toBe(false); const el = fixture.nativeElement.children[0]; expect(el.getAttribute("role")).toBeNull(); expect(el.getAttribute("aria-live")).toBeNull(); diff --git a/libs/components/src/radio-button/radio-button.component.spec.ts b/libs/components/src/radio-button/radio-button.component.spec.ts index 265b8e23129..b47c1823160 100644 --- a/libs/components/src/radio-button/radio-button.component.spec.ts +++ b/libs/components/src/radio-button/radio-button.component.spec.ts @@ -1,5 +1,6 @@ -import { Component } from "@angular/core"; +import { Component, DebugElement } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -10,70 +11,62 @@ import { RadioButtonModule } from "./radio-button.module"; import { RadioGroupComponent } from "./radio-group.component"; describe("RadioButton", () => { - let mockGroupComponent: MockedButtonGroupComponent; - let fixture: ComponentFixture; - let testAppComponent: TestApp; - let radioButton: HTMLInputElement; + let fixture: ComponentFixture; + let radioButtonGroup: RadioGroupComponent; + let radioButtons: DebugElement[]; beforeEach(async () => { - mockGroupComponent = new MockedButtonGroupComponent(); - TestBed.configureTestingModule({ - imports: [TestApp], - providers: [ - { provide: RadioGroupComponent, useValue: mockGroupComponent }, - { provide: I18nService, useValue: new I18nMockService({}) }, - ], + imports: [TestComponent], + providers: [{ provide: I18nService, useValue: new I18nMockService({}) }], }); await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestApp); + fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); - testAppComponent = fixture.debugElement.componentInstance; - radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement; + radioButtonGroup = fixture.debugElement.query( + By.directive(RadioGroupComponent), + ).componentInstance; + radioButtons = fixture.debugElement.queryAll(By.css("input[type=radio]")); }); it("should emit value when clicking on radio button", () => { - testAppComponent.value = "value"; + const spyFn = jest.spyOn(radioButtonGroup, "onInputChange"); + + radioButtons[1].triggerEventHandler("change"); fixture.detectChanges(); - radioButton.click(); - fixture.detectChanges(); - - expect(mockGroupComponent.onInputChange).toHaveBeenCalledWith("value"); + expect(spyFn).toHaveBeenCalledWith(1); }); - it("should check radio button when selected matches value", () => { - testAppComponent.value = "value"; + it("should check radio button only when selected matches value", () => { fixture.detectChanges(); - mockGroupComponent.selected = "value"; + expect(radioButtons[0].nativeElement.checked).toBe(true); + expect(radioButtons[1].nativeElement.checked).toBe(false); + + radioButtons[1].triggerEventHandler("change"); fixture.detectChanges(); - expect(radioButton.checked).toBe(true); - }); - - it("should not check radio button when selected does not match value", () => { - testAppComponent.value = "value"; - fixture.detectChanges(); - - mockGroupComponent.selected = "nonMatchingValue"; - fixture.detectChanges(); - - expect(radioButton.checked).toBe(false); + expect(radioButtons[0].nativeElement.checked).toBe(false); + expect(radioButtons[1].nativeElement.checked).toBe(true); }); }); -class MockedButtonGroupComponent implements Partial { - onInputChange = jest.fn(); - selected: unknown = null; -} - @Component({ - selector: "test-app", - template: `Element`, - imports: [RadioButtonModule], + selector: "test-component", + template: ` +
+ + Element + Element + +
+ `, + imports: [FormsModule, ReactiveFormsModule, RadioButtonModule], }) -class TestApp { - value?: string; +class TestComponent { + formObj = new FormGroup({ + radio: new FormControl(0), + }); } diff --git a/libs/components/src/toggle-group/toggle.component.spec.ts b/libs/components/src/toggle-group/toggle.component.spec.ts index 28ab1f54e00..1eec7e54e38 100644 --- a/libs/components/src/toggle-group/toggle.component.spec.ts +++ b/libs/components/src/toggle-group/toggle.component.spec.ts @@ -1,75 +1,60 @@ -import { Component, model } from "@angular/core"; +import { Component, DebugElement } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { By } from "@angular/platform-browser"; import { ToggleGroupComponent } from "./toggle-group.component"; import { ToggleGroupModule } from "./toggle-group.module"; -// TODO signals migration broke these -describe.skip("Button", () => { - let mockGroupComponent: MockedButtonGroupComponent; - let fixture: ComponentFixture; - let testAppComponent: TestApp; - let radioButton: HTMLInputElement; +describe("Toggle", () => { + let fixture: ComponentFixture; + let toggleGroup: ToggleGroupComponent; + let toggleButtons: DebugElement[]; beforeEach(async () => { - mockGroupComponent = new MockedButtonGroupComponent(); - TestBed.configureTestingModule({ - imports: [TestApp], - providers: [{ provide: ToggleGroupComponent, useValue: mockGroupComponent }], + imports: [TestComponent], }); await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestApp); - testAppComponent = fixture.debugElement.componentInstance; - radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement; + fixture = TestBed.createComponent(TestComponent); + fixture.detectChanges(); + toggleGroup = fixture.debugElement.query(By.directive(ToggleGroupComponent)).componentInstance; + toggleButtons = fixture.debugElement.queryAll(By.css("input[type=radio]")); }); it("should emit value when clicking on radio button", () => { - testAppComponent.value = "value"; + const spyFn = jest.spyOn(toggleGroup, "onInputInteraction"); + + toggleButtons[1].triggerEventHandler("change"); fixture.detectChanges(); - radioButton.click(); - fixture.detectChanges(); - - expect(mockGroupComponent.onInputInteraction).toHaveBeenCalledWith("value"); + expect(spyFn).toHaveBeenCalledWith(1); }); - it("should check radio button when selected matches value", () => { - testAppComponent.value = "value"; + it("should select toggle button only when selected matches value", () => { fixture.detectChanges(); - mockGroupComponent.selected.set("value"); + expect(toggleButtons[0].nativeElement.checked).toBe(true); + expect(toggleButtons[1].nativeElement.checked).toBe(false); + + toggleButtons[1].triggerEventHandler("change"); fixture.detectChanges(); - expect(radioButton.checked).toBe(true); - }); - - it("should not check radio button when selected does not match value", () => { - testAppComponent.value = "value"; - fixture.detectChanges(); - - mockGroupComponent.selected.set("nonMatchingValue"); - fixture.detectChanges(); - - expect(radioButton.checked).toBe(false); + expect(toggleButtons[0].nativeElement.checked).toBe(false); + expect(toggleButtons[1].nativeElement.checked).toBe(true); }); }); @Component({ - selector: "mock-button-group", -}) -class MockedButtonGroupComponent implements Partial> { - onInputInteraction = jest.fn(); - selected = model(); -} - -@Component({ - selector: "test-app", - template: ` Element`, + selector: "test-component", + template: ` + + Zero + One + + `, imports: [ToggleGroupModule], }) -class TestApp { - value?: string; +class TestComponent { + selected = 0; }