From 9e50dcac0ba54922a03a1caa2ac069596e8289e8 Mon Sep 17 00:00:00 2001
From: Artem Belik <artyombelyk@gmail.com>
Date: Sat, 1 Nov 2025 13:26:36 +0300
Subject: [PATCH] chore: added units for KbqHovered directive

---
 .../core/common-behaviors/hovered.spec.ts     | 66 +++++++++++++++++++
 .../core/common-behaviors/hovered.ts          |  2 +-
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/core/common-behaviors/hovered.spec.ts

diff --git a/packages/components/core/common-behaviors/hovered.spec.ts b/packages/components/core/common-behaviors/hovered.spec.ts
new file mode 100644
index 0000000000..168e1027c0
--- /dev/null
+++ b/packages/components/core/common-behaviors/hovered.spec.ts
@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, Provider, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { KbqHovered } from './hovered';
+
+const createComponent = <T>(component: Type<T>, providers: Provider[] = []): ComponentFixture<T> => {
+    TestBed.configureTestingModule({
+        imports: [component],
+        providers
+    });
+    const fixture = TestBed.createComponent<T>(component);
+
+    fixture.autoDetectChanges();
+
+    return fixture;
+};
+
+@Component({
+    standalone: true,
+    selector: 'test-by-attr-directive',
+    template: '<div kbqHovered>test</div>',
+    imports: [KbqHovered],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+class TestByAttrDirective {}
+
+@Component({
+    standalone: true,
+    selector: 'test-by-host-directive',
+    hostDirectives: [KbqHovered],
+    template: '<div>test</div>',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+class TestByHostDirective {}
+
+describe(KbqHovered.name, () => {
+    it('should toggle selector by attribute directive', () => {
+        const { debugElement } = createComponent(TestByAttrDirective);
+        const element = debugElement.query(By.css('div')).nativeElement as HTMLElement;
+
+        expect(element.classList).not.toContain('kbq-hovered');
+
+        element.dispatchEvent(new MouseEvent('mouseenter'));
+
+        expect(element.classList).toContain('kbq-hovered');
+
+        element.dispatchEvent(new MouseEvent('mouseleave'));
+
+        expect(element.classList).not.toContain('kbq-hovered');
+    });
+
+    it('should toggle selector by host directive', () => {
+        const { debugElement } = createComponent(TestByHostDirective);
+        const element = debugElement.nativeElement as HTMLElement;
+
+        expect(element.classList).not.toContain('kbq-hovered');
+
+        element.dispatchEvent(new MouseEvent('mouseenter'));
+
+        expect(element.classList).toContain('kbq-hovered');
+
+        element.dispatchEvent(new MouseEvent('mouseleave'));
+
+        expect(element.classList).not.toContain('kbq-hovered');
+    });
+});
diff --git a/packages/components/core/common-behaviors/hovered.ts b/packages/components/core/common-behaviors/hovered.ts
index ea8373ca2c..9c15592d2e 100644
--- a/packages/components/core/common-behaviors/hovered.ts
+++ b/packages/components/core/common-behaviors/hovered.ts
@@ -4,7 +4,7 @@ import { fromEvent, map, merge } from 'rxjs';
 import { kbqInjectNativeElement } from '../utils';
 
 /**
- * Directive that adds a `kbq-hover` class to an element, based on its hover state.
+ * Directive that adds a `kbq-hovered` class to an element, based on its hover state.
  */
 @Directive({
     standalone: true,