openlayers-serializer/quick-function-test.html at main · rgbcmy/openlayers-serializer · 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速功能测试</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.2.1/ol.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 20px;
            background-color: #f5f5f7;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
            color: white;
            border-radius: 8px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            background: #007aff;
            color: white;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
            transition: all 0.2s ease;
        }

        button:hover {
            background: #0056b3;
            transform: translateY(-1px);
        }

        .output {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
            font-size: 13px;
            max-height: 400px;
            overflow-y: auto;
            border-radius: 6px;
            margin-top: 15px;
            white-space: pre-wrap;
        }

        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 6px;
            font-weight: 500;
        }

        .status.success {
            background: #d1f2eb;
            color: #00875a;
            border: 1px solid #79f2c0;
        }

        .status.error {
            background: #ffe6e6;
            color: #d04e4e;
            border: 1px solid #ff9999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>⚡ 快速功能测试</h1>
            <p>验证重构后的序列化器基本功能</p>
        </div>

        <div>
            <button onclick="testModuleLoading()">测试模块加载</button>
            <button onclick="testBasicSerialization()">测试基础序列化</button>
            <button onclick="testIdNameHandling()">测试ID/Name处理</button>
            <button onclick="runAllTests()">运行所有测试</button>
            <button onclick="clearOutput()">清空输出</button>
        </div>

        <div id="status" class="status success">等待测试...</div>
        <div class="output" id="output">等待测试开始...\n</div>
    </div>

    <script type="module">
        let testCount = 0;
        let passCount = 0;

        // 测试模块加载
        window.testModuleLoading = async function() {
            log('🧪 测试模块加载...\n');

            try {
                // 测试source-new模块
                const sourceModule = await import('./src/serializer/source-new.js');
                log('✅ Source模块加载成功');
                log(`支持的Source类型: ${sourceModule.getSupportedSourceTypes().join(', ')}`);

                // 测试layer-new模块
                const layerModule = await import('./src/serializer/layer-new.js');
                log('✅ Layer模块加载成功');
                log(`支持的Layer类型: ${layerModule.getSupportedLayerTypes().join(', ')}`);

                updateStatus('模块加载测试通过', 'success');
                testCount++;
                passCount++;

            } catch (error) {
                log('❌ 模块加载失败:', error.message);
                updateStatus('模块加载测试失败: ' + error.message, 'error');
                testCount++;
            }

            log('');
        };

        // 测试基础序列化
        window.testBasicSerialization = async function() {
            log('🧪 测试基础序列化功能...\n');

            try {
                const { serializeSource, deserializeSource } = await import('./src/serializer/source-new.js');
                const { serializeLayer, deserializeLayer } = await import('./src/serializer/layer-new.js');
                const { Tile as TileLayer } = await import('ol/layer.js');
                const { OSM } = await import('ol/source.js');

                // 测试Source序列化
                testCount++;
                log('测试OSM Source序列化...');
                const osmSource = new OSM();
                const serializedSource = serializeSource(osmSource);
                const deserializedSource = deserializeSource(serializedSource);

                if (deserializedSource instanceof OSM) {
                    log('✅ OSM Source序列化/反序列化成功');
                    passCount++;
                } else {
                    log('❌ OSM Source序列化/反序列化失败');
                }

                // 测试Layer序列化
                testCount++;
                log('测试TileLayer序列化...');
                const tileLayer = new TileLayer({ source: new OSM() });
                const serializedLayer = serializeLayer(tileLayer);
                const deserializedLayer = deserializeLayer(serializedLayer);

                if (deserializedLayer instanceof TileLayer) {
                    log('✅ TileLayer序列化/反序列化成功');
                    passCount++;
                } else {
                    log('❌ TileLayer序列化/反序列化失败');
                }

                updateStatus('基础序列化测试通过', 'success');

            } catch (error) {
                log('❌ 基础序列化测试失败:', error.message);
                updateStatus('基础序列化测试失败: ' + error.message, 'error');
                testCount += 2; // 两个测试都算失败
            }

            log('');
        };

        // 测试ID/Name处理
        window.testIdNameHandling = async function() {
            log('🧪 测试ID/Name处理...\n');

            try {
                const { serializeSource, deserializeSource } = await import('./src/serializer/source-new.js');
                const { serializeLayer, deserializeLayer } = await import('./src/serializer/layer-new.js');
                const { Tile as TileLayer } = await import('ol/layer.js');
                const { OSM } = await import('ol/source.js');

                // 测试Source ID/Name
                testCount++;
                log('测试Source ID/Name...');
                const osmSource = new OSM();
                osmSource.set('id', 'test-osm-123');
                osmSource.set('name', 'Test OSM Source');

                const serializedSource = serializeSource(osmSource);
                const deserializedSource = deserializeSource(serializedSource);

                if (deserializedSource.get('id') === 'test-osm-123' &&
                    deserializedSource.get('name') === 'Test OSM Source') {
                    log('✅ Source ID/Name处理正确');
                    passCount++;
                } else {
                    log('❌ Source ID/Name处理失败');
                    log(`  期望: id=test-osm-123, name=Test OSM Source`);
                    log(`  实际: id=${deserializedSource.get('id')}, name=${deserializedSource.get('name')}`);
                }

                // 测试Layer ID/Name
                testCount++;
                log('测试Layer ID/Name...');
                const tileLayer = new TileLayer({ source: new OSM() });
                tileLayer.set('id', 'test-layer-456');
                tileLayer.set('name', 'Test Tile Layer');

                const serializedLayer = serializeLayer(tileLayer);
                const deserializedLayer = deserializeLayer(serializedLayer);

                if (deserializedLayer.get('id') === 'test-layer-456' &&
                    deserializedLayer.get('name') === 'Test Tile Layer') {
                    log('✅ Layer ID/Name处理正确');
                    passCount++;
                } else {
                    log('❌ Layer ID/Name处理失败');
                    log(`  期望: id=test-layer-456, name=Test Tile Layer`);
                    log(`  实际: id=${deserializedLayer.get('id')}, name=${deserializedLayer.get('name')}`);
                }

                updateStatus('ID/Name处理测试通过', 'success');

            } catch (error) {
                log('❌ ID/Name处理测试失败:', error.message);
                updateStatus('ID/Name处理测试失败: ' + error.message, 'error');
                testCount += 2; // 两个测试都算失败
            }

            log('');
        };

        // 运行所有测试
        window.runAllTests = async function() {
            testCount = 0;
            passCount = 0;

            log('🚀 开始运行所有测试...\n');
            updateStatus('正在运行测试...', 'success');

            await testModuleLoading();
            await testBasicSerialization();
            await testIdNameHandling();

            const successRate = testCount > 0 ? ((passCount / testCount) * 100).toFixed(1) : 0;

            log(`\n🎉 测试完成总结:`);
            log(`✅ 通过: ${passCount}/${testCount} (${successRate}%)`);

            if (passCount === testCount) {
                log(`\n🎯 所有测试通过！重构后的序列化器工作正常！`);
                updateStatus(`所有测试通过！(${passCount}/${testCount})`, 'success');
            } else {
                log(`\n⚠️ 有 ${testCount - passCount} 个测试失败`);
                updateStatus(`部分测试失败 (${passCount}/${testCount})`, 'error');
            }
        };

        // 清空输出
        window.clearOutput = function() {
            document.getElementById('output').textContent = '输出已清空...\n';
            updateStatus('等待测试...', 'success');
            testCount = 0;
            passCount = 0;
        };

        // 辅助函数
        function updateStatus(message, type) {
            const statusEl = document.getElementById('status');
            statusEl.textContent = message;
            statusEl.className = `status ${type}`;
        }

        function log(message) {
            const output = document.getElementById('output');
            const timestamp = new Date().toLocaleTimeString();
            output.textContent += `[${timestamp}] ${message}\n`;
            output.scrollTop = output.scrollHeight;
            console.log(message);
        }

        // 页面加载完成后自动运行测试
        document.addEventListener('DOMContentLoaded', function() {
            log('⚡ 快速功能测试页面启动');
            setTimeout(() => {
                runAllTests();
            }, 500);
        });
    </script>
</body>
</html>