md2page/test-clean.html at main · Kaiyuan/md2page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清理版本测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            line-height: 1.6;
        }

        h1 {
            color: #333;
            border-bottom: 2px solid #007acc;
            padding-bottom: 0.5rem;
        }

        #test-results {
            background: #f8f9fa;
            border: 1px solid #e1e5e9;
            border-radius: 6px;
            padding: 1rem;
            margin: 1rem 0;
            max-height: 400px;
            overflow-y: auto;
        }

        #test-results p {
            margin: 0.5rem 0;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.9rem;
        }

        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #17a2b8; }
    </style>
</head>
<body>
    <h1>清理版本类库测试</h1>
    <div id="test-results">
        <p>正在测试清理版本的类库...</p>
    </div>

    <!-- 引入 marked.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>

    <!-- 应用脚本 - 使用清理版本 -->
    <script src="./js/classes-clean.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const resultsDiv = document.getElementById('test-results');

            function addResult(message, type = 'info') {
                const p = document.createElement('p');
                p.textContent = message;
                p.className = type;
                resultsDiv.appendChild(p);
                console.log(message);
            }

            addResult('页面加载完成，开始测试清理版本...', 'info');

            // 检查依赖库
            if (typeof marked === 'undefined') {
                addResult('❌ marked.js 库未加载', 'error');
                return;
            } else {
                addResult('✅ marked.js 库加载成功', 'success');
            }

            // 测试类定义
            const classTests = [
                ['MarkdownConverter', MarkdownConverter],
                ['FileHandler', FileHandler],
                ['ThemeManager', ThemeManager],
                ['PrintOptimizer', PrintOptimizer],
                ['ErrorHandler', ErrorHandler]
            ];

            let allClassesDefined = true;

            classTests.forEach(([name, cls]) => {
                if (typeof cls === 'function') {
                    addResult(`✅ ${name} 类定义正确`, 'success');
                } else {
                    addResult(`❌ ${name} 类未定义或不是函数`, 'error');
                    allClassesDefined = false;
                }
            });

            if (!allClassesDefined) {
                addResult('❌ 部分类未正确定义，停止测试', 'error');
                return;
            }

            // 测试实例创建
            addResult('开始测试实例创建...', 'info');

            try {
                const converter = new MarkdownConverter();
                addResult('✅ MarkdownConverter 实例创建成功', 'success');

                const fileHandler = new FileHandler();
                addResult('✅ FileHandler 实例创建成功', 'success');

                const themeManager = new ThemeManager();
                addResult('✅ ThemeManager 实例创建成功', 'success');

                const printOptimizer = new PrintOptimizer();
                addResult('✅ PrintOptimizer 实例创建成功', 'success');

                const errorHandler = new ErrorHandler();
                addResult('✅ ErrorHandler 实例创建成功', 'success');

                addResult('🎉 所有类都正常工作！', 'success');

                // 测试基本功能
                addResult('开始测试基本功能...', 'info');
                const testMarkdown = '# 测试标题\n\n这是一个测试段落。\n\n## 二级标题\n\n- 列表项1\n- 列表项2';
                const html = converter.parseMarkdown(testMarkdown);

                if (html && html.includes('<h1') && html.includes('<h2') && html.includes('<ul>')) {
                    addResult('✅ Markdown 解析测试成功', 'success');
                    addResult(`解析结果预览: ${html.substring(0, 100)}...`, 'info');
                } else {
                    addResult('❌ Markdown 解析测试失败', 'error');
                }

                // 测试主题管理
                const currentTheme = themeManager.getCurrentTheme();
                addResult(`✅ 当前主题: ${currentTheme}`, 'success');

                // 测试文件名生成
                const filename = fileHandler.generateFilename(html);
                addResult(`✅ 生成文件名: ${filename}`, 'success');

                addResult('🎉 所有测试完成！清理版本工作正常！', 'success');

            } catch (error) {
                addResult(`❌ 测试失败: ${error.message}`, 'error');
                console.error('详细错误:', error);
            }
        });

        // 全局错误处理
        window.addEventListener('error', function(e) {
            const resultsDiv = document.getElementById('test-results');
            if (resultsDiv) {
                const p = document.createElement('p');
                p.textContent = `❌ 全局错误: ${e.message}`;
                p.className = 'error';
                resultsDiv.appendChild(p);
            }
            console.error('全局错误:', e);
        });
    </script>
</body>
</html>