MetonaToast/tests/dom.test.ts

/**
 * MetonaToast DOM 交互测试 — 基于 jsdom 真实 DOM 事件驱动
 * @module tests
 * @version 0.5.0
 */

import MeToast, { Toast } from '../src/index';
import type { ToastInstance } from '../src/types';

// jsdom polyfill: PointerEvent 相关方法
if (typeof Element !== 'undefined') {
  if (!(Element.prototype as unknown as { setPointerCapture?: unknown }).setPointerCapture) {
    (Element.prototype as unknown as Record<string, unknown>).setPointerCapture = jest.fn();
  }
  if (!(Element.prototype as unknown as { releasePointerCapture?: unknown }).releasePointerCapture) {
    (Element.prototype as unknown as Record<string, unknown>).releasePointerCapture = jest.fn();
  }
}

const pointer = (type: string, x: number, y: number): PointerEvent =>
  new MouseEvent(type, { clientX: x, clientY: y, bubbles: true }) as unknown as PointerEvent;

beforeEach(() => {
  jest.clearAllMocks();
  MeToast._toasts.clear();
  MeToast.resetConfig();
  (MeToast as unknown as { _destroyed?: boolean })._destroyed = false;
  Toast._hooks.clear();
  Toast._registry.clear();
  const { _containerCache } = require('../src/toast.js');
  _containerCache.clear();
  MeToast.animations.destroy();
  MeToast.animations.reset();
});

