fix: imports vs. declarations

.github/actions/nodejs/action.yml

@@ -23,7 +23,7 @@ runs:
           shell: bash
           run: npm install -g corepack
 
-        - name: Enable Corepack for Yarn 4.5.3
+        - name: Enable Corepack for Yarn 4.6.0
           shell: bash
           run: |
               corepack enable yarn
@@ -33,11 +33,11 @@ runs:
           run: |
               yarn
 
-        - name: Install Yarn 4.5.3 (if not available)
+        - name: Install Yarn 4.6.0 (if not available)
           shell: bash
           run: |
-              if ! yarn --version | grep -q "4.5.3"; then
-                npm install -g yarn@4.5.3
+              if ! yarn --version | grep -q "4.6.0"; then
+                npm install -g yarn@4.6.0
               fi
 
         - name: Print Node.js version
@@ -50,14 +50,14 @@ runs:
           shell: bash
 
         - name: Use the global Yarn cache if available
-          uses: actions/cache@v4.1.2
+          uses: actions/cache@v4.2.0
           with:
               path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
               key: ${{ runner.os }}-node-${{ inputs.node_version }}-yarn-${{ hashFiles('**/yarn.lock') }}
               restore-keys: |
                   ${{ runner.os }}-node-${{ inputs.node_version }}-yarn-
 
-        - uses: actions/cache@v4.1.2
+        - uses: actions/cache@v4.2.0
           id: node_modules
           name: Use project node_modules cache if available
           with:

libs/btp/navigation/components/navigation-item/navigation-list-item.component.spec.ts

@@ -1,13 +1,21 @@
-import { NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ViewChild, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { PopoverComponent } from '@fundamental-ngx/core/popover';
 import { Subject } from 'rxjs';
 import { FdbNavigationListItem } from '../../models/navigation-list-item.class';
 import { FdbNavigation } from '../../models/navigation.class';
 import { NavigationListItemComponent } from './navigation-list-item.component';
 
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { 
+    CxNestedListModule, 
+    NestedListContentDirective, 
+    NestedListStateService,
+    NestedItemService
+ } from '@fundamental-ngx/cx';
+
 class NavigationComponentMock extends FdbNavigation {
     closeAllPopups = new Subject<void>();
     classList$ = signal([]);
@@ -86,3 +94,67 @@ describe('NavigationListItemComponent', () => {
         expect(fixture.debugElement.query(By.directive(PopoverComponent))).toBeTruthy();
     });
 });
+
+@Component({
+    template: `
+    <div>TEST</div>
+        <!-- <fdb-navigation-list-item #item>
+            <fdb-navigation-list-item></fdb-navigation-list-item>
+        </fdb-navigation-list-item>
+        <div fdx-nested-list-content>
+            <a fdx-nested-list-link>
+                <span fdx-nested-list-icon [glyph]="'settings'"></span>
+                <span fdx-nested-list-title>Link 1</span>
+            </a>
+            <a fdx-nested-list-expand-icon></a>
+        </div> -->
+    `,
+    standalone: true,
+    imports: [CommonModule, CxNestedListModule, NavigationListItemComponent]
+})
+class TestNestedContainerComponent {
+    @ViewChild(NestedListContentDirective)
+    directiveElement: NestedListContentDirective;
+
+    @ViewChild(NavigationListItemComponent)
+    navListComponent: NavigationListItemComponent;
+}
+
+describe('NestedContentDirective', () => {
+    let component: TestNestedContainerComponent;
+    let directiveElement: NestedListContentDirective;
+    let fixture: ComponentFixture<TestNestedContainerComponent>;
+    let navComponent: NavigationComponentMock;
+
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [TestNestedContainerComponent],
+            providers: [NestedListStateService, NestedItemService]
+        }).compileComponents();
+
+        navComponent = new NavigationComponentMock();
+        // await TestBed.configureTestingModule({
+        //     imports: [TestComponent],
+        //     providers: [
+        //         {
+        //             provide: FdbNavigation,
+        //             useValue: navComponent
+        //         }
+        //     ]
+        // }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestNestedContainerComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        directiveElement = component.directiveElement;
+        fixture.detectChanges();
+    });
+
+    it('Should have good classes', () => {
+        const classList = (directiveElement as any)._elementRef.nativeElement.classList;
+        expect(classList.contains('has-child')).toBeFalsy();
+    });
+
+});

