@keenthemes/ktui 1.0.29 → 1.1.0

package/src/components/alert/tests/alert.config.test.ts

@@ -0,0 +1,75 @@
+// @vitest-environment jsdom
+// alert.config.test.ts - Config merging logic tests for KTAlert
+import { describe, it, expect } from 'vitest';
+import { KTAlertConfig } from '../types';
+import { KTAlert } from '../alert';
+
+// Placeholder test for config merging (to be implemented)
+describe('KTAlert config merging', () => {
+  it('should merge default, global, data attributes, JSON config, and user config in correct order', () => {
+    // Mock element with data attributes and JSON config
+    const el = document.createElement('div');
+    el.setAttribute('data-kt-alert-type', 'warning');
+    el.setAttribute('data-kt-alert-title', 'From Data Attr');
+    el.setAttribute('data-kt-alert-config', JSON.stringify({ title: 'From JSON', dismissible: true }));
+    // User config
+    const userConfig = { title: 'From User', customContent: 'User Content' };
+    // Instantiate KTAlert and build config
+    const alert = new KTAlert(document.createElement("div"));
+    (alert as any)._element = el;
+    (alert as any)._getGlobalConfig = () => ({ type: 'error', message: 'From Global' });
+    (alert as any)._buildConfig(userConfig);
+    const config = (alert as any)._config;
+    // Check precedence
+    expect(config.type).toBe('warning'); // data attribute overrides global
+    expect(config.title).toBe('From User'); // user config overrides JSON/data/global/default
+    expect(config.message).toBe('From Global'); // global overrides default
+    expect(config.dismissible).toBe(true); // JSON config overrides data/global/default
+    expect(config.customContent).toBe('User Content'); // user config
+  });
+
+  it('should support all new config options and merge them correctly', () => {
+    const el = document.createElement('div');
+    el.setAttribute('data-kt-alert-icon', 'info');
+    el.setAttribute('data-kt-alert-position', 'top');
+    el.setAttribute('data-kt-alert-show-confirm-button', 'false');
+    el.setAttribute('data-kt-alert-show-cancel-button', 'true');
+    el.setAttribute('data-kt-alert-show-close-button', 'false');
+    el.setAttribute('data-kt-alert-input-placeholder', 'Enter value');
+    el.setAttribute('data-kt-alert-input-type', 'email');
+    el.setAttribute('data-kt-alert-input-label', 'Email');
+    el.setAttribute('data-kt-alert-input-attributes', JSON.stringify({ maxlength: '10', required: 'true' }));
+    el.setAttribute('data-kt-alert-custom-class', 'my-alert');
+    el.setAttribute('data-kt-alert-loader-html', '<span>Loading...</span>');
+    el.setAttribute('data-kt-alert-allow-outside-click', 'false');
+    el.setAttribute('data-kt-alert-allow-escape-key', 'false');
+    el.setAttribute('data-kt-alert-focus-confirm', 'false');
+    el.setAttribute('data-kt-alert-show-loader-on-confirm', 'true');
+    el.setAttribute('data-kt-alert-timer', '5000');
+    // User config
+    const userConfig = { icon: 'error', position: 'bottom', showConfirmButton: true, showCancelButton: false, showCloseButton: true, inputPlaceholder: 'Override', inputType: 'text', inputLabel: 'Override', inputAttributes: { maxlength: '5' }, customClass: 'user-alert', loaderHtml: '<span>User Loading</span>', allowOutsideClick: true, allowEscapeKey: true, focusConfirm: true, showLoaderOnConfirm: false, timer: 10000 };
+    // Instantiate KTAlert and build config
+    const alert = new KTAlert(document.createElement('div'));
+    (alert as any)._element = el;
+    (alert as any)._getGlobalConfig = () => ({ icon: 'question', position: 'center' });
+    (alert as any)._buildConfig(userConfig);
+    const config = (alert as any)._config;
+    // Data attributes should override global, user config should override all
+    expect(config.icon).toBe('error'); // user config
+    expect(config.position).toBe('bottom'); // user config
+    expect(config.showConfirmButton).toBe(true); // user config
+    expect(config.showCancelButton).toBe(false); // user config
+    expect(config.showCloseButton).toBe(true); // user config
+    expect(config.inputPlaceholder).toBe('Override'); // user config
+    expect(config.inputType).toBe('text'); // user config
+    expect(config.inputLabel).toBe('Override'); // user config
+    expect(config.inputAttributes).toEqual({ maxlength: '5' }); // user config
+    expect(config.customClass).toBe('user-alert'); // user config
+    expect(config.loaderHtml).toBe('<span>User Loading</span>'); // user config
+    expect(config.allowOutsideClick).toBe(true); // user config
+    expect(config.allowEscapeKey).toBe(true); // user config
+    expect(config.focusConfirm).toBe(true); // user config
+    expect(config.showLoaderOnConfirm).toBe(false); // user config
+    expect(config.timer).toBe(10000); // user config
+  });
+});

