[Cl-10] Button group (#3031)

* chore: setup initial bit-button-group using bitButton as template * feat: working radio group with preliminary styling * chore: cleanup * feat: implement proper basic styling * feat: implement focus handling and keyboard navigation * feat: implement size support * feat: add labeling support * feat: add input for button selection * feat: implement output handler on radio button interaction * feat: implement internal input/output seletion handling * feat: add external input support * feat: add external output support * chore: simplify storybook example a bit * fix: module imports * refactor: simplify both components * feat: remove size * chore: rename button-group to toggle-group * chore: rename toggle-group-element to toggle-group-button * chore: update story example * fix: compatibility with web vault * fix: imports in tests after rename * fix: remove unnecessary inject decorator * fix: clarify field names and html tags * feat: add badge centering fix * feat: set pointer cursor on label * chore: comment on special css rules * chore: remove focusable option from button * Update libs/components/src/toggle-group/toggle-group-button.component.ts Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * chore: rename to `bit-toggle` * fix: remove unecessary aria label function Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2025-12-16 08:13:42 +00:00 · 2022-07-18 14:25:37 +02:00
parent 5284072ff1
commit cd5aef1757
10 changed files with 327 additions and 0 deletions
--- a/libs/components/src/toggle-group/toggle.component.spec.ts
+++ b/libs/components/src/toggle-group/toggle.component.spec.ts
@@ -0,0 +1,71 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { ToggleGroupComponent } from "./toggle-group.component";
+import { ToggleGroupModule } from "./toggle-group.module";
+
+describe("Button", () => {
+  let mockGroupComponent: MockedButtonGroupComponent;
+  let fixture: ComponentFixture<TestApp>;
+  let testAppComponent: TestApp;
+  let radioButton: HTMLInputElement;
+
+  beforeEach(waitForAsync(() => {
+    mockGroupComponent = new MockedButtonGroupComponent();
+
+    TestBed.configureTestingModule({
+      imports: [ToggleGroupModule],
+      declarations: [TestApp],
+      providers: [{ provide: ToggleGroupComponent, useValue: mockGroupComponent }],
+    });
+
+    TestBed.compileComponents();
+    fixture = TestBed.createComponent(TestApp);
+    testAppComponent = fixture.debugElement.componentInstance;
+    radioButton = fixture.debugElement.query(By.css("input[type=radio]")).nativeElement;
+  }));
+
+  it("should emit value when clicking on radio button", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    radioButton.click();
+    fixture.detectChanges();
+
+    expect(mockGroupComponent.onInputInteraction).toHaveBeenCalledWith("value");
+  });
+
+  it("should check radio button when selected matches value", () => {
+    testAppComponent.value = "value";
+    fixture.detectChanges();
+
+    mockGroupComponent.selected = "value";
+    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);
+  });
+});
+
+class MockedButtonGroupComponent implements Partial<ToggleGroupComponent> {
+  onInputInteraction = jest.fn();
+  selected = null;
+}
+
+@Component({
+  selector: "test-app",
+  template: ` <bit-toggle [value]="value">Element</bit-toggle>`,
+})
+class TestApp {
+  value?: string;
+}