csaba-horvath · Oct 20, 2026 · Oct 19, 2026
@@ -1 +1,2 @@
-npx lint-staged
+npx lint-staged
+pnpm run test:widgets
@@ -12,6 +12,8 @@ const jestConfig: Config = {
     '!core/types/*',
     '!**/*.type.ts',
     '!**/*.model.ts',
+    '!**/*.stories.ts',
+    '!**/.storybook/**',
   ],
   coverageThreshold: {
     global: {

@@ -1,20 +1,42 @@
+// The accordion must load before the item because of their circular import.
+
+import { IdsAccordionComponent } from '../accordion.component';
+
+// eslint-disable-next-line import/order
 import { IdsAccordionItemComponent } from './accordion-item.component';
 
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+
+@Component({
+  imports: [
+    IdsAccordionComponent,
+    IdsAccordionItemComponent,
+  ],
+  template: `
+    <ids-accordion>
+      <ids-accordion-item summary="Summary">Content</ids-accordion-item>
+    </ids-accordion>
+  `,
+})
+class TestHostComponent {}
 
 describe('IdsAccordionItemComponent', () => {
   let component: IdsAccordionItemComponent;
-  let fixture: ComponentFixture<IdsAccordionItemComponent>;
+  let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async() => {
     await TestBed.configureTestingModule({
-      imports: [IdsAccordionItemComponent],
+      imports: [TestHostComponent],
+      providers: [provideNoopAnimations()],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(IdsAccordionItemComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
+    component = fixture.debugElement.query(By.directive(IdsAccordionItemComponent)).componentInstance as IdsAccordionItemComponent;
   });
 
   it('should create', () => {

@@ -1,18 +1,18 @@
-import { BadgeComponent } from './badge.component';
+import { IdsBadgeComponent } from './badge.component';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-describe('BadgeComponent', () => {
-  let component: BadgeComponent;
-  let fixture: ComponentFixture<BadgeComponent>;
+describe('IdsBadgeComponent', () => {
+  let component: IdsBadgeComponent;
+  let fixture: ComponentFixture<IdsBadgeComponent>;
 
   beforeEach(async() => {
     await TestBed.configureTestingModule({
-      imports: [BadgeComponent],
+      imports: [IdsBadgeComponent],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(BadgeComponent);
+    fixture = TestBed.createComponent(IdsBadgeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

@@ -40,6 +40,8 @@ describe('IdsDocumentScrollStrategyService', () => {
 
   afterEach(() => {
     document.body.style.overflow = originalBodyOverflow;
+    document.body.style.overflowX = '';
+    document.body.style.overflowY = '';
     document.documentElement.style.overflow = originalHtmlOverflow;
   });
 
@@ -56,7 +58,8 @@ describe('IdsDocumentScrollStrategyService', () => {
   });
 
   it('does not add a second document lock when body scrolling is already blocked', () => {
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflowX = 'hidden';
+    document.body.style.overflowY = 'hidden';
     const strategy = service.create();
 
     strategy.enable();

@@ -1,20 +1,39 @@
 import { IdsFormFieldComponent } from './form-field.component';
 
+import { IdsInputDirective } from '../input/input.directive';
+
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsInputDirective,
+  ],
+  template: `
+    <ids-form-field>
+      <input idsInput ngModel="value" />
+    </ids-form-field>
+  `,
+})
+class TestHostComponent {}
 
 describe('IdsFormFieldComponent', () => {
   let component: IdsFormFieldComponent;
-  let fixture: ComponentFixture<IdsFormFieldComponent>;
+  let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async() => {
     await TestBed.configureTestingModule({
-      imports: [IdsFormFieldComponent],
+      imports: [TestHostComponent],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(IdsFormFieldComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
+    component = fixture.debugElement.query(By.directive(IdsFormFieldComponent)).componentInstance as IdsFormFieldComponent;
   });
 
   it('should create', () => {

@@ -1,8 +1,24 @@
 import { IdsInputDirective } from './input.directive';
 
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [
+    FormsModule,
+    IdsInputDirective,
+  ],
+  template: '<input idsInput ngModel="value" />',
+})
+class TestHostComponent {}
+
 describe('IdsInputDirective', () => {
   it('should create an instance', () => {
-    const directive = new IdsInputDirective();
+    const fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    const directive = fixture.debugElement.query(By.directive(IdsInputDirective)).injector.get(IdsInputDirective);
     expect(directive).toBeTruthy();
   });
 });
@@ -1,6 +1,11 @@
 import { IdsOptionGroupComponent } from './option-group.component';
+import { IDS_OPTION_PARENT_COMPONENT } from './tokens/option-parent';
 
+import { IdsFormFieldVariant } from '../form-field/types/form-field-variant.type';
+
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IdsSize } from '@i-cell/ids-angular/core';
 
 describe('IdsOptionGroupComponent', () => {
   let component: IdsOptionGroupComponent;
@@ -9,6 +14,17 @@ describe('IdsOptionGroupComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [IdsOptionGroupComponent],
+      providers: [
+        {
+          provide: IDS_OPTION_PARENT_COMPONENT,
+          useValue: {
+            multiSelect: signal(false),
+            parentSize: signal(IdsSize.COMFORTABLE),
+            parentVariant: signal(IdsFormFieldVariant.SURFACE),
+            isOptionPreSelectedByValue: (): boolean => false,
+          },
+        },
+      ],
     })
       .compileComponents();
 

@@ -1,6 +1,11 @@
 import { IdsOptionComponent } from './option.component';
+import { IDS_OPTION_PARENT_COMPONENT } from './tokens/option-parent';
 
+import { IdsFormFieldVariant } from '../form-field/types/form-field-variant.type';
+
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IdsSize } from '@i-cell/ids-angular/core';
 
 describe('IdsOptionComponent', () => {
   let component: IdsOptionComponent;
@@ -9,6 +14,17 @@ describe('IdsOptionComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [IdsOptionComponent],
+      providers: [
+        {
+          provide: IDS_OPTION_PARENT_COMPONENT,
+          useValue: {
+            multiSelect: signal(false),
+            parentSize: signal(IdsSize.COMFORTABLE),
+            parentVariant: signal(IdsFormFieldVariant.SURFACE),
+            isOptionPreSelectedByValue: (): boolean => false,
+          },
+        },
+      ],
     })
       .compileComponents();
 

@@ -1,5 +1,6 @@
 import { IdsOverlayPanelComponent } from './overlay-panel.component';
 
+import { ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 describe('NewOverlayPanelComponent', () => {
@@ -14,6 +15,7 @@ describe('NewOverlayPanelComponent', () => {
 
     fixture = TestBed.createComponent(IdsOverlayPanelComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('origin', new ElementRef(document.body));
     fixture.detectChanges();
   });
 

@@ -14,6 +14,8 @@ describe('IdsPaginatorComponent', () => {
 
     fixture = TestBed.createComponent(IdsPaginatorComponent);
     component = fixture.componentInstance;
+    const length = 100;
+    fixture.componentRef.setInput('length', length);
     fixture.detectChanges();
   });
 

@@ -1,20 +1,37 @@
+import { IdsRadioGroupComponent } from './radio-group.component';
 import { IdsRadioComponent } from './radio.component';
 
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [
+    IdsRadioGroupComponent,
+    IdsRadioComponent,
+  ],
+  template: `
+    <ids-radio-group name="test-radio-group">
+      <ids-radio value="a">A</ids-radio>
+      <ids-radio value="b">B</ids-radio>
+    </ids-radio-group>
+  `,
+})
+class TestHostComponent {}
 
 describe('IdsRadioComponent', () => {
   let component: IdsRadioComponent;
-  let fixture: ComponentFixture<IdsRadioComponent>;
+  let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async() => {
     await TestBed.configureTestingModule({
-      imports: [IdsRadioComponent],
+      imports: [TestHostComponent],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(IdsRadioComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
+    component = fixture.debugElement.query(By.directive(IdsRadioComponent)).componentInstance as IdsRadioComponent;
   });
 
   it('should create', () => {

@@ -1,20 +1,43 @@
+// The directive must load before the item because of their circular import.
+
+import { IdsSegmentedControlToggleDirective } from './segmented-control-toggle.directive';
+// eslint-disable-next-line import/order
 import { IdsSegmentedControlToggleItemComponent } from './segmented-control-toggle-item.component';
 
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  imports: [
+    FormsModule,
+    IdsSegmentedControlToggleDirective,
+    IdsSegmentedControlToggleItemComponent,
+  ],
+  template: `
+    <ids-segmented-control-toggle ngModel="a">
+      <ids-segmented-control-toggle-item value="a" label="A" />
+      <ids-segmented-control-toggle-item value="b" label="B" />
+    </ids-segmented-control-toggle>
+  `,
+})
+class TestHostComponent {}
 
 describe('IdsSegmentedControlToggleItemComponent', () => {
   let component: IdsSegmentedControlToggleItemComponent;
-  let fixture: ComponentFixture<IdsSegmentedControlToggleItemComponent>;
+  let fixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async() => {
     await TestBed.configureTestingModule({
-      imports: [IdsSegmentedControlToggleItemComponent],
+      imports: [TestHostComponent],
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(IdsSegmentedControlToggleItemComponent);
-    component = fixture.componentInstance;
+    fixture = TestBed.createComponent(TestHostComponent);
     fixture.detectChanges();
+    const itemElement = fixture.debugElement.query(By.directive(IdsSegmentedControlToggleItemComponent));
+    component = itemElement.componentInstance as IdsSegmentedControlToggleItemComponent;
   });
 
   it('should create', () => {

@@ -1,8 +1,10 @@
 import { IdsSegmentedControlToggleDirective } from './segmented-control-toggle.directive';
 
+import { TestBed } from '@angular/core/testing';
+
 describe('IdsSegmentedControlToggleDirective', () => {
   it('should create an instance', () => {
-    const directive = new IdsSegmentedControlToggleDirective();
+    const directive = TestBed.runInInjectionContext(() => new IdsSegmentedControlToggleDirective());
     expect(directive).toBeTruthy();
   });
 });