package/src/components/alert/tests/alert.templates.test.ts

@@ -0,0 +1,17 @@
+// alert.templates.test.ts - Template merging logic tests for KTAlert
+import { describe, it, expect } from 'vitest';
+import { getTemplateStrings, coreTemplateStrings } from '../templates';
+
+describe('KTAlert template merging', () => {
+  it('should use default templates if no user templates provided', () => {
+    const templates = getTemplateStrings();
+    expect(templates).toMatchObject(coreTemplateStrings);
+  });
+
+  it('should override default templates with user templates', () => {
+    const userTemplates = { title: '<h1>Custom Title</h1>' };
+    const templates = getTemplateStrings({ templates: userTemplates });
+    expect(templates.title).toBe('<h1>Custom Title</h1>');
+    expect(templates.icon).toBe(coreTemplateStrings.icon);
+  });
+});

package/src/components/alert/tests/config/attribute-config.test.ts

@@ -0,0 +1,94 @@
+/**
+ * TEST SUITE: Attribute Config
+ * PURPOSE: Test config via data attributes only
+ * SCOPE: KTAlert config from data attributes
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert attribute config', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should read config from data attributes', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-type', 'error');
+    element.setAttribute('data-kt-alert-title', 'Error Title');
+    element.setAttribute('data-kt-alert-message', 'Error Message');
+    element.setAttribute('data-kt-alert-icon', 'error');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.type).toBe('error');
+    expect((alert as any)._config.title).toBe('Error Title');
+    expect((alert as any)._config.message).toBe('Error Message');
+    expect((alert as any)._config.icon).toBe('error');
+  });
+
+  it('should convert kebab-case attributes to camelCase', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-show-confirm-button', 'true');
+    element.setAttribute('data-kt-alert-show-cancel-button', 'false');
+    element.setAttribute('data-kt-alert-allow-outside-click', 'true');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.showConfirmButton).toBe(true);
+    expect((alert as any)._config.showCancelButton).toBe(false);
+    expect((alert as any)._config.allowOutsideClick).toBe(true);
+  });
+
+  it('should handle string values for non-boolean/non-numeric attributes', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-confirm-text', 'Yes, do it!');
+    element.setAttribute('data-kt-alert-cancel-text', 'No, cancel');
+    element.setAttribute('data-kt-alert-position', 'top');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.confirmText).toBe('Yes, do it!');
+    expect((alert as any)._config.cancelText).toBe('No, cancel');
+    expect((alert as any)._config.position).toBe('top');
+  });
+
+  it('should ignore non-data-kt-alert attributes', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-type', 'info');
+    element.setAttribute('data-other-attr', 'should-be-ignored');
+    element.setAttribute('class', 'some-class');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.type).toBe('info');
+    expect((alert as any)._config).not.toHaveProperty('data-other-attr');
+    expect((alert as any)._config).not.toHaveProperty('class');
+  });
+
+  it('should handle empty attribute values', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-title', '');
+    element.setAttribute('data-kt-alert-message', '');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.title).toBe('');
+    expect((alert as any)._config.message).toBe('');
+  });
+});

package/src/components/alert/tests/config/json-config.test.ts

@@ -0,0 +1,119 @@
+/**
+ * TEST SUITE: JSON Config
+ * PURPOSE: Test config via JSON in data attribute
+ * SCOPE: KTAlert config from data-kt-alert-config JSON
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert JSON config', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should read config from data-kt-alert-config JSON', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    const jsonConfig = {
+      type: 'warning',
+      title: 'Warning from JSON',
+      message: 'This is a warning',
+      dismissible: true,
+      timer: 3000
+    };
+    element.setAttribute('data-kt-alert-config', JSON.stringify(jsonConfig));
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.type).toBe('warning');
+    expect((alert as any)._config.title).toBe('Warning from JSON');
+    expect((alert as any)._config.message).toBe('This is a warning');
+    expect((alert as any)._config.dismissible).toBe(true);
+    expect((alert as any)._config.timer).toBe(3000);
+  });
+
+  it('should handle complex nested objects in JSON config', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    const jsonConfig = {
+      inputAttributes: {
+        maxlength: '50',
+        required: 'true',
+        pattern: '[A-Za-z]+'
+      },
+      inputOptions: [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2', checked: true }
+      ]
+    };
+    element.setAttribute('data-kt-alert-config', JSON.stringify(jsonConfig));
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.inputAttributes).toEqual({
+      maxlength: '50',
+      required: 'true',
+      pattern: '[A-Za-z]+'
+    });
+    expect((alert as any)._config.inputOptions).toEqual([
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', checked: true }
+    ]);
+  });
+
+  it('should handle invalid JSON gracefully', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-config', '{"invalid": json}');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    // Should not throw error and should use defaults
+    expect((alert as any)._config).toBeDefined();
+    expect((alert as any)._config.type).toBe('info'); // default
+  });
+
+  it('should handle empty JSON config', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-config', '{}');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config).toBeDefined();
+    expect((alert as any)._config.type).toBe('info'); // default
+  });
+
+  it('should merge JSON config with data attributes correctly', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-type', 'error');
+    element.setAttribute('data-kt-alert-title', 'From Attribute');
+    const jsonConfig = {
+      title: 'From JSON',
+      message: 'JSON message',
+      dismissible: true
+    };
+    element.setAttribute('data-kt-alert-config', JSON.stringify(jsonConfig));
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    // JSON should override data attributes
+    expect((alert as any)._config.title).toBe('From JSON');
+    expect((alert as any)._config.message).toBe('JSON message');
+    expect((alert as any)._config.dismissible).toBe(true);
+    // Data attribute should still be applied
+    expect((alert as any)._config.type).toBe('error');
+  });
+});

package/src/components/alert/tests/config/merging.test.ts

@@ -0,0 +1,89 @@
+/**
+ * TEST SUITE: Config Merging
+ * PURPOSE: Test config merging order (default, global, data attributes, JSON, user config)
+ * SCOPE: KTAlert config merging logic
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert config merging', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should merge configs in correct order of precedence', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-type', 'warning');
+    element.setAttribute('data-kt-alert-title', 'From Data Attr');
+    element.setAttribute('data-kt-alert-config', JSON.stringify({ title: 'From JSON', dismissible: true }));
+    document.body.appendChild(element);
+    const userConfig = { title: 'From User', customContent: 'User Content' };
+    // ACT
+    const alert = new KTAlert(element, userConfig);
+    // ASSERT
+    // Check that user config overrides all others
+    expect((alert as any)._config.title).toBe('From User');
+    expect((alert as any)._config.customContent).toBe('User Content');
+    // Check that JSON config is applied
+    expect((alert as any)._config.dismissible).toBe(true);
+    // Check that data attribute is applied
+    expect((alert as any)._config.type).toBe('warning');
+  });
+
+  it('should handle boolean values correctly from data attributes', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-dismissible', 'true');
+    element.setAttribute('data-kt-alert-modal', 'false');
+    element.setAttribute('data-kt-alert-show-confirm-button', 'true');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.dismissible).toBe(true);
+    expect((alert as any)._config.modal).toBe(false);
+    expect((alert as any)._config.showConfirmButton).toBe(true);
+  });
+
+  it('should handle numeric values correctly from data attributes', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-timer', '5000');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.timer).toBe(5000);
+  });
+
+  it('should handle JSON parsing errors gracefully', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-config', 'invalid json');
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    // Should not throw error and should use defaults
+    expect((alert as any)._config).toBeDefined();
+    expect((alert as any)._config.type).toBe('info'); // default
+  });
+
+  it('should handle inputAttributes JSON parsing', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    element.setAttribute('data-kt-alert-input-attributes', JSON.stringify({ maxlength: '10', required: 'true' }));
+    document.body.appendChild(element);
+    // ACT
+    const alert = new KTAlert(element);
+    // ASSERT
+    expect((alert as any)._config.inputAttributes).toEqual({ maxlength: '10', required: 'true' });
+  });
+});

package/src/components/alert/tests/dismissal/auto-dismiss.test.ts

@@ -0,0 +1,96 @@
+/**
+ * TEST SUITE: Auto Dismissal
+ * PURPOSE: Test timer-based auto-dismissal
+ * SCOPE: KTAlert auto-dismissal logic
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert auto dismissal', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+    vi.useRealTimers();
+  });
+
+  it('should auto-dismiss alert after timer expires', async () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: 1000 });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    vi.advanceTimersByTime(1000);
+    await vi.runAllTicks();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should not auto-dismiss if timer is not set', async () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: undefined });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    vi.advanceTimersByTime(5000);
+    await vi.runAllTicks();
+    // ASSERT
+    expect(fireEventSpy).not.toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+    expect((alert as any)._state.isDismissed).toBe(false);
+  });
+
+  it('should not auto-dismiss if timer is 0 or negative', async () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: 0 });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    vi.advanceTimersByTime(1000);
+    await vi.runAllTicks();
+    // ASSERT
+    expect(fireEventSpy).not.toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+    expect((alert as any)._state.isDismissed).toBe(false);
+  });
+
+  it('should not auto-dismiss if manually dismissed first', async () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: 1000, showCloseButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    // Manually dismiss first
+    const closeButton = element.querySelector('[data-kt-alert-close]') as HTMLElement;
+    closeButton?.click();
+    // Then advance timer
+    vi.advanceTimersByTime(1000);
+    await vi.runAllTicks();
+    // ASSERT
+    // Should only have manual dismiss, not timer dismiss
+    expect(fireEventSpy).toHaveBeenCalledWith('dismiss', {});
+    expect(fireEventSpy).not.toHaveBeenCalledWith('dismiss', { reason: 'timer' });
+  });
+
+  it('should clear timer when manually dismissed', async () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: 1000, showCloseButton: true });
+    const clearTimerSpy = vi.spyOn(alert as any, '_clearTimer');
+    // ACT
+    const closeButton = element.querySelector('[data-kt-alert-close]') as HTMLElement;
+    closeButton?.click();
+    // ASSERT
+    expect(clearTimerSpy).toHaveBeenCalled();
+  });
+});

package/src/components/alert/tests/dismissal/escape-key-dismiss.test.ts

@@ -0,0 +1,105 @@
+/**
+ * TEST SUITE: Escape Key Dismissal
+ * PURPOSE: Test dismissal by pressing Escape key
+ * SCOPE: KTAlert Escape key dismissal logic
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert Escape key dismissal', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should dismiss alert by pressing Escape key if allowed', () => {
+    // ARRANGE
+    const config = { allowEscapeKey: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate Escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    alert?.dispatchEvent(escapeEvent);
+    // ASSERT
+    // The alert should be dismissed
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should not dismiss if allowEscapeKey is false', () => {
+    // ARRANGE
+    const config = { allowEscapeKey: false, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate Escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    alert?.dispatchEvent(escapeEvent);
+    // ASSERT
+    // Alert should still be present
+    expect(alert).toBeTruthy();
+  });
+
+  it('should dismiss if dismissible is true even when allowEscapeKey is false', () => {
+    // ARRANGE
+    const config = { dismissible: true, allowEscapeKey: false, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate Escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    alert?.dispatchEvent(escapeEvent);
+    // ASSERT
+    // The alert should be dismissed
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should dismiss if modal is true even when allowEscapeKey is false', () => {
+    // ARRANGE
+    const config = { modal: true, allowEscapeKey: false, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate Escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    alert?.dispatchEvent(escapeEvent);
+    // ASSERT
+    // The alert should be dismissed
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+
+  it('should not dismiss for other key presses', () => {
+    // ARRANGE
+    const config = { allowEscapeKey: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate other key presses
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+    const spaceEvent = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
+    alert?.dispatchEvent(enterEvent);
+    alert?.dispatchEvent(spaceEvent);
+    // ASSERT
+    // Alert should still be present
+    expect(alert).toBeTruthy();
+  });
+
+  it('should clear timer when dismissed by Escape key', () => {
+    // ARRANGE
+    const config = { allowEscapeKey: true, timer: 5000, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate Escape key press
+    const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    alert?.dispatchEvent(escapeEvent);
+    // ASSERT
+    // The overlay should be removed
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+});