[CL-820] Switch component (#16216)

* Add switch component * fix focus state * updating stories * add switch role * updated story docs code examples * Add max length and long label story * Add disabled reason text * fix hint spacing * support rtl thumb transform * use correct input syntax. assign value to template variable * remove pointer when disabled * Show disabled text as title if it exists * add basic switch component tests * keep switch top aligned * move switch back to right side of label * add max width to label and hint * updated switch story docs * fix story html formatting * better comment about which are ControlValueAccessor functions * add JSDoc comment about model signals * update methods to mirror search input format * fix notify function type * fix typo * throw error if label is not provided * add hover and focus states * add label to failing spec * import bit-label
2025-12-31 23:53:37 +00:00 · 2025-09-08 15:14:03 -04:00
parent 6129ca5366
commit 0aaab9fe52
6 changed files with 474 additions and 0 deletions
--- a/libs/components/src/switch/switch.component.spec.ts
+++ b/libs/components/src/switch/switch.component.spec.ts
@@ -0,0 +1,98 @@
+import { Component } 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 { BitLabel } from "../form-control/label.component";
+
+import { SwitchComponent } from "./switch.component";
+import { SwitchModule } from "./switch.module";
+
+describe("SwitchComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let switchComponent: SwitchComponent;
+  let inputEl: HTMLInputElement;
+
+  @Component({
+    selector: "test-host",
+    imports: [FormsModule, BitLabel, ReactiveFormsModule, SwitchModule],
+    template: `
+      <form [formGroup]="formObj">
+        <bit-switch formControlName="switch">
+          <bit-label>Element</bit-label>
+        </bit-switch>
+      </form>
+    `,
+  })
+  class TestHostComponent {
+    formObj = new FormGroup({
+      switch: new FormControl(false),
+    });
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+
+    const debugSwitch = fixture.debugElement.query(By.directive(SwitchComponent));
+    switchComponent = debugSwitch.componentInstance;
+    inputEl = debugSwitch.nativeElement.querySelector("input[type=checkbox]");
+  });
+
+  it("should update checked attribute when selected changes programmatically", () => {
+    expect(inputEl.checked).toBe(false);
+
+    switchComponent.writeValue(true);
+    fixture.detectChanges();
+    expect(inputEl.checked).toBe(true);
+
+    switchComponent.writeValue(false);
+    fixture.detectChanges();
+    expect(inputEl.checked).toBe(false);
+  });
+
+  it("should update checked attribute when switch is clicked", () => {
+    expect(inputEl.checked).toBe(false);
+
+    inputEl.click();
+    fixture.detectChanges();
+
+    expect(inputEl.checked).toBe(true);
+
+    inputEl.click();
+    fixture.detectChanges();
+
+    expect(inputEl.checked).toBe(false);
+  });
+
+  it("should update checked when selected input changes outside of a form", async () => {
+    @Component({
+      selector: "test-selected-host",
+      template: `<bit-switch [selected]="checked"><bit-label>Element</bit-label></bit-switch>`,
+      standalone: true,
+      imports: [SwitchComponent, BitLabel],
+    })
+    class TestSelectedHostComponent {
+      checked = false;
+    }
+
+    const hostFixture = TestBed.createComponent(TestSelectedHostComponent);
+    hostFixture.detectChanges();
+    const switchDebug = hostFixture.debugElement.query(By.directive(SwitchComponent));
+    const input = switchDebug.nativeElement.querySelector('input[type="checkbox"]');
+
+    expect(input.checked).toBe(false);
+
+    hostFixture.componentInstance.checked = true;
+    hostFixture.detectChanges();
+    expect(input.checked).toBe(true);
+
+    hostFixture.componentInstance.checked = false;
+    hostFixture.detectChanges();
+    expect(input.checked).toBe(false);
+  });
+});