@cloudcome/utils-browser 0.0.0 → 1.1.1

package/test/image.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from 'vitest';
+import { imageLoad } from '../src/image';
+
+describe('图片工具函数', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('应该能够成功加载图片', async () => {
+    const mockImage = new Image();
+    vi.spyOn(window, 'Image').mockReturnValue(mockImage);
+    vi.spyOn(document.body, 'appendChild');
+    vi.spyOn(document.body, 'removeChild');
+
+    const url = 'https://example.com/image.png';
+    const promise = imageLoad(url);
+
+    mockImage.onload?.({} as Event);
+    const result = await promise;
+
+    expect(result).toBe(mockImage);
+    expect(mockImage.src).toBe(url);
+    expect(mockImage.crossOrigin).toBe('anonymous');
+    expect(document.body.appendChild).toHaveBeenCalledWith(mockImage);
+    expect(document.body.removeChild).toHaveBeenCalledWith(mockImage);
+  });
+
+  it('图片加载失败时应抛出错误', async () => {
+    const mockImage = new Image();
+    vi.spyOn(window, 'Image').mockReturnValue(mockImage);
+
+    const url = 'https://example.com/invalid.png';
+    const promise = imageLoad(url);
+
+    mockImage.onerror?.({} as Event);
+
+    await expect(promise).rejects.toThrow('图片加载失败');
+  });
+
+  it('如果图片已经加载完成应立即返回', async () => {
+    const mockImage = new Image();
+    vi.spyOn(window, 'Image').mockReturnValue(mockImage);
+    Object.defineProperty(mockImage, 'complete', { value: true });
+    Object.defineProperty(mockImage, 'width', { value: 100 });
+
+    const url = 'https://example.com/image.png';
+    const result = await imageLoad(url);
+
+    expect(result).toBe(mockImage);
+  });
+
+  it('应该为图片元素设置正确的样式', async () => {
+    const mockImage = new Image();
+    vi.spyOn(window, 'Image').mockReturnValue(mockImage);
+
+    const url = 'https://example.com/image.png';
+    const promise = imageLoad(url);
+
+    mockImage.onload?.({} as Event);
+    await promise;
+
+    expect(mockImage.style.visibility).toBe('hidden');
+    expect(mockImage.style.position).toBe('absolute');
+    expect(mockImage.style.top).toBe('-99999%');
+    expect(mockImage.style.left).toBe('-99999%');
+    expect(mockImage.style.maxWidth).toBe('');
+    expect(mockImage.style.maxHeight).toBe('');
+    expect(mockImage.style.border).toBe('0px');
+    expect(mockImage.style.width).toBe('auto');
+    expect(mockImage.style.height).toBe('auto');
+    expect(mockImage.style.margin).toBe('0px');
+    expect(mockImage.style.padding).toBe('0px');
+    expect(mockImage.style.transform).toBe('');
+  });
+});

package/test/index.test.ts

@@ -0,0 +1,6 @@
+import { VERSION } from '@/index';
+import { expect, it } from 'vitest';
+
+it('version', () => {
+  expect(VERSION).toEqual(PKG_VERSION);
+});

package/test/timer.test.ts

@@ -0,0 +1,109 @@
+import { frameInterval } from '@/timer';
+import { type Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+describe('帧间隔计时器', () => {
+  let mockRAF: number;
+  let mockCAF: Mock;
+  let callbacks: FrameRequestCallback[] = [];
+
+  beforeEach(() => {
+    mockRAF = 0;
+    callbacks = [];
+    mockCAF = vi.fn();
+
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      callbacks.push(cb);
+      return ++mockRAF;
+    });
+
+    vi.stubGlobal('cancelAnimationFrame', mockCAF);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('启动时应在每一帧调用回调函数', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback);
+
+    timer.start();
+    callbacks[0]?.(0);
+    const arg = callback.mock.calls[0][0];
+    expect(Object.keys(arg)).toEqual(
+      expect.arrayContaining([
+        'times',
+        'startAt',
+        'stopAt',
+        'pauseAt',
+        'resumeAt',
+        'currentAt',
+        'elapsedTime',
+        'runningTime',
+        'intervalTime',
+      ]),
+    );
+  });
+
+  it('应该支持 leading 选项', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback, { leading: true });
+
+    timer.start();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('停止时应支持 trailing 选项', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback, { trailing: true });
+
+    timer.start();
+    callbacks[0]?.(0);
+
+    timer.stop();
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(mockCAF).toHaveBeenCalledWith(mockRAF);
+  });
+
+  it('暂停时应支持 trailing 选项', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback, { trailing: true });
+
+    timer.start();
+    callbacks[0]?.(0);
+
+    timer.pause();
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(mockCAF).toHaveBeenCalledWith(mockRAF);
+  });
+
+  it('使用 immediate 标志时应立即恢复', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback);
+
+    timer.start();
+    callbacks[0]?.(0);
+    timer.pause();
+
+    timer.resume(true);
+    callbacks[1]?.(16);
+
+    expect(callback).toHaveBeenCalledTimes(3);
+    expect(callback.mock.calls[1][0].times).toBe(2);
+  });
+
+  it('不使用 immediate 标志时应下一帧恢复', () => {
+    const callback = vi.fn();
+    const timer = frameInterval(callback);
+
+    timer.start();
+    callbacks[0]?.(0);
+    timer.pause();
+
+    timer.resume();
+    callbacks[1]?.(16);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback.mock.calls[0][0].times).toBe(1);
+  });
+});

