mirror of
https://github.com/Silentely/eSIM-Tools.git
synced 2026-09-03 06:24:20 +08:00
6379bbef90
- 将前端二维码生成从 `qrcode.show` 远程服务切换为 `qrcode-generator` 本地库（UMD 格式），消除对外部 CDN 渲染服务的依赖，降低隐私风险和第三方服务不可用时的故障点 - 重写 `generateQRCodeLocal` 函数适配 `qrcode-generator` API，使用 `qrcode(typeNumber, errorCorrectionLevel).addData().make().createDataURL()` 模式，并基于 QR 码模块数动态计算 `cellSize`，新增大尺寸预览图支持（400px） - 移除所有页面中的 `qrcode.show` 域名引用，包括 CSP `connectSrc` 策略、preconnect 标签、resource-hints DNS 预解析配置及 Simyo/Giffgaff API 配置中的 `qrcode` 端点 - 完善二维码生成的日志与监控：在 CDN 加载成功后输出 `console.log`，本地/后端生成成功及失败时分别输出对应级别日志，并在 `trackQRCodeEvent` 中增加 `isBrowser` 守卫避免非浏览器环境报错 - 增加生成耗时和 QR 码长度（不含内容）到后端 BFF 日志，同时统一使用 `Date.now()` 计算请求耗时，避免 LPA 激活码等敏感信息进入日志 - 全面更新所有相关测试用例，适配新的 `window.qrcode` 工厂函数 mock，新增日志输出和 Sentry 上报断言，验证本地成功、本地失败降级、后端成功、后端失败四种场景的可观测性
1031 lines
42 KiB
HTML
1031 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Giffgaff eSIM 工具 - 测试页面</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous">
|
||
<style>
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.test-header {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.test-section {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.test-section h3 {
|
||
color: #ffcc00;
|
||
border-bottom: 2px solid #ffcc00;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.test-case {
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.test-case h5 {
|
||
color: #212529;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.test-status {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.test-status.pending {
|
||
background: #ffeaa7;
|
||
color: #2d3436;
|
||
}
|
||
|
||
.test-status.running {
|
||
background: #74b9ff;
|
||
color: white;
|
||
}
|
||
|
||
.test-status.passed {
|
||
background: #00b894;
|
||
color: white;
|
||
}
|
||
|
||
.test-status.failed {
|
||
background: #e17055;
|
||
color: white;
|
||
}
|
||
|
||
.btn-test {
|
||
background: linear-gradient(to right, #ffcc00, #ffffff);
|
||
border: none;
|
||
color: #212529;
|
||
padding: 10px 20px;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
margin: 5px;
|
||
}
|
||
|
||
.btn-test:hover {
|
||
background: linear-gradient(to right, #ffffff, #ffcc00);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.test-log {
|
||
background: #2d3436;
|
||
color: #ddd;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 13px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.log-entry {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.log-info { color: #74b9ff; }
|
||
.log-success { color: #00b894; }
|
||
.log-error { color: #e17055; }
|
||
.log-warning { color: #fdcb6e; }
|
||
|
||
.progress {
|
||
height: 25px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.summary-card {
|
||
background: linear-gradient(135deg, #ffcc00, #ffffff);
|
||
color: #212529;
|
||
padding: 20px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.test-controls {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.mock-data {
|
||
background: #f1f3f4;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.mock-data h6 {
|
||
color: #6c757d;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.mock-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 测试标题 -->
|
||
<div class="test-header">
|
||
<h1><i class="fas fa-vial text-warning"></i> Giffgaff eSIM 工具 - 综合测试</h1>
|
||
<p class="mb-0">此测试页面用于验证完整的 eSIM 转换流程的每个步骤和功能点</p>
|
||
</div>
|
||
|
||
<!-- 测试控制面板 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-cogs"></i> 测试控制面板</h3>
|
||
<div class="test-controls">
|
||
<button class="btn-test" onclick="runAllTests()">
|
||
<i class="fas fa-play"></i> 运行所有测试
|
||
</button>
|
||
<button class="btn-test" onclick="runUnitTests()">
|
||
<i class="fas fa-cubes"></i> 单元测试
|
||
</button>
|
||
<button class="btn-test" onclick="runIntegrationTests()">
|
||
<i class="fas fa-link"></i> 集成测试
|
||
</button>
|
||
<button class="btn-test" onclick="runE2ETests()">
|
||
<i class="fas fa-route"></i> 端到端测试
|
||
</button>
|
||
<button class="btn-test" onclick="clearLogs()">
|
||
<i class="fas fa-trash"></i> 清空日志
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 总体进度 -->
|
||
<div class="progress">
|
||
<div id="overallProgress" class="progress-bar progress-bar-striped"
|
||
role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||
0%
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试摘要 -->
|
||
<div id="testSummary" class="summary-card">
|
||
<div class="row">
|
||
<div class="col">
|
||
<span id="totalTests">0</span><br>总测试数
|
||
</div>
|
||
<div class="col">
|
||
<span id="passedTests">0</span><br>通过
|
||
</div>
|
||
<div class="col">
|
||
<span id="failedTests">0</span><br>失败
|
||
</div>
|
||
<div class="col">
|
||
<span id="executionTime">0ms</span><br>执行时间
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模拟数据配置 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-database"></i> 模拟数据配置</h3>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mock-data">
|
||
<h6>OAuth 配置</h6>
|
||
<input type="text" class="mock-input" id="mockClientId"
|
||
placeholder="Client ID" value="4a05bf219b3985647d9b9a3ba610a9ce">
|
||
<input type="text" class="mock-input" id="mockCallbackUrl"
|
||
placeholder="测试回调URL" value="giffgaff://auth/callback/?code=test_auth_code_123&state=test_state">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mock-data">
|
||
<h6>API 响应</h6>
|
||
<input type="text" class="mock-input" id="mockEmailCode"
|
||
placeholder="邮件验证码" value="123456">
|
||
<input type="text" class="mock-input" id="mockMemberId"
|
||
placeholder="会员ID" value="test_member_123">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 单元测试 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-cubes"></i> 单元测试</h3>
|
||
|
||
<div class="test-case">
|
||
<h5>OAuth PKCE 函数测试 <span id="oauth-unit-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试 OAuth PKCE 相关的代码生成和验证函数</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testOAuthFunctions()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>URL 参数解析测试 <span id="url-parsing-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试从回调URL中提取授权码的功能</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testUrlParsing()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>状态管理测试 <span id="state-management-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试应用状态对象的管理和更新</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testStateManagement()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>UI 组件测试 <span id="ui-components-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试步骤指示器、状态显示等UI组件</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testUIComponents()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 集成测试 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-link"></i> 集成测试</h3>
|
||
|
||
<div class="test-case">
|
||
<h5>OAuth 流程集成测试 <span id="oauth-integration-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试完整的OAuth认证流程</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testOAuthIntegration()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>MFA验证集成测试 <span id="mfa-integration-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试邮件验证码的发送和验证流程</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testMFAIntegration()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>GraphQL API集成测试 <span id="graphql-integration-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试与Giffgaff GraphQL API的交互</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testGraphQLIntegration()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>eSIM处理集成测试 <span id="esim-integration-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试eSIM预订、交换和下载的完整流程</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testESIMIntegration()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 端到端测试 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-route"></i> 端到端测试</h3>
|
||
|
||
<div class="test-case">
|
||
<h5>完整 eSIM 转换流程 <span id="e2e-complete-status" class="test-status pending">待执行</span></h5>
|
||
<p>模拟用户从登录到获取eSIM二维码的完整流程</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testCompleteFlow()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>错误处理测试 <span id="e2e-error-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试各种错误情况下的用户体验和错误提示</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testErrorHandling()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>响应式设计测试 <span id="e2e-responsive-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试在不同屏幕尺寸下的界面表现</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testResponsiveDesign()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 性能测试 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-tachometer-alt"></i> 性能测试</h3>
|
||
|
||
<div class="test-case">
|
||
<h5>API响应时间测试 <span id="performance-api-status" class="test-status pending">待执行</span></h5>
|
||
<p>测试各个API调用的响应时间</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testAPIPerformance()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
|
||
<div class="test-case">
|
||
<h5>内存使用测试 <span id="performance-memory-status" class="test-status pending">待执行</span></h5>
|
||
<p>监控应用的内存使用情况</p>
|
||
<button class="btn btn-sm btn-outline-primary" onclick="testMemoryUsage()">
|
||
<i class="fas fa-play"></i> 运行测试
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 测试日志 -->
|
||
<div class="test-section">
|
||
<h3><i class="fas fa-file-alt"></i> 测试日志</h3>
|
||
<div id="testLog" class="test-log">
|
||
<div class="log-entry log-info">[INFO] 测试环境已准备就绪</div>
|
||
<div class="log-entry log-info">[INFO] 等待测试执行...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 测试框架
|
||
class GiffgaffESIMTestFramework {
|
||
constructor() {
|
||
this.tests = [];
|
||
this.results = {
|
||
total: 0,
|
||
passed: 0,
|
||
failed: 0,
|
||
startTime: null,
|
||
endTime: null
|
||
};
|
||
this.logElement = document.getElementById('testLog');
|
||
this.initializeMockFunctions();
|
||
}
|
||
|
||
// 初始化模拟函数
|
||
initializeMockFunctions() {
|
||
// 模拟 Giffgaff API 响应
|
||
this.mockAPIResponses = {
|
||
oauth: {
|
||
success: {
|
||
access_token: "mock_access_token_123",
|
||
token_type: "Bearer",
|
||
expires_in: 3600
|
||
},
|
||
error: {
|
||
error: "invalid_grant",
|
||
error_description: "Invalid authorization code"
|
||
}
|
||
},
|
||
mfaChallenge: {
|
||
success: {
|
||
ref: "mock_ref_123456"
|
||
},
|
||
error: {
|
||
error: "unauthorized",
|
||
message: "Invalid access token"
|
||
}
|
||
},
|
||
mfaValidation: {
|
||
success: {
|
||
signature: "mock_signature_abcdef"
|
||
},
|
||
error: {
|
||
error: "invalid_code",
|
||
message: "Verification code is incorrect"
|
||
}
|
||
},
|
||
memberProfile: {
|
||
success: {
|
||
data: {
|
||
memberProfile: {
|
||
id: "mock_member_123",
|
||
memberName: "Test User",
|
||
__typename: "MemberProfile"
|
||
},
|
||
sim: {
|
||
phoneNumber: "+447700123456",
|
||
status: "ACTIVE",
|
||
__typename: "Sim"
|
||
}
|
||
}
|
||
},
|
||
error: {
|
||
errors: [{
|
||
message: "Unauthorized access",
|
||
extensions: { code: "UNAUTHORIZED" }
|
||
}]
|
||
}
|
||
},
|
||
reserveESim: {
|
||
success: {
|
||
data: {
|
||
reserveESim: {
|
||
id: "mock_reservation_123",
|
||
memberId: "mock_member_123",
|
||
status: "RESERVED",
|
||
esim: {
|
||
ssn: "mock_ssn_123456789",
|
||
activationCode: "mock_activation_code_abc",
|
||
deliveryStatus: "READY",
|
||
__typename: "ESim"
|
||
},
|
||
__typename: "ESimReservation"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
swapSim: {
|
||
success: {
|
||
data: {
|
||
swapSim: {
|
||
old: {
|
||
ssn: "old_ssn_123",
|
||
activationCode: "old_code_123"
|
||
},
|
||
new: {
|
||
ssn: "mock_ssn_123456789",
|
||
activationCode: "mock_activation_code_abc"
|
||
},
|
||
__typename: "SimSwap"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
eSimDownloadToken: {
|
||
success: {
|
||
data: {
|
||
eSimDownloadToken: {
|
||
id: "mock_token_123",
|
||
host: "esim.giffgaff.com",
|
||
matchingId: "mock_matching_123",
|
||
lpaString: "LPA:1$esim.giffgaff.com$mock_activation_code_abc",
|
||
__typename: "ESimDownloadToken"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// 日志记录
|
||
log(message, type = 'info') {
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
const logEntry = document.createElement('div');
|
||
logEntry.className = `log-entry log-${type}`;
|
||
logEntry.textContent = `[${timestamp}] [${type.toUpperCase()}] ${message}`;
|
||
|
||
this.logElement.appendChild(logEntry);
|
||
this.logElement.scrollTop = this.logElement.scrollHeight;
|
||
}
|
||
|
||
// 更新测试状态
|
||
updateTestStatus(testId, status) {
|
||
const statusElement = document.getElementById(testId);
|
||
if (statusElement) {
|
||
statusElement.className = `test-status ${status}`;
|
||
statusElement.textContent = status === 'running' ? '运行中' :
|
||
status === 'passed' ? '通过' :
|
||
status === 'failed' ? '失败' : '待执行';
|
||
}
|
||
}
|
||
|
||
// 更新测试摘要
|
||
updateSummary() {
|
||
document.getElementById('totalTests').textContent = this.results.total;
|
||
document.getElementById('passedTests').textContent = this.results.passed;
|
||
document.getElementById('failedTests').textContent = this.results.failed;
|
||
|
||
if (this.results.endTime && this.results.startTime) {
|
||
const duration = this.results.endTime - this.results.startTime;
|
||
document.getElementById('executionTime').textContent = `${duration}ms`;
|
||
}
|
||
|
||
const progress = this.results.total > 0 ?
|
||
Math.round(((this.results.passed + this.results.failed) / this.results.total) * 100) : 0;
|
||
const progressBar = document.getElementById('overallProgress');
|
||
progressBar.style.width = `${progress}%`;
|
||
progressBar.textContent = `${progress}%`;
|
||
}
|
||
|
||
// 执行测试
|
||
async runTest(testName, testFunction) {
|
||
this.log(`开始执行测试: ${testName}`);
|
||
this.updateTestStatus(testName.toLowerCase().replace(/\s+/g, '-') + '-status', 'running');
|
||
|
||
try {
|
||
const result = await testFunction();
|
||
this.results.passed++;
|
||
this.updateTestStatus(testName.toLowerCase().replace(/\s+/g, '-') + '-status', 'passed');
|
||
this.log(`测试通过: ${testName}`, 'success');
|
||
return result;
|
||
} catch (error) {
|
||
this.results.failed++;
|
||
this.updateTestStatus(testName.toLowerCase().replace(/\s+/g, '-') + '-status', 'failed');
|
||
this.log(`测试失败: ${testName} - ${error.message}`, 'error');
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 睡眠函数
|
||
sleep(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
|
||
// 断言函数
|
||
assert(condition, message) {
|
||
if (!condition) {
|
||
throw new Error(message || 'Assertion failed');
|
||
}
|
||
}
|
||
|
||
assertEqual(actual, expected, message) {
|
||
if (actual !== expected) {
|
||
throw new Error(message || `Expected ${expected}, got ${actual}`);
|
||
}
|
||
}
|
||
|
||
assertTrue(condition, message) {
|
||
this.assert(condition === true, message || 'Expected true');
|
||
}
|
||
|
||
assertFalse(condition, message) {
|
||
this.assert(condition === false, message || 'Expected false');
|
||
}
|
||
}
|
||
|
||
// 全局测试框架实例
|
||
const testFramework = new GiffgaffESIMTestFramework();
|
||
|
||
// 模拟 OAuth 函数 (简化版本)
|
||
function mockGenerateCodeVerifier() {
|
||
// 生成足够长的随机字符串，确保至少43个字符
|
||
let verifier = '';
|
||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
|
||
|
||
// 生成128个字符，然后截取前128个字符（RFC 7636要求43-128个字符）
|
||
for (let i = 0; i < 128; i++) {
|
||
verifier += chars.charAt(Math.floor(Math.random() * chars.length));
|
||
}
|
||
|
||
return verifier.substr(0, 128); // 返回128个字符，远超43个字符的最小要求
|
||
}
|
||
|
||
function mockGenerateCodeChallenge(verifier) {
|
||
// 简化的挑战码生成，实际应该使用SHA256
|
||
return Promise.resolve(btoa(verifier.substr(0, 32)).replace(/[^a-zA-Z0-9]/g, '').substr(0, 43) + 'a'.repeat(Math.max(0, 43 - btoa(verifier.substr(0, 32)).replace(/[^a-zA-Z0-9]/g, '').length)));
|
||
}
|
||
|
||
function mockParseCallbackUrl(url) {
|
||
try {
|
||
const urlObj = new URL(url);
|
||
return {
|
||
code: urlObj.searchParams.get('code'),
|
||
state: urlObj.searchParams.get('state')
|
||
};
|
||
} catch (error) {
|
||
throw new Error('Invalid URL format');
|
||
}
|
||
}
|
||
|
||
// 单元测试函数
|
||
async function testOAuthFunctions() {
|
||
await testFramework.runTest('oauth-unit', async () => {
|
||
// 测试 code verifier 生成
|
||
const verifier = mockGenerateCodeVerifier();
|
||
testFramework.assertTrue(verifier.length >= 43, 'Code verifier should be at least 43 characters');
|
||
testFramework.assertTrue(verifier.length <= 128, 'Code verifier should be at most 128 characters');
|
||
testFramework.assertTrue(/^[a-zA-Z0-9\-._~]+$/.test(verifier), 'Code verifier should only contain allowed characters (RFC 7636)');
|
||
|
||
// 测试 code challenge 生成
|
||
const challenge = await mockGenerateCodeChallenge(verifier);
|
||
testFramework.assertTrue(challenge.length > 0, 'Code challenge should not be empty');
|
||
|
||
await testFramework.sleep(500); // 模拟异步操作
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testUrlParsing() {
|
||
await testFramework.runTest('url-parsing', async () => {
|
||
const testUrl = document.getElementById('mockCallbackUrl').value;
|
||
const parsed = mockParseCallbackUrl(testUrl);
|
||
|
||
testFramework.assertTrue(parsed.code !== null, 'Should extract code from URL');
|
||
testFramework.assertTrue(parsed.state !== null, 'Should extract state from URL');
|
||
testFramework.assertEqual(parsed.code, 'test_auth_code_123', 'Should extract correct code');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testStateManagement() {
|
||
await testFramework.runTest('state-management', async () => {
|
||
// 测试状态对象结构
|
||
const mockState = {
|
||
accessToken: "",
|
||
codeVerifier: "",
|
||
emailCodeRef: "",
|
||
emailSignature: "",
|
||
memberId: "",
|
||
currentStep: 1
|
||
};
|
||
|
||
testFramework.assertTrue(typeof mockState.accessToken === 'string', 'Access token should be string');
|
||
testFramework.assertTrue(typeof mockState.currentStep === 'number', 'Current step should be number');
|
||
|
||
// 测试状态更新
|
||
mockState.accessToken = "test_token";
|
||
mockState.currentStep = 2;
|
||
|
||
testFramework.assertEqual(mockState.accessToken, "test_token", 'Should update access token');
|
||
testFramework.assertEqual(mockState.currentStep, 2, 'Should update current step');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testUIComponents() {
|
||
await testFramework.runTest('ui-components', async () => {
|
||
// 创建临时的步骤指示器进行测试
|
||
const testContainer = document.createElement('div');
|
||
testContainer.innerHTML = `
|
||
<div class="step-indicator">
|
||
<div class="step"><div class="step-number">1</div><div class="step-text">OAuth登录</div></div>
|
||
<div class="step"><div class="step-number">2</div><div class="step-text">邮件验证</div></div>
|
||
<div class="step"><div class="step-number">3</div><div class="step-text">会员信息</div></div>
|
||
<div class="step"><div class="step-number">4</div><div class="step-text">转换 eSIM</div></div>
|
||
<div class="step"><div class="step-number">5</div><div class="step-text">获取二维码</div></div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(testContainer);
|
||
|
||
// 测试步骤指示器
|
||
const steps = document.querySelectorAll('.step');
|
||
testFramework.assertTrue(steps.length === 5, 'Should have 5 steps');
|
||
|
||
// 测试步骤结构
|
||
steps.forEach((step, index) => {
|
||
const stepNumber = step.querySelector('.step-number');
|
||
const stepText = step.querySelector('.step-text');
|
||
testFramework.assertTrue(stepNumber !== null, `Step ${index + 1} should have step number`);
|
||
testFramework.assertTrue(stepText !== null, `Step ${index + 1} should have step text`);
|
||
});
|
||
|
||
// 测试状态显示函数
|
||
const statusElement = document.createElement('div');
|
||
statusElement.className = 'status';
|
||
|
||
// 模拟 showStatus 函数
|
||
function mockShowStatus(element, message, type) {
|
||
element.textContent = message;
|
||
element.className = `status active ${type}`;
|
||
}
|
||
|
||
mockShowStatus(statusElement, "Test message", "success");
|
||
testFramework.assertTrue(statusElement.textContent === "Test message", 'Should set status message');
|
||
testFramework.assertTrue(statusElement.className.includes("success"), 'Should set success class');
|
||
|
||
// 清理测试元素
|
||
document.body.removeChild(testContainer);
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// 集成测试函数
|
||
async function testOAuthIntegration() {
|
||
await testFramework.runTest('oauth-integration', async () => {
|
||
testFramework.log('模拟OAuth认证流程');
|
||
|
||
// 模拟生成认证URL
|
||
const clientId = document.getElementById('mockClientId').value;
|
||
const redirectUri = "giffgaff://auth/callback/";
|
||
const scope = "read";
|
||
|
||
testFramework.assertTrue(clientId.length > 0, 'Client ID should not be empty');
|
||
|
||
// 模拟处理回调
|
||
const callbackUrl = document.getElementById('mockCallbackUrl').value;
|
||
const parsed = mockParseCallbackUrl(callbackUrl);
|
||
|
||
testFramework.assertTrue(parsed.code !== null, 'Should receive authorization code');
|
||
|
||
// 模拟令牌交换 (成功响应)
|
||
await testFramework.sleep(1000);
|
||
const tokenResponse = testFramework.mockAPIResponses.oauth.success;
|
||
testFramework.assertTrue(tokenResponse.access_token !== null, 'Should receive access token');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testMFAIntegration() {
|
||
await testFramework.runTest('mfa-integration', async () => {
|
||
testFramework.log('模拟MFA验证流程');
|
||
|
||
// 模拟发送邮件验证码
|
||
await testFramework.sleep(800);
|
||
const challengeResponse = testFramework.mockAPIResponses.mfaChallenge.success;
|
||
testFramework.assertTrue(challengeResponse.ref !== null, 'Should receive MFA reference');
|
||
|
||
// 模拟验证邮件验证码
|
||
const emailCode = document.getElementById('mockEmailCode').value;
|
||
testFramework.assertTrue(/^\d{6}$/.test(emailCode), 'Email code should be 6 digits');
|
||
|
||
await testFramework.sleep(600);
|
||
const validationResponse = testFramework.mockAPIResponses.mfaValidation.success;
|
||
testFramework.assertTrue(validationResponse.signature !== null, 'Should receive MFA signature');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testGraphQLIntegration() {
|
||
await testFramework.runTest('graphql-integration', async () => {
|
||
testFramework.log('模拟GraphQL API调用');
|
||
|
||
// 模拟获取会员信息
|
||
await testFramework.sleep(700);
|
||
const memberResponse = testFramework.mockAPIResponses.memberProfile.success;
|
||
testFramework.assertTrue(memberResponse.data.memberProfile.id !== null, 'Should get member ID');
|
||
testFramework.assertTrue(memberResponse.data.sim.phoneNumber !== null, 'Should get phone number');
|
||
|
||
// 模拟预订eSIM
|
||
await testFramework.sleep(900);
|
||
const reserveResponse = testFramework.mockAPIResponses.reserveESim.success;
|
||
testFramework.assertTrue(reserveResponse.data.reserveESim.esim.ssn !== null, 'Should get eSIM SSN');
|
||
|
||
// 模拟SIM交换
|
||
await testFramework.sleep(800);
|
||
const swapResponse = testFramework.mockAPIResponses.swapSim.success;
|
||
testFramework.assertTrue(swapResponse.data.swapSim.new.ssn !== null, 'Should get new SSN after swap');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testESIMIntegration() {
|
||
await testFramework.runTest('esim-integration', async () => {
|
||
testFramework.log('模拟eSIM处理流程');
|
||
|
||
// 模拟获取下载令牌
|
||
await testFramework.sleep(1000);
|
||
const tokenResponse = testFramework.mockAPIResponses.eSimDownloadToken.success;
|
||
testFramework.assertTrue(tokenResponse.data.eSimDownloadToken.lpaString !== null, 'Should get LPA string');
|
||
|
||
const lpaString = tokenResponse.data.eSimDownloadToken.lpaString;
|
||
testFramework.assertTrue(lpaString.startsWith('LPA:'), 'LPA string should start with LPA:');
|
||
|
||
// 模拟本地二维码生成（data URL）
|
||
const qrUrl = `data:image/png;base64,mock-qr-${encodeURIComponent(lpaString)}`;
|
||
testFramework.assertTrue(qrUrl.startsWith('data:image/png;base64'), 'Should generate QR code data URL');
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// 端到端测试函数
|
||
async function testCompleteFlow() {
|
||
await testFramework.runTest('e2e-complete', async () => {
|
||
testFramework.log('执行完整流程测试');
|
||
|
||
// 步骤1: OAuth登录
|
||
testFramework.log('步骤1: OAuth登录');
|
||
await testFramework.sleep(500);
|
||
|
||
// 步骤2: 邮件验证
|
||
testFramework.log('步骤2: 邮件验证');
|
||
await testFramework.sleep(600);
|
||
|
||
// 步骤3: 获取会员信息
|
||
testFramework.log('步骤3: 获取会员信息');
|
||
await testFramework.sleep(400);
|
||
|
||
// 步骤4: 转换 eSIM
|
||
testFramework.log('步骤4: 转换 eSIM');
|
||
await testFramework.sleep(800);
|
||
|
||
// 步骤5: 获取二维码
|
||
testFramework.log('步骤5: 获取二维码');
|
||
await testFramework.sleep(700);
|
||
|
||
testFramework.log('完整流程执行成功', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testErrorHandling() {
|
||
await testFramework.runTest('e2e-error', async () => {
|
||
testFramework.log('测试错误处理机制');
|
||
|
||
// 测试无效OAuth回调
|
||
try {
|
||
mockParseCallbackUrl('invalid-url');
|
||
testFramework.assertTrue(false, 'Should throw error for invalid URL');
|
||
} catch (error) {
|
||
testFramework.assertTrue(error.message.includes('Invalid URL'), 'Should handle invalid URL');
|
||
}
|
||
|
||
// 测试无效验证码格式
|
||
const invalidCode = "abc123";
|
||
testFramework.assertFalse(/^\d{6}$/.test(invalidCode), 'Should reject non-numeric codes');
|
||
|
||
// 测试API错误响应
|
||
const errorResponse = testFramework.mockAPIResponses.oauth.error;
|
||
testFramework.assertTrue(errorResponse.error !== null, 'Should handle API errors');
|
||
|
||
testFramework.log('错误处理测试完成', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testResponsiveDesign() {
|
||
await testFramework.runTest('e2e-responsive', async () => {
|
||
testFramework.log('测试响应式设计');
|
||
|
||
// 模拟不同屏幕尺寸
|
||
const viewports = [
|
||
{ width: 1200, name: '桌面端' },
|
||
{ width: 768, name: '平板端' },
|
||
{ width: 480, name: '手机端' }
|
||
];
|
||
|
||
for (const viewport of viewports) {
|
||
testFramework.log(`测试 ${viewport.name} (${viewport.width}px)`);
|
||
|
||
// 检查步骤指示器在小屏幕上的表现
|
||
if (viewport.width <= 768) {
|
||
testFramework.log(`${viewport.name} 布局适配正常`);
|
||
}
|
||
|
||
await testFramework.sleep(200);
|
||
}
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// 性能测试函数
|
||
async function testAPIPerformance() {
|
||
await testFramework.runTest('performance-api', async () => {
|
||
testFramework.log('测试API响应时间');
|
||
|
||
const apiTests = [
|
||
{ name: 'OAuth Token', delay: 800 },
|
||
{ name: 'MFA Challenge', delay: 600 },
|
||
{ name: 'Member Profile', delay: 500 },
|
||
{ name: 'Reserve eSIM', delay: 1000 },
|
||
{ name: 'Swap SIM', delay: 900 }
|
||
];
|
||
|
||
for (const test of apiTests) {
|
||
const startTime = performance.now();
|
||
await testFramework.sleep(test.delay);
|
||
const endTime = performance.now();
|
||
const duration = endTime - startTime;
|
||
|
||
testFramework.log(`${test.name}: ${Math.round(duration)}ms`);
|
||
testFramework.assertTrue(duration < 2000, `${test.name} should respond within 2s`);
|
||
}
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
async function testMemoryUsage() {
|
||
await testFramework.runTest('performance-memory', async () => {
|
||
testFramework.log('监控内存使用');
|
||
|
||
if (performance.memory) {
|
||
const memory = performance.memory;
|
||
testFramework.log(`Used: ${Math.round(memory.usedJSHeapSize / 1024 / 1024)}MB`);
|
||
testFramework.log(`Total: ${Math.round(memory.totalJSHeapSize / 1024 / 1024)}MB`);
|
||
testFramework.log(`Limit: ${Math.round(memory.jsHeapSizeLimit / 1024 / 1024)}MB`);
|
||
|
||
// 检查内存使用是否合理（小于100MB）
|
||
const usedMB = memory.usedJSHeapSize / 1024 / 1024;
|
||
testFramework.assertTrue(usedMB < 100, 'Memory usage should be under 100MB');
|
||
} else {
|
||
testFramework.log('Performance.memory API not available', 'warning');
|
||
}
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// 主要测试函数
|
||
async function runAllTests() {
|
||
testFramework.log('开始执行所有测试', 'info');
|
||
testFramework.results = { total: 0, passed: 0, failed: 0, startTime: performance.now() };
|
||
|
||
try {
|
||
await runUnitTests();
|
||
await runIntegrationTests();
|
||
await runE2ETests();
|
||
await testAPIPerformance();
|
||
await testMemoryUsage();
|
||
} catch (error) {
|
||
testFramework.log(`测试执行出错: ${error.message}`, 'error');
|
||
}
|
||
|
||
testFramework.results.endTime = performance.now();
|
||
testFramework.updateSummary();
|
||
testFramework.log('所有测试执行完成', 'info');
|
||
}
|
||
|
||
async function runUnitTests() {
|
||
testFramework.log('=== 开始单元测试 ===', 'info');
|
||
testFramework.results.total += 4;
|
||
|
||
await testOAuthFunctions();
|
||
await testUrlParsing();
|
||
await testStateManagement();
|
||
await testUIComponents();
|
||
|
||
testFramework.updateSummary();
|
||
}
|
||
|
||
async function runIntegrationTests() {
|
||
testFramework.log('=== 开始集成测试 ===', 'info');
|
||
testFramework.results.total += 4;
|
||
|
||
await testOAuthIntegration();
|
||
await testMFAIntegration();
|
||
await testGraphQLIntegration();
|
||
await testESIMIntegration();
|
||
|
||
testFramework.updateSummary();
|
||
}
|
||
|
||
async function runE2ETests() {
|
||
testFramework.log('=== 开始端到端测试 ===', 'info');
|
||
testFramework.results.total += 3;
|
||
|
||
await testCompleteFlow();
|
||
await testErrorHandling();
|
||
await testResponsiveDesign();
|
||
|
||
testFramework.updateSummary();
|
||
}
|
||
|
||
function clearLogs() {
|
||
testFramework.logElement.innerHTML = '<div class="log-entry log-info">[INFO] 日志已清空</div>';
|
||
|
||
// 重置所有测试状态
|
||
const statusElements = document.querySelectorAll('.test-status');
|
||
statusElements.forEach(element => {
|
||
element.className = 'test-status pending';
|
||
element.textContent = '待执行';
|
||
});
|
||
|
||
// 重置摘要
|
||
testFramework.results = { total: 0, passed: 0, failed: 0 };
|
||
testFramework.updateSummary();
|
||
|
||
// 重置进度条
|
||
const progressBar = document.getElementById('overallProgress');
|
||
progressBar.style.width = '0%';
|
||
progressBar.textContent = '0%';
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
testFramework.log('Giffgaff eSIM 测试框架已初始化', 'success');
|
||
testFramework.updateSummary();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|