JavaScript Mock 模拟中怎么在测试中模拟全屏 API 的调用-js教程-PHP中文网

javascript测试中需手动模拟全屏api，包括document.fullscreenelement、requestfullscreen、exitfullscreen等，以兼容jsdom环境并验证逻辑；可动态控制mock行为覆盖成功、失败及已全屏等场景。

javascript mock 模拟中怎么在测试中模拟全屏 api 的调用

在 JavaScript 测试中模拟全屏 API（如 requestFullscreen()、exitFullscreen()、fullscreenElement 等），关键在于**替换或补全浏览器原生的全屏相关属性和方法**，避免测试因环境不支持（如 Node.js 环境或无 GUI 的 CI）而报错，并能验证逻辑是否正确触发了全屏行为。

补全全局 fullscreen 属性和方法

现代浏览器中全屏 API 是挂载在 document 和 Element 原型上的，但 Jest/JSDOM 默认不支持。需手动注入：

在测试前（如 beforeAll 或 setupFilesAfterEnv）添加以下模拟代码：

// 模拟 document.fullscreenElement
Object.defineProperty(document, 'fullscreenElement', {
  value: null,
  writable: true,
  configurable: true
});

// 模拟 requestFullscreen 方法（Element 原型上）
if (!Element.prototype.requestFullscreen) {
  Object.defineProperty(Element.prototype, 'requestFullscreen', {
    value: jest.fn().mockResolvedValue(undefined),
    writable: true
  });
}

// 模拟 exitFullscreen（document 上）
if (!document.exitFullscreen) {
  Object.defineProperty(document, 'exitFullscreen', {
    value: jest.fn().mockResolvedValue(undefined),
    writable: true
  });
}

// 可选：模拟 fullscreenEnabled（用于判断是否支持）
Object.defineProperty(document, 'fullscreenEnabled', {
  value: true,
  configurable: true
});

按需控制 mock 行为以验证不同场景

真实逻辑常依赖全屏状态（如进入/退出后更新 UI）。可通过修改 mock 返回值来覆盖分支：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

模拟成功进入全屏：document.fullscreenElement = mockElement，再调用被测函数
模拟失败（如用户拒绝）：Element.prototype.requestFullscreen.mockRejectedValue(new Error('Permission denied'))
模拟已处于全屏：document.fullscreenElement = divEl，再测试 exitFullscreen 是否被调用

注意 JSDOM 版本与兼容性

JSDOM ≥ 20.0.0 已初步支持部分全屏 API，但仍不完整：

它实现了 requestFullscreen 但不会真正改变 fullscreenElement，需手动同步状态
推荐仍使用上述 Object.defineProperty 方式显式控制，更稳定可靠
若用旧版 JSDOM（TypeError: element.requestFullscreen is not a function

封装复用：创建 test-utils/fullscreenMock.js

避免每个测试文件重复写 mock，可统一管理：

// test-utils/fullscreenMock.js
export const setupFullscreenMock = () => {
  const mockElement = document.createElement('div');
  
  Object.defineProperty(document, 'fullscreenElement', {
    value: null,
    writable: true
  });

  Object.defineProperty(document, 'fullscreenEnabled', { value: true });

  Object.defineProperty(document, 'exitFullscreen', {
    value: jest.fn().mockResolvedValue(undefined),
    writable: true
  });

  Object.defineProperty(Element.prototype, 'requestFullscreen', {
    value: jest.fn().mockResolvedValue(undefined),
    writable: true
  });

  return { mockElement, document };
};

// 使用示例
// const { mockElement } = setupFullscreenMock();
// document.fullscreenElement = mockElement;