feat(testing-fab): add toggle widget type

Author: mumenthalers

apps/styleguide/src/main.ts

@@ -13,7 +13,7 @@ import {
   provideLogger,
   withBrowserConsoleTransport,
 } from '@shiftcode/ngx-core'
-import { filter, map, startWith } from 'rxjs'
+import { map, startWith } from 'rxjs'
 
 import { AppComponent } from './app/app.component'
 import { provideSgConfig } from './provide-sg-config'
@@ -33,8 +33,8 @@ bootstrapApplication(AppComponent, {
     provideTestingFab([
       {
         id: 'body-bg-color',
-        label: 'Body Background',
         type: 'select-query-param',
+        label: 'Body Background',
         queryParam: 'body-bg',
         options: [
           { value: '#e0202b', label: 'red' },
@@ -59,6 +59,12 @@ bootstrapApplication(AppComponent, {
           { value: '#35978a', label: 'turquoise' },
         ],
       },
+      {
+        id: 'body-bg-light',
+        type: 'toggle-query-param',
+        label: 'Use Light background',
+        queryParam: 'body-bg-light',
+      },
     ]),
     provideEnvironmentInitializer(() => {
       const origin = inject(ORIGIN)
@@ -69,11 +75,15 @@ bootstrapApplication(AppComponent, {
           filterIfInstanceOf(NavigationEnd),
           map((ev) => ev.urlAfterRedirects),
           startWith(inject(Router).url),
-          map((path) => URL.parse(path, origin)?.searchParams?.get('body-bg') || null),
-          filter((bgColor) => bgColor === null || /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(bgColor)),
+          map((path) => {
+            const qp = URL.parse(path, origin)?.searchParams
+            const bgColor = qp?.get('body-bg') || '#fff'
+            const lightFlag = qp?.get('body-bg-light') === 'true'
+            return [/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(bgColor) ? bgColor : '#fff', lightFlag] as const
+          }),
         )
-        .subscribe((bgColor) => {
-          doc.body.style.backgroundColor = bgColor || 'unset'
+        .subscribe(([bgColor, useLightBg]) => {
+          doc.body.style.backgroundColor = useLightBg ? `color-mix(in oklab, ${bgColor}, white 50%)` : bgColor
         })
     }),
   ],

libs/components/README.md

@@ -95,6 +95,12 @@ bootstrapApplication(AppComponent, {
           { label: 'Preview', value: 'preview' },
         ],
       },
+      {
+        id: 'enable-feature-x',
+        label: 'Enable Feature X',
+        type: 'toggle-query-param',
+        queryParam: 'feature-x',
+      },
     ]),
   ],
 })

libs/components/src/lib/testing-fab/provide-testing-fab.spec.ts

@@ -49,7 +49,9 @@ function setup(testingFabProviders: EnvironmentProviders) {
 
 describe('provideTestingFab', () => {
   test('supports static widgets config and renders the testing fab', async () => {
-    const widgets: readonly TestingFabWidget[] = [{ id: 'a1', label: 'Action', type: 'action', action: vi.fn() }]
+    const widgets: readonly TestingFabWidget[] = [
+      { id: 'a1', label: 'Action', type: 'toggle-query-param', queryParam: 'flag' },
+    ]
 
     setup(provideTestingFab(widgets))
 
@@ -59,7 +61,9 @@ describe('provideTestingFab', () => {
   })
 
   test('supports factory widgets config', async () => {
-    const widgets: readonly TestingFabWidget[] = [{ id: 'a1', label: 'Action', type: 'action', action: vi.fn() }]
+    const widgets: readonly TestingFabWidget[] = [
+      { id: 'a1', label: 'Action', type: 'toggle-query-param', queryParam: 'flag' },
+    ]
     const factory = vi.fn(() => widgets)
 
     setup(provideTestingFab(factory))

libs/components/src/lib/testing-fab/testing-fab-widget.type.ts

@@ -1,21 +1,16 @@
 import { Type } from '@angular/core'
 
 export type TestingFabWidget =
-  | TestingFabActionWidget
   | TestingFabSelectQueryParamWidget
+  | TestingFabToggleQueryParamWidget
   | TestingFabCustomComponentWidget
 
 interface TestingFabWidgetBase {
+  type: 'select-query-param' | 'toggle-query-param' | 'custom-component'
   id: string
   label: string
 }
 
-export interface TestingFabActionWidget extends TestingFabWidgetBase {
-  type: 'action'
-  buttonLabel?: string
-  action: () => void
-}
-
 export interface TestingFabSelectQueryParamWidget extends TestingFabWidgetBase {
   type: 'select-query-param'
   queryParam: string
@@ -24,6 +19,12 @@ export interface TestingFabSelectQueryParamWidget extends TestingFabWidgetBase {
   skipEmptyOption?: boolean
 }
 
+export interface TestingFabToggleQueryParamWidget extends TestingFabWidgetBase {
+  type: 'toggle-query-param'
+  queryParam: string
+  hardReload?: boolean
+}
+
 export interface TestingFabSelectOption {
   value: string
   label: string

libs/components/src/lib/testing-fab/testing-fab.component.html

@@ -15,16 +15,10 @@
   @for (widget of widgets; track widget.id) {
     @let widgetId = 'sc-testing-fab-' + widget.id;
     <div class="sc-testing-fab__widget">
-      <label [attr.for]="widgetId" class="sc-testing-fab__widget-label">{{ widget.label }}</label>
-
+      @let currentValue = qpWidgetValues()[widget.id];
       @switch (widget.type) {
-        @case ('action') {
-          <button type="button" [id]="widgetId" class="sc-testing-fab__action" (click)="widget.action()">
-            {{ widget.buttonLabel ?? widget.label }}
-          </button>
-        }
         @case ('select-query-param') {
-          @let currentValue = qpWidgetValues()[widget.id];
+          <label [attr.for]="widgetId" class="sc-testing-fab__widget-label">{{ widget.label }}</label>
           <select
             [id]="widgetId"
             class="sc-testing-fab__select"
@@ -39,7 +33,21 @@
             }
           </select>
         }
+        @case ('toggle-query-param') {
+          <span class="sc-testing-fab__widget-label">{{ widget.label }}</span>
+
+          <label [attr.for]="widgetId" class="sc-testing-fab__checkbox">
+            <input
+              type="checkbox"
+              [id]="widgetId"
+              [checked]="currentValue"
+              (change)="setToggleQueryParam(widget, $event)"
+            />
+            <span [innerText]="currentValue ? 'Enabled' : 'Disabled'"></span>
+          </label>
+        }
         @case ('custom-component') {
+          <span class="sc-testing-fab__widget-label">{{ widget.label }}</span>
           <ng-container [ngComponentOutlet]="widget.component" />
         }
       }

libs/components/src/lib/testing-fab/testing-fab.component.scss

@@ -120,6 +120,19 @@ $defaultFabShadowHover: 0 0 32px rgb(0 0 0 / 40%);
 .sc-testing-fab__widget-label {
   font-weight: 600;
   font-size: 12px;
+  line-height: 1.5;
+}
+.sc-testing-fab__checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #9ca3af;
+  border-radius: 3px;
+  padding: 6px 8px;
+  & > span {
+    flex: 1 1 auto;
+    user-select: none;
+  }
 }
 
 .sc-testing-fab__select,

libs/components/src/lib/testing-fab/testing-fab.component.spec.ts

@@ -117,6 +117,77 @@ describe('TestingFabComponent', () => {
     })
   })
 
+  test.each([
+    ['true', true],
+    ['1', true],
+    ['', true],
+    ['false', false],
+  ])('renders toggle widget from URL query parameter (%s)', (toggleValue, expectedChecked) => {
+    const widgets: readonly TestingFabWidget[] = [
+      {
+        id: 'feature-flag',
+        label: 'Feature Flag',
+        type: 'toggle-query-param',
+        queryParam: 'feature',
+      },
+    ]
+
+    const encodedValue = encodeURIComponent(toggleValue)
+    const { fixture, routerEvents } = setup(widgets, `/?feature=${encodedValue}`)
+    routerEvents.next(new NavigationEnd(1, `/?feature=${encodedValue}`, `/?feature=${encodedValue}`))
+    fixture.detectChanges()
+
+    const checkbox = queryRequired<HTMLInputElement>(fixture, 'input[type="checkbox"]')
+    expect(checkbox.checked).toBe(expectedChecked)
+  })
+
+  test('updates query parameters when toggle widget value changes', () => {
+    const widgets: readonly TestingFabWidget[] = [
+      {
+        id: 'feature-flag',
+        label: 'Feature Flag',
+        type: 'toggle-query-param',
+        queryParam: 'feature',
+      },
+    ]
+
+    const { fixture, routerMock } = setup(widgets, '/?feature=true')
+    const checkbox = queryRequired<HTMLInputElement>(fixture, 'input[type="checkbox"]')
+
+    checkbox.checked = false
+    checkbox.dispatchEvent(new Event('change'))
+    expect(routerMock.navigate).toHaveBeenCalledWith([], {
+      queryParams: { feature: null },
+      queryParamsHandling: 'merge',
+    })
+
+    checkbox.checked = true
+    checkbox.dispatchEvent(new Event('change'))
+    expect(routerMock.navigate).toHaveBeenNthCalledWith(2, [], {
+      queryParams: { feature: 'true' },
+      queryParamsHandling: 'merge',
+    })
+  })
+
+  test('forces hard reload when configured on toggle widget', () => {
+    const widgets: readonly TestingFabWidget[] = [
+      {
+        id: 'feature-flag',
+        label: 'Feature Flag',
+        type: 'toggle-query-param',
+        queryParam: 'feature',
+        hardReload: true,
+      },
+    ]
+
+    const { fixture, routerMock } = setup(widgets, '/?feature=true')
+    const checkbox = queryRequired<HTMLInputElement>(fixture, 'input[type="checkbox"]')
+    checkbox.checked = false
+    expect(() => checkbox.dispatchEvent(new Event('change'))).not.toThrow()
+
+    expect(routerMock.navigate).not.toHaveBeenCalled()
+  })
+
   test('forces hard reload when configured on select widget', () => {
     const widgets: readonly TestingFabWidget[] = [
       {
@@ -155,24 +226,6 @@ describe('TestingFabComponent', () => {
     expect(customWidget).not.toBeNull()
   })
 
-  test('runs action widgets when clicked', () => {
-    const action = vi.fn()
-    const widgets: readonly TestingFabWidget[] = [
-      {
-        id: 'toggle-i18n',
-        label: 'Show i18n Keys',
-        type: 'action',
-        action,
-      },
-    ]
-
-    const { fixture } = setup(widgets)
-    const button = queryRequired<HTMLButtonElement>(fixture, '.sc-testing-fab__action')
-    button.click()
-
-    expect(action).toHaveBeenCalledTimes(1)
-  })
-
   test('loads saved FAB position from local storage', () => {
     const { fixture } = setup([], '/', 'top-left')
     const host = fixture.nativeElement as HTMLElement

libs/components/src/lib/testing-fab/testing-fab.component.ts

@@ -3,10 +3,11 @@ import { ChangeDetectionStrategy, Component, computed, effect, inject, signal }
 import { toSignal } from '@angular/core/rxjs-interop'
 import { NavigationEnd, Router } from '@angular/router'
 import { filterIfInstanceOf, LocalStorage, ORIGIN } from '@shiftcode/ngx-core'
+import { isDefined } from '@shiftcode/utilities'
 import { map, startWith } from 'rxjs'
 
 import { TESTING_FAB_WIDGETS } from './testing-fab-config.token'
-import { TestingFabSelectQueryParamWidget } from './testing-fab-widget.type'
+import { TestingFabSelectQueryParamWidget, TestingFabToggleQueryParamWidget } from './testing-fab-widget.type'
 
 const FAB_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
 type TestingFabPosition = (typeof FAB_POSITIONS)[number]
@@ -23,6 +24,10 @@ function parsePosition(value: unknown): TestingFabPosition | null {
   return null
 }
 
+function isToggleQueryParamValueTruthy(value: string): boolean {
+  return value === 'true' || value === '1' || value === ''
+}
+
 @Component({
   selector: 'sc-testing-fab',
   standalone: true,
@@ -59,13 +64,23 @@ export class TestingFabComponent {
     { initialValue: new URLSearchParams() },
   )
 
-  protected readonly qpWidgetValues = computed((): Record<string, string> => {
+  protected readonly qpWidgetValues = computed((): Record<string, string | boolean> => {
     const qp = this.queryParams()
-    return Object.fromEntries(
-      this.widgets
-        .filter((w) => w.type === 'select-query-param')
-        .map((w) => [w.id, qp.get(w.queryParam) ?? ''] as const),
-    )
+    const valueEntries = this.widgets
+      .map((w): readonly [string, string | boolean] | null => {
+        switch (w.type) {
+          case 'select-query-param':
+            return [w.id, qp.get(w.queryParam) ?? '']
+          case 'toggle-query-param':
+            return [w.id, qp.has(w.queryParam) ? isToggleQueryParamValueTruthy(qp.get(w.queryParam) ?? '') : false]
+          case 'custom-component':
+            return null
+          default:
+            return w
+        }
+      })
+      .filter(isDefined)
+    return Object.fromEntries(valueEntries)
   })
 
   constructor() {
@@ -157,6 +172,29 @@ export class TestingFabComponent {
     })
   }
 
+  protected setToggleQueryParam(widget: TestingFabToggleQueryParamWidget, event: Event): void {
+    const nextEnabled = (event.target as HTMLInputElement).checked
+    const nextValue = nextEnabled ? 'true' : null
+
+    if (widget.hardReload) {
+      const url = new URL(window.location.href)
+      if (nextValue) {
+        url.searchParams.set(widget.queryParam, nextValue)
+      } else {
+        url.searchParams.delete(widget.queryParam)
+      }
+      window.location.assign(url.toString())
+      return
+    }
+
+    void this.router.navigate([], {
+      queryParams: {
+        [widget.queryParam]: nextValue,
+      },
+      queryParamsHandling: 'merge',
+    })
+  }
+
   private positionFromCoordinates(x: number, y: number): TestingFabPosition {
     const vertical = y <= window.innerHeight / 2 ? 'top' : 'bottom'
     const horizontal = x <= window.innerWidth / 2 ? 'left' : 'right'