From e9ae2e55a111270db2e831b351687f1613ad7900 Mon Sep 17 00:00:00 2001 From: Damien Retzinger Date: Wed, 3 Jun 2026 13:25:49 -0400 Subject: [PATCH 01/13] test(daffio): allow tests to work in zoneless (#4442) --- .../header-item/header-item.directive.spec.ts | 11 +++--- .../doc-viewer/doc-viewer.component.spec.ts | 35 ++++++++++--------- .../package-cards.component.spec.ts | 15 +++----- 3 files changed, 29 insertions(+), 32 deletions(-) diff --git a/apps/daffio/src/app/core/header/components/header-item/header-item.directive.spec.ts b/apps/daffio/src/app/core/header/components/header-item/header-item.directive.spec.ts index ca1ba7f894..822ac73576 100644 --- a/apps/daffio/src/app/core/header/components/header-item/header-item.directive.spec.ts +++ b/apps/daffio/src/app/core/header/components/header-item/header-item.directive.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -12,11 +13,11 @@ import { By } from '@angular/platform-browser'; import { DaffioHeaderItemDirective } from './header-item.directive'; @Component({ - template: `Header Item`, + template: `Header Item`, standalone: false, }) class WrapperComponent { - active: boolean; + active = signal(false); } describe('DaffioHeaderItemDirective', () => { @@ -41,7 +42,7 @@ describe('DaffioHeaderItemDirective', () => { fixture = TestBed.createComponent(WrapperComponent); wrapper = fixture.componentInstance; de = fixture.debugElement.query(By.css('[daffioHeaderItem]')); - component = de.componentInstance; + component = de.injector.get(DaffioHeaderItemDirective); fixture.detectChanges(); }); @@ -56,11 +57,11 @@ describe('DaffioHeaderItemDirective', () => { }); it('should be able to take `active` as an input', () => { - expect(component.active).toEqual(wrapper.active); + expect(component.active).toEqual(wrapper.active()); }); it('should add a class of "active" to the host element when active is true', () => { - wrapper.active = true; + wrapper.active.set(true); fixture.detectChanges(); expect(de.classes['active']).toBeTrue(); diff --git a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.spec.ts b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.spec.ts index 636d1e093f..798655efd7 100644 --- a/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.spec.ts +++ b/apps/daffio/src/app/docs/components/doc-viewer/doc-viewer.component.spec.ts @@ -1,4 +1,7 @@ -import { Component } from '@angular/core'; +import { + Component, + signal, +} from '@angular/core'; import { ComponentFixture, TestBed, @@ -20,18 +23,18 @@ import { DaffioDocsTableOfContentsComponent } from '../table-of-contents/table-o @Component({ template: ``, imports: [ DaffioDocViewerComponent, ], }) class WrapperComponent { - tocValue: DaffDocTableOfContents; - breadcrumbsValue: Array; - sourcePathValue: string; + tocValue = signal([]); + breadcrumbsValue = signal>([]); + sourcePathValue = signal(''); } describe('DaffioDocViewerComponent', () => { @@ -58,13 +61,13 @@ describe('DaffioDocViewerComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(WrapperComponent); wrapper = fixture.componentInstance; - wrapper.tocValue = [{ + wrapper.tocValue.set([{ content: 'content', lvl: 1, slug: 'slug', - }]; - wrapper.breadcrumbsValue = []; - wrapper.sourcePathValue = 'sourcePath'; + }]); + wrapper.breadcrumbsValue.set([]); + wrapper.sourcePathValue.set('sourcePath'); fixture.detectChanges(); component = fixture.debugElement.query(By.directive(DaffioDocViewerComponent)).componentInstance; @@ -75,24 +78,24 @@ describe('DaffioDocViewerComponent', () => { }); it('should take toc as an input', () => { - expect(component.toc).toEqual(wrapper.tocValue); + expect(component.toc).toEqual(wrapper.tocValue()); }); it('should take breadcrumbs as an input', () => { - expect(component.breadcrumbs).toEqual(wrapper.breadcrumbsValue); + expect(component.breadcrumbs).toEqual(wrapper.breadcrumbsValue()); }); it('should take sourcePath as an input', () => { - expect(component.sourcePath()).toEqual(wrapper.sourcePathValue); + expect(component.sourcePath()).toEqual(wrapper.sourcePathValue()); }); it('should render the edit link when sourcePath is defined', () => { const el: HTMLAnchorElement = fixture.debugElement.query(By.css('.daffio-doc-viewer__edit-button')).nativeElement; - expect(el.href).toContain(wrapper.sourcePathValue); + expect(el.href).toContain(wrapper.sourcePathValue()); }); it('should not render the edit link when sourcePath is undefined', () => { - wrapper.sourcePathValue = ''; + wrapper.sourcePathValue.set(''); fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.daffio-doc-viewer__edit-button'))).toBeFalsy(); }); diff --git a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts b/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts index 6586ccd888..c4a32c1cb3 100644 --- a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts +++ b/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts @@ -1,17 +1,12 @@ - -import { - provideHttpClient, - withInterceptorsFromDi, -} from '@angular/common/http'; -import { provideHttpClientTesting } from '@angular/common/http/testing'; import { waitForAsync, ComponentFixture, TestBed, } from '@angular/core/testing'; -import { ActivatedRoute } from '@angular/router'; import { BehaviorSubject } from 'rxjs'; +import { DaffRouterDataService } from '@daffodil/router'; + import { DaffioDocsPackageCardsContainer } from './package-cards.component'; import { DaffioRoute } from '../../../../core/router/route.type'; @@ -29,11 +24,9 @@ describe('DaffioDocsPackageCardsContainer', () => { ], providers: [ { - provide: ActivatedRoute, - useValue: jasmine.createSpyObj('ActivatedRoute', [], { data: dataSpy }), + provide: DaffRouterDataService, + useValue: jasmine.createSpyObj('DaffRouterDataService', [], { data$: dataSpy }), }, - provideHttpClient(withInterceptorsFromDi()), - provideHttpClientTesting(), ], }) .compileComponents(); From 93e95dc813eb53d03455877cde93fe3fcfefaafc Mon Sep 17 00:00:00 2001 From: Damien Retzinger Date: Wed, 3 Jun 2026 13:30:31 -0400 Subject: [PATCH 02/13] feat(demo): use zone change detection (#4442) Co-authored-by: Peter Ashwood --- apps/demo/src/app/app.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/demo/src/app/app.config.ts b/apps/demo/src/app/app.config.ts index bf8d553fef..09664c878f 100644 --- a/apps/demo/src/app/app.config.ts +++ b/apps/demo/src/app/app.config.ts @@ -6,6 +6,7 @@ import { APP_ID, ApplicationConfig, importProvidersFrom, + provideZoneChangeDetection, } from '@angular/core'; import { provideAnimations } from '@angular/platform-browser/animations'; import { @@ -32,6 +33,7 @@ import { provideDemoDrivers } from './drivers/driver.providers'; export const appConfig: ApplicationConfig = { providers: [ + provideZoneChangeDetection(), provideAnimations(), importProvidersFrom( StoreModule.forRoot({}), From 94a5ee9f35cdcdc876861f3ee1e3b764209dcd2e Mon Sep 17 00:00:00 2001 From: Damien Retzinger Date: Wed, 3 Jun 2026 13:39:32 -0400 Subject: [PATCH 03/13] test(docs): allow testing without zone (#4442) --- libs/docs/src/color-palettes/color-palettes.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/docs/src/color-palettes/color-palettes.component.spec.ts b/libs/docs/src/color-palettes/color-palettes.component.spec.ts index 9efba5ede2..76f42fc61a 100644 --- a/libs/docs/src/color-palettes/color-palettes.component.spec.ts +++ b/libs/docs/src/color-palettes/color-palettes.component.spec.ts @@ -78,7 +78,7 @@ describe('@daffodil/docs-components | DaffDocsColorPalettesComponent', () => { }); it('should not throw an error when items is undefined', () => { - wrapper.itemsValue = undefined; - expect(() => fixture.detectChanges()).not.toThrow(); + const f = TestBed.createComponent(DaffDocsColorPalettesComponent); + expect(() => f.detectChanges()).not.toThrow(); }); }); From 306002cea7ee00a902fb12edd49908831bfe8711 Mon Sep 17 00:00:00 2001 From: Damien Retzinger Date: Wed, 3 Jun 2026 13:40:19 -0400 Subject: [PATCH 04/13] feat(design): relabel formerly private properties to @docs-private so that angular host can access them (#4442) Co-authored-by: Peter Ashwood --- libs/design/input/src/input.component.ts | 5 ++++- libs/design/list/src/list-item/list-item.component.ts | 5 ++++- .../src/menu-activator/menu-activator.component.ts | 4 ++-- .../modal/src/modal-title/modal-title.directive.ts | 5 ++++- libs/design/modal/src/modal/modal.component.ts | 5 ++++- .../src/native-select/native-select.component.ts | 4 +++- .../src/sidebar-viewport/sidebar-viewport.component.ts | 10 ++++++++-- libs/design/tag/src/tag/tag.component.ts | 7 +++++-- libs/design/tree/src/tree-item/tree-item.directive.ts | 2 ++ 9 files changed, 36 insertions(+), 11 deletions(-) diff --git a/libs/design/input/src/input.component.ts b/libs/design/input/src/input.component.ts index 3b54e748a0..b519665fd7 100644 --- a/libs/design/input/src/input.component.ts +++ b/libs/design/input/src/input.component.ts @@ -59,7 +59,10 @@ export class DaffInputComponent extends DaffFormFieldControl implements */ focused = false; - private get _id() { + /** + * @docs-private + */ + get _id() { return this.formField?.id; }; diff --git a/libs/design/list/src/list-item/list-item.component.ts b/libs/design/list/src/list-item/list-item.component.ts index 869dcaeb0d..a2103b9f27 100644 --- a/libs/design/list/src/list-item/list-item.component.ts +++ b/libs/design/list/src/list-item/list-item.component.ts @@ -42,7 +42,10 @@ export class DaffListItemComponent { constructor(private elementRef: ElementRef) {} - private get _isAnchor() { + /** + * @docs-private + */ + get _isAnchor() { return this.elementRef.nativeElement.nodeName.toLowerCase() === 'a'; } } diff --git a/libs/design/menu/src/menu-activator/menu-activator.component.ts b/libs/design/menu/src/menu-activator/menu-activator.component.ts index 33b5b77e0d..f3a1e99abf 100644 --- a/libs/design/menu/src/menu-activator/menu-activator.component.ts +++ b/libs/design/menu/src/menu-activator/menu-activator.component.ts @@ -41,8 +41,8 @@ import { DaffMenuService } from '../services/menu.service'; export class DaffMenuActivatorDirective implements OnDestroy { private _destroyed$ = new Subject(); - private _open: boolean; private _defaultMenuId = daffNextMenuId(); + protected _open: boolean; readonly isOpen = signal(false); /** @@ -59,7 +59,7 @@ export class DaffMenuActivatorDirective implements OnDestroy { /** * The resolved menu ID. */ - private menuId = computed(() => { + protected menuId = computed(() => { const id = this.id(); return id ? `${id}-menu` : this._defaultMenuId; }); diff --git a/libs/design/modal/src/modal-title/modal-title.directive.ts b/libs/design/modal/src/modal-title/modal-title.directive.ts index d25edc64a1..87d9a2452b 100644 --- a/libs/design/modal/src/modal-title/modal-title.directive.ts +++ b/libs/design/modal/src/modal-title/modal-title.directive.ts @@ -19,7 +19,10 @@ let modalTitleId = 0; }) export class DaffModalTitleDirective { - private _id = ''; + /** + * @docs-private + */ + _id = ''; constructor(@Optional() private modal: DaffModalComponent) { modalTitleId++; diff --git a/libs/design/modal/src/modal/modal.component.ts b/libs/design/modal/src/modal/modal.component.ts index 39c24366f7..cfd005f345 100644 --- a/libs/design/modal/src/modal/modal.component.ts +++ b/libs/design/modal/src/modal/modal.component.ts @@ -58,7 +58,10 @@ import { DaffModalService } from '../service/modal.service'; ], }) export class DaffModalComponent implements AfterContentInit, AfterViewInit, OnDestroy, DaffOpenable { - private closing = signal(false); + /** + * @docs-private + */ + readonly closing = signal(false); private _ariaLabelledBy = null; diff --git a/libs/design/native-select/src/native-select/native-select.component.ts b/libs/design/native-select/src/native-select/native-select.component.ts index 49d3da4047..1efd8f8702 100644 --- a/libs/design/native-select/src/native-select/native-select.component.ts +++ b/libs/design/native-select/src/native-select/native-select.component.ts @@ -64,9 +64,11 @@ export class DaffNativeSelectComponent extends DaffFormFieldControl impl focused = false; /** + * @docs-private + * * Implemented as part of DaffFormFieldControl. */ - private get _id() { + get _id() { return this.formField?.id; }; diff --git a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts index 06843c7659..a9edafaa8c 100644 --- a/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts +++ b/libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.ts @@ -131,9 +131,15 @@ export class DaffSidebarViewportComponent implements AfterContentChecked, OnDest */ private _shift = '0px'; - private _isPaddedLeft = false; + /** + * @docs-private + */ + _isPaddedLeft = false; - private _isPaddedRight = false; + /** + * @docs-private + */ + _isPaddedRight = false; /** * @docs-private diff --git a/libs/design/tag/src/tag/tag.component.ts b/libs/design/tag/src/tag/tag.component.ts index ce4011fa8d..2cba993ea7 100644 --- a/libs/design/tag/src/tag/tag.component.ts +++ b/libs/design/tag/src/tag/tag.component.ts @@ -56,7 +56,7 @@ import { DaffTagSizableDirective } from './tag-sizable.directive'; host: { class: 'daff-tag', '[attr.aria-disabled]': 'disabled ? true : null', - '[disabled]': 'disabled', + '[attr.disabled]': 'disabled', '[class.dismissible]': 'dismissible', }, imports: [ @@ -75,7 +75,10 @@ export class DaffTagComponent { */ @ContentChild(DaffPrefixDirective, { static: true }) _prefix: DaffPrefixDirective; - private _disabled = false; + /** + * @docs-private + */ + _disabled = false; /** * The disabled state of the tag. diff --git a/libs/design/tree/src/tree-item/tree-item.directive.ts b/libs/design/tree/src/tree-item/tree-item.directive.ts index 17952dee9d..3d296acf8e 100644 --- a/libs/design/tree/src/tree-item/tree-item.directive.ts +++ b/libs/design/tree/src/tree-item/tree-item.directive.ts @@ -89,6 +89,8 @@ export class DaffTreeItemDirective { /** * Accessibility property, notifying users about whether * or not the tree item is open. + * + * @docs-private */ protected readonly ariaExpanded = computed(() => { const node = this.node(); From 3abd4f38c4eaa400aa92680abbc413b29c7ffba3 Mon Sep 17 00:00:00 2001 From: Damien Retzinger Date: Wed, 3 Jun 2026 15:44:05 -0400 Subject: [PATCH 05/13] test(design): use signals in wrapper components (#4442) Convert the WrapperComponent's fields to signals so template bindings update without relying on zone-based change detection --- .../accordion-item.component.spec.ts | 19 ++-- .../breadcrumb-item.component.spec.ts | 1 + .../breadcrumb/breadcrumb.component.spec.ts | 7 +- .../src/button/basic/button.component.spec.ts | 11 +-- .../src/button/button-base.directive.spec.ts | 22 ++--- .../button/stroked/stroked.component.spec.ts | 11 +-- .../src/callout/callout.component.spec.ts | 15 ++-- .../card/src/card-base.directive.spec.ts | 15 ++-- .../src/container/container.component.spec.ts | 7 +- .../design/form-field/src/specs/usage.spec.ts | 15 ++-- .../hero/src/hero/hero.component.spec.ts | 15 ++-- .../image/src/image/image.component.spec.ts | 43 ++++----- libs/design/input/src/specs/disabled.spec.ts | 11 +-- libs/design/input/src/specs/required.spec.ts | 13 +-- .../input/src/specs/with-form-field.spec.ts | 7 +- .../loading-icon.component.spec.ts | 7 +- .../media-gallery.component.spec.ts | 17 ++-- .../modal-header.component.spec.ts | 7 +- .../modal/src/specs/focus-management.spec.ts | 2 + .../src/native-select/specs/disabled.spec.ts | 11 +-- .../src/native-select/specs/required.spec.ts | 13 +-- .../specs/with-form-field.spec.ts | 7 +- .../src/navbar/navbar.component.spec.ts | 11 +-- .../notification.component.spec.ts | 25 +++--- .../src/paginator/paginator.component.spec.ts | 87 ++++++++++--------- .../progress-bar/src/specs/usage.spec.ts | 27 +++--- .../src/quantity-field.component.spec.ts | 23 ++--- .../src/select/select.component.spec.ts | 1 + .../sidebar-header.component.spec.ts | 9 +- ...idebar-viewport-backdrop.component.spec.ts | 17 ++-- .../sidebar-viewport.component.spec.ts | 9 +- .../specs/multiple-sidebars.spec.ts | 8 +- .../utils/content-pad.spec.ts | 8 +- .../utils/content-shift.spec.ts | 8 +- .../src/sidebar/sidebar.component.spec.ts | 13 +-- libs/design/spinner/src/specs/usage.spec.ts | 7 +- .../spinner/src/spinner.component.spec.ts | 11 +-- .../colorable/colorable.directive.spec.ts | 25 +++--- .../compactable/compactable.directive.spec.ts | 11 +-- .../disableable/disableable.directive.spec.ts | 9 +- .../core/loadable/loadable.directive.spec.ts | 11 +-- .../core/openable/openable.directive.spec.ts | 7 +- .../orientable/orientable.directive.spec.ts | 11 +-- ...oving-tab-index-boundary.directive.spec.ts | 8 +- .../roving-tab-index.directive.spec.ts | 20 ++--- .../selectable/selectable.directive.spec.ts | 9 +- .../core/sizable/sizable.directive.spec.ts | 17 ++-- .../skeletonable.directive.spec.ts | 9 +- .../statusable/specs/usage.directive.spec.ts | 15 ++-- .../specs/usage.directive.spec.ts | 13 +-- .../switch/src/switch/specs/usage.spec.ts | 27 +++--- .../tab-activator.component.spec.ts | 19 ++-- .../tabs/src/tabs/tabs.component.spec.ts | 25 +++--- libs/design/tag/src/tag/tag.component.spec.ts | 53 +++++------ .../textarea/src/specs/disabled.spec.ts | 11 +-- .../textarea/src/specs/required.spec.ts | 13 +-- .../src/specs/with-form-field.spec.ts | 7 +- .../toast/src/toast/toast.component.spec.ts | 15 ++-- .../src/youtube-player.component.spec.ts | 19 ++-- 59 files changed, 481 insertions(+), 413 deletions(-) diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts index cfa24c8d4d..dd8497d9e5 100644 --- a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts +++ b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -43,7 +44,7 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent | Defaults', ( @Component({ template: ` - +

Size and Fit

no content
 @@ -53,9 +54,9 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent | Defaults', ( ], }) class WrapperComponent { - initiallyExpandedValue: boolean; + initiallyExpandedValue = signal(undefined); toggledFunction(val: boolean) {}; - disabled: boolean; + disabled = signal(undefined); } describe('@daffodil/design/accordion | DaffAccordionItemComponent | Usage', () => { @@ -88,13 +89,13 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent | Usage', () = }); it('should be able to accept an initiallyExpanded input', () => { - wrapper.initiallyExpandedValue = false; + wrapper.initiallyExpandedValue.set(false); fixture.detectChanges(); expect(daffAccordionItem.initiallyExpanded).toEqual(false); - wrapper.initiallyExpandedValue = true; + wrapper.initiallyExpandedValue.set(true); fixture.detectChanges(); @@ -118,21 +119,21 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent | Usage', () = }); it('should set open to true if initiallyExpanded is true', () => { - wrapper.initiallyExpandedValue = true; + wrapper.initiallyExpandedValue.set(true); fixture.detectChanges(); expect(daffAccordionItem.open).toBeTrue(); }); it('should set open to false if initiallyExpanded is false', () => { - wrapper.initiallyExpandedValue = false; + wrapper.initiallyExpandedValue.set(false); fixture.detectChanges(); expect(daffAccordionItem.open).toBeFalse(); }); it('should set open to false if initiallyExpanded is undefined', () => { - wrapper.initiallyExpandedValue = undefined; + wrapper.initiallyExpandedValue.set(undefined); fixture.detectChanges(); expect(daffAccordionItem.open).toBeFalse(); @@ -161,7 +162,7 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent | Usage', () = describe('when disabled is set to true on the accordion item', () => { beforeEach(() => { - wrapper.disabled = true; + wrapper.disabled.set(true); fixture.detectChanges(); }); diff --git a/libs/design/breadcrumb/src/breadcrumb-item/breadcrumb-item.component.spec.ts b/libs/design/breadcrumb/src/breadcrumb-item/breadcrumb-item.component.spec.ts index d2830c35a0..848f5de80b 100644 --- a/libs/design/breadcrumb/src/breadcrumb-item/breadcrumb-item.component.spec.ts +++ b/libs/design/breadcrumb/src/breadcrumb-item/breadcrumb-item.component.spec.ts @@ -54,6 +54,7 @@ describe('@daffodil/design/breadcrumb | DaffBreadcrumbItemComponent', () => { it('should set aria-current="page" when active', () => { component.setActive(true); + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(de.nativeElement.getAttribute('aria-current')).toBe('page'); diff --git a/libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts b/libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts index 819d71c9d9..5793041aff 100644 --- a/libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts +++ b/libs/design/breadcrumb/src/breadcrumb/breadcrumb.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -16,7 +17,7 @@ import { @Component({ template: ` -
    +
    1. Home
    2. Category
    3. Subcategory
      4. @@ -29,7 +30,7 @@ import { ], }) class WrapperComponent { - skeleton: boolean; + skeleton = signal(undefined); } @Component({ @@ -87,7 +88,7 @@ describe('@daffodil/design/breadcrumb | DaffBreadcrumbComponent', () => { }); it('should take skeleton as an input', () => { - wrapper.skeleton = true; + wrapper.skeleton.set(true); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-skeleton')).toEqual(true); diff --git a/libs/design/button/src/button/basic/button.component.spec.ts b/libs/design/button/src/button/basic/button.component.spec.ts index b7e2c06ce4..46f711fde6 100644 --- a/libs/design/button/src/button/basic/button.component.spec.ts +++ b/libs/design/button/src/button/basic/button.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -13,8 +14,8 @@ import { DaffButtonComponent } from './button.component'; @Component({ template: ` - Link Button - + Link Button + `, imports: [ DaffButtonComponent, @@ -22,7 +23,7 @@ import { DaffButtonComponent } from './button.component'; }) class WrapperComponent { - elevated = false; + elevated = signal(false); } describe('@daffodil/design/button | DaffButtonComponent', () => { @@ -72,11 +73,11 @@ describe('@daffodil/design/button | DaffButtonComponent', () => { describe('the elevated property', () => { it('should be able to take `elevated` as an input', () => { - expect(component.elevated).toEqual(wrapper.elevated); + expect(component.elevated).toEqual(wrapper.elevated()); }); it('should add a class of `.elevated` to the host element if elevated is true', () => { - wrapper.elevated = true; + wrapper.elevated.set(true); fixture.detectChanges(); expect(de.classes).toEqual(jasmine.objectContaining({ diff --git a/libs/design/button/src/button/button-base.directive.spec.ts b/libs/design/button/src/button/button-base.directive.spec.ts index 3840b6594e..3231844320 100644 --- a/libs/design/button/src/button/button-base.directive.spec.ts +++ b/libs/design/button/src/button/button-base.directive.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -19,17 +20,18 @@ import { DaffButtonSize } from './button-sizable.directive'; @Component({ template: ` -
      `, +
      `, imports: [ DaffButtonBaseDirective, ], }) class WrapperComponent { - color: DaffPalette; - size: DaffButtonSize; - status: DaffStatus; + color = signal(undefined); + size = signal(undefined); + status = signal(undefined); tabindex = 0; + disabled = signal(undefined); } describe('@daffodil/design/button | DaffButtonBaseDirective', () => { @@ -63,11 +65,11 @@ describe('@daffodil/design/button | DaffButtonBaseDirective', () => { describe('using the color property of a button', () => { it('should not set a default color', () => { - expect(de.componentInstance.color).toBeFalsy(); + expect(de.componentInstance.color()).toBeFalsy(); }); it('should add the class of the defined color to the host element', () => { - wrapper.color = 'primary'; + wrapper.color.set('primary'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true); @@ -76,7 +78,7 @@ describe('@daffodil/design/button | DaffButtonBaseDirective', () => { describe('using the size property of a button', () => { it('should take size as an input', () => { - wrapper.size = 'md'; + wrapper.size.set('md'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-md')).toEqual(true); @@ -88,14 +90,14 @@ describe('@daffodil/design/button | DaffButtonBaseDirective', () => { }); it('should take status as an input', () => { - wrapper.status = 'warn'; + wrapper.status.set('warn'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-warn')).toEqual(true); }); it('should not set a default status', () => { - expect(de.componentInstance.status).toBeFalsy(); + expect(de.componentInstance.status()).toBeFalsy(); }); describe('using the tabindex property of a button', () => { @@ -106,7 +108,7 @@ describe('@daffodil/design/button | DaffButtonBaseDirective', () => { describe('when the button is disabled', () => { beforeEach(() => { - directive.disabled = true; + wrapper.disabled.set(true); fixture.detectChanges(); }); diff --git a/libs/design/button/src/button/stroked/stroked.component.spec.ts b/libs/design/button/src/button/stroked/stroked.component.spec.ts index 6c9a893c42..8885492b28 100644 --- a/libs/design/button/src/button/stroked/stroked.component.spec.ts +++ b/libs/design/button/src/button/stroked/stroked.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -13,8 +14,8 @@ import { DaffStrokedButtonComponent } from './stroked.component'; @Component({ template: ` - Stroked Link Button - + Stroked Link Button + `, imports: [ DaffStrokedButtonComponent, @@ -22,7 +23,7 @@ import { DaffStrokedButtonComponent } from './stroked.component'; }) class WrapperComponent { - elevated = false; + elevated = signal(false); } describe('@daffodil/design/button | DaffStrokedButtonComponent', () => { @@ -73,11 +74,11 @@ describe('@daffodil/design/button | DaffStrokedButtonComponent', () => { describe('the elevated property', () => { it('should be able to take `elevated` as an input', () => { - expect(component.elevated).toEqual(wrapper.elevated); + expect(component.elevated).toEqual(wrapper.elevated()); }); it('should add a class of `.elevated` to the host element if elevated is true', () => { - wrapper.elevated = true; + wrapper.elevated.set(true); fixture.detectChanges(); expect(de.classes).toEqual(jasmine.objectContaining({ diff --git a/libs/design/callout/src/callout/callout.component.spec.ts b/libs/design/callout/src/callout/callout.component.spec.ts index 996048ca46..c91042f391 100644 --- a/libs/design/callout/src/callout/callout.component.spec.ts +++ b/libs/design/callout/src/callout/callout.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -18,7 +19,7 @@ import { DaffCalloutComponent } from './callout.component'; @Component ({ template: ` - + `, imports: [ DaffCalloutComponent, @@ -26,9 +27,9 @@ import { DaffCalloutComponent } from './callout.component'; }) class WrapperComponent { - color: DaffPalette; - textAlignment: DaffTextAlignment; - compact: boolean; + color = signal(undefined); + textAlignment = signal(undefined); + compact = signal(undefined); } describe('@daffodil/design/callout | DaffCalloutComponent', () => { @@ -65,21 +66,21 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => { }); it('should take color as an input', () => { - wrapper.color = 'primary'; + wrapper.color.set('primary'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true); }); it('should take textAlignment as an input', () => { - wrapper.textAlignment = 'left'; + wrapper.textAlignment.set('left'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-left')).toEqual(true); }); it('should take compact as an input', () => { - wrapper.compact = true; + wrapper.compact.set(true); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-compact')).toEqual(true); diff --git a/libs/design/card/src/card-base.directive.spec.ts b/libs/design/card/src/card-base.directive.spec.ts index 45c5b0eae0..e2472cc10d 100644 --- a/libs/design/card/src/card-base.directive.spec.ts +++ b/libs/design/card/src/card-base.directive.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -15,16 +16,16 @@ import { DaffCardBaseDirective } from './card-base.directive'; @Component({ template: ` -
      `, +
      `, imports: [ DaffCardBaseDirective, ], }) class WrapperComponent { - color: DaffPalette; - orientation: string; - elevated: boolean; + color = signal(undefined); + orientation = signal(undefined); + elevated = signal(undefined); } describe('@daffodil/design/card | DaffCardBaseDirective', () => { @@ -56,7 +57,7 @@ describe('@daffodil/design/card | DaffCardBaseDirective', () => { describe('using the color property of a card', () => { it('should add the class of the defined color to the host element', () => { - wrapper.color = 'primary'; + wrapper.color.set('primary'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true); @@ -69,11 +70,11 @@ describe('@daffodil/design/card | DaffCardBaseDirective', () => { describe('elevated property', () => { it('should be able to take `elevated` as an input', () => { - expect(directive.elevated).toEqual(wrapper.elevated); + expect(directive.elevated).toEqual(wrapper.elevated()); }); it('should add a class of "elevated" to the host element when elevated is true', () => { - wrapper.elevated = true; + wrapper.elevated.set(true); fixture.detectChanges(); expect(de.classes['elevated']).toBeTrue(); diff --git a/libs/design/container/src/container/container.component.spec.ts b/libs/design/container/src/container/container.component.spec.ts index f1f0ba917d..7298429840 100644 --- a/libs/design/container/src/container/container.component.spec.ts +++ b/libs/design/container/src/container/container.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -14,13 +15,13 @@ import { DaffSizeAllType } from '@daffodil/design'; import { DaffContainerComponent } from './container.component'; @Component({ - template: ``, + template: ``, imports: [ DaffContainerComponent, ], }) class WrapperComponent { - size: DaffSizeAllType; + size = signal(undefined); } describe('@daffodil/design/container | DaffContainerComponent', () => { @@ -60,7 +61,7 @@ describe('@daffodil/design/container | DaffContainerComponent', () => { describe('setting the size', () => { it('should take size as an input', () => { - wrapper.size = 'md'; + wrapper.size.set('md'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-md')).toEqual(true); diff --git a/libs/design/form-field/src/specs/usage.spec.ts b/libs/design/form-field/src/specs/usage.spec.ts index 637e1786bd..54009d1328 100644 --- a/libs/design/form-field/src/specs/usage.spec.ts +++ b/libs/design/form-field/src/specs/usage.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -25,7 +26,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; import { DaffFormFieldApperanace } from '../form-field/form-field.component'; @Component({ template: ` - + @@ -38,8 +39,8 @@ imports: [ class WrapperComponent { formControl = new UntypedFormControl('', Validators.required); - id: string; - appearance: DaffFormFieldApperanace = 'fixed'; + id = signal(undefined); + appearance = signal('fixed'); } describe('@daffodil/design | DaffFormFieldComponent | Usage', () => { @@ -73,23 +74,23 @@ describe('@daffodil/design | DaffFormFieldComponent | Usage', () => { }); it('should allow a custom id to be set', () => { - expect(component.id).toEqual(wrapper.id); + expect(component.id).toEqual(wrapper.id()); }); describe('setting the appearance of a form field', () => { it('should take appearance as an input', () => { - expect(component.appearance).toEqual(wrapper.appearance); + expect(component.appearance).toEqual(wrapper.appearance()); }); it('should add a class of "fluid" to the host element when appearance="fluid"', () => { - wrapper.appearance = 'fluid'; + wrapper.appearance.set('fluid'); fixture.detectChanges(); expect(de.classes.fluid).toBeTrue(); }); it('should add a class of "fixed" to the host element when appearance="fixed"', () => { - wrapper.appearance = 'fixed'; + wrapper.appearance.set('fixed'); fixture.detectChanges(); expect(de.classes.fixed).toBeTrue(); diff --git a/libs/design/hero/src/hero/hero.component.spec.ts b/libs/design/hero/src/hero/hero.component.spec.ts index d47c78b7ba..05cfab7f78 100644 --- a/libs/design/hero/src/hero/hero.component.spec.ts +++ b/libs/design/hero/src/hero/hero.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -17,15 +18,15 @@ import { import { DaffHeroComponent } from './hero.component'; @Component({ - template: ``, + template: ``, imports: [ DaffHeroComponent, ], }) class WrapperComponent { - color: DaffPalette; - textAlignment: DaffTextAlignment; - compact: boolean; + color = signal(undefined); + textAlignment = signal(undefined); + compact = signal(undefined); } describe('@daffodil/design/hero | DaffHeroComponent', () => { @@ -62,21 +63,21 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => { }); it('should take color as an input', () => { - wrapper.color = 'primary'; + wrapper.color.set('primary'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true); }); it('should take textAlignment as an input', () => { - wrapper.textAlignment = 'left'; + wrapper.textAlignment.set('left'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-left')).toEqual(true); }); it('should take compact as an input', () => { - wrapper.compact = true; + wrapper.compact.set(true); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-compact')).toEqual(true); diff --git a/libs/design/image/src/image/image.component.spec.ts b/libs/design/image/src/image/image.component.spec.ts index 42b0928ced..3b852734df 100644 --- a/libs/design/image/src/image/image.component.spec.ts +++ b/libs/design/image/src/image/image.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -12,19 +13,19 @@ import { By } from '@angular/platform-browser'; import { DaffImageComponent } from './image.component'; @Component({ - template: ``, + template: ``, imports: [ DaffImageComponent, ], }) class WrapperComponent { - src = 'assets/image.svg'; - alt = 'image'; - width = 100; - height = 100; - skeleton = false; - priority = false; + src = signal('assets/image.svg'); + alt = signal('image'); + width = signal(100); + height = signal(100); + skeleton = signal(false); + priority = signal(false); } describe('@daffodil/design/image | DaffImageComponent', () => { @@ -56,70 +57,70 @@ describe('@daffodil/design/image | DaffImageComponent', () => { }); it('should be able to take `src` as an input', () => { - wrapper.src = '/assets/image.svg'; + wrapper.src.set('/assets/image.svg'); fixture.detectChanges(); expect(component.src).toEqual('/assets/image.svg'); }); it('should be able to take `alt` as an input', () => { - wrapper.alt = 'alt tag'; + wrapper.alt.set('alt tag'); fixture.detectChanges(); expect(component.alt).toEqual('alt tag'); }); it('should be able to take `width` as an input', () => { - wrapper.width = 100; + wrapper.width.set(100); fixture.detectChanges(); expect(component.width).toEqual(100); }); it('should be able to take `height` as an input', () => { - wrapper.height = 100; + wrapper.height.set(100); fixture.detectChanges(); expect(component.height).toEqual(100); }); it('should take skeleton as an input', () => { - wrapper.skeleton = true; + wrapper.skeleton.set(true); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-skeleton')).toEqual(true); }); it('should take priority as an input', () => { - wrapper.priority = true; + wrapper.priority.set(true); fixture.detectChanges(); expect(component.priority()).toEqual(true); }); it('should throw an error when src is invalid', () => { - wrapper.src = ''; + wrapper.src.set(''); expect(() => fixture.detectChanges()).toThrowError(/src/); }); it('should throw an error when alt is invalid', () => { - wrapper.alt = ''; + wrapper.alt.set(''); expect(() => fixture.detectChanges()).toThrowError(/alt/); }); it('should throw an error when width is invalid', () => { - wrapper.width = null; + wrapper.width.set(null); expect(() => fixture.detectChanges()).toThrowError(/width/); }); it('should throw an error when height is invalid', () => { - wrapper.height = undefined; + wrapper.height.set(undefined); expect(() => fixture.detectChanges()).toThrowError(/height/); }); it('should calculate and set `aspect-ratio` on `.daff-image` based on the width and height', () => { - wrapper.width = 300; - wrapper.height = 100; + wrapper.width.set(300); + wrapper.height.set(100); fixture.detectChanges(); @@ -127,10 +128,10 @@ describe('@daffodil/design/image | DaffImageComponent', () => { }); it('sets `max-width` on the host element based on the width', () => { - wrapper.width = 300; + wrapper.width.set(300); fixture.detectChanges(); - expect(de.styles['max-width']).toEqual(wrapper.width + 'px'); + expect(de.styles['max-width']).toEqual(wrapper.width() + 'px'); }); }); diff --git a/libs/design/input/src/specs/disabled.spec.ts b/libs/design/input/src/specs/disabled.spec.ts index d710f8bd65..925bf37d1e 100644 --- a/libs/design/input/src/specs/disabled.spec.ts +++ b/libs/design/input/src/specs/disabled.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -20,7 +21,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; template:` Label - + `, imports: [ @@ -29,7 +30,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; ], }) class WrapperComponent { - disabledValue: boolean | string; + disabledValue = signal(undefined); } describe('@daffodil/design/input | DaffInputComponent | Static Disabled Attribute', () => { @@ -62,7 +63,7 @@ describe('@daffodil/design/input | DaffInputComponent | Static Disabled Attribut describe('when the input is disabled', () => { beforeEach(() => { - wrapper.disabledValue = true; + wrapper.disabledValue.set(true); fixture.detectChanges(); }); @@ -73,7 +74,7 @@ describe('@daffodil/design/input | DaffInputComponent | Static Disabled Attribut describe('when the input is no longer disabled', () => { beforeEach(() => { - wrapper.disabledValue = false; + wrapper.disabledValue.set(false); fixture.detectChanges(); }); @@ -84,7 +85,7 @@ describe('@daffodil/design/input | DaffInputComponent | Static Disabled Attribut describe('when disabled is an empty string', () => { beforeEach(() => { - wrapper.disabledValue = ''; + wrapper.disabledValue.set(''); fixture.detectChanges(); }); diff --git a/libs/design/input/src/specs/required.spec.ts b/libs/design/input/src/specs/required.spec.ts index e80a8829ed..ee0e3627ad 100644 --- a/libs/design/input/src/specs/required.spec.ts +++ b/libs/design/input/src/specs/required.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -24,7 +25,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; template:` Label - + `, imports: [ @@ -33,7 +34,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; ], }) class WrapperComponent { - requiredValue: boolean | string; + requiredValue = signal(undefined); } describe('@daffodil/design | DaffInputComponent | Static Required Attribute', () => { @@ -68,7 +69,7 @@ describe('@daffodil/design | DaffInputComponent | Static Required Attribute', () describe('when the input is required', () => { beforeEach(() => { - wrapper.requiredValue = true; + wrapper.requiredValue.set(true); fixture.detectChanges(); }); @@ -79,7 +80,7 @@ describe('@daffodil/design | DaffInputComponent | Static Required Attribute', () describe('when the input is no longer required', () => { beforeEach(() => { - wrapper.requiredValue = false; + wrapper.requiredValue.set(false); fixture.detectChanges(); }); @@ -94,7 +95,7 @@ describe('@daffodil/design | DaffInputComponent | Static Required Attribute', () describe('when required is an empty string', () => { beforeEach(() => { - wrapper.requiredValue = ''; + wrapper.requiredValue.set(''); fixture.detectChanges(); }); @@ -162,6 +163,7 @@ describe('@daffodil/design | DaffInputComponent | Reactive Forms Required State' describe('when the form control is no longer required', () =>{ it('should set required to false', () => { wrapper.email.setValidators([]); + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(component.required).toEqual(false); @@ -169,6 +171,7 @@ describe('@daffodil/design | DaffInputComponent | Reactive Forms Required State' it('should set requiredAttribute to null', () => { wrapper.email.setValidators([]); + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(component.requiredAttribute).toEqual(null); diff --git a/libs/design/input/src/specs/with-form-field.spec.ts b/libs/design/input/src/specs/with-form-field.spec.ts index 0aeb0dbf0d..4d9e409ef4 100644 --- a/libs/design/input/src/specs/with-form-field.spec.ts +++ b/libs/design/input/src/specs/with-form-field.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -17,7 +18,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; @Component({ template:` - + `, @@ -27,7 +28,7 @@ import { DaffInputComponent } from '@daffodil/design/input'; ], }) class WrapperComponent { - id = 'test'; + id = signal('test'); } describe('@daffodil/design | DaffInputComponent | With Form Field', () => { @@ -90,7 +91,7 @@ describe('@daffodil/design | DaffInputComponent | With Form Field', () => { describe('when the form field id gets updated', () => { it('should update the input`s id', () => { - wrapper.id = 'test-2'; + wrapper.id.set('test-2'); fixture.detectChanges(); expect(formField.id).toEqual('test-2'); diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts index 8bb6bbdce7..97213ef786 100644 --- a/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts +++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -14,13 +15,13 @@ import { DaffPalette } from '@daffodil/design'; import { DaffLoadingIconComponent } from './loading-icon.component'; @Component({ - template: '', + template: '', imports: [ DaffLoadingIconComponent, ], }) class WrapperComponent { - color: DaffPalette; + color = signal(undefined); } describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => { @@ -57,7 +58,7 @@ describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => { }); it('should take color as an input', () => { - wrapper.color = 'primary'; + wrapper.color.set('primary'); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-primary')).toEqual(true); diff --git a/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts b/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts index 2f8ceb6d73..58797a66d3 100644 --- a/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts +++ b/libs/design/media-gallery/src/media-gallery/media-gallery.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { ComponentFixture, @@ -14,7 +15,7 @@ import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive'; @Component({ template: ` - +
      First
       @@ -29,9 +30,9 @@ import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive'; ], }) class WrapperComponent { - nameValue: string; - skeleton = false; - idValue: string; + nameValue = signal(undefined); + skeleton = signal(false); + idValue = signal(undefined); } describe('@daffodil/design/media-gallery | DaffMediaGalleryComponent', () => { @@ -54,7 +55,7 @@ describe('@daffodil/design/media-gallery | DaffMediaGalleryComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(WrapperComponent); wrapper = fixture.componentInstance; - wrapper.nameValue = stubName; + wrapper.nameValue.set(stubName); fixture.detectChanges(); de = fixture.debugElement.query(By.css('daff-media-gallery')); @@ -74,7 +75,7 @@ describe('@daffodil/design/media-gallery | DaffMediaGalleryComponent', () => { }); it('should take skeleton as an input', () => { - wrapper.skeleton = true; + wrapper.skeleton.set(true); fixture.detectChanges(); expect(de.nativeElement.classList.contains('daff-skeleton')).toEqual(true); @@ -113,13 +114,13 @@ describe('@daffodil/design/media-gallery | DaffMediaGalleryComponent', () => { }); it('should use the gallery id for thumbnail ids if the gallery has an input id', () => { - wrapper.idValue = 'test-gallery'; + wrapper.idValue.set('test-gallery'); fixture.detectChanges(); expect(thumbnailButtons[1].id).toContain('test-gallery'); }); it('should set an id on the gallery if an id is set', () => { - wrapper.idValue = 'test-gallery'; + wrapper.idValue.set('test-gallery'); fixture.detectChanges(); expect(de.nativeElement.id).toEqual('test-gallery'); }); diff --git a/libs/design/modal/src/modal-header/modal-header.component.spec.ts b/libs/design/modal/src/modal-header/modal-header.component.spec.ts index a10a95c618..05bb0a802a 100644 --- a/libs/design/modal/src/modal-header/modal-header.component.spec.ts +++ b/libs/design/modal/src/modal-header/modal-header.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -13,7 +14,7 @@ import { DaffModalHeaderComponent } from './modal-header.component'; import { DaffModalService } from '../service/modal.service'; @Component ({ - template: ``, + template: ``, imports: [ DaffModalHeaderComponent, ], @@ -23,7 +24,7 @@ import { DaffModalService } from '../service/modal.service'; }) class WrapperComponent { - dismissible = true; + dismissible = signal(true); } describe('@daffodil/design/modal | DaffModalHeaderComponent', () => { @@ -67,7 +68,7 @@ describe('@daffodil/design/modal | DaffModalHeaderComponent', () => { }); it('should hide the close button if dismissible is false', () => { - wrapper.dismissible = false; + wrapper.dismissible.set(false); fixture.detectChanges(); expect(component.dismissible).toBe(false); diff --git a/libs/design/modal/src/specs/focus-management.spec.ts b/libs/design/modal/src/specs/focus-management.spec.ts index 0fa2657f20..1264a6f70b 100644 --- a/libs/design/modal/src/specs/focus-management.spec.ts +++ b/libs/design/modal/src/specs/focus-management.spec.ts @@ -84,6 +84,7 @@ describe('@daffodil/design/modal | DaffModalComponent | Focus Management', () => it('should push the activator to the focus stack when modal opens', () => { expect(focusStackService.length()).toEqual(0); activatorButton.click(); + fixture.detectChanges(); expect(focusStackService.length()).toEqual(1); expect(document.activeElement).not.toEqual(activatorButton); @@ -92,6 +93,7 @@ describe('@daffodil/design/modal | DaffModalComponent | Focus Management', () => it('should follow complete user interaction flow: focus → click → modal focused → close → button focused', async () => { expect(focusStackService.length()).toEqual(0); activatorButton.click(); + fixture.detectChanges(); expect(focusStackService.length()).toEqual(1); expect(document.activeElement).not.toEqual(activatorButton); diff --git a/libs/design/native-select/src/native-select/specs/disabled.spec.ts b/libs/design/native-select/src/native-select/specs/disabled.spec.ts index 8ec945e7ca..aeb408bb1f 100644 --- a/libs/design/native-select/src/native-select/specs/disabled.spec.ts +++ b/libs/design/native-select/src/native-select/specs/disabled.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -20,7 +21,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; template:` Label - @@ -34,7 +35,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; ], }) class WrapperComponent { - disabledValue: boolean | string; + disabledValue = signal(undefined); } describe('@daffodil/design | DaffNativeSelectComponent | Static Disabled Attribute', () => { @@ -67,7 +68,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Disabled Attribu describe('when the native select is disabled', () => { beforeEach(() => { - wrapper.disabledValue = true; + wrapper.disabledValue.set(true); fixture.detectChanges(); }); @@ -78,7 +79,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Disabled Attribu describe('when the native select is no longer disabled', () => { beforeEach(() => { - wrapper.disabledValue = false; + wrapper.disabledValue.set(false); fixture.detectChanges(); }); @@ -89,7 +90,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Disabled Attribu describe('when disabled is an empty string', () => { beforeEach(() => { - wrapper.disabledValue = ''; + wrapper.disabledValue.set(''); fixture.detectChanges(); }); diff --git a/libs/design/native-select/src/native-select/specs/required.spec.ts b/libs/design/native-select/src/native-select/specs/required.spec.ts index 64b0f7f9dd..ba111d4455 100644 --- a/libs/design/native-select/src/native-select/specs/required.spec.ts +++ b/libs/design/native-select/src/native-select/specs/required.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -24,7 +25,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; template:` Label - + `, imports: [ @@ -33,7 +34,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; ], }) class WrapperComponent { - requiredValue: boolean | string; + requiredValue = signal(undefined); } describe('@daffodil/design | DaffNativeSelectComponent | Static Required Attribute', () => { @@ -68,7 +69,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Required Attribu describe('when the native select is required', () => { beforeEach(() => { - wrapper.requiredValue = true; + wrapper.requiredValue.set(true); fixture.detectChanges(); }); @@ -79,7 +80,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Required Attribu describe('when the native select is no longer required', () => { beforeEach(() => { - wrapper.requiredValue = false; + wrapper.requiredValue.set(false); fixture.detectChanges(); }); @@ -94,7 +95,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Static Required Attribu describe('when required is an empty string', () => { beforeEach(() => { - wrapper.requiredValue = ''; + wrapper.requiredValue.set(''); fixture.detectChanges(); }); @@ -162,6 +163,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Reactive Forms Required describe('when the form control is no longer required', () =>{ it('should set required to false', () => { wrapper.control.setValidators([]); + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(component.required).toEqual(false); @@ -169,6 +171,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | Reactive Forms Required it('should set requiredAttribute to null', () => { wrapper.control.setValidators([]); + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); expect(component.requiredAttribute).toEqual(null); diff --git a/libs/design/native-select/src/native-select/specs/with-form-field.spec.ts b/libs/design/native-select/src/native-select/specs/with-form-field.spec.ts index 021bef678d..d707e56ca6 100644 --- a/libs/design/native-select/src/native-select/specs/with-form-field.spec.ts +++ b/libs/design/native-select/src/native-select/specs/with-form-field.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -18,7 +19,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; @Component({ template: ` - + `, @@ -28,7 +29,7 @@ import { DaffNativeSelectComponent } from '@daffodil/design/native-select'; ], }) class WrapperComponent { - id = 'test'; + id = signal('test'); } describe('@daffodil/design | DaffNativeSelectComponent | With Form Field', () => { @@ -95,7 +96,7 @@ describe('@daffodil/design | DaffNativeSelectComponent | With Form Field', () => describe('when the form field id gets updated', () => { it('should update the native-select`s id', () => { - wrapper.id = 'test-2'; + wrapper.id.set('test-2'); fixture.detectChanges(); expect(formField.id).toEqual('test-2'); diff --git a/libs/design/navbar/src/navbar/navbar.component.spec.ts b/libs/design/navbar/src/navbar/navbar.component.spec.ts index 5cc05533e7..c02f49cd18 100644 --- a/libs/design/navbar/src/navbar/navbar.component.spec.ts +++ b/libs/design/navbar/src/navbar/navbar.component.spec.ts @@ -1,6 +1,7 @@ import { Component, DebugElement, + signal, } from '@angular/core'; import { waitForAsync, @@ -12,14 +13,14 @@ import { By } from '@angular/platform-browser'; import { DaffNavbarComponent } from '@daffodil/design/navbar'; @Component({ - template: '