diff --git a/.husky/pre-commit b/.husky/pre-commit index d0a77842..1e5a4dc1 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1 +1,2 @@ -npx lint-staged \ No newline at end of file +npx lint-staged +pnpm run test:widgets \ No newline at end of file diff --git a/jest.config.ts b/jest.config.ts index 569836fe..b47d5da5 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -12,6 +12,8 @@ const jestConfig: Config = { '!core/types/*', '!**/*.type.ts', '!**/*.model.ts', + '!**/*.stories.ts', + '!**/.storybook/**', ], coverageThreshold: { global: { diff --git a/projects/widgets/accordion/accordion-item/accordion-item.component.spec.ts b/projects/widgets/accordion/accordion-item/accordion-item.component.spec.ts index 6f32a05b..c185ac41 100644 --- a/projects/widgets/accordion/accordion-item/accordion-item.component.spec.ts +++ b/projects/widgets/accordion/accordion-item/accordion-item.component.spec.ts @@ -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: ` + + Content + + `, +}) +class TestHostComponent {} describe('IdsAccordionItemComponent', () => { let component: IdsAccordionItemComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; 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', () => { diff --git a/projects/widgets/badge/badge.component.spec.ts b/projects/widgets/badge/badge.component.spec.ts index b8ff42b0..518df435 100644 --- a/projects/widgets/badge/badge.component.spec.ts +++ b/projects/widgets/badge/badge.component.spec.ts @@ -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; +describe('IdsBadgeComponent', () => { + let component: IdsBadgeComponent; + let fixture: ComponentFixture; beforeEach(async() => { await TestBed.configureTestingModule({ - imports: [BadgeComponent], + imports: [IdsBadgeComponent], }) .compileComponents(); - fixture = TestBed.createComponent(BadgeComponent); + fixture = TestBed.createComponent(IdsBadgeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/projects/widgets/core/services/document-scroll-strategy.service.spec.ts b/projects/widgets/core/services/document-scroll-strategy.service.spec.ts index fc6be335..da5053fa 100644 --- a/projects/widgets/core/services/document-scroll-strategy.service.spec.ts +++ b/projects/widgets/core/services/document-scroll-strategy.service.spec.ts @@ -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(); diff --git a/projects/widgets/forms/components/form-field/form-field.component.spec.ts b/projects/widgets/forms/components/form-field/form-field.component.spec.ts index 74f26a88..ce686717 100644 --- a/projects/widgets/forms/components/form-field/form-field.component.spec.ts +++ b/projects/widgets/forms/components/form-field/form-field.component.spec.ts @@ -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: ` + + + + `, +}) +class TestHostComponent {} describe('IdsFormFieldComponent', () => { let component: IdsFormFieldComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; 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', () => { diff --git a/projects/widgets/forms/components/input/input.directive.spec.ts b/projects/widgets/forms/components/input/input.directive.spec.ts index f86b8e95..d9f033b9 100644 --- a/projects/widgets/forms/components/input/input.directive.spec.ts +++ b/projects/widgets/forms/components/input/input.directive.spec.ts @@ -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: '', +}) +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(); }); }); diff --git a/projects/widgets/forms/components/option/option-group.component.spec.ts b/projects/widgets/forms/components/option/option-group.component.spec.ts index 8c5a5cf3..9933b3df 100644 --- a/projects/widgets/forms/components/option/option-group.component.spec.ts +++ b/projects/widgets/forms/components/option/option-group.component.spec.ts @@ -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(); diff --git a/projects/widgets/forms/components/option/option.component.spec.ts b/projects/widgets/forms/components/option/option.component.spec.ts index 192d5615..3c3ce643 100644 --- a/projects/widgets/forms/components/option/option.component.spec.ts +++ b/projects/widgets/forms/components/option/option.component.spec.ts @@ -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(); diff --git a/projects/widgets/overlay-panel/overlay-panel.component.spec.ts b/projects/widgets/overlay-panel/overlay-panel.component.spec.ts index a455cb72..4c9885bd 100644 --- a/projects/widgets/overlay-panel/overlay-panel.component.spec.ts +++ b/projects/widgets/overlay-panel/overlay-panel.component.spec.ts @@ -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(); }); diff --git a/projects/widgets/paginator/paginator.component.spec.ts b/projects/widgets/paginator/paginator.component.spec.ts index 70538763..0a22006e 100644 --- a/projects/widgets/paginator/paginator.component.spec.ts +++ b/projects/widgets/paginator/paginator.component.spec.ts @@ -14,6 +14,8 @@ describe('IdsPaginatorComponent', () => { fixture = TestBed.createComponent(IdsPaginatorComponent); component = fixture.componentInstance; + const length = 100; + fixture.componentRef.setInput('length', length); fixture.detectChanges(); }); diff --git a/projects/widgets/radio/radio.component.spec.ts b/projects/widgets/radio/radio.component.spec.ts index 8033804d..285ecf64 100644 --- a/projects/widgets/radio/radio.component.spec.ts +++ b/projects/widgets/radio/radio.component.spec.ts @@ -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: ` + + A + B + + `, +}) +class TestHostComponent {} describe('IdsRadioComponent', () => { let component: IdsRadioComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; 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', () => { diff --git a/projects/widgets/segmented-control-toggle/segmented-control-toggle-item.component.spec.ts b/projects/widgets/segmented-control-toggle/segmented-control-toggle-item.component.spec.ts index 768fdb15..528b2ce5 100644 --- a/projects/widgets/segmented-control-toggle/segmented-control-toggle-item.component.spec.ts +++ b/projects/widgets/segmented-control-toggle/segmented-control-toggle-item.component.spec.ts @@ -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: ` + + + + + `, +}) +class TestHostComponent {} describe('IdsSegmentedControlToggleItemComponent', () => { let component: IdsSegmentedControlToggleItemComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; 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', () => { diff --git a/projects/widgets/segmented-control-toggle/segmented-control-toggle.directive.spec.ts b/projects/widgets/segmented-control-toggle/segmented-control-toggle.directive.spec.ts index 02f46bb8..6fb9084c 100644 --- a/projects/widgets/segmented-control-toggle/segmented-control-toggle.directive.spec.ts +++ b/projects/widgets/segmented-control-toggle/segmented-control-toggle.directive.spec.ts @@ -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(); }); }); diff --git a/projects/widgets/segmented-control/segmented-control-item.component.spec.ts b/projects/widgets/segmented-control/segmented-control-item.component.spec.ts index 396a9132..f819c9b5 100644 --- a/projects/widgets/segmented-control/segmented-control-item.component.spec.ts +++ b/projects/widgets/segmented-control/segmented-control-item.component.spec.ts @@ -1,20 +1,43 @@ +// The directive must load before the item because of their circular import. + +import { IdsSegmentedControlDirective } from './segmented-control.directive'; +// eslint-disable-next-line import/order import { IdsSegmentedControlItemComponent } from './segmented-control-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, + IdsSegmentedControlDirective, + IdsSegmentedControlItemComponent, + ], + template: ` + + + + + `, +}) +class TestHostComponent {} describe('IdsSegmentedControlItemComponent', () => { let component: IdsSegmentedControlItemComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(async() => { await TestBed.configureTestingModule({ - imports: [IdsSegmentedControlItemComponent], + imports: [TestHostComponent], }) .compileComponents(); - fixture = TestBed.createComponent(IdsSegmentedControlItemComponent); - component = fixture.componentInstance; + fixture = TestBed.createComponent(TestHostComponent); fixture.detectChanges(); + const itemElement = fixture.debugElement.query(By.directive(IdsSegmentedControlItemComponent)); + component = itemElement.componentInstance as IdsSegmentedControlItemComponent; }); it('should create', () => { diff --git a/projects/widgets/segmented-control/segmented-control.directive.spec.ts b/projects/widgets/segmented-control/segmented-control.directive.spec.ts index ee364b59..64f0453f 100644 --- a/projects/widgets/segmented-control/segmented-control.directive.spec.ts +++ b/projects/widgets/segmented-control/segmented-control.directive.spec.ts @@ -1,8 +1,10 @@ import { IdsSegmentedControlDirective } from './segmented-control.directive'; +import { TestBed } from '@angular/core/testing'; + describe('IdsSegmentedControlDirective', () => { it('should create an instance', () => { - const directive = new IdsSegmentedControlDirective(); + const directive = TestBed.runInInjectionContext(() => new IdsSegmentedControlDirective()); expect(directive).toBeTruthy(); }); }); diff --git a/projects/widgets/select/select.component.spec.ts b/projects/widgets/select/select.component.spec.ts index bcdba550..adea96f2 100644 --- a/projects/widgets/select/select.component.spec.ts +++ b/projects/widgets/select/select.component.spec.ts @@ -1,20 +1,42 @@ import { IdsSelectComponent } from './select.component'; +import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; +import { By } from '@angular/platform-browser'; +import { IdsFormFieldComponent, IdsOptionComponent } from '@i-cell/ids-angular/forms'; + +@Component({ + imports: [ + FormsModule, + IdsFormFieldComponent, + IdsSelectComponent, + IdsOptionComponent, + ], + template: ` + + + A + B + + + `, +}) +class TestHostComponent {} describe('IdsSelectComponent', () => { let component: IdsSelectComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(async() => { await TestBed.configureTestingModule({ - imports: [IdsSelectComponent], + imports: [TestHostComponent], }) .compileComponents(); - fixture = TestBed.createComponent(IdsSelectComponent); - component = fixture.componentInstance; + fixture = TestBed.createComponent(TestHostComponent); fixture.detectChanges(); + component = fixture.debugElement.query(By.directive(IdsSelectComponent)).componentInstance as IdsSelectComponent; }); it('should create', () => { diff --git a/projects/widgets/setup-jest.ts b/projects/widgets/setup-jest.ts index 1100b3e8..940f2f28 100644 --- a/projects/widgets/setup-jest.ts +++ b/projects/widgets/setup-jest.ts @@ -1 +1,10 @@ -import 'jest-preset-angular/setup-jest'; +import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; + +setupZoneTestEnv(); + +// jsdom does not implement ResizeObserver +globalThis.ResizeObserver ??= class { + public observe(): void {} + public unobserve(): void {} + public disconnect(): void {} +}; diff --git a/projects/widgets/snackbar/snackbar.component.spec.ts b/projects/widgets/snackbar/snackbar.component.spec.ts index 786cb678..db4f9947 100644 --- a/projects/widgets/snackbar/snackbar.component.spec.ts +++ b/projects/widgets/snackbar/snackbar.component.spec.ts @@ -14,6 +14,7 @@ describe('IdsSnackbarComponent', () => { fixture = TestBed.createComponent(IdsSnackbarComponent); component = fixture.componentInstance; + fixture.componentRef.setInput('message', 'Test message'); fixture.detectChanges(); }); diff --git a/projects/widgets/switch/switch.component.spec.ts b/projects/widgets/switch/switch.component.spec.ts index da8442de..2ffac064 100644 --- a/projects/widgets/switch/switch.component.spec.ts +++ b/projects/widgets/switch/switch.component.spec.ts @@ -1,6 +1,7 @@ import { IdsSwitchComponent } from './switch.component'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; describe('IdsSwitchComponent', () => { let component: IdsSwitchComponent; @@ -9,6 +10,7 @@ describe('IdsSwitchComponent', () => { beforeEach(async() => { await TestBed.configureTestingModule({ imports: [IdsSwitchComponent], + providers: [provideNoopAnimations()], }) .compileComponents(); diff --git a/projects/widgets/tab/tab-group.component.spec.ts b/projects/widgets/tab/tab-group.component.spec.ts index 387cbf62..9d965436 100644 --- a/projects/widgets/tab/tab-group.component.spec.ts +++ b/projects/widgets/tab/tab-group.component.spec.ts @@ -1,20 +1,37 @@ import { IdsTabGroupComponent } from './tab-group.component'; +import { IdsTabComponent } from './tab.component'; +import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +@Component({ + imports: [ + IdsTabGroupComponent, + IdsTabComponent, + ], + template: ` + + First content + Second content + + `, +}) +class TestHostComponent {} describe('IdsTabGroupComponent', () => { let component: IdsTabGroupComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(async() => { await TestBed.configureTestingModule({ - imports: [IdsTabGroupComponent], + imports: [TestHostComponent], }) .compileComponents(); - fixture = TestBed.createComponent(IdsTabGroupComponent); - component = fixture.componentInstance; + fixture = TestBed.createComponent(TestHostComponent); fixture.detectChanges(); + component = fixture.debugElement.query(By.directive(IdsTabGroupComponent)).componentInstance as IdsTabGroupComponent; }); it('should create', () => { diff --git a/projects/widgets/tab/tab.component.spec.ts b/projects/widgets/tab/tab.component.spec.ts index 60266ed0..f7d24a95 100644 --- a/projects/widgets/tab/tab.component.spec.ts +++ b/projects/widgets/tab/tab.component.spec.ts @@ -1,20 +1,38 @@ +import { IdsTabGroupComponent } from './tab-group.component'; import { IdsTabComponent } from './tab.component'; +import { Component, viewChild } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +@Component({ + imports: [ + IdsTabGroupComponent, + IdsTabComponent, + ], + template: ` + + First content + Second content + + `, +}) +class TestHostComponent { + public tab = viewChild.required(IdsTabComponent); +} + describe('IdsTabComponent', () => { let component: IdsTabComponent; - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(async() => { await TestBed.configureTestingModule({ - imports: [IdsTabComponent], + imports: [TestHostComponent], }) .compileComponents(); - fixture = TestBed.createComponent(IdsTabComponent); - component = fixture.componentInstance; + fixture = TestBed.createComponent(TestHostComponent); fixture.detectChanges(); + component = fixture.componentInstance.tab(); }); it('should create', () => { diff --git a/projects/widgets/table/table.component.spec.ts b/projects/widgets/table/table.component.spec.ts index 7d712b3b..5a3ec81f 100644 --- a/projects/widgets/table/table.component.spec.ts +++ b/projects/widgets/table/table.component.spec.ts @@ -128,12 +128,12 @@ it('keeps the default toggle in the last sticky-end column and opens and closes toggleButton().click(); await render(); expect(toggleButton().getAttribute('aria-expanded')).toBe('true'); - expect(toggleButton().textContent).toContain('chevron-up'); + expect(toggleButton().querySelector('ids-icon')?.getAttribute('fonticon')).toBe('chevron-up'); expect(element.querySelector('.ids-table__detail-row--expanded')?.textContent).toContain('Details for First'); toggleButton().click(); await render(); expect(toggleButton().getAttribute('aria-expanded')).toBe('false'); - expect(toggleButton().textContent).toContain('chevron-down'); + expect(toggleButton().querySelector('ids-icon')?.getAttribute('fonticon')).toBe('chevron-down'); expect(element.querySelector('.ids-table__detail-row--expanded')).toBeNull(); }); @@ -144,7 +144,9 @@ it.each([ host.target = target; await render(); expect(element.querySelector('.ids-table__cell--master-detail-toggle')).toBeNull(); - expect(toggleButton().closest('td, th')?.classList.contains(`cdk-column-${target}`)).toBe(true); + // CdkCell only matches td[cdk-cell], so identifier cells (th) have no cdk-column-* class + const targetCellClass = target === 'name' ? 'ids-table__cell--identifier' : `cdk-column-${target}`; + expect(toggleButton().closest('td, th')?.classList.contains(targetCellClass)).toBe(true); expect(element.querySelector('.cdk-column-permissions strong')?.textContent).toBe('Read'); expect(element.querySelectorAll('.ids-table__button--master-detail')).toHaveLength(1); toggleButton().click();