libs/btp/navigation/components/navigation-item/navigation-list-item.component.ts

@@ -325,21 +325,16 @@ export class NavigationListItemComponent extends FdbNavigationListItem implement
         });
 
         // We need to track child directives change and set list items based on that.
-        effect(
-            () => {
-                if (!this._parentNavigationListItemDirective?.childDirectives()) {
-                    return;
-                }
-
-                const children = this._parentNavigationListItemDirective.childDirectives();
-                const mappedItems = Array.from(children).map((child) => child._item);
-
-                this.listItems$.set(mappedItems);
-            },
-            {
-                allowSignalWrites: true
+        effect(() => {
+            if (!this._parentNavigationListItemDirective?.childDirectives()) {
+                return;
             }
-        );
+
+            const children = this._parentNavigationListItemDirective.childDirectives();
+            const mappedItems = Array.from(children).map((child) => child._item);
+
+            this.listItems$.set(mappedItems);
+        });
 
         this._parentNavigationListItemDirective?.registerItem(this);
 

libs/btp/test-setup.ts

@@ -1,7 +1,6 @@
-globalThis.ngJest = {
-    testEnvironmentOptions: {
-        errorOnUnknownElements: true,
-        errorOnUnknownProperties: true
-    }
-};
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true
+});

libs/cdk/data-source/data-source.directive.spec.ts

@@ -1,20 +1,21 @@
 import { Component, inject } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { Observable, isObservable, of } from 'rxjs';
+import { Observable, of, isObservable } from 'rxjs';
+import { DataSourceDirective } from './data-source.directive';
 import { AbstractDataProvider } from './base/abstract-data-provider.class';
 import { BaseDataSource } from './base/base-data-source.class';
-import { DataSourceDirective } from './data-source.directive';
-import { isDataSource } from './helpers/is-datasource';
 import { DataSource, DataSourceParser, DataSourceProvider } from './models';
 import { FD_DATA_SOURCE_TRANSFORMER } from './tokens';
+import { isDataSource } from './helpers/is-datasource';
 
-export const dataProviderData = [1, 2, 3, 4, 5];
-export const arrayData = [6, 7, 8, 9];
+const dataProviderData = [1, 2, 3, 4, 5];
+const arrayData = [6, 7, 8, 9];
 