describe('toast.ts — DOM 交互', () => {
  test('onShow 回调异常被捕获', () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    MeToast.success('x', { onShow: () => { throw new Error('show-err'); } });
    expect(consoleError).toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('onUpdate 回调异常被捕获', () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    const t = MeToast.success('x', { onUpdate: () => { throw new Error('upd-err'); } });
    t.update({ message: 'y' });
    expect(consoleError).toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('_applyStyles 字符串 width 生效', () => {
    const t = MeToast.info({ message: 'w', width: '80%' });
    expect(t.el!.style.width).toBe('80%');
  });

  test('点击 close 按钮关闭 toast 且不触发 click 钩子', () => {
    const fn = jest.fn();
    Toast.on('click', fn);
    const t = MeToast.info('test');
    const closeBtn = t.el!.querySelector('.met-close') as HTMLElement;
    closeBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    expect(t.closing).toBe(true);
    expect(fn).not.toHaveBeenCalled();
    Toast.off('click', fn);
  });

  test('点击主体触发 onClick 并关闭', () => {
    const onClick = jest.fn();
    const t = MeToast.info('test', { onClick });
    t.el!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    expect(onClick).toHaveBeenCalledWith(t);
    expect(t.closing).toBe(true);
  });

  test('onClick 回调异常被捕获', () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    const t = MeToast.info('test', { onClick: () => { throw new Error('click-err'); } });
    t.el!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    expect(consoleError).toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('closeOnClick false 时点击不关闭但触发 click 钩子', () => {
    const fn = jest.fn();
    Toast.on('click', fn);
    const t = MeToast.info('test', { closeOnClick: false });
    t.el!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    expect(t.closing).toBe(false);
    expect(fn).toHaveBeenCalled();
    Toast.off('click', fn);
  });

  test('hover 触发暂停/恢复与 hover 钩子', () => {
    const fn = jest.fn();
    Toast.on('hover', fn);
    const t = MeToast.info({ message: 'h', duration: 5000 });
    t.el!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
    expect(t.paused).toBe(true);
    t.el!.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
    expect(t.paused).toBe(false);
    expect(fn.mock.calls.length).toBeGreaterThanOrEqual(2);
    Toast.off('hover', fn);
  });

  test('animationstart/animationend 触发钩子', () => {
    const start = jest.fn();
    const end = jest.fn();
    Toast.on('animationStart', start);
    Toast.on('animationEnd', end);
    const t = MeToast.info('a');
    t.el!.dispatchEvent(new Event('animationstart'));
    t.el!.dispatchEvent(new Event('animationend'));
    expect(start).toHaveBeenCalled();
    expect(end).toHaveBeenCalled();
    Toast.off('animationStart', start);
    Toast.off('animationEnd', end);
  });

  test('拖拽 down→move→up 超过阈值触发关闭', (done) => {
    const t = MeToast.info('drag', { duration: 5000 });
    const el = t.el!;
    el.dispatchEvent(pointer('pointerdown', 100, 50));
    el.dispatchEvent(pointer('pointermove', 250, 60));
    expect(el.style.transform).toContain('translate(150px');
    expect(el.style.opacity).toBe('0.25');
    el.dispatchEvent(pointer('pointerup', 250, 60));
    expect(el.style.opacity).toBe('0');
    setTimeout(() => {
      expect(t.closing).toBe(true);
      done();
    }, 350);
  });

  test('拖拽未超阈值松手恢复', () => {
    const t = MeToast.info('drag2', { duration: 5000 });
    const el = t.el!;
    el.dispatchEvent(pointer('pointerdown', 100, 50));
    el.dispatchEvent(pointer('pointermove', 150, 60));
    el.dispatchEvent(pointer('pointerup', 150, 60));
    expect(t.closing).toBe(false);
    expect(t.paused).toBe(false);
    expect(el.style.transform).toBe('');
  });

  test('拖拽触发 dragStart/dragEnd 钩子', () => {
    const start = jest.fn();
    const end = jest.fn();
    Toast.on('dragStart', start);
    Toast.on('dragEnd', end);
    const t = MeToast.info('d', { duration: 5000 });
    const el = t.el!;
    el.dispatchEvent(pointer('pointerdown', 0, 0));
    el.dispatchEvent(pointer('pointerup', 0, 0));
    expect(start).toHaveBeenCalled();
    expect(end).toHaveBeenCalled();
    Toast.off('dragStart', start);
    Toast.off('dragEnd', end);
  });

  test('pointercancel 等价于 pointerup', () => {
    const t = MeToast.info('pc', { duration: 5000 });
    const el = t.el!;
    el.dispatchEvent(pointer('pointerdown', 10, 10));
    el.dispatchEvent(pointer('pointercancel', 10, 10));
    expect(t.closing).toBe(false);
  });

  test('拖拽从 close 按钮按下时早退', () => {
    const t = MeToast.info('dc', { duration: 5000 });
    const closeBtn = t.el!.querySelector('.met-close') as HTMLElement;
    closeBtn.dispatchEvent(pointer('pointerdown', 0, 0));
    expect(t.paused).toBe(false);
  });

  test('close 非 immediate 走离场动画并清理', (done) => {
    const t = MeToast.info('anim-close');
    t.close();
    expect(t.el!.classList.contains('met-leaving')).toBe(true);
    setTimeout(() => {
      expect(t.el).toBeNull();
      expect(MeToast.count()).toBe(0);
      done();
    }, 400);
  });

  test('updatePosition 移动到新容器', () => {
    const t = MeToast.info('move', { position: 'top-left' });
    t.updatePosition('bottom-right');
    expect(t.config.position).toBe('bottom-right');
    expect(t.el!.parentElement!.className).toContain('bottom-right');
  });

  test('updatePosition 同位置直接返回', () => {
    const t = MeToast.info('same');
    const container = t.el!.parentElement;
    t.updatePosition('top-right');
    expect(t.el!.parentElement).toBe(container);
  });

  test('_limitToasts registry 无实例时走 _removeToast 兜底', () => {
    const el = document.createElement('div');
    const ghost = document.createElement('div');
    ghost.dataset.id = 'ghost-id';
    (el.querySelectorAll as unknown) = () => [ghost];
    const t = new Toast({ message: 'x', max: 0 });
    expect(() => t._limitToasts(el)).not.toThrow();
  });

  test('remove() 清理注册表与内存', () => {
    const t = MeToast.info('rm');
    expect(Toast._registry.has(t.id)).toBe(true);
    t.remove();
    expect(Toast._registry.has(t.id)).toBe(false);
    expect(MeToast.count()).toBe(0);
  });
});

describe('api.ts — 对话框与按钮交互', () => {
  test('confirm 点击确认按钮 resolve true', async () => {
    const promise = MeToast.confirm('确定删除？');
    await new Promise(r => setTimeout(r, 10));
    const toast = MeToast.getToasts()[0];
    (toast.el!.querySelector('.met-confirm-btn') as HTMLElement).click();
    const result = await promise;
    expect(result).toBe(true);
  });

  test('confirm 点击取消按钮 resolve false', async () => {
    const promise = MeToast.confirm('确定删除？');
    await new Promise(r => setTimeout(r, 10));
    const toast = MeToast.getToasts()[0];
    (toast.el!.querySelector('.met-cancel-btn') as HTMLElement).click();
    const result = await promise;
    expect(result).toBe(false);
  });

  test('prompt Enter 提交输入值', async () => {
    const promise = MeToast.prompt('请输入姓名');
    await new Promise(r => setTimeout(r, 10));
    const toast = MeToast.getToasts()[0];
    const input = toast.el!.querySelector('.met-input') as HTMLInputElement;
    input.value = '张三';
    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
    const result = await promise;
    expect(result).toBe('张三');
  });

  test('prompt 点击提交按钮', async () => {
    const promise = MeToast.prompt('请输入姓名');
    await new Promise(r => setTimeout(r, 10));
    const toast = MeToast.getToasts()[0];
    const input = toast.el!.querySelector('.met-input') as HTMLInputElement;
    input.value = '李四';
    (toast.el!.querySelector('.met-submit-btn') as HTMLElement).click();
    const result = await promise;
    expect(result).toBe('李四');
  });

  test('prompt 点击取消按钮 resolve null', async () => {
    const promise = MeToast.prompt('请输入姓名');
    await new Promise(r => setTimeout(r, 10));
    const toast = MeToast.getToasts()[0];
    (toast.el!.querySelector('.met-cancel-btn') as HTMLElement).click();
    const result = await promise;
    expect(result).toBeNull();
  });

  test('action 按钮点击触发回调并关闭', async () => {
    const onClick = jest.fn();
    const a = MeToast.action('msg', [{ text: 'OK', onClick }]);
    await new Promise(r => setTimeout(r, 10));
    (a.toast.el!.querySelector('.met-action-btn-0') as HTMLElement).click();
    expect(onClick).toHaveBeenCalledWith(a.toast);
    expect(a.toast.closing).toBe(true);
  });

  test('action 按钮 close:false 点击不关闭', async () => {
    const onClick = jest.fn();
    const a = MeToast.action('msg', [{ text: 'Keep', onClick, close: false }]);
    await new Promise(r => setTimeout(r, 10));
    (a.toast.el!.querySelector('.met-action-btn-0') as HTMLElement).click();
    expect(a.toast.closing).toBe(false);
  });

  test('action 按钮 onClick 异常被捕获', async () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    const a = MeToast.action('msg', [{ text: 'Boom', onClick: () => { throw new Error('act-err'); } }]);
    await new Promise(r => setTimeout(r, 10));
    (a.toast.el!.querySelector('.met-action-btn-0') as HTMLElement).click();
    expect(consoleError).toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('countdown onComplete 异常被捕获', (done) => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    MeToast.countdown('{seconds} 秒', 1, { onComplete: () => { throw new Error('cd-err'); } });
    setTimeout(() => {
      expect(consoleError).toHaveBeenCalled();
      consoleError.mockRestore();
      done();
    }, 1600);
  });

  test('loading control 支持 update 与 dismiss', () => {
    const l = MeToast.loading('l1');
    l.update({ message: 'l2' });
    const toast = MeToast.find(l.id);
    expect(toast!.message).toBe('l2');
    l.dismiss();
    expect(toast!.closing).toBe(true);
  });

  test('group 单对象参数分支', () => {
    const g = MeToast.group('obj-group');
    const t = g.show({ message: 'obj-arg' });
    expect(t.group).toBe('obj-group');
    expect(t.message).toBe('obj-arg');
    g.dismiss();
  });

  test('queue 消息级 onClose 异常被静默捕获', async () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    const q = MeToast.queue([
      { message: 'a', onClose: () => { throw new Error('q-err'); } },
    ], { delay: 5, duration: 10 });
    await q;
    expect(consoleError).not.toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('_remove 从内存移除指定 id', () => {
    const t = MeToast.info('x');
    MeToast._remove(t.id);
    expect(MeToast.count()).toBe(0);
  });
});

describe('plugins.ts — 异常与钩子管理', () => {
  test('插件 install 抛错被捕获', () => {
    const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
    MeToast.plugins.register('bad-install', { name: 'bad-install', install: () => { throw new Error('install-err'); } });
    expect(consoleError).toHaveBeenCalled();
    consoleError.mockRestore();
  });

  test('keyboard 插件 install/uninstall 移除事件监听', () => {
    MeToast.use('keyboard');
    MeToast.plugins.unregister('keyboard');
    expect(MeToast.plugins.has('keyboard')).toBe(false);
  });

  test('persistence 插件 save 异常被捕获', () => {
    const spy = jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('quota'); });
    const pluginUtils = require('../src/plugins.js').pluginUtils;
    const preset = pluginUtils.getPreset('persistence');
    const saveFn = (preset as Record<string, (c: unknown) => void>).save;
    expect(() => saveFn({ duration: 3000 })).not.toThrow();
    spy.mockRestore();
  });

  test('persistence 插件 uninstall removeItem 异常被捕获', () => {
    const spy = jest.spyOn(Storage.prototype, 'removeItem').mockImplementation(() => { throw new Error('quota'); });
    const pluginUtils = require('../src/plugins.js').pluginUtils;
    const preset = pluginUtils.getPreset('persistence');
    expect(() => preset?.uninstall?.()).not.toThrow();
    spy.mockRestore();
  });
});