md2page/app-test.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
<!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: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }
        .test-result {
            padding: 0.5rem;
            margin: 0.5rem 0;
            border-radius: 4px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>应用完整性测试</h1>
    <div id="results"></div>

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

    <!-- 引入 Prism.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

    <!-- 应用脚本 -->
    <script src="./js/classes.js"></script>
    <script src="./js/main.js"></script>

    <script>
        function addResult(message, type = 'info') {
            const div = document.createElement('div');
            div.className = `test-result ${type}`;
            div.textContent = message;
            document.getElementById('results').appendChild(div);
            console.log(message);
        }

        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            addResult('开始应用完整性测试...', 'info');

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

            // 检查核心类
            const coreClasses = [
                'MarkdownConverter', 'FileHandler', 'ThemeManager',
                'PrintOptimizer', 'ErrorHandler', 'InputPanel',
                'PreviewPanel', 'ThemeToggle', 'EnhancedApp'
            ];

            let allClassesOk = true;
            coreClasses.forEach(className => {
                if (typeof window[className] === 'function') {
                    addResult(`✅ ${className} 类定义正确`, 'success');
                } else {
                    addResult(`❌ ${className} 类未定义`, 'error');
                    allClassesOk = false;
                }
            });

            if (!allClassesOk) {
                addResult('❌ 部分核心类未定义，应用可能无法正常工作', 'error');
                return;
            }

            // 检查App类
            if (typeof App === 'function') {
                addResult('✅ App 类定义正确', 'success');

                try {
                    // 模拟创建App实例（不实际初始化）
                    const testApp = Object.create(App.prototype);
                    addResult('✅ App 类可以实例化', 'success');
                } catch (error) {
                    addResult(`❌ App 类实例化失败: ${error.message}`, 'error');
                }
            } else {
                addResult('❌ App 类未定义', 'error');
            }

            // 测试基本功能
            try {
                const converter = new MarkdownConverter();
                const html = converter.parseMarkdown('# 测试\n\n这是一个测试。');
                if (html.includes('<h1') && html.includes('<p>')) {
                    addResult('✅ Markdown 转换功能正常', 'success');
                } else {
                    addResult('❌ Markdown 转换功能异常', 'error');
                }

                const fileHandler = new FileHandler();
                const filename = fileHandler.generateFilename(html);
                if (filename && filename.length > 0) {
                    addResult('✅ 文件名生成功能正常', 'success');
                } else {
                    addResult('❌ 文件名生成功能异常', 'error');
                }

                const themeManager = new ThemeManager();
                const theme = themeManager.getCurrentTheme();
                if (theme && ['light', 'dark', 'auto'].includes(theme)) {
                    addResult('✅ 主题管理功能正常', 'success');
                } else {
                    addResult('❌ 主题管理功能异常', 'error');
                }

                addResult('🎉 所有测试通过！应用可以正常使用！', 'success');
                addResult('现在可以打开 index.html 使用完整应用', 'info');

            } catch (error) {
                addResult(`❌ 功能测试失败: ${error.message}`, 'error');
            }
        });
    </script>
</body>
</html>