Angular应用运行时在浏览器中执行测试的实现方案咨询

要实现类似freeCodeCamp的实时代码测试功能，核心是在浏览器运行时动态执行用户代码，并使用前端测试框架验证其正确性。以下是具体的实现方案和可用工具：

核心思路 #

Angular CLI自带的Karma/Jasmine是用于构建阶段的单元测试，无法直接在运行时处理用户输入的代码。你需要在浏览器环境中嵌入测试框架，动态执行用户代码，然后运行预设的测试用例，最后收集并展示结果。

推荐的框架/库 #

1. Jasmine #

Jasmine本身支持浏览器端运行，无需依赖Karma，是最直接的选择。它的API简洁，内置断言和测试报告能力，适合快速集成。

2. Mocha + Chai #

Mocha是灵活的测试框架，搭配Chai断言库（支持BDD/TDD风格），适合需要自定义测试流程的场景，同样可以在浏览器端运行。

3. Jest（可选） #

Jest主要面向Node.js，但可以通过Browserify或Webpack打包后在浏览器中运行。不过配置稍复杂，适合已有Jest测试用例迁移的场景。

具体实现步骤（以Angular + Jasmine为例） #

1. 集成Jasmine到Angular项目 #

通过npm安装Jasmine：

npm install jasmine --save-dev

在angular.json的scripts和styles中添加Jasmine的文件：

"scripts": [
  "node_modules/jasmine-core/lib/jasmine-core/jasmine.js",
  "node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js",
  "node_modules/jasmine-core/lib/jasmine-core/boot.js"
],
"styles": [
  "node_modules/jasmine-core/lib/jasmine-core/jasmine.css"
]

2. 构建测试组件 #

创建一个组件用于接收用户代码输入、触发测试并展示结果：

<!-- code-tester.component.html -->
<textarea [(ngModel)]="userCode" rows="12" cols="80" placeholder="输入你的JavaScript代码，例如：function add(a,b) { return a + b; }"></textarea>
<button class="test-btn" (click)="runTests()">运行测试</button>

<div class="results-container" *ngIf="testResults.length > 0">
  <h3>测试结果</h3>
  <div *ngFor="let res of testResults" class="result-item">
    <span class="status-icon" [ngClass]="{'passed': res.passed, 'failed': !res.passed}">
      {{ res.passed ? '✓' : '✗' }}
    </span>
    <span class="description">{{ res.description }}</span>
    <p class="error-message" *ngIf="!res.passed">错误：{{ res.error?.message || '未知错误' }}</p>
  </div>
</div>

3. 编写组件逻辑 #

在组件类中实现动态执行用户代码、运行测试并收集结果的逻辑：

// code-tester.component.ts
import { Component } from '@angular/core';

declare var jasmine: any;

@Component({
  selector: 'app-code-tester',
  templateUrl: './code-tester.component.html',
  styleUrls: ['./code-tester.component.css']
})
export class CodeTesterComponent {
  userCode = '';
  testResults: Array<{description: string, passed: boolean, error?: Error}> = [];

  runTests() {
    this.testResults = [];
    const userContext = Object.create(null); // 隔离用户代码的执行上下文

    try {
      // 执行用户代码，限制在独立上下文内
      new Function('', `with(this) { ${this.userCode} }`).call(userContext);

      // 重置Jasmine环境，避免之前的测试影响
      const env = jasmine.getEnv();
      env.clearReporters();
      env.addReporter({
        specDone: (result: any) => {
          this.testResults.push({
            description: result.fullName,
            passed: result.status === 'passed',
            error: result.failedExpectations.length ? result.failedExpectations[0].error : undefined
          });
        }
      });

      // 定义测试用例（根据你的需求自定义）
      describe('用户代码验证', () => {
        it('add函数需正确计算两数之和', () => {
          expect(userContext['add'](2, 3)).toBe(5);
        });
        it('add函数需处理0的情况', () => {
          expect(userContext['add'](0, 5)).toBe(5);
        });
        it('add函数需支持负数相加', () => {
          expect(userContext['add'](-1, -2)).toBe(-3);
        });
      });

      // 执行测试
      env.execute();
    } catch (err) {
      this.testResults.push({
        description: '代码执行失败',
        passed: false,
        error: err as Error
      });
    }
  }
}

4. 安全防护（至关重要） #

执行用户输入的JS代码存在XSS和代码注入风险，必须做隔离处理：

• 使用iframe沙箱：将用户代码和测试逻辑放在带有sandbox="allow-scripts"属性的iframe中运行，禁止访问主页面的DOM和全局对象。
• 静态代码过滤：使用ESLint或自定义规则扫描用户代码，禁止使用eval、document、window等危险API。
• 上下文隔离：始终在独立的对象上下文中执行用户代码，避免污染全局作用域。

其他注意事项 #

• 如果需要支持更复杂的代码（如ES6+语法），可以集成Babel，将用户代码转译为浏览器兼容的版本后再执行。
• 对于大规模测试场景，可以考虑将测试逻辑封装为服务，便于复用和维护。

内容的提问来源于stack exchange，提问作者Smith