improve test coverage

libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { ToggleButtonSizeDirective } from './button-toggle-size.directive';
+
+describe('ButtonToggleSizeDirective', () => {
+  it('should apply the styles based on the directive', async () => {
+    @Component({
+      template: `<div hraButtonToggleSize="large" data-testid="dir"></div>`,
+      imports: [ToggleButtonSizeDirective],
+      standalone: true,
+    })
+    class ButtonToggleComponent {}
+
+    await render(ButtonToggleComponent);
+
+    const directive = screen.getByTestId('dir');
+    expect(directive.getAttribute('hrabuttontogglesize')).toBe('large');
+    expect(directive.style.font).toBe('var(--sys-label-large)');
+  });
+});

libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.ts

@@ -43,9 +43,6 @@ export class ToggleButtonSizeDirective {
   /** Size of icon button to use */
   readonly size = input.required<IconButtonSize>({ alias: 'hraButtonToggleSize' });
 
-  /** Gets size of button in rem */
-  protected readonly buttonSize = computed(() => BUTTON_CONFIG[this.size()]);
-
   /** Gets the font variable for the current button size */
   protected readonly fontVar = computed(() => `var(${BUTTON_CONFIG[this.size()].font})`);
 

libs/design-system/expansion-panel/src/lib/expansion-panel.component.html

@@ -4,11 +4,12 @@
     tabindex="0"
     [attr.aria-expanded]="accordionItem.expanded"
     [attr.aria-controls]="bodyId"
+    [expanded]="expanded"
   >
     <div class="header">
       @if (!disabled()) {
-        <button mat-icon-button class="">
-          <mat-icon class="material-symbols-rounded" (click)="accordionItem.toggle()">
+        <button mat-icon-button data-testid="toggle" (click)="accordionItem.toggle()">
+          <mat-icon class="material-symbols-rounded">
             {{ accordionItem.expanded ? 'remove' : 'add' }}
           </mat-icon>
         </button>
@@ -35,6 +36,7 @@
       [@bodyExpansion]="accordionItem.expanded ? 'expanded' : 'collapsed'"
       (@bodyExpansion.start)="animationStart($event)"
       (@bodyExpansion.done)="animationDone($event)"
+      data-testid="body"
     >
       <div class="expansion-body">
         <ng-content></ng-content>

libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts

@@ -1,21 +1,45 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AnimationDriver } from '@angular/animations/browser';
+import { MockAnimationDriver, MockAnimationPlayer } from '@angular/animations/browser/testing';
+import { provideDesignSystem } from '@hra-ui/design-system';
+import { render, RenderComponentOptions, screen } from '@testing-library/angular';
+import { userEvent } from '@testing-library/user-event';
 import { ExpansionPanelComponent } from './expansion-panel.component';
 
 describe('ExpansionPanelComponent', () => {
-  let component: ExpansionPanelComponent;
-  let fixture: ComponentFixture<ExpansionPanelComponent>;
+  async function setup(options?: RenderComponentOptions<ExpansionPanelComponent>) {
+    return render(ExpansionPanelComponent, {
+      ...options,
+      inputs: {
+        title: 'Test Title',
+        ...options?.inputs,
+      },
+      providers: [
+        provideDesignSystem(),
+        {
+          provide: AnimationDriver,
+          useClass: MockAnimationDriver,
+        },
+      ],
+    });
+  }
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ExpansionPanelComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ExpansionPanelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  it('should render the expansion panel', async () => {
+    await setup();
+    const title = screen.getByText('Test Title');
+    expect(title).toBeInTheDocument();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should set inert attribute on body element when animation starts', async () => {
+    await setup();
+
+    const button = screen.getByTestId('toggle');
+    await userEvent.click(button);
+
+    const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
+    const element = player.element as HTMLElement;
+
+    expect(element).toHaveAttribute('inert');
+    player.finish();
+    expect(element).not.toHaveAttribute('inert');
   });
 });

libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts

@@ -52,6 +52,10 @@ export class ExpansionPanelHeaderContentComponent {}
 export class ExpansionPanelComponent {
   /** Title of the expansion panel */
   readonly title = input.required<string>();
+
+  /** Flag to check if the body is expanded */
+  readonly expanded = input(true, { transform: booleanAttribute });
+
   /** Flag to denote panel as disabled */
   readonly disabled = input(false, { transform: booleanAttribute });