[CL-50] Form controls (checkbox and radio) (#4066)

* [CL-50] feat: scaffold checkbox component * [CL-50] feat: implement control value accessor for checbox * [CL-50] feat: add form-field support to checkbox * [CL-50] feat: implement non-selected checkbox styling * [CL-50] feat: implement checkbox checked styles * [CL-50] feat: improve checkbox form-field compat * [CL-50] fix: checkbox border hover wrong color * [CL-50] feat: use svg instead of bwi font * [CL-50] feat: scaffold radio button * [EC-50] feat: implement radio logic * [CL-50] feat: add radio group tests * [CL-50] feat: add radio-button tests * [CL-50] feat: implement radio button styles * [CL-50] fix: checkbox style tweaks * [CL-50] feat: smooth radio button selection transition * [CL-50] chore: various fixes and cleanups * [CL-50] feat: add form field support * [EC-50] feat-wip: simplify checkbox styling * [EC-50] feat: extract checkbox into separate component * [CL-50] feat: add standalone form control component * [CL-50] feat: remove unnecessary checkbox-control It wasn't really doing anything, might as well use form control directly * [CL-50] chore: create separate folder with form examples * [CL-50] feat: switch to common bit-label * [CL-50] feat: let radio group act as form control * [CL-50] chore: restore form-field component * [CL-50] feat: add support for hint and error * [CL-50] fix: storybook build issue * [CL-50] fix: radio group label wrong text color * [CL-50] fix: translation * [CL-50] fix: put hint and errors outside label * [CL-50] feat: * [CL-50] feat: add custom checkbox example story * [CL-50] chore: remove 1 from full example name * [CL-50] chore: clean up unused icon * [CL-50] chore: clean up unused tailwind plugin * [CL-50] fix: ring offset color in custom example * [CL-50] chore: clean up unused icon * [CL-50] chore: add design link * [CL-50] chore: remove unused import * [CL-50] fix: pr review comments * [CL-50] fix: improve id handling
2025-12-14 15:23:33 +00:00 · 2022-12-05 08:49:03 +01:00
parent e9781b4214
commit d17d188534
26 changed files with 970 additions and 9 deletions
--- a/libs/components/src/radio-button/radio-group.component.spec.ts
+++ b/libs/components/src/radio-button/radio-group.component.spec.ts
@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { RadioButtonComponent } from "./radio-button.component";
+import { RadioButtonModule } from "./radio-button.module";
+
+describe("RadioGroupComponent", () => {
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let buttonElements: RadioButtonComponent[];
+  let radioButtons: HTMLInputElement[];
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, RadioButtonModule],
+      declarations: [TestApp],
+      providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+    testAppComponent = fixture.debugElement.componentInstance;
+    buttonElements = fixture.debugElement
+      .queryAll(By.css("bit-radio-button"))
+      .map((e) => e.componentInstance);
+    radioButtons = fixture.debugElement
+      .queryAll(By.css("input[type=radio]"))
+      .map((e) => e.nativeElement);
+
+    fixture.detectChanges();
+  }));
+
+  it("should select second element when setting selected to second", async () => {
+    testAppComponent.selected = "second";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(true);
+  });
+
+  it("should not select second element when setting selected to third", async () => {
+    testAppComponent.selected = "third";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(buttonElements[1].selected).toBe(false);
+  });
+
+  it("should emit new value when changing selection by clicking on radio button", async () => {
+    testAppComponent.selected = "first";
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    radioButtons[1].click();
+
+    expect(testAppComponent.selected).toBe("second");
+  });
+});
+
+@Component({
+  selector: "test-app",
+  template: `
+    <bit-radio-group [(ngModel)]="selected">
+      <bit-radio-button value="first">First</bit-radio-button>
+      <bit-radio-button value="second">Second</bit-radio-button>
+      <bit-radio-button value="third">Third</bit-radio-button>
+    </bit-radio-group>
+  `,
+})
+class TestApp {
+  selected?: string;
+}