-export class MockDataProvider extends AbstractDataProvider<any> {
+class MockDataProvider extends AbstractDataProvider<any> {
     constructor(public items: any[]) {
         super();
     }
+
     fetch(): Observable<any[]> {
         return of(this.items);
     }
@@ -24,21 +25,21 @@ export class MockDataProvider extends AbstractDataProvider<any> {
     }
 }
 
-export class MockArrayDataSource extends BaseDataSource<number> {
+class MockArrayDataSource extends BaseDataSource<number> {
     constructor() {
         super(new MockDataProvider(arrayData));
         this.match('*');
     }
 }
 
-export class MockObservableDataSource extends BaseDataSource<number> {
+class MockObservableDataSource extends BaseDataSource<number> {
     constructor() {
         super(new MockDataProvider(dataProviderData));
         this.match('*');
     }
 }
 
-export class mockDataSourceParser implements DataSourceParser {
+class MockDataSourceParser implements DataSourceParser {
     parse(source: DataSource): DataSourceProvider | undefined {
         if (isDataSource(source)) {
             return source;
@@ -68,20 +69,22 @@ export class HostComponent {
 describe('DataSourceDirective', () => {
     let directive: DataSourceDirective<any>;
     let fixture: ComponentFixture<HostComponent>;
+
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             imports: [HostComponent],
             providers: [
                 {
                     provide: FD_DATA_SOURCE_TRANSFORMER,
-                    useClass: mockDataSourceParser
+                    useClass: MockDataSourceParser
                 }
             ]
         }).compileComponents();
 
         fixture = TestBed.createComponent(HostComponent);
         directive = fixture.componentInstance.directive;
     });
+
     it('should create an instance', () => {
         expect(directive).toBeTruthy();
     });
@@ -90,17 +93,15 @@ describe('DataSourceDirective', () => {
         const emitSpy = jest.spyOn(directive.dataChanged, 'emit');
 
         directive.dataSource = arrayData;
-
         tick(2000);
 
-        expect(emitSpy).toHaveBeenCalled();
+        expect(emitSpy).toHaveBeenCalledTimes(1);
         expect(emitSpy).toHaveBeenCalledWith(arrayData);
 
         directive.dataSource = new MockObservableDataSource();
-
         tick(2000);
 
-        expect(emitSpy).toHaveBeenCalled();
+        expect(emitSpy).toHaveBeenCalledTimes(2);
         expect(emitSpy).toHaveBeenCalledWith(dataProviderData);
     }));
 });

libs/cdk/forms/cva/cva.directive.spec.ts

@@ -7,6 +7,7 @@ let UNIQUE_ID = 0;
 
 @Component({
     selector: 'fdk-cva-test-control',
+    standalone: true,
     template: `
         <input
             #comboboxInput
@@ -16,9 +17,10 @@ let UNIQUE_ID = 0;
             autocomplete="off"
             (input)="onInput($event)"
             (blur)="onBlur()"
+            fdkCva
         />
     `,
-    hostDirectives: [CvaDirective]
+    providers: [CvaDirective]
 })
 export class TestComponent implements ControlValueAccessor, AfterViewInit {
     @ViewChild('comboboxInput') comboboxInput: ElementRef<HTMLInputElement>;
@@ -72,6 +74,10 @@ export class TestComponent implements ControlValueAccessor, AfterViewInit {
     }
 }
 
+const mockElementRef = {
+    nativeElement: document.createElement('input')
+};
+
 describe('CvaDirective', () => {
     runValueAccessorTests({
         /** Component, that is being tested */
@@ -81,7 +87,10 @@ describe('CvaDirective', () => {
          * Under the hood calls TestBed.configureTestingModule with provided config.
          */
         testModuleMetadata: {
-            declarations: [TestComponent]
+            imports: [TestComponent, CvaDirective],
+            providers: [
+                { provide: ElementRef, useValue: mockElementRef }
+            ]
         },
         /** Whether component is able to track "onBlur" events separately */
         supportsOnBlur: true,

libs/cdk/forms/cva/cva.directive.ts

@@ -199,13 +199,21 @@ export class CvaDirective<T = any>
         return this.formField?.getPriorityState() || 'default';
     });
 
+    /** @hidden */
+    protected _subscriptions = new Subscription();
+
     /**
-     * Element reference.
+     * A private property to hold the ElementRef which might be null
      */
-    readonly elementRef = inject(ElementRef);
+    private _elementRefOrNull: ElementRef | null = inject(ElementRef, { optional: true });
 
-    /** @hidden */
-    protected _subscriptions = new Subscription();
+    /**
+     * Element reference.
+     */
+    get elementRef(): ElementRef {
+        // Return a fallback ElementRef if _elementRefOrNull is null
+        return this._elementRefOrNull || (this._elementRef as ElementRef);
+    }
 
     /** @hidden */
     private _defaultId = `fd-input-id-${randomId++}`;

libs/cdk/test-setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();

libs/cdk/utils/directives/auto-complete/auto-complete.directive.spec.ts

@@ -3,6 +3,8 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { AutoCompleteDirective } from './auto-complete.directive';
 
 @Component({
+    standalone: true,
+    imports: [AutoCompleteDirective],
     template: ` <input [options]="values" fdkAutoComplete />`
 })
 class TestComponent {
@@ -19,8 +21,7 @@ describe('AutoCompleteDirective', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [TestComponent],
-            imports: [AutoCompleteDirective]
+            imports: [TestComponent]
         }).compileComponents();
     }));