bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-11 05:53:42 +00:00
Code Issues Releases Wiki Activity

fix unit tests

Browse Source
This commit is contained in:
Vicki League
2025-06-26 15:27:19 -04:00
parent 8866cd53f6
commit 876b4851ca
3 changed files with 70 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/src/banner/banner.component.spec.ts
View File

@@ -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();

81
libs/components/src/radio-button/radio-button.component.spec.ts
View File

@@ -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<TestApp>;
let testAppComponent: TestApp;
let radioButton: HTMLInputElement;
let fixture: ComponentFixture<TestComponent>;
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<RadioGroupComponent> {
onInputChange = jest.fn();
selected: unknown = null;
}
@Component({
selector: "test-app",
template: `<bit-radio-button [value]="value"><bit-label>Element</bit-label></bit-radio-button>`,
imports: [RadioButtonModule],
selector: "test-component",
template: `
<form [formGroup]="formObj">
<bit-radio-group formControlName="radio">
<bit-radio-button [value]="0"><bit-label>Element</bit-label></bit-radio-button>
<bit-radio-button [value]="1"><bit-label>Element</bit-label></bit-radio-button>
</bit-radio-group>
</form>
`,
imports: [FormsModule, ReactiveFormsModule, RadioButtonModule],
})
class TestApp {
value?: string;
class TestComponent {
formObj = new FormGroup({
radio: new FormControl(0),
});
}

75
libs/components/src/toggle-group/toggle.component.spec.ts
View File

@@ -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<TestApp>;
let testAppComponent: TestApp;
let radioButton: HTMLInputElement;
describe("Toggle", () => {
let fixture: ComponentFixture<TestComponent>;
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<ToggleGroupComponent<string>> {
onInputInteraction = jest.fn();
selected = model<string>();
}
@Component({
selector: "test-app",
template: ` <bit-toggle [value]="value">Element</bit-toggle>`,
selector: "test-component",
template: `
<bit-toggle-group [(selected)]="selected">
<bit-toggle [value]="0">Zero</bit-toggle>
<bit-toggle [value]="1">One</bit-toggle>
</bit-toggle-group>
`,
imports: [ToggleGroupModule],
})
class TestApp {
value?: string;
class TestComponent {
selected = 0;
}