tymer/test-rounding.html at main · benabraham/tymer · 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
<!DOCTYPE html>
<html>
<head>
    <title>Timer Rounding Test</title>
    <style>
        body {
            font-family: monospace;
            padding: 20px;
            background: #222;
            color: #fff;
        }
        .test-case {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #555;
        }
        .pass { color: #0f0; }
        .fail { color: #f00; }
        table {
            border-collapse: collapse;
            margin: 10px 0;
        }
        td, th {
            padding: 8px;
            border: 1px solid #555;
            text-align: left;
        }
        th { background: #333; }
    </style>
</head>
<body>
    <h1>Timer Rounding Test</h1>
    <div id="results"></div>

    <script type="module">
        // Test the formatTime function with various scenarios
        import { formatTime } from './src/lib/format.js'

        const testCases = [
            {
                name: "12 minute period - 2 minutes elapsed",
                totalMs: 12 * 60 * 1000,  // 12 minutes
                elapsedMs: 2 * 60 * 1000 + 15 * 1000,  // 2 minutes 15 seconds
                remainingMs: 9 * 60 * 1000 + 45 * 1000,  // 9 minutes 45 seconds
            },
            {
                name: "48 minute period - near completion",
                totalMs: 48 * 60 * 1000,  // 48 minutes
                elapsedMs: 47 * 60 * 1000 + 50 * 1000,  // 47 minutes 50 seconds
                remainingMs: 10 * 1000,  // 10 seconds
            },
            {
                name: "60 minute period - halfway",
                totalMs: 60 * 60 * 1000,  // 60 minutes
                elapsedMs: 29 * 60 * 1000 + 30 * 1000,  // 29 minutes 30 seconds
                remainingMs: 30 * 60 * 1000 + 30 * 1000,  // 30 minutes 30 seconds
            },
            {
                name: "Edge case: 1 second remaining",
                totalMs: 10 * 60 * 1000,  // 10 minutes
                elapsedMs: 9 * 60 * 1000 + 59 * 1000,  // 9 minutes 59 seconds
                remainingMs: 1 * 1000,  // 1 second
            }
        ]

        const resultsDiv = document.getElementById('results')

        testCases.forEach(test => {
            const div = document.createElement('div')
            div.class = 'test-case'

            const totalFormatted = formatTime(test.totalMs, false, false)
            const elapsedFormatted = formatTime(test.elapsedMs, true, false)  // elapsed=true
            const remainingFormatted = formatTime(test.remainingMs, false, true)  // remaining=true

            // Parse the formatted times back to minutes
            const parseTime = (timeStr) => {
                const [hours, minutes] = timeStr.split(':').map(Number)
                return hours * 60 + minutes
            }

            const totalMinutes = parseTime(totalFormatted)
            const elapsedMinutes = parseTime(elapsedFormatted)
            const remainingMinutes = parseTime(remainingFormatted)

            const sumMinutes = elapsedMinutes + remainingMinutes
            const isCorrect = sumMinutes === totalMinutes

            div.innerHTML = `
                <h3>${test.name}</h3>
                <table>
                    <tr>
                        <th>Value</th>
                        <th>Raw (ms)</th>
                        <th>Raw (minutes)</th>
                        <th>Formatted</th>
                        <th>Parsed Minutes</th>
                    </tr>
                    <tr>
                        <td>Total Duration</td>
                        <td>${test.totalMs}</td>
                        <td>${(test.totalMs / 60000).toFixed(2)}</td>
                        <td>${totalFormatted}</td>
                        <td>${totalMinutes}</td>
                    </tr>
                    <tr>
                        <td>Elapsed (floor)</td>
                        <td>${test.elapsedMs}</td>
                        <td>${(test.elapsedMs / 60000).toFixed(2)}</td>
                        <td>${elapsedFormatted}</td>
                        <td>${elapsedMinutes}</td>
                    </tr>
                    <tr>
                        <td>Remaining (ceil)</td>
                        <td>${test.remainingMs}</td>
                        <td>${(test.remainingMs / 60000).toFixed(2)}</td>
                        <td>${remainingFormatted}</td>
                        <td>${remainingMinutes}</td>
                    </tr>
                </table>
                <p class="${isCorrect ? 'pass' : 'fail'}">
                    Sum: ${elapsedMinutes} + ${remainingMinutes} = ${sumMinutes}
                    ${isCorrect ? '✓ CORRECT' : `✗ WRONG (expected ${totalMinutes})`}
                </p>
            `

            resultsDiv.appendChild(div)
        })
    </script>
</body>
</html>