package/test/video.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest';
+import { videoLoad } from '../src/video';
+
+describe('视频工具函数', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('应该能够成功加载视频', async () => {
+    const mockVideo = document.createElement('video');
+    vi.spyOn(document, 'createElement').mockReturnValue(mockVideo);
+
+    const url = 'https://example.com/video.mp4';
+    const promise = videoLoad(url);
+
+    mockVideo.onloadedmetadata?.({} as Event);
+    const result = await promise;
+
+    expect(result).toBe(mockVideo);
+    expect(mockVideo.src).toBe(url);
+    expect(mockVideo.crossOrigin).toBe('anonymous');
+    expect(mockVideo.currentTime).toBe(1);
+  });
+
+  it('视频加载失败时应抛出错误', async () => {
+    const mockVideo = document.createElement('video');
+    vi.spyOn(document, 'createElement').mockReturnValue(mockVideo);
+
+    const url = 'https://example.com/invalid.mp4';
+    const promise = videoLoad(url);
+
+    mockVideo.onerror?.({} as Event);
+
+    await expect(promise).rejects.toThrow('视频加载失败');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "target": "ES2024",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    "strict": true,
+    "noEmit": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": false,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "lib": ["ES2024", "DOM"],
+    "types": ["node", "vite/client", "vitest/globals"],
+    "plugins": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "include": ["**/*.ts", "**/.*.ts", "**/*.mts", "**/*.tsx", "**/*.vue"],
+  "exclude": []
+}

package/vite.config.mts

@@ -0,0 +1,100 @@
+/**
+ * @file vite.config.mts
+ * @ref https://vitejs.dev/
+ */
+
+import dts from 'vite-plugin-dts';
+import { externalizeDeps } from 'vite-plugin-externalize-deps';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+import pkg from './package.json';
+
+export default defineConfig((env) => {
+  const isProd = env.mode === 'production';
+  const isTest = env.mode === 'test';
+
+  return {
+    base: '/',
+    server: {
+      port: 15170,
+    },
+    preview: {
+      port: 15171,
+    },
+    define: {
+      PKG_NAME: JSON.stringify(isTest ? 'pkg-name-for-test' : pkg.name),
+      PKG_VERSION: JSON.stringify(isTest ? 'pkg-version-for-test' : pkg.version),
+      PKG_DESCRIPTION: JSON.stringify(isTest ? 'pkg-description-for-test' : pkg.description),
+      IS_TEST: JSON.stringify(isTest),
+    },
+    build: {
+      minify: false,
+      sourcemap: true,
+      copyPublicDir: false,
+      reportCompressedSize: false,
+      lib: {
+        entry:
+          // expose-start
+          {
+            index: 'src/index.ts',
+            base64: './src/base64.ts',
+            cache: './src/cache.ts',
+            canvas: './src/canvas.ts',
+            clipboard: './src/clipboard.ts',
+            cookie: './src/cookie.ts',
+            dom: './src/dom.ts',
+            download: './src/download.ts',
+            image: './src/image.ts',
+            timer: './src/timer.ts',
+            video: './src/video.ts',
+          },
+        // expose-end
+      },
+      rollupOptions: {
+        output: [
+          {
+            format: 'esm',
+            entryFileNames: '[name].mjs',
+            chunkFileNames: '[name].mjs',
+          },
+          {
+            format: 'cjs',
+            entryFileNames: '[name].cjs',
+            chunkFileNames: '[name].cjs',
+          },
+        ],
+      },
+    },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      environmentOptions: {
+        jsdom: {
+          // 加载外部资源
+          resources: 'usable',
+        },
+      },
+      coverage: {
+        all: true,
+        include: ['src/**/*.ts'],
+        reporter: ['lcov', 'text'],
+      },
+    },
+    // esbuild: {
+    //   drop: isProd ? ['console', 'debugger'] : [],
+    // },
+    plugins: [
+      tsconfigPaths(),
+      externalizeDeps({
+        deps: true,
+        devDeps: true,
+        peerDeps: true,
+        optionalDeps: true,
+        nodeBuiltins: true,
+      }),
+      dts({
+        include: 'src',
+      }),
+    ],
+  };
+});